fixed darkmode background for creation tab, Philip, https://github.com/pmhua, Daniel https://github.com/dreille, William https://github.com/wbrittwage, Miles https://github.com/Miles818

Author: pmhua

app/src/components/bottom/BottomTabs.tsx

@@ -46,7 +46,7 @@ const BottomTabs = (props): JSX.Element => {
   Arrow.renderArrow(state.canvasFocus.childId);
 
   return (
-    <div className={classes.root} style={style}>
+    <div className={`${classes.root} ${classes.rootLight}`} style={style}>
       <Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
         <Tabs
           value={tab}
@@ -111,12 +111,14 @@ const BottomTabs = (props): JSX.Element => {
 const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
-    backgroundColor: '#003366',
     height: '100%',
     color: '#E8E8E8',
     boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
 
   },
+  rootLight: isThemeLight => ({
+    backgroundColor: isThemeLight ? '#003366': 'rgb(33,34,45)'
+  }),
   bottomHeader: {
     flex: 1,
     flexDirection: 'row',

app/src/components/bottom/CreationPanel.tsx

@@ -2,12 +2,14 @@ import React, { useContext } from 'react';
 import ComponentPanel from '../right/ComponentPanel'
 import StatePropsPanel from '../right/StatePropsPanel'
 import HTMLPanel from '../left/HTMLPanel'
+import { styleContext } from '../../containers/AppContainer';
 
 // Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
 // This allows users to create all aspects of this application in one place.
 const CreationPanel = (props): JSX.Element => {
+  const {style} = useContext(styleContext);
   return (
-    <div className="creation-panel" >
+    <div className="creation-panel" style={style}>
       <ComponentPanel isThemeLight={props.isThemeLight}/>
       <HTMLPanel isThemeLight={props.isThemeLight}/>
       <StatePropsPanel isThemeLight={props.isThemeLight}/>

app/src/components/right/ComponentPanel.tsx

@@ -125,7 +125,7 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
   }, []);
 
   return (
-    <div className={classes.panelWrapper}>
+    <div className={`${classes.panelWrapper}`}>
       {/* Add a new component*/}
       <div className={classes.addComponentWrapper}>
           <h4 
@@ -216,7 +216,6 @@ const useStyles = makeStyles({
     flexDirection:'column',
     alignItems:'center',
     flexGrow : 1,
-    backgroundColor: '#F9F9F9',
     color: '#000000',
   },
   addComponentWrapper: {

app/src/public/styles/style.css

@@ -31,6 +31,7 @@ h4 {
   display: flex;
   flex-direction: row;
   height: 100%;
+  background-color: #fff;
 }
 
 .customization-section {
@@ -45,7 +46,6 @@ h4 {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-  background-color: #F9F9F9;
 }
 
 .state-prop-grid {
@@ -56,7 +56,6 @@ h4 {
 
 .HTMLItemCreate {
   flex-grow: 1;
-  background-color: #F9F9F9;
   justify-content: center;
 }
 /*