Merge pull request #13 from oslabs-beta/Hernan/CSS

Hernan/css

Author: liamroh

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -15,8 +15,8 @@ import { RootState } from '../../redux/store';
 
 const useStyles = makeStyles({
   contextContainer: {
-    backgroundColor: 'white',
-    height: 'fit-content'
+    backgroundColor: '#191919',
+    height: 'fit-content',
   }
 });
 
@@ -33,7 +33,7 @@ const ContextManager = (props): JSX.Element => {
   };
 
   const background_Color = isDarkMode ? '#21262b' : 'white'
-  const color = isDarkMode ? 'white' : 'black'
+  const color = isDarkMode ? 'white' : 'white'
 
   return (
     <React.Fragment>

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

@@ -122,7 +122,7 @@ const CreateContainer = () => {
         <Divider orientation="vertical" variant="middle" flexItem />
         <Grid item>
           <Typography
-            style={{ color: 'black' }}
+            style={{ color: 'white' }}
             variant="h6"
             gutterBottom={true}
           >

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

@@ -30,7 +30,7 @@ const AddContextForm = ({
     isDarkMode: store.darkMode.isDarkMode,
     state: store.appState
   }));
-  const color = isDarkMode ? 'white' : 'black';
+  const color = isDarkMode ? 'black' : 'white';
 
   //handler for submitting new context for creation
   const handleSubmit = () => {
@@ -113,6 +113,7 @@ const AddContextForm = ({
         </Snackbar>
         <Button
           variant="contained"
+          color="primary"
           onClick={handleSubmit}
           disabled={btnDisabled}
         >
@@ -140,7 +141,7 @@ const AddContextForm = ({
           </Select>
         </FormControl>
         <Button
-          color="error"
+          color="primary"
           variant="contained"
           onClick={handleDeleteContextClick}
         >

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

@@ -19,7 +19,7 @@ const AddDataForm = ({ handleClickInputData, currentContext }) => {
     }
     handleClickInputData(currentContext, dataContext);
   };
-  const color = isDarkMode ? 'white' : 'black';
+  const color = isDarkMode ? 'black' : 'white';
 
   const handleChange = (e) => {
     setDataContext((prevDataContext) => {

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -510,15 +510,15 @@ const useStyles = makeStyles((theme: Theme) => ({
     textAlign: 'center',
     margin: '-20px 0px 5px 150px',
     borderStyle: 'none',
-    transition: '0.3s'
+    transition: '0.3s',
     // borderRadius: "25px",
   },
   rootToggle: {
     color: '#696969',
     fontSize: '0.85rem'
   },
   lightThemeFontColor: {
-    color: '#155084'
+    color: 'white'
   },
   darkThemeFontColor: {
     color: '#fff'
@@ -575,7 +575,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   inputTextLight: {
     '& .MuiInputBase-input': {
-      color: 'rgba(0,0,0,0.54)'
+      color: 'white'
     }
   }
 }));

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

@@ -119,12 +119,12 @@ const TableParentProps = props => {
 
 const useStyles = makeStyles({
   themeLight: {
-    color: 'rgba(0,0,0,0.54)',
+    color: 'white',
     '& button:hover':{
       backgroundColor: 'LightGray'
     },
     '& button':{
-      color: 'black'
+      color: 'white'
     },
     '& .MuiTablePagination-root': {
       color: 'rbga(0,0,0,0.54)'

app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx

@@ -111,12 +111,12 @@ const TablePassedInProps = props => {
 // colors of state mgmt modal
 const useStyles = makeStyles({
   themeLight: {
-    color: 'rgba(0,0,0,0.54)',
+    color: 'white',
     '& button:hover':{
       backgroundColor: 'LightGray'
     },
     '& button':{
-      color: 'black'
+      color: 'white'
     },
     '& .MuiTablePagination-root': {
       color: 'rbga(0,0,0,0.54)'

app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

@@ -116,12 +116,12 @@ const TableStateProps = props => {
 
 const useStyles = makeStyles({
   themeLight: {
-    color: 'rgba(0,0,0,0.54)',
+    color: 'white',
     '& button:hover':{
       backgroundColor: 'LightGray'
     },
     '& button':{
-      color: 'black'
+      color: 'white'
     }
   },
   themeDark: {

app/src/components/StateManagement/StateManagement.tsx

@@ -36,7 +36,7 @@ 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' : 'white';
+  const background_Color = isDarkMode ? '#21262b' : '#191919';
   const color = isDarkMode ? 'white' : 'black';
 
   return (
@@ -52,9 +52,9 @@ const StateManager = (props): JSX.Element => {
                 <Tab
                   label="Create/Edit"
                   value="1"
-                  style={{ color: '#003366' }}
+                  style={{ color: 'white' }}
                 />
-                <Tab label="Display" value="2" style={{ color: '#003366' }} />
+                <Tab label="Display" value="2" style={{ color: 'white' }} />
               </TabList>
             </Box>
             <TabPanel value="1">

app/src/components/bottom/BottomTabs.tsx

@@ -49,7 +49,7 @@ const BottomTabs = (props): JSX.Element => {
   return (
     <div
       className={`${classes.root} ${classes.rootLight}`}
-      style={{ backgroundColor: '#003366' }}
+      style={{ backgroundColor: '#191919' }}
     >
       <Box
         display="flex"

app/src/components/left/HTMLPanel.tsx

@@ -8,6 +8,7 @@ import {
 } from '@mui/material';
 import TextField from '@mui/material/TextField';
 import { RootState } from '../../redux/store';
+import { BorderColor } from '@mui/icons-material';
 
 /*
 DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -332,13 +333,13 @@ const useStyles = makeStyles({
     fontFamily: 'Roboto, Raleway, sans-serif',
     fontSize: '85%',
     textAlign: 'center',
-    borderStyle: 'none',
     transition: '0.3s',
     borderRadius: '4px',
-    alignSelf: 'center'
+    alignSelf: 'center',
+    border: '1px solid #186BB4'
   },
   lightThemeFontColor: {
-    color: '#155084',
+    color: 'white',
     '& .MuiInputBase-root': {
       color: 'rgba (0, 0, 0, 0.54)'
     }

app/src/components/main/Canvas.tsx

@@ -127,7 +127,7 @@ function Canvas(props): JSX.Element {
   const defaultCanvasStyle = {
     width: '100%',
     minHeight: '100%',
-    backgroundColor: isOver ? '#FAFED1' : '#FBFBFB',
+    backgroundColor: isOver ? '#191919' : '#191919',
     border: '1px solid #FBFBF2',
     borderStyle: isOver ? 'dotted' : 'solid',
     aspectRatio: 'auto 774 / 1200',

app/src/components/main/DirectChildHTML.tsx

@@ -52,8 +52,8 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
   const interactiveStyle = {
     border:
       state.canvasFocus.childId === childId
-        ? '3px solid #186BB4'
-        : '1px solid grey'
+        ? '4px solid #186BB4'
+        : '2px solid #4d8cc4'
   };
 
   const combinedStyle = combineStyles(
@@ -71,7 +71,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color:'black'}}>
+        <strong style={{ color:'white'}}>
           {HTMLType.placeHolderShort}
         </strong>
         <DeleteButton

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -137,8 +137,8 @@ function DirectChildHTMLNestable({
   };
 
   // interactive style to change color when nested element is hovered over
-  if (isOver) defaultNestableStyle['yellow'];
-  defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : defaultNestableStyle['backgroundColor'];
+  if (isOver) defaultNestableStyle['rgba(24, 107, 180, 0.2)'];
+  defaultNestableStyle['backgroundColor'] = isOver ? 'rgba(24, 107, 180, 0.2)' : defaultNestableStyle['backgroundColor'];
 
   const combinedStyle = combineStyles(
     combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
@@ -171,7 +171,7 @@ function DirectChildHTMLNestable({
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color: 'black' }}>{HTMLType.placeHolderShort}
+        <strong style={{ color: 'white' }}>{HTMLType.placeHolderShort}
         </strong>
         <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
         </strong>

app/src/components/right/ComponentPanel.tsx

@@ -302,7 +302,7 @@ const useStyles = makeStyles({
     fontSize: '0.85rem'
   },
   lightThemeFontColor: {
-    color: '#155084',
+    color: 'white',
     '& .MuiInputBase-root': {
       color: 'rgba (0, 0, 0, 0.54)'
     }

app/src/containers/CustomizationPanel.tsx

@@ -546,7 +546,13 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
       <div className="rightPanelWrapper">
         <div>
           <div className={classes.configHeader}>
-            <h4>
+            <h4 
+            className={
+                  isThemeLight
+                    ? classes.lightThemeFontColor
+                    : classes.darkThemeFontColor
+                }
+                >
               Instance of
               {configTarget.child.type === 'component'
                 ? ' component'
@@ -846,7 +852,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
               <div className={classes.buttonRow}>
                 <Button
                   variant="contained"
-                  style={{ backgroundColor: 'green' }}
+                  color="primary"
                   className={
                     isThemeLight
                       ? `${classes.button} ${classes.saveButtonLight}`
@@ -899,7 +905,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                   <Button
                     variant="outlined"
                     color="primary"
-                    className={classes.button}
+                    className={
+                      isThemeLight
+                        ? `${classes.button} ${classes.saveButtonLight}`
+                        : `${classes.button} ${classes.saveButtonDark}`
+                    }
                     onClick={handleDelete}
                   >
                     DELETE INSTANCE
@@ -1019,7 +1029,8 @@ const useStyles = makeStyles({
     paddingRight: '20px'
   },
   saveButtonLight: {
-    border: '1px solid #186BB4'
+    border: '1px solid #186BB4',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)'
   },
   saveButtonDark: {
     border: '1px solid #3F51B5'
@@ -1050,7 +1061,7 @@ const useStyles = makeStyles({
     }
   },
   lightThemeFontColor: {
-    color: '#155084'
+    color: 'white'
   },
   darkThemeFontColor: {
     color: '#fff'

app/src/public/styles/globalDefaultStyles.ts

@@ -7,12 +7,12 @@ const globalDefaultStyle: Object = {
   boxSizing: 'border-box',
   padding: '10px 20px 10px 20px',
   margin: '10px',
-  borderRadius: '5px',
+  borderRadius: '2px',
   border: '10px Solid grey',
   fontFamily: 'Helvetica Neue',
   maxWidth: 'fit-content',
   minWidth: '250px',
-  backgroundColor: 'white', // experiment to see what is inherited
+  backgroundColor: 'rgba(0, 0, 0, 0.2)', // experiment to see what is inherited
 };
 
 export default globalDefaultStyle;