fix: header styles and heading of projects (#883)

unstructuredstudio · Oct 20, 2023 · dc1b5fa · dc1b5fa
1 parent a830ccb
commit dc1b5fa
Show file tree

Hide file tree

Showing 7 changed files with 846 additions and 34 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -258,9 +258,9 @@
   },
 
   "projects": {
-    "1":"Get inspired by our collection of ideas.",
-    "2":"Tinker with materials and tools around you.",
-    "shareProject": "Share your work!",
+    "1":"Explore, ",
+    "2": "Create, Share!",
+    "shareProject": "Share your work",
     "exploreIdeas": "Explore Ideas",
     "zubhubAmbassadors": "Become an Ambassador",
     "newStuff": "New Stuff",

diff --git a/zubhub_frontend/zubhub/public/locales/hi/translation.json b/zubhub_frontend/zubhub/public/locales/hi/translation.json
@@ -244,6 +244,8 @@
   },
 
   "projects": {
+    "1":"खोजें, ",
+    "2":"बनाएं, शेयर करें!",
     "shareProject": "एक परियोजना साझा करें",
     "exploreIdeas": "विचारों का अन्वेषण करें",
     "zubhubAmbassadors": "हमारे राजदूत बनें",

diff --git a/zubhub_frontend/zubhub/src/assets/images/heroMainImage.svg b/zubhub_frontend/zubhub/src/assets/images/heroMainImage.svg
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/page_wrapper/pageWrapperStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/page_wrapper/pageWrapperStyles.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     fontSize: '1.15rem',
   },
   mainContainerStyle: {
-    // maxWidth: '100vw',
+    maxWidth: '100vw',
     zIndex: 1,
     // boxShadow:
     //   '0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)',

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/projects/projectsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/projects/projectsStyles.js
@@ -25,20 +25,35 @@ const styles = theme => ({
     // '& .MuiGrid-root.MuiGrid-container': {
     //   width: '100%',
     [theme.breakpoints.down('sm')]: {
-      padding: '0 24px'
+      padding: '0 24px',
+      width: '100%',
     },
   },
-  heroSectionStyle: {
+  heroMainSectionStyle: {
     backgroundColor: 'var(--primary-color1)',
-    boxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
-    WebkitBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
-    MozBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
     display: 'flex',
     paddingTop: '2.3em',
-    paddingBottom: '2.85em',
+    paddingBottom: '2.8em',
     justifyContent: 'center',
     width: '100vw',
-    marginBottom: '2em'
+    marginBottom: '2em',
+    height:'100vh',
+    [theme.breakpoints.down('sm')]: {
+      width: '100',
+      height:'fit-content',
+    },
+  },
+    heroSectionStyle: {
+      backgroundColor: 'var(--primary-color1)',
+      boxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
+      WebkitBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
+      MozBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
+      display: 'flex',
+      paddingTop: '2.3em',
+      paddingBottom: '2.85em',
+      justifyContent: 'center',
+      width: '100vw',
+      marginBottom: '2em'
   },
   imageLeft: {
     flexDirection: 'row',
@@ -79,15 +94,28 @@ const styles = theme => ({
     MozBoxShadow: '-2px 25px 13px -18px rgba(220,53,69,0.7)',
     display: 'flex',
     paddingTop: '2.3em',
-    paddingBottom: '2.85em',
+    paddingBottom: '2.8em',
     justifyContent: 'center',
     width: '100%',
   },
+  heroMainContainerStyle: {
+    width: '100%',
+    padding: '7rem 4rem',
+    display: 'flex',
+    [theme.breakpoints.down('1000')]: {
+      padding: '2rem 1rem',
+      flexDirection: 'column-reverse',
+      width: '100',
+      height:'fit-content',
+    },
+  },
   heroContainerStyle: {
     width: '100%',
     maxWidth: '1190px',
-    padding: '1.15em 1.15em',
+    padding: '1.2em 1.2em',
     display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     [theme.breakpoints.down('1000')]: {
       flexDirection: 'column-reverse',
     },
@@ -99,6 +127,7 @@ const styles = theme => ({
   heroMessageContainerStyle: {
     flexGrow: 1,
     color: 'white',
+    maxWidth: '37.8rem',
   },
   heroMessageSecondaryStyle: {
     fontSize: '2.2rem',
@@ -108,20 +137,44 @@ const styles = theme => ({
   },
   heroMessagePrimaryStyle: {
     fontSize: '2.2rem',
-    fontWeight: 1000,
+    fontWeight: '1000',
   },
   MessagePrimaryStyle: {
     fontSize: '2.5rem',
     fontWeight: 1000,
   },
-
+  heroMainMessageSecondaryStyle: {
+    fontSize: '4.5rem',
+    fontWeight: '700',
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '2.5rem'
+    },
+  },
+  heroMainMessagePrimaryStyle: {
+    fontSize: '2.2rem',
+    fontWeight: 500,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '1.2rem'
+    },
+  },
   heroButtonStyle: {
     textTransform: 'none',
-    padding: '0 1em',
-    fontSize: '1.2rem',
+    fontSize: '1.5rem',
     fontWeight: 700,
     marginRight: '1em',
     marginTop: '1.2em',
+    width: 'fit-content',
+    height: '4rem',
+    padding: '1rem 2rem',
+    borderRadius: '2rem',
+    gap: '1rem',
+  [theme.breakpoints.down('sm')]: {
+    height:'fit-content',
+    padding: '0.1em 0.7em',
+    marginBottom: '3rem',
+    width: 'fit-content',
+    fontSize: "1.2rem"
+  },
   },
   heroBtnStyle: {
     textTransform: 'none',
@@ -133,6 +186,7 @@ const styles = theme => ({
   },
   heroImageContainerStyle: {
     display: 'flex',
+    justifyContent: 'space-between',
     [theme.breakpoints.down('1000')]: {
     },
     [theme.breakpoints.down('500')]: {
@@ -160,10 +214,14 @@ const styles = theme => ({
     },
   },
   heroImageStyle: {
-    marginLeft: '2em',
+    marginLeft: '4em',
     marginRight: '2em',
     height: '100%',
     width: '100%',
+    [theme.breakpoints.down('1480')]: {
+      marginLeft: '0',
+      marginRight: '0',
+    },
     [theme.breakpoints.down('500')]: {
       marginLeft: '0',
       marginRight: '0',
@@ -260,8 +318,8 @@ const styles = theme => ({
     fontWeight: 'bold',
     fontSize: '1.5rem',
     marginTop: '2em',
-    marginLeft: '0.67em',
-    marginRight: '0.67em',
+    marginLeft: '0.7em',
+    marginRight: '0.7em',
   },
   buttonGroupStyle: {
     paddingLeft: '2em',

diff --git a/zubhub_frontend/zubhub/src/views/create_project/step3/Step3.jsx b/zubhub_frontend/zubhub/src/views/create_project/step3/Step3.jsx
@@ -26,6 +26,7 @@ export default function Step3({ formik, handleBlur, ...props }) {
   const [mode, setMode] = useState('');
   const [creatorValue, setCreatorValue] = useState({});
   const [checked, setChecked] = useState(false);
+  const [disableCategorySelection, setDisableCategorySelection] = useState(false);
 
   useEffect(() => {
     getCategories(props).then(cats => setCategories(cats.categories));
@@ -70,22 +71,47 @@ export default function Step3({ formik, handleBlur, ...props }) {
         {categories.map(cat => {
           let selected =
             formik.values.category.filter(selectedCategory => selectedCategory.name === cat.name).length > 0;
-          const color = selected ? colors.primary : isLimit ? '#D9DEE2' : colors.light;
+          const color = selected ? colors.primary : (isLimit || disableCategorySelection) ? '#D9DEE2' : colors.light;
           return (
             <Grid item xs={6} md={4} key={cat.name}>
               <div
-                onClick={() => (isLimit && !selected ? null : handleChange(cat, selected))}
+                onClick={() =>
+                  (isLimit && !selected) || disableCategorySelection ? null : handleChange(cat, selected)
+                }
                 className={classes.pill}
                 style={{ border: `solid 1px ${color}` }}
               >
                 <Checkbox className={commonClasses.checkbox} checked={selected} style={{ color, borderWidth: 1 }} />
-                <Typography className={commonClasses.inputText} style={{ ...(isLimit && !selected && { color }) }}>
+                <Typography
+                  className={commonClasses.inputText}
+                  style={{ ...((isLimit && !selected) || disableCategorySelection && { color }) }}
+                >
                   {cat.name}
                 </Typography>
               </div>
             </Grid>
           );
         })}
+        <Grid item xs={6} md={4}>
+          <div  className={classes.pill} 
+              style={{ border: `solid 1px ${disableCategorySelection || isLimit ? '#D9DEE2' : colors.light}` }}
+          >
+            <Checkbox
+              id="disableCategorySelection"
+              className={commonClasses.checkbox}
+              checked={disableCategorySelection}
+              style={{ color: disableCategorySelection ? '#D9DEE2' : colors.light, borderWidth: 1 }}
+              onChange={() => setDisableCategorySelection(!disableCategorySelection)}
+            />
+            <Typography
+              className={commonClasses.inputText}
+              style={{ color: (disableCategorySelection || isLimit) ? '#D9DEE2' : colors.light}}
+
+            >
+              None
+            </Typography>
+          </div>
+        </Grid>
       </Grid>
 
       {mode === 'team' && (

diff --git a/zubhub_frontend/zubhub/src/views/home/Home.jsx b/zubhub_frontend/zubhub/src/views/home/Home.jsx
@@ -31,7 +31,7 @@ import new_stuff from '../../assets/images/new_stuff.svg';
 import styles from '../../assets/js/styles/views/projects/projectsStyles';
 import commonStyles from '../../assets/js/styles';
 import hikingIcon from '../../assets/images/hiking.svg';
-
+import heroMainImage from '../../assets/images/heroMainImage.svg'
 const useStyles = makeStyles(styles);
 const useCommonStyles = makeStyles(commonStyles);
 
@@ -135,7 +135,6 @@ function Projects(props) {
       });
     }
   };
-
   const { loading, isMobileView } = state;
   const {
     results: projects,
@@ -156,8 +155,8 @@ function Projects(props) {
           (
             <Box className={classes.root}>
               {hero && hero.id ? (
-                 <Box className={classes.heroSectionStyle}>
-                 <Box className={classes.heroContainerStyle}>
+                 <Box className={classes.heroMainSectionStyle}>
+                 <Box className={classes.heroMainContainerStyle}>
                    {state.isMobileView && hero && hero.id && (
                      <Box className={classes.heroImageContainerStyle}>
                        <img
@@ -169,16 +168,15 @@ function Projects(props) {
                    )}
                    <Box className={classes.heroMessageContainerStyle}>
                      <br />
-                     <Typography className={classes.heroMessageSecondaryStyle}>
+                     <Typography className={classes.heroMainMessageSecondaryStyle}>
                        {t('projects.1')}
                      </Typography>
-                     <br />
-                     <Typography className={classes.heroMessageSecondaryStyle}>
+                     <Typography className={classes.heroMainMessageSecondaryStyle}>
                        {t('projects.2')}
                      </Typography>
                      <br />
-                     <Typography className={classes.heroMessagePrimaryStyle}>
-                       {hero.title}
+                     <Typography className={classes.heroMainMessagePrimaryStyle}>
+                       {hero.description}
                      </Typography>
                      <br />
                      <CustomButton
@@ -194,8 +192,8 @@ function Projects(props) {
                      <Box className={classes.heroImageContainerStyle}> 
                        <img
                          className={classes.heroImageStyle}
-                         src={hero.image_url}
-                         alt=""
+                         src={hero.image_url ? hero.image_url : heroMainImage}
+                         alt="Six animated children happily walking"
                        />
                      </Box>
                    )}