chore: Updated navbar icons

freesewing · Oct 8, 2019 · 522875c · 522875c
1 parent 9741c53
commit 522875c
Showing 1 changed file with 36 additions and 17 deletions.
diff --git a/src/components/app/navbar.js b/src/components/app/navbar.js
@@ -3,6 +3,9 @@ import NavbarBase from '@freesewing/components/Navbar'
 import DarkModeIcon from '@material-ui/icons/Brightness3'
 import LanguageIcon from '@material-ui/icons/Translate'
 import SearchIcon from '@material-ui/icons/Search'
+import AccountIcon from '@material-ui/icons/Face'
+import AddIcon from '@material-ui/icons/AddCircle'
+import PatronIcon from '@material-ui/icons/Favorite'
 import { FormattedMessage } from 'react-intl'
 
 const Navbar = props => {
@@ -25,46 +28,62 @@ const Navbar = props => {
       }
     },
     right: {
-      create: {
+      login: {
         type: 'link',
-        href: '/create',
-        text: [
-          <FormattedMessage id='app.newPattern' values={{pattern: props.app.frontend.intl.formatMessage({id: 'app.pattern'})}} />,
-          <span>&nbsp;✨</span>
-        ]
+        href: '/login',
+        text: 'app.logIn',
+        title: props.app.frontend.intl.formatMessage({id: 'app.logIn'})
       },
-      account: props.app.account.username
-        ? { type: 'link', href: '/account', text: 'app.account' }
-        : { type: 'link', href: '/login', text: 'app.logIn' },
       signup: {
         type: 'link',
         href: '/signup',
-        text: 'app.signUp'
+        text: 'app.signUp',
+        title: props.app.frontend.intl.formatMessage({id: 'app.signUp'})
+      },
+      patrons: {
+        type: 'link',
+        href: '/patrons',
+        text: <PatronIcon className="nav-icon" style={{color: '#e64980'}}/>,
+        title: props.app.frontend.intl.formatMessage({id: 'app.patrons'})
+      },
+      create: {
+        type: 'link',
+        href: '/create',
+        text: <AddIcon className="nav-icon" style={{color: '#40c057'}}/>,
+        title: props.app.frontend.intl.formatMessage({id: 'app.newPattern'}, {pattern: props.app.frontend.intl.formatMessage({id: 'app.pattern'})})
+      },
+      account: {
+        type: 'link',
+        href: '/account',
+        title: props.app.frontend.intl.formatMessage({id: 'app.account' }),
+        text: <AccountIcon className="nav-icon" style={{color: '#74c0fc'}}/>
       },
       search: {
         type: 'link',
         href: '/search',
         text: <SearchIcon className="nav-icon" />,
-        title: 'app.search'
+        title: props.app.frontend.intl.formatMessage({id: 'app.search'})
       },
       language: {
         type: 'link',
         href: '/language',
         text: <LanguageIcon className="nav-icon" />,
-        title: 'account.languageTitle'
+        title: props.app.frontend.intl.formatMessage({id: 'account.languageTitle'})
       },
       theme: {
         type: 'button',
         onClick: props.app.frontend.toggleDarkMode,
-        text: <DarkModeIcon className="nav-icon moon" />,
-        title: 'Toggle dark mode'
+        text: <DarkModeIcon className="nav-icon moon" style={{color: '#ffd43b'}}/>,
+        title: props.app.frontend.intl.formatMessage({id: 'app.darkMode'})
       }
     }
   }
-  if (props.app.account.username) delete navs.right.signup
-  else {
+  if (props.app.account.username) {
+    delete navs.right.login
+    delete navs.right.signup
+  } else {
     delete navs.right.create
-    delete navs.right.logout
+    delete navs.right.account
   }
 
   return <NavbarBase navs={navs} home="/" />