Merge branch 'leftPanel' of https://github.com/aw2934/ReacType into merge

Author: Linhatran

app/src/components/left/HTMLItem.tsx

@@ -13,6 +13,7 @@ const buttonClasses =
 
 const useStyles = makeStyles({
   HTMLPanelItem: {
+    color: '#186BB4',
     height: '35px',
     width: '90px',
     fontSize: '80%',
@@ -127,10 +128,10 @@ const HTMLItem : React.FC<{
         </div>}
       {id > 11 &&
       <span id="customHTMLElement">
-      <div ref={drag} className={classes.HTMLPanelItem} id="HTMLItem">
+      <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>
       </div>
-        <button id="newElement" onClick={() => deleteAllInstances(id)} >X</button>
+        <button id="newElement" style={{color: isThemeLight ? '#186BB4' : 'white' }} onClick={() => deleteAllInstances(id)} >X</button>
      </span>
       }
       {modal}

app/src/components/left/HTMLPanel.tsx

@@ -174,6 +174,7 @@ const HTMLPanel = (props): JSX.Element => {
       <div className={classes.addComponentWrapper}>
         <div className={classes.inputWrapper}>
           <form onSubmit={handleSubmit} className="customForm">
+
             <h5 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor }>New HTML Tag: </h5>
             <label className={isThemeLight ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
               Tag:

app/src/public/styles/style.css

@@ -151,7 +151,7 @@ LEFT COLUMN
  } 
 
 #HTMLItem:hover {
-  background-color: #a7cced;
+  background-color: #297ac2;
   color: white;
 }
 
@@ -160,13 +160,13 @@ LEFT COLUMN
 }
 
 #submitButton:hover {
-  background-color: #a7cced;
+  background-color: #297ac2;
   color: white;
   border: none;
 }
 
 #addComponentButton:hover {
-  background-color: #a7cced;
+  background-color: #297ac2;
   color: white;
   border: none;
   cursor: pointer;
@@ -206,8 +206,9 @@ LEFT COLUMN
 
 /* deleteAllInstances button in HTMLItem.tsx - 'x' attached to custom HTML element */
 #newElement {
-  color: #186BB4; 
+  /* color: #186BB4; */
   border: none;
+  background: none;
   display: flex;
   align-items: center;
   justify-content: flex-start;