Worked on making dark mode word correctly on context manager tab

mdunnmon · mdunnmon · commit a0ceb479f80d · 2023-03-16T20:22:37.000-07:00
diff --git a/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx b/app/src/components/ContextAPIManager/AssignTab/AssignContainer.tsx
@@ -9,8 +9,8 @@ import { Button } from '@mui/material';
 import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 // import * as actions from '../../../redux/actions/actions';
 import StateContext from '../../../context/context';
-import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer'
-import { useSelector, useDispatch, useStore, } from 'react-redux';
+import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
+import { useSelector, useDispatch, useStore } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 
 const AssignContainer = () => {
@@ -26,15 +26,15 @@ const AssignContainer = () => {
   // const [stateContext, dispatchContext] = useContext(StateContext);
   const { state, contextParam } = useSelector((store) => ({
     state: store.appState,
-    contextParam: store.contextSlice,
+    contextParam: store.contextSlice
   }));
 
   //fetching data from redux store
   // useEffect(() => {
   //   setState(allContext);
   // }, [allContext]);
 
-  const renderTable = targetContext => {
+  const renderTable = (targetContext) => {
     if (targetContext === null || !targetContext.values) {
       setTableState(defaultTableData);
     } else {
@@ -43,7 +43,7 @@ const AssignContainer = () => {
   };
 
   //construct data for table displaying component table
-  const renderComponentTable = targetComponent => {
+  const renderComponentTable = (targetComponent) => {
     //target Component is main
 
     const listOfContexts = [];
@@ -52,7 +52,7 @@ const AssignContainer = () => {
       targetComponent !== null &&
       targetComponent.name
     ) {
-      contextParam.allContext.forEach(context => {
+      contextParam.allContext.forEach((context) => {
         if (context.components.includes(targetComponent.name)) {
           listOfContexts.push(context.name);
         }
@@ -77,7 +77,7 @@ const AssignContainer = () => {
       })
     );
     //trigger generateCode(), update code preview tab
-    dispatch(deleteElement({id:'FAKE_ID', contextParam: contextParam}))
+    dispatch(deleteElement({ id: 'FAKE_ID', contextParam: contextParam }));
 
     // dispatchContext({
     //   type: 'DELETE ELEMENT',
diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx
@@ -15,7 +15,10 @@ const ComponentDropDown = ({
 }) => {
   const { allContext } = contextStore;
   // const [componentList] = useContext(StateContext);
-  const state = useSelector(store => store.appState)
+  const { state, isDarkMode } = useSelector((store) => ({
+    state: store.appState,
+    isDarkMode: store.darkMode.isDarkMode
+  }));
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -40,7 +43,7 @@ const ComponentDropDown = ({
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some(option => inputValue === option.name);
+    const isExisting = options.some((option) => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -53,7 +56,7 @@ const ComponentDropDown = ({
     return filtered;
   };
 
-  const getOptionLabel = option => {
+  const getOptionLabel = (option) => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -67,6 +70,7 @@ const ComponentDropDown = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
@@ -84,8 +88,15 @@ const ComponentDropDown = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={params => (
-            <TextField {...params} label="Select Component" helperText='Select a component for your selected context to consume' />
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Select Component"
+              helperText="Select a component for your selected context to consume"
+              InputLabelProps={{ style: { color } }}
+              FormHelperTextProps={{ style: { color } }}
+              InputProps={{ style: { color } }}
+            />
           )}
         />
       </Box>
diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx
@@ -4,6 +4,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
+import { useSelector } from 'react-redux';
 
 const filter = createFilterOptions();
 
@@ -14,6 +15,7 @@ const ContextDropDown = ({
   setContextInput
 }) => {
   const { allContext } = contextStore;
+  const isDarkMode = useSelector((store) => store.darkMode.isDarkMode);
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
@@ -38,7 +40,7 @@ const ContextDropDown = ({
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some(option => inputValue === option.name);
+    const isExisting = options.some((option) => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -51,7 +53,7 @@ const ContextDropDown = ({
     return filtered;
   };
 
-  const getOptionLabel = option => {
+  const getOptionLabel = (option) => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -65,6 +67,7 @@ const ContextDropDown = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
@@ -82,8 +85,15 @@ const ContextDropDown = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={params => (
-            <TextField {...params} label="Select Context" helperText='Select a context you would like to assign'/>
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Select Context"
+              helperText="Select a context you would like to assign"
+              InputLabelProps={{ style: { color } }}
+              FormHelperTextProps={{ style: { color } }}
+              InputProps={{ style: { color } }}
+            />
           )}
         />
       </Box>
diff --git a/app/src/components/ContextAPIManager/ContextManager.tsx b/app/src/components/ContextAPIManager/ContextManager.tsx
@@ -9,8 +9,7 @@ import TabPanel from '@mui/lab/TabPanel';
 import CreateContainer from './CreateTab/CreateContainer';
 import AssignContainer from './AssignTab/AssignContainer';
 import DisplayContainer from './DisplayTab/DisplayContainer';
-import { useSelector } from 'react-redux'
-
+import { useSelector } from 'react-redux';
 
 const useStyles = makeStyles({
   contextContainer: {
@@ -20,26 +19,27 @@ const useStyles = makeStyles({
 });
 
 const ContextManager = (props): JSX.Element => {
-  const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
+  const isDarkMode = useSelector((state) => state.darkMode.isDarkMode);
   const classes = useStyles();
   const [value, setValue] = React.useState<string>('1');
-  
+
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue);
   };
 
-  const background_Color = isDarkMode ? '#21262b' : 'white'
+  const backgroundColor = isDarkMode ? '#21262b' : 'white';
+  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <React.Fragment>
-      <div className={classes.contextContainer} style={{backgroundColor: background_Color}}>
+      <div className={classes.contextContainer} style={{ backgroundColor }}>
         <Box sx={{ width: '100%', typography: 'body1' }}>
           <TabContext value={value}>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
               <TabList onChange={handleChange} centered={true}>
-                <Tab label="Create/Edit" value="1" />
-                <Tab label="Assign" value="2" />
-                <Tab label="Display" value="3" />
+                <Tab label="Create/Edit" value="1" style={{ color }} />
+                <Tab label="Assign" value="2" style={{ color }} />
+                <Tab label="Display" value="3" style={{ color }} />
               </TabList>
             </Box>
             <TabPanel value="1">
diff --git a/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx b/app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx
@@ -8,13 +8,19 @@ import AddContextForm from './components/AddContextForm';
 // import * as actions from '../../../redux/actions/actions';
 import { Typography } from '@mui/material';
 import StateContext from '../../../context/context';
-import { addContext, deleteContext } from '../../../redux/reducers/slice/contextReducer';
+import {
+  addContext,
+  deleteContext
+} from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 
 const CreateContainer = () => {
   const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
-  const state = useSelector(store => store.contextSlice);
+  const { state, isDarkMode } = useSelector((store) => ({
+    state: store.appState,
+    isDarkMode: store.darkMode.isDarkMode
+  }));
 
   const store = useStore();
   // const [state, setState] = useState([]);
@@ -31,8 +37,6 @@ const CreateContainer = () => {
 
   // }, [allContext]);
 
-
-
   //update data store when user adds a new context
   const handleClickSelectContext = () => {
     //prevent user from adding duplicate context
@@ -49,9 +53,7 @@ const CreateContainer = () => {
 
   //update data store when user add new key-value pair to context
   const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
-    dispatch(
-      addContext({ name, inputKey, inputValue })
-    );
+    dispatch(addContext({ name, inputKey, inputValue }));
     // setState(allContext);
   };
 
@@ -62,15 +64,15 @@ const CreateContainer = () => {
     // setState(allContext);
     setTableState(defaultTableData);
 
-    dispatch(deleteElement({id:'FAKE_ID', contextParam: state}))
+    dispatch(deleteElement({ id: 'FAKE_ID', contextParam: state }));
     // dispatchContext({
     //   type: 'DELETE ELEMENT',
     //   payload: 'FAKE_ID'
     // });
   };
 
   //re-render data table when there's new changes
-  const renderTable = targetContext => {
+  const renderTable = (targetContext) => {
     if (
       targetContext === null ||
       targetContext === undefined ||
@@ -82,6 +84,9 @@ const CreateContainer = () => {
       setTableState(targetContext.values);
     }
   };
+
+  const color = isDarkMode ? 'lightgray' : 'black';
+
   return (
     <>
       <Grid container display="flex" justifyContent="space-evenly">
@@ -116,11 +121,7 @@ const CreateContainer = () => {
         </Grid>
         <Divider orientation="vertical" variant="middle" flexItem />
         <Grid item>
-          <Typography
-            style={{ color: 'black' }}
-            variant="h6"
-            gutterBottom={true}
-          >
+          <Typography style={{ color }} variant="h6" gutterBottom={true}>
             Context Data Table
           </Typography>
           <DataTable target={tableState} contextInput={contextInput} />
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx
@@ -20,7 +20,8 @@ const AddContextForm = ({
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
   // const [state, dispatch] = useContext(StateContext);
-  const state = useSelector(store => store.appState)
+  // const state = useSelector(store => store.appState)
+  const isDarkMode = useSelector((state) => state.darkMode.isDarkMode);
 
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;
@@ -50,7 +51,7 @@ const AddContextForm = ({
     const filtered = filter(options, params);
     const { inputValue } = params;
     // Suggest the creation of a new contextInput
-    const isExisting = options.some(option => inputValue === option.name);
+    const isExisting = options.some((option) => inputValue === option.name);
     if (inputValue !== '' && !isExisting) {
       filtered.push({
         inputValue,
@@ -63,7 +64,7 @@ const AddContextForm = ({
     return filtered;
   };
 
-  const getOptionLabel = option => {
+  const getOptionLabel = (option) => {
     // Value selected with enter, right from the input
     if (typeof option === 'string') {
       return option;
@@ -77,13 +78,14 @@ const AddContextForm = ({
   };
 
   const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const color = isDarkMode ? 'lightgray' : 'black';
 
   return (
     <Fragment>
-      <Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
+      <Typography style={{ color }} variant="h6" gutterBottom={true}>
         Context Input
       </Typography>
-      <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
+      <Box sx={{ display: 'flex', gap: 2, mb: 4, color }}>
         <Autocomplete
           id="autoCompleteContextField"
           value={contextInput}
@@ -97,8 +99,14 @@ const AddContextForm = ({
           renderOption={renderOption}
           sx={{ width: 425 }}
           freeSolo
-          renderInput={params => (
-            <TextField {...params} label="Create/Select Context" />
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              variant="outlined"
+              label="Create/Select Context"
+              InputLabelProps={{ style: { color } }}
+              InputProps={{ style: { color } }}
+            />
           )}
         />
         <Button
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx
