refactor and fix hero section style (#1130)

Issue: #1129 Signed-off-by: Ndibe Raymond Olisaemeka <[email protected]> Co-authored-by: Ndibe Raymond Olisaemeka <[email protected]>
unstructuredstudio · May 29, 2024 · 1f7a025 · 1f7a025
1 parent 344539a
commit 1f7a025
Show file tree

Hide file tree

Showing 6 changed files with 488 additions and 693 deletions.
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/staff_pick/staffPickStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/staff_pick/staffPickStyles.js
@@ -1,4 +1,4 @@
-const styles = theme => ({
+const styles = () => ({
   root: {
     // marginTop: '2em',
     marginRight: '2em',
@@ -14,6 +14,7 @@ const styles = theme => ({
     marginBottom: '2em',
   },
   MessagePrimaryStyle: {
+    marginTop: '1em',
     fontSize: '2.5rem',
     fontWeight: 1000,
   },

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/index.js b/zubhub_frontend/zubhub/src/assets/js/styles/index.js
@@ -1,4 +1,4 @@
-import { colors } from "../colors";
+import { colors } from '../colors';
 
 const styles = theme => ({
   iconBox: {
@@ -11,13 +11,13 @@ const styles = theme => ({
     cursor: 'pointer',
   },
   flexColumn: {
-    flexDirection: 'column'
+    flexDirection: 'column',
   },
   flexWrap: {
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   textCapitalize: {
-    textTransform: 'capitalize'
+    textTransform: 'capitalize',
   },
   inputTextPlaceholder: {
     color: '#B3B3B3',
@@ -37,23 +37,22 @@ const styles = theme => ({
     },
     '& .MuiOutlinedInput-input, .ql-editor, .ql-editor.ql-blank::before,input': {
       fontSize: '15px !important',
-      fontFamily: 'Raleway, sans-serif !important'
+      fontFamily: 'Raleway, sans-serif !important',
     },
-
   },
   title1: {
     fontWeight: 'bold',
     fontSize: '30px !important',
     lineHeight: '35px',
     marginBottom: 8,
-    color: colors.black
+    color: colors.black,
   },
   title2: {
     fontWeight: 'bold',
     fontSize: 16,
     lineHeight: '16px',
     marginBottom: 8,
-    color: colors.black
+    color: colors.black,
   },
   margin: {
     margin: '1em',
@@ -95,11 +94,14 @@ const styles = theme => ({
   borderRed: {
     borderColor: `${colors.red} !important`,
     '& .ql-container.ql-snow': {
-      borderColor: `${colors.red} !important`
+      borderColor: `${colors.red} !important`,
     },
     '& .ql-toolbar.ql-snow': {
-      borderColor: `${colors.red} !important`
-    }
+      borderColor: `${colors.red} !important`,
+    },
+  },
+  backgroundWhite: {
+    backgroundColor: 'white',
   },
   positionRelative: {
     position: 'relative',
@@ -133,7 +135,7 @@ const styles = theme => ({
   },
   justifySpaceBetween: {
     justifyContent: 'space-between',
-    display: 'flex'
+    display: 'flex',
   },
   addOnSmallScreen: {
     [theme.breakpoints.up('555')]: {
@@ -202,9 +204,6 @@ const styles = theme => ({
       fill: 'var(--primary-color2)',
     },
   },
-  textDecorationNone: {
-    textDecoration: 'none',
-  },
   fieldNumberStyle: {
     height: '20px',
     width: '20px',
@@ -232,28 +231,27 @@ const styles = theme => ({
   },
   checkbox: {
     '&.MuiIconButton-root': {
-      padding: '0px !important'
+      padding: '0px !important',
     },
     '& .MuiSvgIcon-root': {
-      fontSize: '1.2rem'
+      fontSize: '1.2rem',
     },
   },
   textSmall: {
-    fontSize: '0.9rem'
+    fontSize: '0.9rem',
   },
   boxShadow: {
-    boxShadow: '0px 3px 1px -2px rgba(0,0,0,0.09), 0px 2px 2px 0px rgba(0,0,0,0.08), 0px 1px 5px 0px rgba(0,0,0,0.17)'
+    boxShadow: '0px 3px 1px -2px rgba(0,0,0,0.09), 0px 2px 2px 0px rgba(0,0,0,0.08), 0px 1px 5px 0px rgba(0,0,0,0.17)',
   },
   gap: {
-    gap: 17
+    gap: 17,
   },
   smallScreenPadding: {
     [theme.breakpoints.down('md')]: {
       paddingLeft: theme.spacing(4),
       paddingRight: theme.spacing(4),
-
     },
-  }
+  },
 });
 
 export default styles;