Merge pull request #901 from hackforla/890-FRONT-gaps

Added gaps and borderRadius to the theme
hackforla · Jan 22, 2021 · 6a46224 · 6a46224
2 parents 2836fa9 + ca89360
commit 6a46224
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 24 deletions.
diff --git a/client/components/FilterMenu/index.js b/client/components/FilterMenu/index.js
@@ -21,25 +21,25 @@ const useStyles = makeStyles(theme => ({
     position: 'absolute',
     left: 35,
     top: 75,
-    borderRadius: 10,
+    borderRadius: theme.borderRadius.md,
     zIndex: 2000,
   },
   header: {
     color: theme.palette.text.cyan,
-    padding: 5,
+    padding: theme.gaps.xs,
     paddingRight: 0,
   },
   headerAction: {
     margin: 'auto',
   },
   headerTitle: {
-    marginLeft: 10,
+    marginLeft: theme.gaps.xs,
     fontSize: 20,
     fontWeight: 600,
     letterSpacing: '2px',
   },
   button: {
-    padding: 5,
+    padding: theme.gaps.xs,
     paddingRight: 0,
     color: theme.palette.text.dark,
     '&:hover': {
@@ -51,9 +51,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const FilterMenu = ({
-  toggleMenu,
-}) => {
+const FilterMenu = ({ toggleMenu }) => {
   const [expanded, setExpanded] = useState(false);
   const classes = useStyles();
 
@@ -67,14 +65,8 @@ const FilterMenu = ({
         }}
         title={(
           <>
-            <GearButton
-              aria-label="toggle map menu"
-              onClick={toggleMenu}
-            />
-            <Typography
-              className={classes.headerTitle}
-              component="span"
-            >
+            <GearButton aria-label="toggle map menu" onClick={toggleMenu} />
+            <Typography className={classes.headerTitle} component="span">
               FILTERS
             </Typography>
           </>
@@ -87,14 +79,12 @@ const FilterMenu = ({
             disableFocusRipple
             disableRipple
           >
-            {expanded ? <ArrowDropUpIcon /> : <ArrowDropDownIcon /> }
+            {expanded ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
           </IconButton>
         )}
       />
       <Collapse in={expanded}>
-        <CardContent>
-          TODO: Selectors
-        </CardContent>
+        <CardContent>TODO: Selectors</CardContent>
       </Collapse>
     </Card>
   );

diff --git a/client/theme/borderRadius.js b/client/theme/borderRadius.js
@@ -0,0 +1,6 @@
+export default {
+  sm: 5,
+  md: 10,
+  lg: 70,
+  round: '50%',
+};
diff --git a/client/theme/colors.js b/client/theme/colors.js
@@ -4,7 +4,7 @@ export const colorSecondaryDark = '#0F181F';
 export const colorSecondaryFocus = '#87C8BC';
 export const colorTextPrimaryDark = '#0F181F';
 export const colorTextPrimaryLight = '#FFFFFF';
-export const colorTextSecondaryDark = '#0F181F';
+export const colorTextSecondaryDark = '#A8A8A8';
 export const colorTextSecondaryLight = '#ECECEC';
 export const colorTextFocus = '#87C8BC';
 

diff --git a/client/theme/gaps.js b/client/theme/gaps.js
@@ -0,0 +1,7 @@
+export default {
+  xs: 5,
+  sm: 10,
+  md: 15,
+  lg: 20,
+  xl: 30,
+};
diff --git a/client/theme/theme.js b/client/theme/theme.js
@@ -1,23 +1,32 @@
 import { createMuiTheme } from '@material-ui/core/styles';
-import { colorPrimaryFocus } from './colors';
+import {
+  colorPrimaryFocus,
+  colorPrimaryDark,
+  colorTextSecondaryDark,
+  colorSecondaryFocus,
+} from './colors';
+import gaps from './gaps';
+import borderRadius from './borderRadius';
 
 const theme = createMuiTheme({
+  gaps,
+  borderRadius,
   palette: {
     type: 'dark',
     primary: {
-      main: '#29404F',
+      main: colorPrimaryDark,
       dark: '#192730',
       focus: colorPrimaryFocus,
     },
     secondary: {
-      main: '#0F181F',
+      main: colorTextSecondaryDark,
     },
     background: {
       default: '#1A1A1A',
     },
     text: {
       dark: '#C4C4C4',
-      cyan: '#87C8BC',
+      cyan: colorSecondaryFocus,
     },
   },
   header: {