fixed a few more visual bugs where text is white in light mode

Author: calvincao

app/src/components/bottom/BottomTabs.tsx

@@ -43,7 +43,7 @@ const BottomTabs = (props): JSX.Element => {
   Arrow.renderArrow(state.canvasFocus.childId);
 
   return (
-    <div className={`${classes.root} ${classes.rootLight}`} style={style}>
+    <div className={`${classes.root} ${classes.rootLight}`} style={{ backgroundColor : '#003366' }}>
       <Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
         <Tabs
           value={tab}

app/src/components/login/SignIn.tsx

@@ -295,12 +295,12 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           </Button>
           <Grid container>
             <Grid item xs>
-              <RouteLink to={`/signup`} className="nav_link">
+              <RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/signup`} className="nav_link">
                 Forgot password?
               </RouteLink>
             </Grid>
             <Grid item>
-              <RouteLink to={`/signup`} className="nav_link">
+              <RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/signup`} className="nav_link">
                 Don't have an account? Sign Up
               </RouteLink>
             </Grid>

app/src/components/login/SignUp.tsx

@@ -312,7 +312,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
             </Button>
             <Grid container justify="flex-end">
               <Grid item>
-                <RouteLink to={`/login`} className="nav_link">
+                <RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/login`} className="nav_link">
                   Already have an account? Sign In
                 </RouteLink>
               </Grid>

app/src/components/main/AddLink.tsx

@@ -37,18 +37,20 @@ function AddLink({ id, onClickHandler }) {
   }
 
   const pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
-  const dropDown = pagesItems.map(comp => <MenuItem value={comp.name}>{comp.name}</MenuItem>);
+  const dropDown = pagesItems.map(comp => <MenuItem style={{ color: 'black' }} value={comp.name}>{comp.name}</MenuItem>);
 
   return (
     <div style={{padding: '1px', float: 'right', display: 'flex', border: '2px solid red', alignSelf: 'center'}}>
       <FormControl size='medium' style={{display: 'flex'}}>
-          <InputLabel style={ { color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
+          {/* <InputLabel style={ { color: isThemeLight? '#fff' : '#000'} }>Pages</InputLabel> */}
           <Select label='pages'
             variant="outlined"
             onMouseDown={onClickHandler}
             onChange={handlePageSelect}
             id="page-select"
-            style={ isThemeLight? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'} : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
+            style={ isThemeLight
+                    ? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'}
+                    : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
             >
             {dropDown}
           </Select>

app/src/public/styles/theme.ts

@@ -5,10 +5,10 @@ export const theme1 = createTheme({
   palette: {
     type: 'dark',
     primary: {
-      main: '#3f51b5',
+      main: '#003366', // navy blue
     },
     secondary: {
-      main: '#17a2b8',
+      main: '#0099e6', // light blue
     },
     background: {
       paper: '#ffffff',
@@ -20,10 +20,10 @@ export const theme2 = createTheme({
   palette: {
     type: 'light',
     primary: {
-      main: '#3f51b5',
+      main: '#003366',
     },
     secondary: {
-      main: '#17a2b8',
+      main: '#0099e6',
     },
     background: {
       paper: '#ffffff',