From c814cd1e711acabe8e86e6a9fc98c6fd465acbe7 Mon Sep 17 00:00:00 2001 From: Aqsa Aqeel <85514520+aqsaaqeel@users.noreply.github.com> Date: Mon, 6 Nov 2023 23:46:21 +0530 Subject: [PATCH] fix: misc changes to keep header and hero style consistent (#936) --- .../zubhub/public/locales/en/translation.json | 1 + .../zubhub/public/locales/hi/translation.json | 1 + .../components/staff_pick/staffPickStyles.js | 4 +++ .../zubhub/src/assets/js/styles/index.js | 3 +- .../views/page_wrapper/pageWrapperStyles.js | 2 +- .../styles/views/projects/projectsStyles.js | 23 ++++++++++--- .../components/avatar_button/AvatarButton.jsx | 32 +++++++++---------- .../avatar_button/avatarButton.styles.js | 3 ++ .../src/components/staff_pick/StaffPick.jsx | 2 +- .../zubhub/src/views/home/Home.jsx | 10 +++--- 10 files changed, 51 insertions(+), 30 deletions(-) diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json index b03782abe..626c98b23 100644 --- 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 index 9404c8c04..ee425c620 100644 --- 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 index b3ee9c72e..9d8749c49 100644 --- 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 index e697a940f..e933a5c7b 100644 --- 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 index e3300480d..95ebab254 100644 --- 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 index 8fec92a68..2cfb775f2 100644 --- 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,6 +152,9 @@ const styles = theme => ({ heroMainMessageSecondaryStyle: { fontSize: '4.5rem', fontWeight: '700', + [theme.breakpoints.down('1480')]: { + fontSize: '3.5rem' + }, [theme.breakpoints.down('sm')]: { fontSize: '2.5rem' }, @@ -153,6 +162,9 @@ const styles = theme => ({ 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 index 3d601b8b9..7af87a724 100644 --- 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 (
- +
diff --git a/zubhub_frontend/zubhub/src/components/avatar_button/avatarButton.styles.js b/zubhub_frontend/zubhub/src/components/avatar_button/avatarButton.styles.js index 45e1ba18a..40a2e2290 100644 --- 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 index f24c23e9a..86937a343 100644 --- 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} {/* )} @@ -193,7 +193,7 @@ function Projects(props) { Six animated children happily walking )} @@ -216,7 +216,7 @@ function Projects(props) { /> ))} props.history.push('/login')}