working on grid styling, 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/right/StatePropsPanel.tsx

@@ -123,7 +123,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
     <div className={'state-panel'}>
       <div>
         <FormControl>
-          <h4>Create New State</h4>
+          <h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>Create New State</h4>
           <TextField
             id="textfield-key"
             label="key:"
@@ -140,12 +140,16 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
             />
-          <FormControl required className={classes.formControl}>
-            <InputLabel id="select-required-label">Type</InputLabel>
+          <FormControl required className={isThemeLight ? `${classes.formControl} ${classes.lightThemeFontColor}` : `${classes.formControl} ${classes.darkThemeFontColor}`}>
+            <InputLabel 
+              id="select-required-label"
+              className={isThemeLight ? classes.greyThemeFontColor : classes.darkThemeFontColor}>
+                Type
+            </InputLabel>
             <Select
               labelId="select-required-label"
               id="type-input"
-              className={classes.selectEmpty}
+              className={isThemeLight ? `${classes.selectEmpty} ${classes.rootUnderlineLight}` : `${classes.selectEmpty} ${classes.rootUnderlineDark}`}
               value={inputType}
               onChange={(event, index) => setInputType(index.props.value)}
             >
@@ -171,7 +175,10 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
                 Any
               </MenuItem>
             </Select>
-            <FormHelperText>Required</FormHelperText>
+            <FormHelperText
+              className={isThemeLight ? classes.greyThemeFontColor : classes.darkThemeFontColor}>
+                Required
+            </FormHelperText>
           </FormControl>
           <br></br>
           <MyButton 
@@ -186,8 +193,10 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
       </div>
       <br></br>
       <div>
-        <h4>Current State Name: {state.components[state.canvasFocus.componentId - 1].name}</h4>
-        <TableStateProps selectHandler={handlerRowSelect} deleteHandler={handlerRowDelete} />
+        <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
+          Current State Name: {state.components[state.canvasFocus.componentId - 1].name}
+        </h4>
+        <TableStateProps selectHandler={handlerRowSelect} deleteHandler={handlerRowDelete} isThemeLight={isThemeLight} />
       </div>
     </div>
   );
@@ -293,6 +302,9 @@ const useStyles = makeStyles((theme: Theme) =>
     darkThemeFontColor: {
       color: "#fff",
     },
+    greyThemeFontColor: {
+      color: 'rgba(0,0,0,0.54)',
+    },
     formControl: {
       margin: theme.spacing(1),
       minWidth: 120,
@@ -315,6 +327,30 @@ const useStyles = makeStyles((theme: Theme) =>
       '& .MuiOutlinedInput-notchedOutline': {
         borderColor: '#fff'
       }
+    },
+    underlineDark: {
+        borderBottom: '1px solid white'
+      
+    },
+    rootUnderlineDark: {
+      '& .MuiSelect-icon': {
+        color: '#fff',
+      },
+      // '& .MuiInput-underline': {
+        '&::before': {
+          borderBottom: '1px solid #fff'
+        }
+      // }
+    },
+        rootUnderlineLight: {
+      '& .MuiSelect-icon': {
+        color: 'rgba(0,0,0,0.54)',
+      },
+      // '& .MuiInput-underline': {
+        '&::before': {
+          borderBottom: '1px solid rgba(0,0,0,0.54)'
+        }
+      // }
     }
   })
 );

app/src/components/right/TableStateProps.tsx

@@ -7,39 +7,46 @@ import {
 import Button from '@material-ui/core/Button';
 import ClearIcon from '@material-ui/icons/Clear';
 import StateContext from '../../context/context';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { StatePropsPanelProps } from '../../interfaces/Interfaces';
 
 const getColumns = (props) => {
   const { deleteHandler } : StatePropsPanelProps = props;
+  console.log('isThemeLight: ',props.isThemeLight)
   return [
     {
       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) {
@@ -50,9 +57,9 @@ const getColumns = (props) => {
         };
         return ( 
           <Button style={{width:`${3}px`}}
-            onClick={() => {
-              deleteHandler(getIdRow());
-            }}>
+          onClick={() => {
+            deleteHandler(getIdRow());
+          }}>
             <ClearIcon style={{width:`${15}px`}}/>
           </Button>
         );
@@ -62,14 +69,20 @@ const getColumns = (props) => {
 };
 
 const TableStateProps = (props) => {
+  const classes = useStyles();
   const [state] = useContext(StateContext);
   const [editRowsModel] = useState <GridEditRowsModel> ({});
   const [gridColumns, setGridColumns] = useState([]);
+  
 
+  useEffect(() => {
+  console.log('isThemeLight: ',props.isThemeLight)
+    setGridColumns(getColumns(props));
+  }, [props.isThemeLight])
   // get currentComponent by using currently focused component's id
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
-
+  
   const rows = currentComponent.stateProps.slice();
 
   const { selectHandler } : StatePropsPanelProps = props;
@@ -87,9 +100,21 @@ const TableStateProps = (props) => {
         pageSize={5}
         editRowsModel={editRowsModel}
         onRowClick = {selectHandler}
+        headerClassName: props.isThemeLight ? 'classes.themeLight' : 'classes.themeDark',
+
       />
     </div>
   );
 };
 
+
+const useStyles = makeStyles({
+  themeLight: {
+    color: 'rbga(0,0,0,054)'
+  },
+  themeDark: {
+    color: 'white'
+  }
+});
+
 export default TableStateProps;

app/src/containers/CustomizationPanel.tsx

@@ -735,6 +735,15 @@ const useStyles = makeStyles({
       border: isThemeLight ? '1px solid #808080' : '1px solid #ECECEA'
     }
   }),
+  // buttonRow: {
+  //   textAlign: 'center',
+  //   marginTop: '25px',
+  //   '& .MuiButton-textSecondary': {
+  //     color: '#808080', // color for delete page
+  //     border: '1px solid #808080' 
+  //   }
+  // },
+
   button: {
     fontSize: '1rem',
     paddingLeft: '20px',