Merge pull request #4 from oslabs-beta/laura

style changes and fixes

Author: Skilzsz

app/src/Dashboard/Project.tsx

@@ -138,7 +138,7 @@ const Project = ({
           button
           onClick={handleDelete}
           style={{
-            border: '1px solid #3f51b5',
+            border: '1px solid #1b544b',
             marginBottom: '2%',
             marginTop: '5%'
           }}

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

@@ -520,7 +520,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   input: {},
   newComponent: {
-    color: '#155084',
+    color: '#1b544b',
     fontSize: '95%',
     marginBottom: '20px'
   },

app/src/components/left/DragDropPanel.tsx

@@ -33,7 +33,7 @@ const DragDropPanel = (props): JSX.Element => {
   return (
     <div className={'HTMLItems'}>
       <div id="HTMLItemsTopHalf">
-        <h3 style={{ color: '#C6C6C6' }}>HTML Elements</h3>
+        <h3 style={{ color: '#ffffff' }}> &lt; HTML Elements &gt; </h3>
         <Grid
           container
           spacing={{ xs: 0.5, md: 0.5 }}

app/src/components/main/Canvas.tsx

@@ -13,6 +13,7 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import { RootState } from '../../redux/store';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
+import { gridFilterableColumnDefinitionsSelector } from '@mui/x-data-grid';
 
 function Canvas(props: {}): JSX.Element {
   const state = useSelector((store: RootState) => store.appState);
@@ -115,7 +116,7 @@ function Canvas(props: {}): JSX.Element {
       }
     },
     collect: (monitor) => ({
-      isOver: !!monitor.isOver()
+      isOver: !!monitor.isOver(),
     })
   });
 
@@ -124,7 +125,7 @@ function Canvas(props: {}): JSX.Element {
     width: '100%',
     minHeight: '100%',
     backgroundColor: isOver ? '#191919' : '#191919',
-    borderStyle: isOver ? 'dotted' : 'solid',
+    // borderStyle: isOver ? 'dotted' : 'solid',
     aspectRatio: 'auto 774 / 1200',
     boxSizing: 'border-box'
   };

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -149,9 +149,9 @@ function DirectChildHTMLNestable({
   };
 
   // interactive style to change color when nested element is hovered over
-  if (isOver) defaultNestableStyle['rgba(24, 107, 180, 0.2)'];
+  if (isOver) defaultNestableStyle['#1b544b'];
   defaultNestableStyle['backgroundColor'] = isOver
-    ? 'rgba(24, 107, 180, 0.2)'
+    ? '#1b544b'
     : defaultNestableStyle['backgroundColor'];
 
   const combinedStyle = combineStyles(
@@ -185,7 +185,7 @@ function DirectChildHTMLNestable({
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color: 'white' }}>{HTMLType.placeHolderShort}</strong>
+        <strong style={{ color: '#f2fbf8' }}>{HTMLType.placeHolderShort}</strong>
         <strong style={{ color: '#29a38a' }}>
           {attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
         </strong>

app/src/components/right/ExportButton.tsx

@@ -29,7 +29,7 @@ export default function ExportButton() {
             key={i}
             onClick={() => chooseGenOptions()}
             style={{
-              border: '1px solid #3f51b5',
+              border: '1px solid #1b544b',
               marginBottom: '2%',
               marginTop: '5%'
             }}

app/src/components/right/ProjectManager.tsx

@@ -45,7 +45,7 @@ const ProjectManager = () => {
           button
           onClick={resetStates}
           style={{
-            border: '1px solid #3f51b5',
+            border: '1px solid #1b544b',
             marginBottom: '2%',
             marginTop: '5%'
           }}
@@ -85,7 +85,7 @@ const ProjectManager = () => {
             button
             onClick={() => chooseGenOptions(i)}
             style={{
-              border: '1px solid #3f51b5',
+              border: '1px solid #1b544b',
               marginBottom: '2%',
               marginTop: '5%'
             }}

app/src/components/top/NavBarButtons.tsx

@@ -116,7 +116,7 @@ function navbarDropDown(props) {
           button
           onClick={resetState}
           style={{
-            border: '1px solid #3f51b5',
+            border: '1px solid #1b544b',
             marginBottom: '2%',
             marginTop: '5%'
           }}

app/src/components/top/NewExportButton.tsx

@@ -35,7 +35,7 @@ export default function NewExportButton(): React.JSX.Element {
             key={i}
             onClick={() => chooseGenOptions()}
             style={{
-              border: '1px solid #3f51b5',
+              border: '1px solid #1b544b',
               marginBottom: '2%',
               marginTop: '5%'
             }}

app/src/containers/CustomizationPanel.tsx

@@ -432,7 +432,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
           button
           onClick={handleDeleteReusableComponent}
           style={{
-            border: '1px solid #3f51b5',
+            border: '1px solid #1b544b',
             marginBottom: '2%',
             marginTop: '5%'
           }}
@@ -444,7 +444,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
           button
           onClick={closeModal}
           style={{
-            border: '1px solid #3f51b5',
+            border: '1px solid #1b544b',
             marginBottom: '2%',
             marginTop: '5%'
           }}

app/src/public/styles/globalDefaultStyles.ts

@@ -7,11 +7,13 @@ const globalDefaultStyle: Object = {
   boxSizing: 'border-box',
   padding: '10px 20px 10px 20px',
   margin: '10px',
-  borderRadius: '2px',
+  borderRadius: '10px',
   border: '10px Solid grey',
-  fontFamily: 'Helvetica Neue',
+  fontFamily: 'Roboto',
+  color: '#f2fbf8',
   maxWidth: 'fit-content',
   minWidth: '250px',
+  cursor: 'grab',
   backgroundColor: 'rgba(0, 0, 0, 0.2)', // experiment to see what is inherited
 };
 

app/src/public/styles/style.css

@@ -26,7 +26,7 @@ body {
   overflow: hidden;
   height: 100vh;
   width: 100vw;
-  background-color: #191919
+  background-color: #191919;
 }
 
 h4 {
@@ -189,7 +189,7 @@ span.material-symbols-outlined {
 .HTMLItems::-webkit-scrollbar-thumb {
   transition: .3s ease all;
   border-color: transparent;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: #1c695ccc;
   z-index: 40;
 }
 
@@ -253,7 +253,7 @@ span.material-symbols-outlined {
 }
 
 #HTMLItem:hover {
-  background-color: #333333;
+  background-color: #424242bd;
   color: #257c74;
 }
 
@@ -481,14 +481,13 @@ RIGHT COLUMN
   display: flex;
   justify-content: center;
   align-content: center;
-      
+  border-color: #46C0A5;    
 }
 
 .compPanelItem h3 {
   font-size: 1em;
   letter-spacing: 0.75px;
   padding: 5px 10px;
-  
 }
 
 .compPanelItem:hover {

app/src/public/styles/theme.ts

@@ -11,7 +11,7 @@ export const theme1 = createTheme({
       main: '#46C0A5' // light blue
     },
     background: {
-      paper: '#ffffff'
+      paper: '#d2f5eb'
     }
   }
 });
@@ -26,7 +26,7 @@ export const theme2 = createTheme({
       main: '#46C0A5'
     },
     background: {
-      paper: '#ffffff'
+      paper: '#d2f5eb'
     }
   }
 });
@@ -35,13 +35,13 @@ export const SigninDark = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#3f51b5'
+      main: '#1b544b'
     },
     secondary: {
       main: '#17a2b8'
     },
     background: {
-      paper: '#ffffff'
+      paper: '#d2f5eb'
     }
   }
 });
@@ -50,13 +50,13 @@ export const SigninLight = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#3f51b5'
+      main: '#1b544b'
     },
     secondary: {
       main: '#17a2b8'
     },
     background: {
-      paper: '#ffffff'
+      paper: '#d2f5eb'
     }
   }
 });