removed dark mode (no longer in use)

Author: sonyahu15

app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx

@@ -12,15 +12,9 @@ const ComponentDropDown = ({
   componentInput,
   setComponentInput
 }) => {
-  const {
-    state
-    //, isDarkMode
-  } = useSelector((store: RootState) => ({
+  const { state } = useSelector((store: RootState) => ({
     state: store.appState
-    //isDarkMode: store.darkMode.isDarkMode
   }));
-  //const color = isDarkMode ? 'white' : 'black';
-  const color = 'white';
 
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {

app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx

@@ -15,12 +15,6 @@ const ContextDropDown = ({
 }) => {
   const { allContext } = contextStore;
 
-  // const isDarkMode = useSelector(
-  //   (store: RootState) => store.darkMode.isDarkMode
-  // );
-  //const color = isDarkMode ? 'white' : 'black';
-  const color = 'white';
-
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {
       setContextInput({

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -20,11 +20,7 @@ const useStyles = makeStyles({
 });
 
 const ContextManager = (props): JSX.Element => {
-  const {
-    //isDarkMode,
-    style
-  } = useSelector((store: RootState) => ({
-    // isDarkMode: store.darkMode.isDarkMode,
+  const { style } = useSelector((store: RootState) => ({
     style: store.styleSlice
   }));
   const classes = useStyles();
@@ -34,8 +30,6 @@ const ContextManager = (props): JSX.Element => {
     setValue(newValue);
   };
 
-  // const background_Color = isDarkMode ? '#21262b' : 'white'
-  // const color = isDarkMode ? 'white' : 'white'
   const color = 'white';
 
   return (

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -25,14 +25,10 @@ const AddContextForm = ({
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
   const [open, setOpen] = useState(false);
-  const {
-    state
-    // isDarkMode
-  } = useSelector((store: RootState) => ({
-    //isDarkMode: store.darkMode.isDarkMode,
+  const { state } = useSelector((store: RootState) => ({
     state: store.appState
   }));
-  //const color = isDarkMode ? 'black' : 'white';
+
   const color = 'white';
 
   //handler for submitting new context for creation

app/src/components/ContextAPIManager/CreateTab/components/AddDataForm.tsx

@@ -10,7 +10,7 @@ const AddDataForm = ({ handleClickInputData, currentContext }) => {
   //const [contextInput, setContextInput] = React.useState(null);
   const defaultInputData = { inputKey: '', inputValue: '' };
   const [dataContext, setDataContext] = React.useState(defaultInputData);
-  // const { isDarkMode } = useSelector((store: RootState) => store.darkMode);
+
   const saveData = () => {
     setDataContext(defaultInputData);
     if (dataContext.inputKey === '' || dataContext.inputValue === '') {
@@ -19,7 +19,6 @@ const AddDataForm = ({ handleClickInputData, currentContext }) => {
     }
     handleClickInputData(currentContext, dataContext);
   };
-  // const color = isDarkMode ? 'black' : 'white';
   const color = 'white';
 
   const handleChange = (e) => {

app/src/components/StateManagement/StateManagement.tsx

@@ -21,9 +21,6 @@ const useStyles = makeStyles({
 
 const StateManager = (props): JSX.Element => {
   const state = useSelector((store: RootState) => store.appState);
-  // const isDarkMode = useSelector(
-  //   (state: RootState) => state.darkMode.isDarkMode
-  // );
 
   const { components } = state;
   const classes = useStyles();
@@ -36,8 +33,6 @@ const StateManager = (props): JSX.Element => {
   // add hook here to access which component has been clicked
   // then this will re-render the dataTable
 
-  //const background_Color = isDarkMode ? '#21262b' : '#191919';
-  //const color = isDarkMode ? 'white' : 'black';
   const background_Color = '#21262b';
   const color = 'white';
 

app/src/components/bottom/BottomTabs.tsx

@@ -25,7 +25,6 @@ const BottomTabs = (props): JSX.Element => {
     state: store.appState,
     contextParam: store.contextSlice,
     style: store.styleSlice
-    // isDarkMode: store.darkMode.isDarkMode
   }));
   const [tab, setTab] = useState(0);
   const classes = useStyles();

app/src/components/left/ComponentDrag.tsx

@@ -8,9 +8,7 @@ import { useSelector } from 'react-redux';
 const ComponentDrag = ({ isThemeLight }): JSX.Element => {
   const classes = useStyles();
   const state = useSelector((store: RootState) => store.appState);
-  // const isDarkMode = useSelector(
-  //   (store: RootState) => store.darkMode.isDarkMode
-  // );
+
   const isFocus = (targetId: Number) => {
     return state.canvasFocus.componentId === targetId ? true : false;
   };
@@ -21,14 +19,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
       {/* Font size for 'index' in root components in .compPanelItem h3 style.css */}
       <div className={classes.panelWrapperList}>
         {/* Heading just below ADD button */}
-        <h4
-          className={
-            // !isDarkMode
-            //   ? classes.lightThemeFontColor
-            //   : classes.darkThemeFontColor
-            classes.darkThemeFontColor
-          }
-        >
+        <h4 className={classes.darkThemeFontColor}>
           {state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
             ? 'Pages'
             : 'Root Components'}

app/src/components/left/ComponentsContainer.tsx

@@ -8,26 +8,15 @@ import { useSelector } from 'react-redux';
 const ComponentsContainer = () => {
   const classes = useStyles();
   const state = useSelector((store: RootState) => store.appState);
-  // const isDarkMode = useSelector(
-  //   (store: RootState) => store.darkMode.isDarkMode
-  // );
+
   const isFocus = (targetId: Number) => {
     return state.canvasFocus.componentId === targetId ? true : false;
   };
   return (
     <div>
       <div className={classes.panelWrapper}>
         <div className={classes.panelWrapperList}>
-          <h4
-            className={
-              // !isDarkMode
-              //   ? classes.lightThemeFontColor
-              //   : classes.darkThemeFontColor
-              classes.darkThemeFontColor
-            }
-          >
-            Reusable Components
-          </h4>
+          <h4 className={classes.darkThemeFontColor}>Reusable Components</h4>
           <Grid container direction="column" alignContent={'center'}>
             {state.components
               .filter((comp) => !state.rootComponents.includes(comp.id))

app/src/components/left/DragDropPanel.tsx

@@ -20,9 +20,6 @@ Hook state:
 */
 // Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
 const DragDropPanel = (props): JSX.Element => {
-  // const isDarkMode = useSelector(
-  //   (store: RootState) => store.darkMode.isDarkMode
-  // );
   const dispatch = useDispatch();
   const { state, contextParam } = useSelector((store: RootState) => ({
     state: store.appState,
@@ -38,7 +35,6 @@ const DragDropPanel = (props): JSX.Element => {
   return (
     <div className={'HTMLItems'}>
       <div id="HTMLItemsTopHalf">
-        {/* { color: !isDarkMode ? '#C6C6C6' : '#fff' } */}
         <h3 style={{ color: '#C6C6C6' }}>HTML Elements</h3>
         <Grid
           container
@@ -67,7 +63,6 @@ const DragDropPanel = (props): JSX.Element => {
           })}
         </Grid>
         {state.projectType === 'Classic React' ? (
-          //!isDarkMode ? '#C6C6C6' : '#fff'
           <h3 style={{ color: '#C6C6C6' }}>React Router</h3>
         ) : null}
         <Grid
@@ -99,7 +94,6 @@ const DragDropPanel = (props): JSX.Element => {
         </Grid>
 
         {state.projectType === 'Next.js' ? (
-          //  color: !isDarkMode ? '#C6C6C6' : '#fff'
           <h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
         ) : null}
         {htmlTypesToRender.map((option) => {