fix: improve notification panel (unstructuredstudio#989)

coderatomy · Nov 7, 2023 · d95cba0 · d95cba0
1 parent c814cd1
commit d95cba0
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 40 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1173,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
@@ -1075,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/components/notification_panel/NotificationPanel.jsx b/zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanel.jsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import styles from '../../assets/js/styles/components/notification_panel/notificationPanelStyles';
 import { makeStyles } from '@material-ui/core/styles';
 import NotificationPanelButton from './NotificationPanelButton';
@@ -42,6 +43,7 @@ const NotificationPanel = ({ open, anchorEl, onClose }) => {
   const [topLoading, setTopLoading] = useState(false);
   const [outOfNotifications, setOutOfNotifications] = useState(false);
   const notificationsWrapperRef = useRef();
+  const { t } = useTranslation();
 
   const newNotifications = useMemo(
     () => Object.values(notifications).sort(notificationSort).filter(isNewNotification),
@@ -154,17 +156,17 @@ const NotificationPanel = ({ open, anchorEl, onClose }) => {
 
     return (
       <div className={classes.notificationsWrapper} onScroll={handleScroll} ref={notificationsWrapperRef}>
-        {hasNewNotifications && <h2 className={classes.panelSubheadingTextStyle}>New</h2>}
+        {hasNewNotifications && <h2 className={classes.panelSubheadingTextStyle}>{t('notificationPanel.notificationType.new')}</h2>}
         {topLoading && getLoadingSpinner()}
         {newNotifications.map(notification => (
           <Notification notification={notification} onNotificationClick={() => onNotificationClick(notification)} />
         ))}
-        {hasEarlierNotifications && <h2 className={classes.panelSubheadingTextStyle}>Earlier</h2>}
+        {hasEarlierNotifications && <h2 className={classes.panelSubheadingTextStyle}>{t('notificationPanel.notificationType.earlier')}</h2>}
         {earlierNotifications.map(notification => (
           <Notification notification={notification} onNotificationClick={() => onNotificationClick(notification)} />
         ))}
         {!topLoading && !loading && !hasNewNotifications && !hasEarlierNotifications && (
-          <p>You have no notifications in this category.</p>
+          <p>{t('notificationPanel.noNotificationText')}</p>
         )}
         {loading && getLoadingSpinner()}
       </div>
@@ -176,7 +178,7 @@ const NotificationPanel = ({ open, anchorEl, onClose }) => {
       {unreadNotifications.map(notification => (
         <Notification notification={notification} onNotificationClick={() => onNotificationClick(notification)} />
       ))}
-      {!loading && unreadNotifications.length === 0 && <p>You have no notifications in this category.</p>}
+      {!loading && unreadNotifications.length === 0 && <p>{t('notificationPanel.noNotificationText')}</p>}
       {loading && getLoadingSpinner()}
     </div>
   );
@@ -192,19 +194,19 @@ const NotificationPanel = ({ open, anchorEl, onClose }) => {
         {token && (
           <>
             <div className={classes.panelHeaderStyle}>
-              <h1 className={classes.panelHeaderTextStyle}>Notifications</h1>
+              <h1 className={classes.panelHeaderTextStyle}>{t('notificationPanel.title')}</h1>
               <div className={classes.panelHeaderButtons}>
                 <NotificationPanelButton
                   selected={notificationViewType === NOTIFICATION_VIEW_TYPE.ALL}
                   onClick={handleNotificationTabChange(NOTIFICATION_VIEW_TYPE.ALL)}
                 >
-                  All
+                  {t('notificationPanel.viewButtonLabel.all')}
                 </NotificationPanelButton>
                 <NotificationPanelButton
                   selected={notificationViewType === NOTIFICATION_VIEW_TYPE.UNREAD}
                   onClick={handleNotificationTabChange(NOTIFICATION_VIEW_TYPE.UNREAD)}
                 >
-                  Unread
+                  {t('notificationPanel.viewButtonLabel.unread')}
                 </NotificationPanelButton>
               </div>
             </div>
@@ -217,10 +219,10 @@ const NotificationPanel = ({ open, anchorEl, onClose }) => {
           <>
             <div className={classes.logedOutPanel}>
               <Notifications style={{ color: colors.primary, fontSize: 35 }} />
-              <h3>Sign In to see notifications from your favourite creators!</h3>
-              <Typography>Get inspired by thousands of creators around the world. </Typography>
+              <h3>{t('notificationPanel.notLoggedIn.title')}</h3>
+              <Typography>{t('notificationPanel.notLoggedIn.text')}</Typography>
               <CustomButton style={{ alignSelf: 'normal', marginTop: 14 }} href="/login" primaryButtonStyle>
-                Get Started
+                {t('notificationPanel.notLoggedIn.buttonLabel')}
               </CustomButton>
             </div>
           </>