fix: misc changes to keep header and hero style consistent (unstructu…

…redstudio#936)
coderatomy · Nov 6, 2023 · c814cd1 · c814cd1
1 parent e202e45
commit c814cd1
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 30 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -262,6 +262,7 @@
     "2": "Create, Share!",
     "shareProject": "Share your work",
     "exploreIdeas": "Explore Ideas",
+    "heroAlt": "Six animated children happily walking",
     "zubhubAmbassadors": "Become an Ambassador",
     "newStuff": "New Stuff",
     "login":"Login to view more",

diff --git a/zubhub_frontend/zubhub/public/locales/hi/translation.json b/zubhub_frontend/zubhub/public/locales/hi/translation.json
@@ -248,6 +248,7 @@
     "2":"बनाएं, शेयर करें!",
     "shareProject": "एक परियोजना साझा करें",
     "exploreIdeas": "विचारों का अन्वेषण करें",
+    "heroAlt": "छह एनिमेटेड बच्चे खुशी से चल रहे हैं",
     "zubhubAmbassadors": "हमारे राजदूत बनें",
     "newStuff": "नयी चीज़",
     "allProjects": "सभी परियोजनाएं",

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
@@ -13,6 +13,10 @@ const styles = theme => ({
   projectGridStyle: {
     marginBottom: '2em',
   },
+  MessagePrimaryStyle: {
+    fontSize: '2.5rem',
+    fontWeight: 1000,
+  },
 });
 
 export default styles;
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/index.js b/zubhub_frontend/zubhub/src/assets/js/styles/index.js
@@ -7,9 +7,8 @@ const styles = theme => ({
     borderRadius: 20,
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center', 
+    alignItems: 'center',
     cursor: 'pointer',
-    backgroundColor: 'white',
   },
   flexColumn: {
     flexDirection: 'column'

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,21 +25,27 @@ const styles = theme => ({
     // '& .MuiGrid-root.MuiGrid-container': {
     //   width: '100%',
     [theme.breakpoints.down('sm')]: {
-      padding: '0 24px',
+      // padding: '0 24px',
       width: '100%',
     },
   },
   heroMainSectionStyle: {
     backgroundColor: 'var(--primary-color1)',
     display: 'flex',
-    paddingTop: '2.3em',
-    paddingBottom: '2.8em',
+    padding: '0 calc((100vw - 1350px) / 2)',
+    paddingTop: '2em',
+    paddingBottom: '2em',
     justifyContent: 'center',
-    width: '100vw',
+    // width: '100%',
+    // maxWidth: '1230px',
     marginBottom: '2em',
     height:'100vh',
+    [theme.breakpoints.down('1000')]: {
+      width: '100%',
+      padding: '0 1em'
+    },
     [theme.breakpoints.down('sm')]: {
-      width: '100',
+      width: '100%',
       height:'fit-content',
     },
   },
@@ -146,13 +152,19 @@ const styles = theme => ({
   heroMainMessageSecondaryStyle: {
     fontSize: '4.5rem',
     fontWeight: '700',
+    [theme.breakpoints.down('1480')]: {
+      fontSize: '3.5rem'
+    },
     [theme.breakpoints.down('sm')]: {
       fontSize: '2.5rem'
     },
   },
   heroMainMessagePrimaryStyle: {
     fontSize: '2.2rem',
     fontWeight: 500,
+    [theme.breakpoints.down('1480')]: {
+      fontSize: '1.7rem'
+    },
     [theme.breakpoints.down('sm')]: {
       fontSize: '1.2rem'
     },
@@ -310,6 +322,7 @@ const styles = theme => ({
     // marginTop: '3em',
     maxWidth: '1190px',
     width: '100%',
+    padding: '0 2rem',
   },
   projectGridStyle: {
     marginBottom: '2em',

diff --git a/zubhub_frontend/zubhub/src/components/avatar_button/AvatarButton.jsx b/zubhub_frontend/zubhub/src/components/avatar_button/AvatarButton.jsx
@@ -14,7 +14,7 @@ const AvatarButton = props => {
   const commonClasses = makeStyles(commonStyles)();
   const classes = makeStyles(styles)();
   const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [signupStyles, setsignupStyles] = useState(false)
+  const [signupStyles, setsignupStyles] = useState(false);
   const buttonRef = useRef();
   const auth = useSelector(state => state.auth);
   const goToProfile = () => {
@@ -23,25 +23,25 @@ const AvatarButton = props => {
     }
   };
 
-  const onClickSignUp = () =>{
-    (!auth.token ? setDropdownOpen(!dropdownOpen) : goToProfile())
-    setsignupStyles(true)
-  } 
+  const onClickSignUp = () => {
+    !auth.token ? setDropdownOpen(!dropdownOpen) : goToProfile();
+    setsignupStyles(true);
+  };
 
-  const oncloseSignUp = () =>{
-    setDropdownOpen(false)
-    setsignupStyles(false)
-  }
+  const oncloseSignUp = () => {
+    setDropdownOpen(false);
+    setsignupStyles(false);
+  };
   return (
     <ClickAwayListener onClickAway={oncloseSignUp}>
       <div>
-        <Avatar
-          ref={buttonRef}
-          onClick={onClickSignUp}
-          className={commonClasses.iconBox}
-          alt={auth?.username?.toUpperCase()}
-          src={auth?.avatar}
-        />
+          <Avatar
+            ref={buttonRef}
+            onClick={onClickSignUp}
+            className={`${commonClasses.iconBox} ${auth.token && classes.avatarIconStyle}`}
+            alt={auth?.username?.toUpperCase()}
+            src={!auth.token ? "/static/images/avatar/1.jpg" : auth?.avatar}
+          />
         <PanelPopper open={dropdownOpen} anchorEl={buttonRef} signUpStyles={signupStyles}>
           <div className={classes.container}>
             <Avatar style={{ fontSize: 35, color: colors.primary, backgroundColor: colors.white }} />

diff --git a/zubhub_frontend/zubhub/src/components/avatar_button/avatarButton.styles.js b/zubhub_frontend/zubhub/src/components/avatar_button/avatarButton.styles.js
@@ -17,4 +17,7 @@ export const styles = theme => ({
       height: '86%',
     },
   },
+  avatarIconStyle:{
+    backgroundColor: 'white'
+  }
 });
diff --git a/zubhub_frontend/zubhub/src/components/staff_pick/StaffPick.jsx b/zubhub_frontend/zubhub/src/components/staff_pick/StaffPick.jsx
@@ -35,7 +35,7 @@ function StaffPick(props) {
             // component="h2"
             // variant="h6"
             // color="textPrimary"
-            className={classes.titleStyle}
+            className={classes.MessagePrimaryStyle}
           >
             {staff_pick.title}
             {/* <CustomButton

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'
+import heroMainImage from '../../assets/images/heroMainImage.svg';
 const useStyles = makeStyles(styles);
 const useCommonStyles = makeStyles(commonStyles);
 
@@ -161,8 +161,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={t('projects.heroAlt')}
                        />
                      </Box>
                    )}
@@ -193,7 +193,7 @@ function Projects(props) {
                        <img
                          className={classes.heroImageStyle}
                          src={hero.image_url ? hero.image_url : heroMainImage}
-                         alt="Six animated children happily walking"
+                         alt={t('projects.heroAlt')}
                        />
                      </Box>
                    )}
@@ -216,7 +216,7 @@ function Projects(props) {
                 />
               ))}
               <CustomButton
-                  className={classes.heroBtnStyle}
+                  className={classes.heroButtonStyle}
                   size="small"
                   primaryButtonStyle
                   onClick={() => props.history.push('/login')}