finished darkmode

Co-authored-by: Philip Hua <[email protected]>
Co-authored-by: Miles Wright <[email protected]>
Co-authored-by: William Rittwage  <[email protected]>
Co-authored-by: Daniel Reilley <[email protected]>

Author: pmhua

app/src/components/left/HTMLPanel.tsx

@@ -271,10 +271,16 @@ const useStyles = makeStyles({
     borderRadius: '4px',
   },
   lightThemeFontColor: {
-    color: '#155084'
+    color: '#155084',
+    '& .MuiInputBase-root': {
+      color: 'rgba (0, 0, 0, 0.54)',
+    }
   },
   darkThemeFontColor: {
-    color: '#ffffff'
+    color: '#ffffff',
+    '& .MuiInputBase-root': {
+      color: '#fff',
+    }
   },
   errorMessage: {
     fontSize:"11px", 

app/src/components/right/ComponentDrag.tsx

@@ -34,6 +34,7 @@ const ComponentDrag = ({isThemeLight}): JSX.Element => {
                   name={comp.name}
                   id={comp.id}
                   root={true}
+                  isThemeLight={isThemeLight}
                   />
 
               );

app/src/components/right/ComponentPanel.tsx

@@ -261,10 +261,16 @@ const useStyles = makeStyles({
     fontSize: '0.85rem'
   },
   lightThemeFontColor: {
-    color: '#155084'
+    color: '#155084',
+    '& .MuiInputBase-root': {
+      color: 'rgba (0, 0, 0, 0.54)',
+    }
   },
   darkThemeFontColor: {
-    color: '#fff'
+    color: '#fff',
+    '& .MuiInputBase-root': {
+      color: '#fff',
+    }
   }
 });
 

app/src/components/right/ComponentPanelItem.tsx

@@ -41,7 +41,8 @@ const ComponentPanelItem: React.FC<{
   id: number;
   root: boolean;
   isFocus: boolean;
-}> = ({ name, id, root, isFocus }) => {
+  isThemeLight: boolean;
+}> = ({ name, id, root, isFocus, isThemeLight }) => {
   const classes = useStyles();
   const [state, dispatch] = useContext(StateContext);
 
@@ -66,15 +67,15 @@ const ComponentPanelItem: React.FC<{
       payload: { componentId: id, childId: null }
     });
   };
+  console.log('isThemeLight 3:',isThemeLight)
   return (
     <Grid
       item
       ref={drag}
       xs={8}
       style={{
         display: 'grid',
-        color: '#262626',
-        display: 'grid',
+        color: isThemeLight ? 'black' : 'white',
         backgroundColor: 'transparent',
         border: root
           ? '2px dotted #186BB4'
@@ -86,7 +87,7 @@ const ComponentPanelItem: React.FC<{
     >
       {isFocus && <div className={classes.focusMark}></div>}  
       <div className="compPanelItem" onClick={handleClick}>
-        <h3 >{name}</h3>
+        <h3>{name}</h3>
       </div>
     </Grid>
   );
@@ -102,6 +103,12 @@ const useStyles = makeStyles({
     width: '12px',
     height: '12px',
     borderRadius: '25px',
+  },
+  lightTheme: {
+    color: 'rgba (0, 0, 0, 0.54)'
+  },
+  darkTheme: {
+    color: '#fff'
   }
 });
 

app/src/components/right/StatePropsPanel.tsx

@@ -130,15 +130,15 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
             variant="outlined"
             value={inputKey}
             onChange={(e) => setInputKey(e.target.value)}
-            className={isThemeLight ? classes.rootLight : classes.rootDark} 
+            className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`} 
             />
           <TextField
             id="textfield-value"
-            className={isThemeLight ? classes.rootLight : classes.rootDark} 
             label="value:"
             variant="outlined"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
+            className={isThemeLight ? `${classes.rootLight} ${classes.inputTextLight}` : `${classes.rootDark} ${classes.inputTextDark}`} 
             />
           <FormControl required className={isThemeLight ? `${classes.formControl} ${classes.lightThemeFontColor}` : `${classes.formControl} ${classes.darkThemeFontColor}`}>
             <InputLabel 
@@ -149,7 +149,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
             <Select
               labelId="select-required-label"
               id="type-input"
-              className={isThemeLight ? `${classes.selectEmpty} ${classes.rootUnderlineLight}` : `${classes.selectEmpty} ${classes.rootUnderlineDark}`}
+              className={isThemeLight ? `${classes.selectEmpty} ${classes.rootUnderlineLight} ${classes.inputTextLight}` : `${classes.selectEmpty} ${classes.rootUnderlineDark} ${classes.inputTextDark}`}
               value={inputType}
               onChange={(event, index) => setInputType(index.props.value)}
             >
@@ -351,6 +351,16 @@ const useStyles = makeStyles((theme: Theme) =>
           borderBottom: '1px solid rgba(0,0,0,0.54)'
         }
       // }
+    },
+    inputTextDark: {
+      '& .MuiInputBase-input': {
+        color: 'white'
+      }
+    },
+    inputTextLight: {
+      '& .MuiInputBase-input': {
+        color: 'rgba(0,0,0,0.54)'
+      }
     }
   })
 );

app/src/components/right/TableStateProps.tsx

@@ -18,35 +18,30 @@ const getColumns = (props) => {
     {
       field: 'id',
       headerName: 'ID',
-      headerClassName: props.isThemeLight ? 'classes.themeLight' : 'classes.themeDark',
       width: 70,
       editable: false,
     },
     {
       field: 'key',
       headerName: 'Key',
-      headerClassName: props.isThemeLight ? 'classes.themeLight' : 'classes.themeDark',
       width: 90,
       editable: true,
     },
     {
       field: 'value',
       headerName: 'Value',
-      headerClassName: props.isThemeLight ? 'classes.themeLight' : 'classes.themeDark',
       width: 90,
       editable: true,
     },
     {
       field: 'type',
       headerName: 'Type',
-      headerClassName: props.isThemeLight ? 'classes.themeLight' : 'classes.themeDark',
       width: 90,
       editable: false,
     },
     {
       field: 'delete',
       headerName: 'X',
-      headerClassName: props.isThemeLight ? 'classes.themeLight' : 'classes.themeDark',
       width: 70,
       editable: false,
       renderCell: function renderCell(params:any) {
@@ -100,8 +95,7 @@ const TableStateProps = (props) => {
         pageSize={5}
         editRowsModel={editRowsModel}
         onRowClick = {selectHandler}
-        headerClassName: props.isThemeLight ? 'classes.themeLight' : 'classes.themeDark',
-
+        className={props.isThemeLight ? classes.themeLight : classes.themeDark}
       />
     </div>
   );
@@ -110,10 +104,25 @@ const TableStateProps = (props) => {
 
 const useStyles = makeStyles({
   themeLight: {
-    color: 'rbga(0,0,0,054)'
+    color: 'rgba(0,0,0,0.54)',
+    '& .MuiTablePagination-root': {
+      color: 'rbga(0,0,0,0.54)'
+    },
   },
   themeDark: {
-    color: 'white'
+    color: 'white',
+    '& .MuiTablePagination-root': {
+      color: 'white'
+    },
+    '& .MuiIconButton-root': {
+      color: 'white'
+    },
+    '& .MuiSvgIcon-root': {
+      color: 'white'
+    },
+    '& .MuiDataGrid-window': {
+      backgroundColor: 'rgba(0,0,0,0.54)'
+    }
   }
 });