🔥Not fully working light to dark mode button🔥

Author: brianjshan

app/src/components/bottom/BottomTabs.tsx

@@ -3,22 +3,20 @@ import { makeStyles } from '@material-ui/core/styles';
 import { stateContext } from '../../context/context';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
-// import Tree from 'react-d3-tree';
 import CodePreview from './CodePreview';
 import Box from '@material-ui/core/Box';
 import Tree from '../../tree/TreeChart';
 import { emitKeypressEvents } from 'readline';
-import 'ace-builds/src-noconflict/theme-monokai';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import FormControl from '@material-ui/core/FormControl';
 
 const BottomTabs = () => {
   // state that controls which tab the user is on
   const [state, dispatch] = useContext(stateContext);
   const [tab, setTab] = useState(0);
   const classes = useStyles();
   treeWrapper: HTMLDivElement;
-
   const [theme, setTheme] = useState('monokai');
-  // console.log('theme:', theme);
 
   // method changes the
   const handleChange = (event: React.ChangeEvent, value: number) => {
@@ -28,6 +26,10 @@ const BottomTabs = () => {
   const { HTMLTypes } = state;
   const { components } = state;
 
+  const changeTheme = e => {
+    setTheme(e.target.value);
+  };
+
   return (
     <div className={classes.root}>
       <Box display="flex" justifyContent="space-between">
@@ -50,9 +52,28 @@ const BottomTabs = () => {
             label="Component Tree"
           />
         </Tabs>
+        <FormControl>
+          <div className="flex-container">
+            <div className="flex1">Change Theme:</div>
+            <NativeSelect
+              className="flex2"
+              style={{ color: 'white' }}
+              value={theme}
+              onChange={changeTheme}
+            >
+              <option value={'monokai'}>Monokai</option>
+              <option value={'github'}>Github</option>
+              <option value={'solarized_dark'}>Solarized Dark</option>
+              <option value={'terminal'}>Terminal</option>
+              <option value={'solarized_light'}>Solarized Light</option>
+            </NativeSelect>
+          </div>
+        </FormControl>
       </Box>
       {tab === 0 && <CodePreview theme={theme} setTheme={setTheme} />}
-      {tab === 1 && <Tree data={components} />}
+      {tab === 1 && (
+        <Tree theme={theme} setTheme={setTheme} data={components} />
+      )}
     </div>
   );
 };

app/src/components/bottom/CodePreview.tsx

@@ -9,26 +9,22 @@ import 'ace-builds/src-noconflict/theme-solarized_dark';
 import 'ace-builds/src-noconflict/theme-solarized_light';
 import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
-import NativeSelect from '@material-ui/core/NativeSelect';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
 
-const useStyles = makeStyles(theme => ({
-  formControl: {
-    margin: theme.spacing(1),
-    minWidth: 120
-  },
-  selectEmpty: {
-    marginTop: theme.spacing(2)
-  }
-}));
+// const useStyles = makeStyles(theme => ({
+//   formControl: {
+//     margin: theme.spacing(1),
+//     minWidth: 120
+//   },
+//   selectEmpty: {
+//     marginTop: theme.spacing(2)
+//   }
+// }));
 
 const optionColor = '#252526';
 
 const CodePreview = ({ theme, setTheme }) => {
   const [state, dispatch] = useContext(stateContext);
-  // const [theme, setTheme] = useState('monokai');
-  const classes = useStyles();
+  // const classes = useStyles();
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
@@ -45,31 +41,10 @@ const CodePreview = ({ theme, setTheme }) => {
     <div
       style={{
         height: '90%',
-        paddingLeft: '0px',
-        paddingBottom: '8%',
-        // overflow: 'auto',
         maxWidth: '100%',
-        // display: 'flex',
         justifyContent: 'center'
       }}
     >
-      <FormControl className={classes.formControl}>
-        <div className="flex-container">
-          <div className="flex1">Change Theme:</div>
-          <NativeSelect
-            className="flex2"
-            style={{ color: 'white' }}
-            value={theme}
-            onChange={changeTheme}
-          >
-            <option value={'monokai'}>Monokai</option>
-            <option value={'github'}>Github</option>
-            <option value={'solarized_dark'}>Solarized Dark</option>
-            <option value={'terminal'}>Terminal</option>
-            <option value={'solarized_light'}>Solarized Light</option>
-          </NativeSelect>
-        </div>
-      </FormControl>
       <AceEditor
         mode="javascript"
         theme={theme}

app/src/components/left/ComponentPanel.tsx

@@ -87,7 +87,7 @@ const ComponentPanel = (): JSX.Element => {
     let letterNumber = /^[0-9a-zA-Z]+$/;
     if (input.match(letterNumber)) return true;
     return false;
-  }
+  };
 
   const handleNameSubmit = () => {
     let letters = /[a-zA-Z]/;
@@ -214,7 +214,7 @@ const ComponentPanel = (): JSX.Element => {
   );
 };
 
-const useStyles = makeStyles({
+export const useStyles = makeStyles({
   inputField: {
     marginTop: '15px'
   },
@@ -277,7 +277,7 @@ const useStyles = makeStyles({
   button: {
     fontSize: '1rem',
     height: '40px',
-    maginTop: '10px',
+    marginTop: '10px',
     width: '100%',
     // border: '1px solid rgba(70,131,83)',
     backgroundColor: 'rgba(1,212,109,0.1)'

app/src/containers/AppContainer.tsx

@@ -1,16 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { MuiThemeProvider } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import LeftContainer from './LeftContainer';
 import MainContainer from './MainContainer';
 import RightContainer from './RightContainer';
-import theme from '../public/styles/theme';
+import { theme1, theme2 } from '../public/styles/theme';
+import { makeStyles } from '@material-ui/core/styles';
+import { useStyles } from '../components/left/ComponentPanel';
 
 const AppContainer = () => {
+  const [theme, setTheme] = useState(theme1);
+  const classes = useStyles();
+  const [style, setStyle] = useState({});
+
   return (
     // Mui theme provider provides themed styling to all MUI components in app
     <MuiThemeProvider theme={theme}>
+      <Button
+        color="primary"
+        className={classes.button}
+        onClick={() => (!style.backgroundColor ? setStyle({}) : setStyle({}))}
+      >
+        Change to Light/Dark Mode
+      </Button>
       <div className="app-container">
-        <LeftContainer />
+        <LeftContainer style={style} />
         <MainContainer />
         <RightContainer />
       </div>

app/src/containers/LeftContainer.tsx

@@ -5,12 +5,10 @@ import Grid from '@material-ui/core/Grid';
 import ComponentPanel from '../components/left/ComponentPanel';
 import HTMLPanel from '../components/left/HTMLPanel';
 
-
 // Left-hand portion of the app, where component options are displayed
-const LeftContainer = (): JSX.Element => {
-
+const LeftContainer = ({ style }): JSX.Element => {
   return (
-    <div className="column left">
+    <div style={style} className="column left">
       <Grid container direction="row" alignItems="center">
         <ComponentPanel />
         <HTMLPanel />
@@ -19,5 +17,4 @@ const LeftContainer = (): JSX.Element => {
   );
 };
 
-
 export default LeftContainer;

app/src/public/styles/style.css

@@ -276,6 +276,7 @@ RIGHT COLUMN
 .flex-container {
   display: flex;
   flex-direction: row;
+  padding-top: 5px;
 }
 
 .flex1 {

app/src/public/styles/theme.ts

@@ -1,20 +1,29 @@
 import { createMuiTheme } from '@material-ui/core/styles';
-import indigo from '@material-ui/core/colors/indigo';
+// import purple from '@material-ui/core/colors/purple';
+// import indigo from '@material-ui/core/colors/indigo';
+// import orange from '@material-ui/core/colors/orange';
 
-const theme = createMuiTheme({
-  typography: {
-    useNextVariants: true
-  },
+export const theme1 = createMuiTheme({
+  // typography: {
+  //   useNextVariants: true
+  // },
   palette: {
     primary: {
-      light: '#00e676',
-      // main: '#33eb91',
-      main: '#01d46d', // less blinding green
-      dark: '#14a37f',
-      contrastText: '#fff'
+      // light: '#00e676',
+      main: '#01d46d' // less blinding green
+      // dark: '#14a37f',
+      // contrastText: '#fff'
     },
-    secondary: indigo
+    secondary: {
+      main: '#ff5722'
+    }
   }
 });
 
-export default theme;
+export const theme2 = createMuiTheme({
+  // overrides: {
+  //   MuiContainer: {}
+  // }
+});
+
+// export default theme;

app/src/reducers/componentReducer.ts

@@ -415,7 +415,7 @@ const reducer = (state: State, action: Action) => {
       };
       const rootComponent = {
         ...state.components[0],
-        code: '',
+        code: '<div>Drag in a component or HTML element into the canvas!</div>',
         children: [],
         style: {}
       };