feat: Style the dashboard topbar actions and user dropdown.

client/src/components/Authentication.js

@@ -6,7 +6,6 @@ import { FormattedMessage as T } from 'react-intl';
 import withAuthentication from 'containers/Authentication/withAuthentication';
 import { compose } from 'utils';
 
-
 function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
   const to = { pathname: '/homepage' };
 
@@ -43,4 +42,6 @@ function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
   );
 }
 
-export default compose(withAuthentication)(AuthenticationWrapper);
+export default compose(
+  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
+)(AuthenticationWrapper);

client/src/components/Dashboard/DashboardTopbar.js

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router';
 import {
   Navbar,
   NavbarGroup,
+  NavbarDivider,
   Button,
   Classes,
 } from '@blueprintjs/core';
@@ -93,21 +94,24 @@ function DashboardTopbar({
             <Button
               onClick={() => openGlobalSearch(true)}
               className={Classes.MINIMAL}
-              icon='home'
+              icon={<Icon icon={'search-24'} iconSize={20} />}
-              text={<T id={'search'}/>}
+              text={<T id={'quick_find'}/>}
             />
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon={'plus-24'} iconSize={20} />}
+              text={<T id={'quick_new'}/>}
+            />
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon={'notification-24'} iconSize={20} />}
+            />
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon={'help-24'} iconSize={20} />}
+              text={<T id={'help'} />} />
 
-            <Button
+            <NavbarDivider />
-              className={Classes.MINIMAL}
-              icon='document'
-              text={<T id={'filters'}/>}
-            />
-            <Button
-              className={Classes.MINIMAL}
-              icon='document'
-              text={<T id={'add_order'}/>}
-            />
-            <Button className={Classes.MINIMAL} icon='document' text='More' />
           </NavbarGroup>
         </Navbar>
 

client/src/components/Dashboard/TopbarUser.js

