Notifications Popup Fixes

Challenge: 30115261
Submission: 351307

Author: luizrrodrigues

dist/dev/index.js

@@ -1,11 +1,13 @@
 import _ from 'lodash'
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import { Link } from 'topcoder-react-utils'
 import IconAvatar from '../../assets/images/img-vic-tor-avatar.svg'
 import IconCloseDark from '../../assets/images/icon-close-dark.svg'
 import IconSwitchBusiness from '../../assets/images/icon-switch-business.svg'
+import IconNotificationsRed from '../../assets/images/icon-bell-red.svg'
+import IconRightArrow from '../../assets/images/right-arrow.svg'
 import styles from './styles.module.scss'
 import moment from 'moment'
 
@@ -41,7 +43,7 @@ class AccountMenu extends React.Component {
 
   render () {
     const {
-      onClose, open, menu, switchText, onSwitch, profile
+      onClose, open, menu, switchText, onSwitch, profile, numNotifications, onClickNotifications
     } = this.props
 
     return (
@@ -88,6 +90,29 @@ class AccountMenu extends React.Component {
             </div>
           )
         }
+        {
+          !_.isEmpty(profile) && (
+            <Fragment>
+              <div
+                role='button'
+                className={styles['notifications-mobile']}
+                onClick={onClickNotifications}
+              >
+                <div className={styles['noti-left']}>
+                  <IconNotificationsRed className={styles['bell-icon']} />
+                  <div>
+                    <span className={styles['notifications-title']}>Notifications</span>
+                    <span className={styles['red-number']}>{'(' + numNotifications + ')'}</span>
+                  </div>
+                </div>
+                <span role='button' className={styles['icon-open-noti']}>
+                  <IconRightArrow />
+                </span>
+              </div>
+              <span className={styles['noti-separator']} />
+            </Fragment>
+          )
+        }
 
         <div className={styles.menu}>
 
@@ -98,13 +123,13 @@ class AccountMenu extends React.Component {
           ))}
 
         </div>
-      </div>
+      </div >
     )
   }
 }
 
 AccountMenu.defaultProps = {
-  numNotifications: 35
+  numNotifications: 0
 }
 
 AccountMenu.propTypes = {
@@ -113,7 +138,9 @@ AccountMenu.propTypes = {
   menu: PropTypes.array,
   switchText: PropTypes.shape(),
   onSwitch: PropTypes.func,
-  profile: PropTypes.shape()
+  profile: PropTypes.shape(),
+  numNotifications: PropTypes.number,
+  onClickNotifications: PropTypes.func.isRequired
 }
 
 export default AccountMenu

dist/prod/index.js

@@ -79,14 +79,15 @@
     }
   }
 
+  .notifications-mobile {
+    @include mobile-only;
+  }
+
   .menu {
     @include not-mobile {
       padding: 15px 0 25px 0;
     }
 
-    .notification-mobile {
-      @include mobile-only;
-    }
 
     a {
       height: 50px;
@@ -186,6 +187,50 @@
       }
     }
 
+    .notifications-mobile {
+      height: 75px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      
+      .noti-left {
+
+        display: flex;
+        align-items: center;
+        margin-bottom: 2px;
+    
+        .bell-icon {
+          margin: 0 10px 0 22px;
+        }
+
+        .red-number {
+          color: $red;
+          margin: 0 10px;
+        }
+      }
+
+      .icon-open-noti {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+  
+      a {
+        color: $white;
+        font-size: 14px;
+        line-height: 30px;
+      }
+    }
+    .noti-separator {
+      background: $gray-05;
+      width: calc(100% - 46px);
+      height: 1px;
+      align-self: center;
+      padding: 0 $base-unit * 4;
+    }
+
     .menu {
       display: flex;
       flex-direction: column;
@@ -200,8 +245,7 @@
         padding: 0 $base-unit * 4;
       }
 
-      a,
-      .notification-mobile {
+      a {
         color: $gray-90;
         height: 40px;
         display: flex;
@@ -237,7 +281,6 @@
           }
         }
       }
-
     }
   }
 }

src/components/AccountMenu/index.js

@@ -6,6 +6,7 @@ import NotificationButton from '../NotificationButton'
 import NotificationsPopup from '../NotificationsPopup'
 import UserInfo from '../UserInfo'
 import AccountMenu from '../AccountMenu'
