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'
-              text={<T id={'search'}/>}
+              icon={<Icon icon={'search-24'} iconSize={20} />}
+              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
-              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' />
+            <NavbarDivider />
           </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();
-  }, [logout, history]);
+    requestLogout();
+  }, []);
 
   const userAvatarDropMenu = useMemo(
     () => (
-      <Menu>
-        <MenuItem icon="graph" text={<T id={'menu'} />} />
-        <MenuItem icon="map" text={<T id={'graph'} />} />
+      <Menu className={'menu--logged-user-dropdown'}>
         <MenuItem
-          icon="th"
-          text={<T id={'table'} />}
-          shouldDismissPopover={false}
-        />
-        <MenuItem
-          icon="zoom-to-fit"
-          text={<T id={'nucleus'} />}
-          disabled={true}
+          multiline={true}
+          className={'menu-item--profile'}
+          text={
+            <div>
+              <div class="person">
+                {user.first_name} {user.last_name}
+              </div>
+              <div class="org">
+                <T id="organization_id" />: {user.tenant_id}
+              </div>
+            </div>
+          }
         />
         <MenuDivider />
         <MenuItem
-          icon="cog"
-          text={<T id={'logout'} />}
-          onClick={onClickLogout}
+          text={<T id={'preferences'} />}
+          onClick={() => history.push('/preferences')}
         />
+        <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) => ({
-  logout: () => dispatch({ type: t.LOGOUT }),
-});
-
-export default connect(null, mapDispatchToProps)(DashboardTopbarUser);
+export default compose(
+  withAuthentication(({ user }) => ({ user })),
+  withAuthenticationActions,
+)(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);