@@ -1,5 +1,4 @@
 import React, { useMemo, useCallback } from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import {
   Menu,
@@ -9,36 +8,42 @@ import {
   Popover,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import t from 'store/types';
 
-function DashboardTopbarUser({ logout }) {
+import withAuthentication from 'containers/Authentication/withAuthentication';
+import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
+
+import { compose, firstLettersArgs } from 'utils';
+
+function DashboardTopbarUser({ requestLogout, user }) {
   const history = useHistory();
 
   const onClickLogout = useCallback(() => {
-    logout();
+    requestLogout();
-  }, [logout, history]);
+  }, []);
 
   const userAvatarDropMenu = useMemo(
     () => (
-      <Menu>
+      <Menu className={'menu--logged-user-dropdown'}>
-        <MenuItem icon="graph" text={<T id={'menu'} />} />
-        <MenuItem icon="map" text={<T id={'graph'} />} />
         <MenuItem
-          icon="th"
+          multiline={true}
-          text={<T id={'table'} />}
+          className={'menu-item--profile'}
-          shouldDismissPopover={false}
+          text={
-        />
+            <div>
-        <MenuItem
+              <div class="person">
-          icon="zoom-to-fit"
+                {user.first_name} {user.last_name}
-          text={<T id={'nucleus'} />}
+              </div>
-          disabled={true}
+              <div class="org">
+                <T id="organization_id" />: {user.tenant_id}
+              </div>
+            </div>
+          }
         />
         <MenuDivider />
         <MenuItem
-          icon="cog"
+          text={<T id={'preferences'} />}
-          text={<T id={'logout'} />}
+          onClick={() => history.push('/preferences')}
-          onClick={onClickLogout}
         />
+        <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
       </Menu>
     ),
     [onClickLogout],
@@ -47,14 +52,15 @@ function DashboardTopbarUser({ logout }) {
   return (
     <Popover content={userAvatarDropMenu}>
       <Button>
-        <div className="user-avatar"></div>
+        <div className="user-text">
+          {firstLettersArgs(user.first_name, user.last_name)}
+        </div>
       </Button>
     </Popover>
   );
 }
 
-const mapDispatchToProps = (dispatch) => ({
+export default compose(
-  logout: () => dispatch({ type: t.LOGOUT }),
+  withAuthentication(({ user }) => ({ user })),
-});
+  withAuthenticationActions,
-
+)(DashboardTopbarUser);
-export default connect(null, mapDispatchToProps)(DashboardTopbarUser);

client/src/components/PrivateRoute.js

@@ -5,15 +5,10 @@ import { Redirect } from 'react-router-dom';
 import withAuthentication from 'containers/Authentication/withAuthentication';
 import { compose } from 'utils';
 
-
+function PrivateRoute({ component: Component, isAuthorized = false, ...rest }) {
-function PrivateRoute({
-  component: Component,
-  isAuthorized = false,
-  ...rest
-}) {
   return (
     <BodyClassName className={''}>
-      {(isAuthorized) ? (
+      {isAuthorized ? (
         <Component />
       ) : (
         <Redirect
@@ -26,4 +21,6 @@ function PrivateRoute({
   );
 }
 
-export default compose(withAuthentication)(PrivateRoute);
+export default compose(
+  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
+)(PrivateRoute);

client/src/containers/Authentication/withAuthentication.js

@@ -1,11 +1,13 @@
 import { isAuthenticated } from 'store/authentication/authentication.reducer'
 import { connect } from 'react-redux';
 
-
+export default (mapState) => {
-const mapStateToProps = (state) => {
+  const mapStateToProps = (state, props) => {
-  return {
+    const mapped = {
-    isAuthorized: isAuthenticated(state),
+      isAuthorized: isAuthenticated(state),
+      user: state.authentication.user,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
   };
-};
+  return connect(mapStateToProps);
-
+};
-export default connect(mapStateToProps);

client/src/containers/Authentication/withAuthenticationActions.js

@@ -7,10 +7,11 @@ import {
   inviteMetaByToken, 
 } from 'store/authentication/authentication.actions';
 import { connect } from 'react-redux';
-
+import t from 'store/types';
 
 const mapDispatchToProps = (dispatch) => ({
   requestLogin: (form) => dispatch(login({ form })),
+  requestLogout: () => dispatch({ type: t.LOGOUT }),
   requestRegister: (form) => dispatch(register({ form })),
   requestSendResetPassword: (email) => dispatch(sendResetPassword({ email })),
   requestResetPassword: (form, token) => dispatch(resetPassword({ form, token })),

client/src/lang/en/index.js

@@ -12,7 +12,7 @@ export default {
     'The email and password you entered did not match our records.',
   field_name_must_be_number: 'field_name_must_be_number',
   name: 'Name',
-  search: 'Search',
+  quick_find: 'Quick find',
   reference: 'Reference',
   date: 'Date',
   description: 'Description',
@@ -401,4 +401,7 @@ export default {
   hide_filter: 'Hide filter',
   show_filter: 'Show filter',
   new_role: 'New Role',
+  quick_new: 'Quick new',
+  help: 'Help',
+  organization_id: 'Orgnization ID',
 };

client/src/static/json/icons.js

@@ -187,6 +187,29 @@ export default {
     ],
     viewBox: '0 0 384 512',
   },
+  'search-24': {
+    path: ['M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'],
+    viewBox: '0 0 24 24',
+  },
+  'plus-24': {
+    path: [
+      'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'
+    ],
+    viewBox: '0 0 24 24',
+  },
+  'notification-24': {
+    path: [
+      'M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z',
+    ],
+    viewBox: '0 0 24 24'
+  },
+  'help-24': {
+    path: [
+      'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47z',
+    ],
+    viewBox: '0 0 24 24',
+  },
+
 
   // 16
   'file-import-16': {

client/src/style/App.scss

@@ -56,6 +56,11 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'views/filter-dropdown';
 @import 'views/sidebar';
 
+
+.App{
+  min-width: 960px;
+}
+
 .#{$ns}-tooltip {
   box-shadow: none;
 }

client/src/style/pages/dashboard.scss

@@ -40,7 +40,7 @@
     &-navbar{
       display: flex;
       align-items: center;
-      margin-right: 18px;
+      margin-right: 4px;
 
       .#{$ns}-button{
         color: #1552C8;
@@ -53,6 +53,7 @@
         }
         .#{$ns}-icon{
           color: #1552C8;
+          margin-right: 5px;
         }
       }
     }
@@ -60,20 +61,26 @@
     &-user{
       display: flex;
       align-items: center;
+      margin-right: 14px;
 
-      .#{$ns}-button{
+      .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
+        padding: 0;
         background-size: contain;
+        background-color: #F6DCFA;
         border-radius: 50%;
-        height: 32px;
+        height: 30px;
-        width: 32px;
+        width: 30px;
-        
+
+        .user-text {
+          font-size: 12px;
+          color: #804f87;
+        }
         &,
         &:hover,
         &:focus{
-          background-color: transparent;
+          background-color: #F6DCFA;
           border: 0;
           box-shadow: none;
-          background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400);
         }
       }
     }
@@ -318,4 +325,16 @@
     0 18px 46px 6px rgba(16, 22, 26, 0.2);
   background-color: #fff;
   width: 500px;
+}
+
+
+.menu--logged-user-dropdown{
+
+  .menu-item--profile{
+
+    .org{
+      font-size: 12px;
+      color: #777;
+    }    
+  }
 }

client/src/style/views/Sidebar.scss

@@ -40,7 +40,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       margin-top: 4px;
 
       svg{
-        opacity: 0.45;
+        opacity: 0.5;
       }
     }
   }

client/src/utils.js

@@ -171,3 +171,14 @@ export const saveFilesInAsync = (files, actionCb, extraTasks) => {
   });
   return PProgress.all(opers);
 }
+
+export const firstLettersArgs = (...args) => {
+  let letters = [];
+
+  args.forEach((word) => {
+    if (typeof word === 'string') {
+      letters.push(word.charAt(0));
+    }
+  });
+  return letters.join('').toUpperCase();
+}