+import _ from 'lodash'
 
 const LoginNav = ({
   loggedIn,
@@ -20,7 +21,8 @@ const LoginNav = ({
   authURLs,
   markNotificationAsRead,
   markAllNotificationAsRead,
-  markAllNotificationAsSeen
+  markAllNotificationAsSeen,
+  dismissChallengeNotifications
 }) => {
   const [openNotifications, setOpenNotifications] = useState()
   const [openAccountMenu, setOpenAccountMenu] = useState()
@@ -49,7 +51,7 @@ const LoginNav = ({
         />,
         <UserInfo
           profile={profile}
-          newNotifications={notificationButtonState === 'new'}
+          newNotifications={(notifications && _.countBy(notifications || [], n => !n.isSeen).true > 0) && 'new'}
           onClick={handleClickUserInfo}
           open={openAccountMenu}
           key='user-info'
@@ -60,7 +62,7 @@ const LoginNav = ({
     return (
       <UserInfo
         profile={profile}
-        newNotifications={notificationButtonState === 'new'}
+        newNotifications={(notifications && _.countBy(notifications || [], n => !n.isSeen).true > 0) && 'new'}
         onClick={handleClickUserInfo}
         open={openAccountMenu}
         key='user-info'
@@ -91,6 +93,7 @@ const LoginNav = ({
         }}
         markNotificationAsRead={markNotificationAsRead}
         markAllNotificationAsRead={markAllNotificationAsRead}
+        dismissChallengeNotifications={dismissChallengeNotifications}
       />
       <AccountMenu
         profile={profile}
@@ -122,7 +125,8 @@ LoginNav.propTypes = {
   authURLs: PropTypes.shape(),
   markNotificationAsRead: PropTypes.func.isRequired,
   markAllNotificationAsRead: PropTypes.func.isRequired,
-  markAllNotificationAsSeen: PropTypes.func.isRequired
+  markAllNotificationAsSeen: PropTypes.func.isRequired,
+  dismissChallengeNotifications: PropTypes.func.isRequired
 }
 
 export default LoginNav

src/components/AccountMenu/styles.module.scss

@@ -7,20 +7,12 @@ import styles from './styles.module.scss'
 import _ from 'lodash'
 
 const getNotificationButtonState = (notifications) => {
-  console.log('got')
-  console.log(_.countBy(notifications || [], n => !n.seen))
   if (notifications && _.countBy(notifications || [], n => !n.isSeen).true > 0) {
-    console.log('returing : new')
-
     return 'new'
   }
   if (notifications.length === 0) {
-    console.log('returing : none')
-
     return 'none'
   } else {
-    console.log('returing : seen')
-
     return 'seen'
   }
 }

src/components/LoginNav/index.js

@@ -1,11 +1,12 @@
 @import "../../assets/sass/_global/variables";
+@import "../../assets/sass/_global/utils";
 
 .notificationButton {
+  @include hide-mobile;
   position: relative;
-  width: 30px;
-  height: 30px;
-  padding-top: 3px;
-  padding-left: 7px;
+  width: 36px;
+  height: 36px;
+  padding: 5px;
 
   img {
     display: block;
@@ -37,5 +38,5 @@
    {
     background-color: $gray-hover-profile-icon;
     border-radius: 50%;
-  }  
+  }
 }

src/components/NotificationButton/index.js

@@ -2,27 +2,34 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import styles from './styles.module.scss'
+import NotificationIcon from '../../assets/images/icon-bell.svg'
+import BackArrow from '../../assets/images/left-arrow.svg'
+import NotificationIconBig from '../../assets/images/bell-big.svg'
 
 const EmptyNotifications = ({ onClose, emptyTitle, emptyText }) => (
   <>
     <div className={styles['noti-header']}>
-      <span
-        className={styles['notification-back-btn']}
-        role='button'
-        onClick={onClose}
-      />
-      <span className={styles['left-noti']}>Notifications</span>
-      <div className={styles.rights}>
-        <span className={styles['white-link']} role='button'>Settings</span>
+      <div className={styles['lefts']}>
+        <div
+          className={styles['notification-icon']}
+        >
+          <NotificationIcon />
+        </div>
+        <div
+          className={styles['notification-left-btn-mobile']}
+          role='button'
+          onClick={onClose}
+        >
+          <BackArrow />
+        </div>
+        <span className={styles['noti-title']}>Notifications</span>
       </div>
-      <span className={styles['btn-setting']} role='button' />
+      <span className={cn(styles['noti-empty-title-mobileonly'])}>Notifications</span>
     </div>
-    <div className={cn(styles['noti-body'], styles.center)}>
-      <i className={cn(styles.icons, styles['icon-bell'])} />
-      <h4 className={styles.titles}>{emptyTitle}</h4>
+    <div className={cn(styles['noti-body'], styles['noti-body-empty'], styles.center)}>
+      <NotificationIconBig className={styles['big-icon-bell']} />
+      <div className={styles['empty-title']}>{emptyTitle}</div>
       <div className={cn(styles.txt, styles['center-txt'])}>{emptyText}</div>
-    </div>
-    <div className={styles['noti-footer']}>
       <span className={cn(styles['btn-empty-noti'])} role='button'>
         Notification Settings
       </span>
@@ -34,9 +41,8 @@ EmptyNotifications.defaultProps = {
   emptyTitle: 'Good job! You’re all caught up',
   emptyText: (
     <div>
-      Join challenges and check your notification settings if
-      you don’t receive notifications. We’re actively adding
-      new notifications. Read our <a href='/' className={styles.blueLink}>blog post</a> for more info
+      Join challenges and check your notification settings if you don’t
+      receive notifications. We’re actively adding new notifications.
     </div>
   )
 }