Merge pull request #2 from topcoder-platform/develop

latest

Author: PrakashDurlabhji

dist/dev/index.js

@@ -19,6 +19,7 @@ $gray-03: #AAA;
 $gray-02: #E0E0E0;
 $gray-hover-profile-icon: rgba(85, 85, 85, 0.4);
 $gray-neutral-light: #FBFBFB;
+$gray-joining-date: #404041;
 
 $turquoise: #43D7B0;
 $turquoise-dark: #0AB88A;

dist/prod/index.js

@@ -7,6 +7,7 @@ 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 styles from './styles.module.scss'
+import moment from 'moment'
 
 class AccountMenu extends React.Component {
   renderLink (menu, i) {
@@ -57,7 +58,7 @@ class AccountMenu extends React.Component {
               }
               <div className={styles['handle-container']}>
                 <span className={styles['handle']}>@{_.isEmpty(profile) ? '' : profile.handle}</span>
-                <span className={styles['description']}>{_.isEmpty(profile) ? '' : profile.description}</span>
+                <span className={styles['description']}>{_.isEmpty(profile) ? '' : `Member since ${moment(profile.createdAt).format('MMMM, YYYY')}`}</span>
               </div>
             </div>
             <span role='button' className={styles['icon-close']} onClick={onClose}>

src/assets/sass/_global/_variables.scss

@@ -169,7 +169,9 @@
         }
 
         .description {
+          @include Roboto-Regular;
           font-size: 12px;
+          color: $gray-joining-date;
         }
       }
 

src/components/AccountMenu/index.js

@@ -14,6 +14,7 @@ const LoginNav = ({
   accountMenu,
   switchText,
   onSwitch,
+  onMenuOpen,
   showNotification,
   profile,
   authURLs
@@ -23,7 +24,12 @@ const LoginNav = ({
 
   const handleClickNotifications = () => setOpenNotifications(x => !x)
 
-  const handleClickUserInfo = () => setOpenAccountMenu(x => !x)
+  const handleClickUserInfo = () => {
+    if (!openAccountMenu) {
+      onMenuOpen()
+    }
+    setOpenAccountMenu(x => !x)
+  }
 
   const renderLoginPanel = () => {
     if (showNotification) {
@@ -93,6 +99,7 @@ LoginNav.propTypes = {
   notifications: PropTypes.array,
   accountMenu: PropTypes.array,
   onSwitch: PropTypes.func,
+  onMenuOpen: PropTypes.func,
   showNotification: PropTypes.bool,
   profile: PropTypes.shape(),
   switchText: PropTypes.shape(),

src/components/AccountMenu/styles.module.scss

@@ -40,7 +40,9 @@ const TopNav = ({
   logo,
   theme,
   currentLevel1Id,
-  onChangeLevel1Id
+  onChangeLevel1Id,
+  setOpenMore,
+  openMore
 }) => {
   const [cache] = useState({
     refs: {},
@@ -67,7 +69,6 @@ const TopNav = ({
   const [showMobileSubMenu, setShowMobileSubMenu] = useState()
 
   const [moreMenu, setMoreMenu] = useState()
-  const [openMore, setOpenMore] = useState()
 
   const regenerateMoreMenu = () => setMoreMenu([])
 
@@ -122,6 +123,7 @@ const TopNav = ({
   }
 
   const createHandleClickLevel1 = useCallback(menuId => () => {
+    setOpenMore(false)
     setCollapsed(false)
     setActiveLevel1Id(menuId)
     onChangeLevel1Id(menuId)
@@ -151,6 +153,7 @@ const TopNav = ({
   }, [activeLevel1Id, setChosenArrowPos, chosenArrowTick])
 
   const createHandleClickLevel2 = menuId => () => {
+    setOpenMore(false)
     setActiveLevel2Id(menuId)
     setShowLevel3(true)
     setChosenArrowPos(menuId)
@@ -398,7 +401,11 @@ TopNav.propTypes = {
 
   currentLevel1Id: PropTypes.any,
 
-  onChangeLevel1Id: PropTypes.func
+  onChangeLevel1Id: PropTypes.func,
+
+  setOpenMore: PropTypes.func,
+
+  openMore: PropTypes.bool,
 }
 
 export default TopNav