From a399052a30ebf9376b9ef5308a43c721e4211512 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Thu, 26 Mar 2020 19:43:40 +0200
Subject: [PATCH] feat: Dashboard actions bar styled.

---
 .../components/Accounts/AccountsActionsBar.js | 14 ++-
 .../components/Expenses/ExpensesActionsBar.js | 96 ++++++++++++++-----
 .../Dashboard/Items/ItemsActionsBar.js        | 83 +++++++++-------
 client/src/static/json/icons.js               |  8 ++
 client/src/style/pages/dashboard.scss         | 15 +++
 5 files changed, 152 insertions(+), 64 deletions(-)

diff --git a/client/src/components/Accounts/AccountsActionsBar.js b/client/src/components/Accounts/AccountsActionsBar.js
index b1ee50692..30041d94e 100644
--- a/client/src/components/Accounts/AccountsActionsBar.js
+++ b/client/src/components/Accounts/AccountsActionsBar.js
@@ -3,14 +3,14 @@ import Icon from 'components/Icon';
 import {
   Button,
   NavbarGroup,
-  Navbar,
   Classes,
   NavbarDivider,
   MenuItem,
   Menu,
   Popover,
   PopoverInteractionKind,
-  Position
+  Position,
+  Intent,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
@@ -40,7 +40,7 @@ function AccountsActionsBar({
   const hasBulkActionsSelected = useMemo(() => {
     return Object.keys(bulkActions).length > 0;
   }, [bulkActions]);
-
+ 
   const filterDropdown = FilterDropdown({
     fields: accountsFields,
     onFilterChange,
@@ -70,7 +70,6 @@ function AccountsActionsBar({
           text='New Account'
           onClick={onClickNewAccount}
         />
-
         <Popover
           content={filterDropdown}
           interactionKind={PopoverInteractionKind.CLICK}
@@ -86,7 +85,7 @@ function AccountsActionsBar({
         {hasBulkActionsSelected && (
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash' />}
+            icon={<Icon icon='archive' iconSize={15} />}
             text='Archive'
           />
         )}
@@ -94,17 +93,16 @@ function AccountsActionsBar({
         {hasBulkActionsSelected && (
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash' />}
+            icon={<Icon icon='trash' iconSize={15} />}
             text='Delete'
+            intent={Intent.DANGER}
           />
         )}
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-import' />}
           text='Import'
         />
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-export' />}
diff --git a/client/src/components/Expenses/ExpensesActionsBar.js b/client/src/components/Expenses/ExpensesActionsBar.js
index 5ee338985..049bd4911 100644
--- a/client/src/components/Expenses/ExpensesActionsBar.js
+++ b/client/src/components/Expenses/ExpensesActionsBar.js
@@ -1,32 +1,82 @@
 import React from 'react';
-import { Button, AnchorButton, Classes, Icon } from '@blueprintjs/core';
+import {
+  Button,
+  AnchorButton,
+  Classes,
+  NavbarGroup,
+  Popover,
+  MenuItem,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import { useRouteMatch } from 'react-router-dom'
+import classNames from 'classnames';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import Icon from 'components/Icon';
 
-export default function ExpensesActionsBar() {
+export default function ExpensesActionsBar({
+
+}) {
+  const {path} = useRouteMatch();
   const onClickNewAccount = () => {};
+  const views = [];
 
+  const viewsMenuItems = views.map((view) => {
+    return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
+  });
   return (
-    <div class='dashboard__actions-bar'>
-      <AnchorButton
-        className={Classes.MINIMAL}
-        icon={<Icon icon='plus' />}
-        href='/dashboard/expenses/new'
-        text='New Expense'
-        onClick={onClickNewAccount}
-      />
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Popover
+          content={<Menu>{viewsMenuItems}</Menu>}
+          minimal={true}
+          interactionKind={PopoverInteractionKind.HOVER}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--table-views')}
+            icon={<Icon icon='table' />}
+            text='Table Views'
+            rightIcon={'caret-down'}
+          />
+        </Popover>
 
-      <Button
-        className={Classes.MINIMAL}
-        icon={<Icon icon='plus' />}
-        text='Delete Expense'
-        onClick={onClickNewAccount}
-      />
+        <NavbarDivider />
 
-      <Button
-        className={Classes.MINIMAL}
-        icon={<Icon icon='plus' />}
-        text='Bulk Update'
-        onClick={onClickNewAccount}
-      />
-    </div>
+        <AnchorButton
+          className={Classes.MINIMAL}
+          icon={<Icon icon='plus' />}
+          href='/dashboard/expenses/new'
+          text='New Expense'
+          onClick={onClickNewAccount}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          intent={Intent.DANGER}
+          icon={<Icon icon='plus' />}
+          text='Delete'
+          onClick={onClickNewAccount}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='plus' />}
+          text='Bulk Update'
+          onClick={onClickNewAccount}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-import' />}
+          text='Import'
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-export' />}
+          text='Export'
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
   );
 }
diff --git a/client/src/containers/Dashboard/Items/ItemsActionsBar.js b/client/src/containers/Dashboard/Items/ItemsActionsBar.js
index 9d527b9f9..c21c6439d 100644
--- a/client/src/containers/Dashboard/Items/ItemsActionsBar.js
+++ b/client/src/containers/Dashboard/Items/ItemsActionsBar.js
@@ -1,16 +1,19 @@
 import React, {useMemo} from 'react';
-import {useRouteMatch} from 'react-router-dom'
+import {useRouteMatch, useHistory} from 'react-router-dom'
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { compose } from 'utils';
 import {
   MenuItem,
   Popover,
+  NavbarGroup,
   Menu,
+  NavbarDivider,
   PopoverInteractionKind,
   Position,
   Button,
   Classes,
+  Intent,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import Icon from 'components/Icon';
@@ -27,13 +30,12 @@ const ItemsActionsBar = ({
   bulkSelected,
 }) => {
   const {path} = useRouteMatch();
+  const history = useHistory();
   const viewsMenuItems = views.map((view) => {
     return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
   });
 
-  const onClickNewItem = () => {
-    
-  };
+  const onClickNewItem = () => { history.push('/dashboard/items/new'); };
   const itemsFields = getResourceFields('items');
 
   const filterDropdown = FilterDropdown({
@@ -46,42 +48,57 @@ const ItemsActionsBar = ({
 
   return (
     <DashboardActionsBar>
-      <Popover
-        content={<Menu>{viewsMenuItems}</Menu>}
-        minimal={true}
-        interactionKind={PopoverInteractionKind.HOVER}
-        position={Position.BOTTOM_LEFT}>
-        
-        <Button
-          className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={ <Icon icon="table" /> }
-          text="Table Views"
-          rightIcon={'caret-down'} />
-      </Popover>
+      <NavbarGroup>
+        <Popover
+          content={<Menu>{viewsMenuItems}</Menu>}
+          minimal={true}
+          interactionKind={PopoverInteractionKind.HOVER}
+          position={Position.BOTTOM_LEFT}>
+          
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--table-views')}
+            icon={ <Icon icon="table" /> }
+            text="Table Views"
+            rightIcon={'caret-down'} />
+        </Popover>
 
-      <Popover
-        content={filterDropdown}
-        interactionKind={PopoverInteractionKind.CLICK}
-        position={Position.BOTTOM_LEFT}>
+        <NavbarDivider />
 
-        <Button
-          className={classNames(Classes.MINIMAL, 'button--filter')}
-          text="Filter"
-          icon={ <Icon icon="filter" /> } />
-      </Popover>
+        <Popover
+          content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}>
 
-      <Button
-        className={Classes.MINIMAL}
-        icon={ <Icon icon="plus" /> }
-        text="New Item"
-        onClick={onClickNewItem} />
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text="Filter"
+            icon={ <Icon icon="filter" /> } />
+        </Popover>
 
-      {hasBulkActionsSelected && (
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="trash" />} 
-          text="Delete" />)}
+          icon={ <Icon icon="plus" /> }
+          text="New Item"
+          onClick={onClickNewItem} />
 
+        {hasBulkActionsSelected && (
+          <Button
+            className={Classes.MINIMAL}
+            intent={Intent.DANGER}
+            icon={ <Icon icon="trash" />} 
+            text="Delete" />)}
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-import' />}
+          text='Import'
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-export' />}
+          text='Export'
+        />
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 };
diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js
index 210a27f42..12536ad7b 100644
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -66,5 +66,13 @@ export default {
   "receipt": {
     path: ['M344 288H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zM400.8 5.7L357.3 37 318.7 9.2c-16.8-12.1-39.2-12.1-56.1 0L224 37 185.4 9.2a47.888 47.888 0 0 0-56.1 0L90.7 37 47.2 5.7C27.4-8.5 0 5.6 0 29.9v452.3c0 23.8 27.1 38.6 47.2 24.2L90.7 475l38.6 27.8c16.8 12.1 39.2 12.1 56.1 0L224 475l38.6 27.8c16.8 12.1 39.3 12.1 56.1 0l38.6-27.8 43.5 31.3c19.8 14.2 47.2.1 47.2-24.1V29.9C448 6 420.9-8.7 400.8 5.7zm-.8 440.8l-42.7-30.7-66.7 48-66.7-48-66.7 48-66.7-48L48 446.5v-381l42.7 30.7 66.7-48 66.7 48 66.7-48 66.7 48L400 65.5v381zM344 176H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zz'],
     viewBox: '0 0 448 512',
+  },
+  "trash": {
+    path: ['M432 80h-82.4l-34-56.7A48 48 0 0 0 274.4 0H173.6a48 48 0 0 0-41.2 23.3L98.4 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16l21.2 339a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM173.6 48h100.8l19.2 32H154.4zm173.3 416H101.11l-21-336h287.8z'],
+    viewBox: '0 0 448 512',
+  },
+  "archive": {
+    path: ['M464 32H48C21.5 32 0 53.5 0 80v80c0 8.8 7.2 16 16 16h16v272c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V176h16c8.8 0 16-7.2 16-16V80c0-26.5-21.5-48-48-48zm-32 400H80V176h352v256zm32-304H48V80h416v48zM204 272h104c6.6 0 12-5.4 12-12v-24c0-6.6-5.4-12-12-12H204c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12'],
+    viewBox: '0 0 512 512',
   }
 }
\ No newline at end of file
diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss
index d7cfdd09d..ee27fd513 100644
--- a/client/src/style/pages/dashboard.scss
+++ b/client/src/style/pages/dashboard.scss
@@ -122,12 +122,27 @@
           color: #666;
           margin-right: 7px;
         }
+
+        &.#{$ns}-minimal.#{$ns}-intent-danger{
+          color: #c23030;
+
+          &:hover,
+          &:focus{
+            background: rgba(219, 55, 55, 0.1);
+          }
+        }
       }
 
       .button--table-views{
         .#{$ns}-icon{
           color: #1183DA;
         }
+        .#{$ns}-button-text{
+          margin-right: 3px;
+        }
+        .#{$ns}-icon-caret-down{
+          margin-right: 0;
+        }
       }
     }
   }