Merge branch 'unstructuredstudio:master' into master

coderatomy · Nov 8, 2023 · 94115d5 · 94115d5
2 parents 628f67c + d95cba0
commit 94115d5
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 70 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",
@@ -1172,5 +1173,22 @@
       "linkedProjects": "Linked Projects",
       "drafts": "drafts"
     }
+  },
+  "notificationPanel": {
+    "title": "Notifications",
+    "viewButtonLabel": {
+      "all": "All",
+      "unread": "Unread"
+    },
+    "notificationType": {
+      "new": "New",
+      "earlier": "Earlier"
+    },
+    "noNotificationText": "You have no notifications in this category.",
+    "notLoggedIn": {
+      "title": "Sign In to see notifications from your favourite creators!",
+      "text": "Get inspired by thousands of creators around the world.",
+      "buttonLabel": "Get Started"
+    }
   }
 }
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": "सभी परियोजनाएं",
@@ -1074,5 +1075,22 @@
       "linkedProjects": "लिंक्ड प्रोजेक्ट्स",
       "drafts": "ड्राफ्ट"
     }
+  },
+  "notificationPanel": {
+    "title": "सूचनाएं",
+    "viewButtonLabel": {
+      "all": "सभी",
+      "unread": "अपठित ग"
+    },
+    "notificationType": {
+      "new": "नया",
+      "earlier": "पहले"
+    },
+    "noNotificationText": "इस श्रेणी में आपके पास कोई सूचना नहीं है.",
+    "notLoggedIn": {
+      "title": "अपने पसंदीदा रचनाकारों की सूचनाएं देखने के लिए साइन इन करें!",
+      "text": "दुनिया भर के हजारों रचनाकारों से प्रेरणा लें।",
+      "buttonLabel": "शुरू हो जाओ"
+    }
   }
 }
diff --git a/zubhub_frontend/zubhub/src/assets/js/colors.js b/zubhub_frontend/zubhub/src/assets/js/colors.js
@@ -11,7 +11,8 @@ export const colors = {
     green: '#22C55E',
     red: '#f44336',
     'blue-light': '#00B8C433',
-    'blue-dark': '#7BA8AB'
+    'blue-dark': '#7BA8AB',
+    'blue-pale': '#DBECFF'
 }
 
 export const borders = {

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/notification/NotificationStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/notification/NotificationStyles.js
@@ -1,27 +1,18 @@
 const styles = theme => ({
   notificationLink: {
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-    },
-    [theme.breakpoints.up('sm')]: {
-      maxWidth: '365px',
-    },
     textDecoration: 'none',
     color: 'inherit',
+    marginRight: '8px',
   },
   notificationStyle: {
     display: 'flex',
     borderRadius: '5px',
-    width: '340px',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-    },
+    width: '100%',
     height: '80px',
     cursor: 'pointer',
     alignItems: 'center',
     backgroundColor: '#FFFFFF',
     padding: '0px',
-    paddingLeft: '1.5%',
     paddingRight: '5%',
     margin: '0px',
     justifyContent: 'space-evenly',
@@ -98,11 +89,19 @@ const styles = theme => ({
     borderRadius: '50%',
     width: '14px !important',
     height: '14px !important',
+    [theme.breakpoints.up('sm')]: {
+      width: '12px !important',
+      height: '12px !important',  
+    },
   },
   unviewed: {
     backgroundColor: 'transparent',
     width: '14px !important',
     height: '14px !important',
+    [theme.breakpoints.up('sm')]: {
+      width: '12px !important',
+      height: '12px !important',  
+    },
   },
 });
 

diff --git a/...ubhub/src/assets/js/styles/components/notification_panel/notificationPanelButtonStyles.js b/...ubhub/src/assets/js/styles/components/notification_panel/notificationPanelButtonStyles.js
@@ -2,10 +2,9 @@ const styles = theme => ({
   buttonStyle: {
     borderRadius: '30px',
     padding: '5px 15px',
-    color: 'var(--text-color2)',
-    backgroundColor: 'var(--text-color3)',
-    outline: 'none',
-    border: 'none',
+    color: 'var(--primary-color3)',
+    backgroundColor: 'white',
+    border: '1.5px solid var(--primary-color3)',
     cursor: 'pointer',
     fontSize: '15px',
   },

diff --git a/...tend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelStyles.js b/...tend/zubhub/src/assets/js/styles/components/notification_panel/notificationPanelStyles.js
@@ -8,8 +8,7 @@ const styles = theme => ({
     backgroundColor: 'white',
     minWidth: 200,
     zIndex: 20,
-    padding: '20px 15px',
-    borderRadius: '20px',
+    paddingTop: '20px',
     [theme.breakpoints.down('400')]: {
       marginTop: 12,
     },
@@ -22,6 +21,7 @@ const styles = theme => ({
   fullscreenPopperStyle: {
     width: '100vw',
     height: '100vh',
+    paddingRight: '20px',
     //  height: 'auto',
     borderRadius: '0px',
   },
@@ -32,6 +32,7 @@ const styles = theme => ({
     gap: '10px',
     color: 'var(--primary-color3)',
     padding: '2.5px 0px',
+    marginBottom: '10px'
   },
   logedOutPanel: {
     display: 'flex',
@@ -53,7 +54,7 @@ const styles = theme => ({
       marginLeft: '10%',
     },
     [theme.breakpoints.up('400')]: {
-      marginLeft: '20%',
+      marginLeft: '10%',
     },
 
     //  backgroundColor:'red'
@@ -82,6 +83,20 @@ const styles = theme => ({
       height: '86%',
     },
     overscrollBehavior: 'contain',
+    '&::-webkit-scrollbar': {
+      width: '8px',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      borderRadius: '8px',
+      backgroundColor: colors.primary
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: 'var(--secondary-color6)'
+    },
+    '&::-webkit-scrollbar-track': {
+      borderRadius: '8px',
+      backgroundColor: colors['blue-pale']
+    },
   },
   panelHeaderTextStyle: {
     margin: '0px',
@@ -91,7 +106,7 @@ const styles = theme => ({
   panelSubheadingTextStyle: {
     fontWeight: '600',
     color: 'var(--primary-color3)',
-    padding: '5px 0px',
+    padding: '10px 0px',
     position: 'sticky',
     top: '0px',
     backgroundColor: 'white',

diff --git a/...b_frontend/zubhub/src/assets/js/styles/components/notification_panel/panelPopperStyles.js b/...b_frontend/zubhub/src/assets/js/styles/components/notification_panel/panelPopperStyles.js
@@ -17,24 +17,16 @@ const styles = theme => ({
     [theme.breakpoints.down('600')]: {
       marginTop: 10,
     },
-    [theme.breakpoints.up('600')]: {
-      marginRight: '15%',
-    },
   },
 
   container: {
     backgroundColor: 'white',
     minWidth: 200,
-    maxWidth:400,
+    maxWidth:340,
     zIndex: 20,
     padding: '20px 15px',
     borderRadius: '20px',
     boxShadow: '0px 4px 4px 0px rgb(0 0 0 / 25%)',
-    [theme.breakpoints.up('600')]: {
-      marginRight: '15%',
-      minWidth: 100,
-    },
-
   },
   signUpcontainer: {
     backgroundColor: 'white',
@@ -49,7 +41,7 @@ const styles = theme => ({
       marginLeft: '25%',
     },
     [theme.breakpoints.up('600')]: {
-      marginRight: '15%',
+      width: '238px'
     },
 
   },

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'
+  }
 });