Merge pull request #12 from brianjshan/theme-changer

🔥👍👊 moved theme changer button & css on html element adding section

Author: diegovazquezny

app/src/components/bottom/BottomPanel.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import { stateContext } from '../../context/context';
 import BottomTabs from './BottomTabs';
-// import BottomTabs from './BottomTabs';
 import { Resizable } from 're-resizable';
 
 // const IPC = require('electron').ipcRenderer;

app/src/components/bottom/BottomTabs.tsx

@@ -71,9 +71,7 @@ const BottomTabs = () => {
         </FormControl>
       </Box>
       {tab === 0 && <CodePreview theme={theme} setTheme={setTheme} />}
-      {tab === 1 && (
-        <Tree theme={theme} setTheme={setTheme} data={components} />
-      )}
+      {tab === 1 && <Tree data={components} />}
     </div>
   );
 };

app/src/components/bottom/CodePreview.tsx

@@ -20,7 +20,7 @@ import { Component } from '../../interfaces/Interfaces';
 //   }
 // }));
 
-const optionColor = '#252526';
+// const optionColor = '#252526';
 
 const CodePreview = ({ theme, setTheme }) => {
   const [state, dispatch] = useContext(stateContext);

app/src/components/left/ComponentPanel.tsx

@@ -162,6 +162,7 @@ const ComponentPanel = (): JSX.Element => {
           {state.components
             .filter(comp => state.rootComponents.includes(comp.id))
             .map(comp => {
+              //console.log('root comp', comp.name)
               return (
                 <ComponentPanelItem
                   isFocus={isFocus(comp.id)}
@@ -179,6 +180,8 @@ const ComponentPanel = (): JSX.Element => {
           {state.components
             .filter(comp => !state.rootComponents.includes(comp.id))
             .map(comp => {
+              //console.log('all root comps', state.rootComponents);
+              //console.log('all reusable comps', state.components);
               return (
                 <ComponentPanelItem
                   isFocus={isFocus(comp.id)}
@@ -211,7 +214,7 @@ const ComponentPanel = (): JSX.Element => {
   );
 };
 
-export const useStyles = makeStyles({
+const useStyles = makeStyles({
   inputField: {
     marginTop: '15px'
   },
@@ -274,7 +277,7 @@ export const useStyles = makeStyles({
   button: {
     fontSize: '1rem',
     height: '40px',
-    marginTop: '10px',
+    maginTop: '10px',
     width: '100%',
     // border: '1px solid rgba(70,131,83)',
     backgroundColor: 'rgba(1,212,109,0.1)'

app/src/components/left/HTMLPanel.tsx

@@ -14,7 +14,8 @@ const HTMLPanel = (): JSX.Element => {
   const [errorMsg, setErrorMsg] = useState('');
   const [errorStatus, setErrorStatus] = useState(false);
 
-  const buttonClasses = "MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-12 MuiButton-textPrimary";
+  const buttonClasses =
+    'MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-12 MuiButton-textPrimary';
 
   const handleTagChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     resetError();
@@ -125,9 +126,11 @@ const HTMLPanel = (): JSX.Element => {
                 value={tag}
                 onChange={handleTagChange}
                 className={classes.input}
+                style={{ marginBottom: '10px' }}
               />
               {errorStatus && <span>{errorMsg}</span>}
             </label>
+            <br></br>
             <label className={classes.inputLabel}>
               Tag Name:
               <input
@@ -140,7 +143,13 @@ const HTMLPanel = (): JSX.Element => {
               />
               {errorStatus && <span>{errorMsg}</span>}
             </label>
-            <input className={buttonClasses} color="primary" type="submit" value="Add Element" style={{marginTop:'15px'}}/>
+            <input
+              className={buttonClasses}
+              color="primary"
+              type="submit"
+              value="Add Element"
+              style={{ marginTop: '15px' }}
+            />
           </form>
         </div>
       </div>
@@ -210,10 +219,11 @@ const useStyles = makeStyles({
     overflowX: 'hidden',
     textOverflow: 'ellipsis',
     border: '1px solid rgba(51,235,145,0.75)',
-    backgroundColor: 'rgba(255,255,255,0.15)'
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    marginLeft: '10px'
   },
   inputLabel: {
-    fontSize: '14px',
+    fontSize: '16px',
     zIndex: 20,
     color: '#fff',
     marginTop: '-10px'

app/src/components/right/ProjectManager.tsx

@@ -21,13 +21,19 @@ import LoginButton from './LoginButton';
 import SaveProjectButton from './SaveProjectButton';
 import DeleteProjects from './DeleteProjects';
 
+// import { useStyles } from '../left/ComponentPanel';
+import { styleContext } from '../../containers/AppContainer';
+
 const ProjectManager = () => {
   // state to keep track of whether a modal should display
   const [modal, setModal] = useState(null);
   const [state, dispatch] = useContext(stateContext);
 
   const classes = useStyles();
 
+  const { style, setStyle } = useContext(styleContext);
+  // console.log('style: ', style);
+
   // Allows users to toggle project between "next.js" and "Classic React"
   // When a user changes the project type, the code of all components is rerendered
   const handleProjectChange = event => {
@@ -156,62 +162,76 @@ const ProjectManager = () => {
   };
 
   return (
-    // <div className={classes.logoutButton}>
-    <div className={classes.projectManagerWrapper}>
-      {state.name && state.isLoggedIn ? (
-        <p style={{ color: 'white' }}>
-          Your current project is <strong>{state.name}</strong>
-        </p>
-      ) : null}
-      {!state.name && state.isLoggedIn ? (
-        <p style={{ color: 'white' }}>
-          Select "Save project as" to create and save a project
-        </p>
-      ) : null}
-
-      <div className={classes.projectTypeWrapper}>
-        <FormControl>
-          <Select
-            variant="outlined"
-            labelId="project-type-label"
-            id="demo-simple-select"
-            className={classes.projectSelector}
-            value={state.projectType}
-            onChange={handleProjectChange}
-          >
-            <MenuItem value={'Next.js'}>Next.js</MenuItem>
-            <MenuItem value={'Classic React'}>Classic React</MenuItem>
-          </Select>
-        </FormControl>
-      </div>
-      {state.isLoggedIn ? <SaveProjectButton /> : ''}
-      {state.isLoggedIn ? <ProjectsFolder /> : ''}
-      {state.isLoggedIn ? <DeleteProjects /> : ''}
-      {/* <div className={classes.btnGroup}> */}
+    <div>
       <Button
-        className={classes.button}
-        variant="outlined"
         color="primary"
-        onClick={showGenerateAppModal}
-        endIcon={<PublishIcon />}
-      >
-        EXPORT PROJECT
-      </Button>
-
-      <Button
+        style={{ marginLeft: '15%' }}
         className={classes.button}
-        variant="outlined"
-        color="primary"
-        onClick={clearWorkspace}
-        endIcon={<WarningIcon />}
+        onClick={() => {
+          !style.backgroundColor
+            ? setStyle({ backgroundColor: '#00001a', color: 'red' })
+            : setStyle({});
+        }}
       >
-        CLEAR WORKSPACE
+        Change Darkness Mode
       </Button>
-      <br />
-      <br />
-      <LoginButton />
-      {/* </div> */}
-      {modal}
+
+      <div className={classes.projectManagerWrapper}>
+        {state.name && state.isLoggedIn ? (
+          <p style={{ color: 'white' }}>
+            Your current project is <strong>{state.name}</strong>
+          </p>
+        ) : null}
+        {!state.name && state.isLoggedIn ? (
+          <p style={{ color: 'white' }}>
+            Select "Save project as" to create and save a project
+          </p>
+        ) : null}
+
+        <div className={classes.projectTypeWrapper}>
+          <FormControl>
+            <Select
+              variant="outlined"
+              labelId="project-type-label"
+              id="demo-simple-select"
+              className={classes.projectSelector}
+              value={state.projectType}
+              onChange={handleProjectChange}
+            >
+              <MenuItem value={'Next.js'}>Next.js</MenuItem>
+              <MenuItem value={'Classic React'}>Classic React</MenuItem>
+            </Select>
+          </FormControl>
+        </div>
+        {state.isLoggedIn ? <SaveProjectButton /> : ''}
+        {state.isLoggedIn ? <ProjectsFolder /> : ''}
+        {state.isLoggedIn ? <DeleteProjects /> : ''}
+        {/* <div className={classes.btnGroup}> */}
+        <Button
+          className={classes.button}
+          variant="outlined"
+          color="primary"
+          onClick={showGenerateAppModal}
+          endIcon={<PublishIcon />}
+        >
+          EXPORT PROJECT
+        </Button>
+
+        <Button
+          className={classes.button}
+          variant="outlined"
+          color="primary"
+          onClick={clearWorkspace}
+          endIcon={<WarningIcon />}
+        >
+          CLEAR WORKSPACE
+        </Button>
+        <br />
+        <br />
+        <LoginButton />
+        {/* </div> */}
+        {modal}
+      </div>
     </div>
   );
 };

app/src/containers/AppContainer.tsx

@@ -1,32 +1,29 @@
-import React, { useState } from 'react';
+import React, { useState, useContext, createContext } from 'react';
 import { MuiThemeProvider } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+// import Button from '@material-ui/core/Button';
 import LeftContainer from './LeftContainer';
 import MainContainer from './MainContainer';
 import RightContainer from './RightContainer';
-import { theme1, theme2 } from '../public/styles/theme';
+import { theme1 } from '../public/styles/theme';
 import { makeStyles } from '@material-ui/core/styles';
-import { useStyles } from '../components/left/ComponentPanel';
+
+export const styleContext = createContext({});
+// console.log('styleContext: ', styleContext);
 
 const AppContainer = () => {
   const [theme, setTheme] = useState(theme1);
-  const classes = useStyles();
-  const [style, setStyle] = useState({});
+  const initialStyle = useContext(styleContext);
+  const [style, setStyle] = useState(initialStyle);
 
   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 style={style} />
-        <MainContainer />
-        <RightContainer />
+        <styleContext.Provider value={{ style, setStyle }}>
+          <LeftContainer style={style} />
+          <MainContainer style={style} />
+          <RightContainer style={style} />
+        </styleContext.Provider>
       </div>
     </MuiThemeProvider>
   );

app/src/containers/LeftContainer.tsx

@@ -8,7 +8,7 @@ import HTMLPanel from '../components/left/HTMLPanel';
 // Left-hand portion of the app, where component options are displayed
 const LeftContainer = ({ style }): JSX.Element => {
   return (
-    <div style={style} className="column left">
+    <div className="column left" style={style}>
       <Grid container direction="row" alignItems="center">
         <ComponentPanel />
         <HTMLPanel />

app/src/containers/MainContainer.tsx

@@ -2,21 +2,15 @@ import React, { Component } from 'react';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
 
-import { Resizable } from "re-resizable";
-
-class MainContainer extends Component {
-  render() {
-    return (
-      <div className="main-container">
-        <div className="main">
-          <CanvasContainer />
-        </div>
-        {/* <Resizable minHeight={'25%'} enable={{ top: true }}> */}
-          <BottomPanel />
-        {/* </Resizable> */}
+const MainContainer = ({ style }) => {
+  return (
+    <div className="main-container" style={style}>
+      <div className="main">
+        <CanvasContainer />
+      </div>
+      <BottomPanel />
     </div>
-    );
-  }
-}
+  );
+};
 
 export default MainContainer;