finishing touches to make the context text visible

GarrettHutson · iancdavis · Yoheze · GarrettHutson · commit c09ecb1cfd19 · 2023-03-23T11:51:34.000-04:00
Co-authored-by: Ian Davis &lt;iancdavis@users.noreply.github.com&gt;
Co-authored-by: Yohan Jeon &lt;Yoheze@users.noreply.github.com&gt;
diff --git a/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx b/app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx
@@ -2,8 +2,9 @@ import React, { Fragment, useState, useEffect, useContext } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
-import StateContext from '../../../../context/context';
+
 import { useSelector } from 'react-redux';
+import { Store } from 'redux';
 
 const filter = createFilterOptions();
 
@@ -15,8 +16,11 @@ 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 color = isDarkMode ? "white":"black"
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setComponentInput({
@@ -66,11 +70,11 @@ const ComponentDropDown = ({
     return option.name;
   };
 
-  const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const renderOption = (props, option) => <li  style={{ color: "black", border: "1px solid black" }}  {...props}>{option.name}</li>;
 
   return (
     <Fragment>
-      <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
+      <Box sx={{ display: 'flex', gap: 2, mb: 4}}>
         <Autocomplete
           id="autoCompleteContextField"
           value={componentInput}
@@ -82,10 +86,13 @@ const ComponentDropDown = ({
           options={state.components || []}
           getOptionLabel={getOptionLabel}
           renderOption={renderOption}
-          sx={{ width: 425 }}
+          sx={{ width: 425, border: "1px solid black"  }}
           freeSolo
           renderInput={params => (
-            <TextField {...params} label="Select Component" helperText='Select a component for your selected context to consume' />
+            <TextField {...params} InputProps={{
+              ...params.InputProps,
+              style: { color: color },
+            }}   label="Select Component" helperText='Select a component for your selected context to consume' />
           )}
         />
       </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();
 
@@ -15,6 +16,8 @@ const ContextDropDown = ({
 }) => {
   const { allContext } = contextStore;
 
+  const isDarkMode = useSelector(store => store.darkMode.isDarkMode)
+const color = isDarkMode ? "white":"black"
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setContextInput({
@@ -64,11 +67,11 @@ const ContextDropDown = ({
     return option.name;
   };
 
-  const renderOption = (props, option) => <li {...props}>{option.name}</li>;
+  const renderOption = (props, option) => <li style={{ color:"black", border: "1px solid black" }} {...props}>{option.name}</li>;
 
   return (
     <Fragment>
-      <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
+      <Box sx={{ display: 'flex', gap: 2, mb: 4, border:"1px black solid" }}>
         <Autocomplete
           id="autoCompleteContextField"
           value={contextInput}
@@ -83,7 +86,12 @@ const ContextDropDown = ({
           sx={{ width: 425 }}
           freeSolo
           renderInput={params => (
-            <TextField {...params} label="Select Context" helperText='Select a context you would like to assign'/>
+            <TextField {...params}
+            InputProps={{
+              ...params.InputProps,
+              style: { color },
+            }}  
+            label="Select Context" helperText='Select a context you would like to assign'/>
           )}
         />
       </Box>
diff --git a/app/src/components/ContextAPIManager/ContextManager.tsx b/app/src/components/ContextAPIManager/ContextManager.tsx
@@ -34,17 +34,18 @@ const ContextManager = (props): JSX.Element => {
   };
 
   const background_Color = isDarkMode ? '#21262b' : 'white'
+  const color = isDarkMode ? 'white' : 'black'
 
   return (
     <React.Fragment>
       <div className={classes.contextContainer} style={style.style}>
         <Box sx={{ width: '100%', typography: 'body1' }}>
-          <TabContext value={value}>
+          <TabContext value={value} sx={{color:color}}>
             <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" />
+              <TabList onChange={handleChange} centered={true} sx={{color:color}}>
+                <Tab   style={ { color: color }}label="Create/Edit" value="1" />
+                <Tab style={{ color: color }} label="Assign" value="2" />
+                <Tab style={{ color: color }} label="Display" value="3" />
               </TabList>
             </Box>
             <TabPanel value="1">
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx
@@ -19,7 +19,11 @@ const AddContextForm = ({
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
   // const [state, dispatch] = useContext(StateContext);
-  const state = useSelector(store => store.appState)
+  const { state, isDarkMode } = useSelector(store => ({
+    isDarkMode: store.darkMode.isDarkMode,
+    state: store.appState
+  }))
+const color = isDarkMode ? 'white' : 'black'
 
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;
@@ -75,11 +79,11 @@ const AddContextForm = ({
     return option.name;
   };
 
-  const renderOption = (props, option) => <li style={{color:'black'}} {...props}>{option.name}</li>;
+  const renderOption = (props, option) => <li style={{ color: 'black' }} {...props}>{option.name}</li>;
 
   return (
     <Fragment>
-      <Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
+      <Typography style={{ color: color }} variant="h6" gutterBottom={true}>
         Context Input
       </Typography>
       <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
@@ -94,10 +98,15 @@ const AddContextForm = ({
           options={allContext || []}
           getOptionLabel={getOptionLabel}
           renderOption={renderOption}
-          sx={{ width: 425,  border:'1px solid black' }}
+          sx={{ width: 425, border: '1px solid black' }}
           freeSolo
           renderInput={params => (
-            <TextField {...params} label="Create/Select Context"  />
+            <TextField {...params}  InputProps={{
+              ...params.InputProps,
+              style: { color: color },
+            }}  
+            variant='filled'
+            label="Create/Select Context" />
           )}
         />
         <Button
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx
@@ -3,16 +3,18 @@ import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
+import {useSelector} from 'react-redux'
 
 const AddDataForm = ({ handleClickInputData, contextInput }) => {
   //const [contextInput, setContextInput] = React.useState(null);
   const defaultInputData = {inputKey: '', inputValue: ''};
   const [dataContext, setDataContext] = React.useState(defaultInputData);
-
+const {isDarkMode} = useSelector(store=> store.darkMode.isDarkMode)
   const saveData = () => {
     setDataContext(defaultInputData);
     handleClickInputData(contextInput, dataContext)
   }
+const color = isDarkMode ? 'white' : 'black';
 
   const handleChange = e => {
     setDataContext(prevDataContext => {
@@ -25,17 +27,19 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
 
   return (
     <Fragment>
-      <Typography style={{ color: 'black' }} variant="h6" gutterBottom={true}>
+      <Typography style={{ color: color }} variant="h6" gutterBottom={true}>
         Add context data 
       </Typography>
-      <Box sx={{ display: 'flex', gap: 2 }}>
+      <Box sx={{ display: 'flex', gap: 2, color:'black' }}>
         <TextField
           id="outlined-basic"
           label="Key"
           variant="outlined"
           value={dataContext.inputKey}
           name="inputKey"
           onChange={e => handleChange(e)}
+          InputProps={{style: { color: color }}}  
+          style={{border:'1px solid black'}}
         />
         <TextField
           id="outlined-basic"
@@ -44,6 +48,8 @@ const AddDataForm = ({ handleClickInputData, contextInput }) => {
           value={dataContext.inputValue}
           name="inputValue"
           onChange={e => handleChange(e)}
+          style={{border:'1px solid black'}}
+          InputProps={{ style: { color: color }}}  
         />
         <Button
           variant="contained"
