From b0d53e4fadff13a443bf5444f8c9d37dd02e5fe6 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Mon, 1 Jun 2020 18:22:29 +0200
Subject: [PATCH] - Re-shape dashboard icons in 16 and 24 grid.

---
 client/src/components/Sidebar/SidebarMenu.js  |  67 +++----
 client/src/config/sidebarMenu.js              |   2 +-
 .../Accounting/ManualJournalActionsBar.js     |  10 +-
 .../Accounting/ManualJournalsDataTable.js     |   2 +-
 .../containers/Accounts/AccountsActionsBar.js |  24 +--
 .../containers/Accounts/AccountsDataTable.js  |   2 +-
 .../ExchangeRates/ExchangeRateActionsBar.js   |  33 ++--
 .../ExchangeRates/ExchangeRateTable.js        |   2 +-
 .../BalanceSheet/BalanceSheetActionsBar.js    |   9 +-
 .../FinancialStatementDateRange.js            |   6 +-
 .../GeneralLedger/GeneralLedgerActionsBar.js  |   9 +-
 .../Journal/JournalActionsBar.js              |   8 +-
 .../ProfitLossSheet/ProfitLossActionsBar.js   |   6 +-
 .../TrialBalanceActionsBar.js                 |   6 +-
 .../containers/Items/ItemCategoriesList.js    |  44 ++---
 .../containers/Items/ItemCategoriesTable.js   | 164 ++++++++++--------
 .../src/containers/Items/ItemsActionsBar.js   |  46 ++---
 .../Items/ItemsCategoryActionsBar.js          |   2 +-
 client/src/containers/Items/ItemsDataTable.js |   6 +-
 client/src/static/json/icons.js               |  85 ++++++---
 client/src/style/components/data-table.scss   |   4 +
 client/src/style/pages/accounts-chart.scss    |   2 +-
 client/src/style/pages/dashboard.scss         |   4 +-
 .../src/style/pages/financial-statements.scss |   4 +-
 client/src/style/views/Sidebar.scss           |  16 +-
 25 files changed, 311 insertions(+), 252 deletions(-)

diff --git a/client/src/components/Sidebar/SidebarMenu.js b/client/src/components/Sidebar/SidebarMenu.js
index 6b0639049..e0d885be8 100644
--- a/client/src/components/Sidebar/SidebarMenu.js
+++ b/client/src/components/Sidebar/SidebarMenu.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Menu, MenuDivider} from "@blueprintjs/core";
-import {useHistory, useLocation} from 'react-router-dom';
+import { Menu, MenuDivider } from '@blueprintjs/core';
+import { useHistory, useLocation } from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
@@ -12,38 +12,45 @@ export default function SidebarMenu() {
 
   const menuItemsMapper = (list) => {
     return list.map((item, index) => {
-      const children = Array.isArray(item.children) ? menuItemsMapper(item.children) : null;
-      const isActive = (item.href && item.href === location.pathname) ||
-        (item.children && item.children.some((c) => c.href === location.pathname));
+      const children = Array.isArray(item.children)
+        ? menuItemsMapper(item.children)
+        : null;
+      const isActive =
+        (item.href && item.href === location.pathname) ||
+        (item.children &&
+          item.children.some((c) => c.href === location.pathname));
 
       const handleItemClick = () => {
-        if (item.href) { history.push(item.href); }
+        if (item.href) {
+          history.push(item.href);
+        }
       };
-      return (
-        (item.divider) ? 
-          <MenuDivider
-            key={index}
-            title={item.title} /> :
-          <MenuItem
-            key={index}
-            active={isActive}
-            icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
-            text={item.text}
-            label={item.label}
-            disabled={item.disabled}
-            children={children}
-            dropdownType={item.dropdownType || 'collapse'}
-            caretIconSize={15}
-            onClick={handleItemClick}
-            callapseActive={!!isActive}
-            itemClassName={classNames({
-              'is-active': isActive,
-              'has-icon': !children && item.icon,
-            })} />
+      return item.spacer ? (
+        <div class="bp3-menu-spacer"></div>
+      ) : item.divider ? (
+        <MenuDivider key={index} title={item.title} />
+      ) : (
+        <MenuItem
+          key={index}
+          active={isActive}
+          icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
+          text={item.text}
+          label={item.label}
+          disabled={item.disabled}
+          children={children}
+          dropdownType={item.dropdownType || 'collapse'}
+          caretIconSize={15}
+          onClick={handleItemClick}
+          callapseActive={!!isActive}
+          itemClassName={classNames({
+            'is-active': isActive,
+            'has-icon': !children && item.icon,
+          })}
+        />
       );
     });
   };
   const items = menuItemsMapper(sidebarMenuList);
-  
-  return (<Menu className="sidebar-menu">{items}</Menu>);
-};
+
+  return <Menu className="sidebar-menu">{items}</Menu>;
+}
diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js
index b5f3b14f4..7ae10e79e 100644
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -35,7 +35,7 @@ export default [
     ],
   },
   {
-    divider: true,
+    spacer: true,
   },
   {
     icon: 'balance-scale',
diff --git a/client/src/containers/Accounting/ManualJournalActionsBar.js b/client/src/containers/Accounting/ManualJournalActionsBar.js
index 43fc278b8..030f6e9da 100644
--- a/client/src/containers/Accounting/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/ManualJournalActionsBar.js
@@ -85,7 +85,7 @@ function ManualJournalActionsBar({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon='table' />}
+            icon={<Icon icon='table-16' iconSize={16} />}
             text={<T id={'table_views'}/>}
             rightIcon={'caret-down'}
           />
@@ -107,14 +107,14 @@ function ManualJournalActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text='Filter'
-            icon={<Icon icon='filter' />}
+            icon={<Icon icon='filter-16' iconSize={16} />}
           />
         </Popover>
 
         <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash' iconSize={15} />}
+            icon={<Icon icon='trash-16' iconSize={16} />}
             text={<T id={'delete'}/>}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
@@ -123,12 +123,12 @@ function ManualJournalActionsBar({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-import' />}
+          icon={<Icon icon='file-import-16' iconSize={16} />}
           text={<T id={'import'}/>}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
+          icon={<Icon icon='file-export-16' iconSize={16} />}
           text={<T id={'export'}/>}
         />
       </NavbarGroup>
diff --git a/client/src/containers/Accounting/ManualJournalsDataTable.js b/client/src/containers/Accounting/ManualJournalsDataTable.js
index 1392e77e7..600e1f323 100644
--- a/client/src/containers/Accounting/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/ManualJournalsDataTable.js
@@ -228,7 +228,7 @@ function ManualJournalsDataTable({
             content={actionMenuList(cell.row.original)}
             position={Position.RIGHT_BOTTOM}
           >
-            <Button icon={<Icon icon="ellipsis-h" />} />
+            <Button icon={<Icon icon='more-h-16' iconSize={16} />} />
           </Popover>
         ),
         className: 'actions',
diff --git a/client/src/containers/Accounts/AccountsActionsBar.js b/client/src/containers/Accounts/AccountsActionsBar.js
index 881060e5e..0efd7819e 100644
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/client/src/containers/Accounts/AccountsActionsBar.js
@@ -102,7 +102,7 @@ onBulkInactive && onBulkInactive(selectedRows.map(r=>r.id))
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon='table' />}
+            icon={<Icon icon='table-16' iconSize={16} />}
             text={<T id={'table_views'}/>}
             rightIcon={'caret-down'}
           />
@@ -125,26 +125,25 @@ onBulkInactive && onBulkInactive(selectedRows.map(r=>r.id))
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
-            icon={ <Icon icon="filter" /> }/>
+            icon={ <Icon icon="filter-16" iconSize={16} /> }/>
         </Popover>
 
         <If condition={hasSelectedRows}>
-       
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='multi-select' iconSize={15} />}
+            icon={<Icon icon='play-16' iconSize={16} />}
             text={<T id={'activate'}/>}
             onClick={handelBulkActivate}
           />
-             <Button
+          <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='archive' iconSize={15} />}
+            icon={<Icon icon='pause-16' iconSize={16} />}
             text={<T id={'inactivate'}/>}
             onClick={handelBulkInactive}
           />
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash' iconSize={15} />}
+            icon={<Icon icon='trash-16' iconSize={16} />}
             text={<T id={'delete'}/>}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
@@ -153,14 +152,19 @@ onBulkInactive && onBulkInactive(selectedRows.map(r=>r.id))
         
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-import' />}
-          text={<T id={'import'}/>}
+          icon={<Icon icon='print-16' iconSize={16} />}
+          text={<T id={'print'}/>}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
+          icon={<Icon icon='file-export-16' iconSize={16} />}
           text={<T id={'export'}/>}
         />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon='file-import-16' iconSize={16} />}
+          text={<T id={'import'}/>}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js
index 51e7a9e82..fe7077dbc 100644
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/client/src/containers/Accounts/AccountsDataTable.js
@@ -160,7 +160,7 @@ function AccountsDataTable({
         <Popover
           content={actionMenuList(cell.row.original)}
           position={Position.RIGHT_TOP}>
-          <Button icon={<Icon icon='ellipsis-h' />} />
+          <Button icon={<Icon icon='more-h-16' iconSize={16} />} />
         </Popover>
       ),
       className: 'actions',
diff --git a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
index 26018a16f..1ef808016 100644
--- a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
@@ -1,6 +1,7 @@
 import React, { useCallback, useState, useMemo } from 'react';
 import {
   NavbarGroup,
+  NavbarDivider,
   Button,
   Classes,
   Intent,
@@ -19,8 +20,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 
 import { compose } from 'utils';
-import { FormattedMessage as T ,useIntl } from 'react-intl';
-
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function ExchangeRateActionsBar({
   // #withDialog.
@@ -28,15 +28,15 @@ function ExchangeRateActionsBar({
 
   // #withResourceDetail
   resourceFields,
-  
+
   // #ownProps
   selectedRows = [],
   onDeleteExchangeRate,
   onFilterChanged,
-  onBulkDelete
+  onBulkDelete,
 }) {
   const [filterCount, setFilterCount] = useState(0);
-const {formatMessage} =useIntl()
+  const { formatMessage } = useIntl();
 
   const onClickNewExchangeRate = () => {
     openDialog('exchangeRate-form', {});
@@ -62,19 +62,21 @@ const {formatMessage} =useIntl()
     selectedRows,
   ]);
 
-  const handelBulkDelete =useCallback(()=>{
-    onBulkDelete && onBulkDelete(selectedRows.map(r=>r.id));
-  },[onBulkDelete,selectedRows])
+  const handelBulkDelete = useCallback(() => {
+    onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
+  }, [onBulkDelete, selectedRows]);
 
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='plus' />}
+          icon={<Icon icon="plus" />}
           text={<T id={'new_exchange_rate'} />}
           onClick={onClickNewExchangeRate}
         />
+        <NavbarDivider />
+
         <Popover
           minimal={true}
           content={filterDropdown}
@@ -87,16 +89,17 @@ const {formatMessage} =useIntl()
               filterCount <= 0 ? (
                 <T id={'filter'} />
               ) : (
-                `${filterCount} ${formatMessage({id:'filters_applied'})}`
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
               )
             }
-            icon={<Icon icon='filter' />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
+
         {hasSelectedRows && (
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash' iconSize={15} />}
+            icon={<Icon icon="trash-16" iconSize={16} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
             onClick={handelBulkDelete}
@@ -104,12 +107,12 @@ const {formatMessage} =useIntl()
         )}
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-import' />}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
           text={<T id={'import'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
       </NavbarGroup>
@@ -128,5 +131,5 @@ export default compose(
   withDialog,
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
-  }))
+  })),
 )(ExchangeRateActionsBar);
diff --git a/client/src/containers/ExchangeRates/ExchangeRateTable.js b/client/src/containers/ExchangeRates/ExchangeRateTable.js
index f044939f2..cd43ed4a6 100644
--- a/client/src/containers/ExchangeRates/ExchangeRateTable.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateTable.js
@@ -83,7 +83,7 @@ function ExchangeRateTable({
           content={actionMenuList(cell.row.original)}
           position={Position.RIGHT_BOTTOM}
         >
-          <Button icon={<Icon icon='ellipsis-h' />} />
+          <Button icon={<Icon icon='more-h-16' iconSize={16} />} />
         </Popover>
       ),
       className: 'actions',
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
index 99e2b4c59..24393c077 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -39,7 +39,7 @@ function BalanceSheetActionsBar({
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon="cog" />}
+          icon={<Icon icon="cog-16" iconSize={16} />}
           text={<T id={'customize_report'} />}
         />
         <NavbarDivider />
@@ -61,7 +61,6 @@ function BalanceSheetActionsBar({
             icon={<Icon icon="arrow-to-bottom" />}
           />
         </If>
-
         <NavbarDivider />
 
         <Popover
@@ -72,18 +71,18 @@ function BalanceSheetActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={<T id={'filter'} />}
-            icon={<Icon icon="filter" />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export" />}
+          icon={<Icon icon='print-16' iconSize={16} />}
           text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export" />}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
       </NavbarGroup>
diff --git a/client/src/containers/FinancialStatements/FinancialStatementDateRange.js b/client/src/containers/FinancialStatements/FinancialStatementDateRange.js
index c4d14df60..c23df8e7e 100644
--- a/client/src/containers/FinancialStatements/FinancialStatementDateRange.js
+++ b/client/src/containers/FinancialStatements/FinancialStatementDateRange.js
@@ -71,7 +71,6 @@ export default function FinancialStatementDateRange({
         <FormGroup
           label={intl.formatMessage({'id': 'from_date'})}
           labelInfo={infoIcon}
-          minimal={true}
           fill={true}
           intent={formik.errors.from_date && Intent.DANGER}>
 
@@ -80,6 +79,7 @@ export default function FinancialStatementDateRange({
             value={formik.values.from_date}
             onChange={handleDateChange('from_date')}
             popoverProps={{ position: Position.BOTTOM }}
+            minimal={true}
             fill={true} />
         </FormGroup>
       </Col>
@@ -87,8 +87,7 @@ export default function FinancialStatementDateRange({
       <Col sm={3}>
         <FormGroup
           label={intl.formatMessage({'id': 'to_date'})}
-          labelInfo={infoIcon}
-          minimal={true}
+          labelInfo={infoIcon}          
           fill={true}
           intent={formik.errors.to_date && Intent.DANGER}>
 
@@ -98,6 +97,7 @@ export default function FinancialStatementDateRange({
             onChange={handleDateChange('to_date')}
             popoverProps={{ position: Position.BOTTOM }}
             fill={true}
+            minimal={true}
             intent={formik.errors.to_date && Intent.DANGER} />
         </FormGroup>
       </Col>
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
index f7077c06a..a6fbe6f76 100644
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
@@ -46,7 +46,7 @@ function GeneralLedgerActionsBar({
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon='cog' />}
+          icon={<Icon icon='cog-16' iconSize={16} />}
           text={<T id={'customize_report'}/>}
         />
 
@@ -69,7 +69,6 @@ function GeneralLedgerActionsBar({
             onClick={handleFilterClick}
           />
         </If>
-
         <NavbarDivider />
 
         <Popover
@@ -80,17 +79,17 @@ function GeneralLedgerActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={<T id={'filter'}/>}
-            icon={ <Icon icon="filter" /> } />
+            icon={<Icon icon="filter-16" iconSize={16} /> } />
         </Popover>
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
+          icon={<Icon icon='print-16' iconSize={16} />}
           text={<T id={'print'}/>}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
+          icon={<Icon icon='file-export-16' iconSize={16} />}
           text={<T id={'export'}/>}
         />
       </NavbarGroup>
diff --git a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
index c66283bf3..544ad3190 100644
--- a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
@@ -42,7 +42,7 @@ function JournalActionsBar({
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon="cog" />}
+          icon={<Icon icon="cog-16" iconSize={16} />}
           text={<T id={'customize_report'} />}
         />
         <NavbarDivider />
@@ -74,18 +74,18 @@ function JournalActionsBar({
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={<T id={'filter'} />}
-            icon={<Icon icon="filter" />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export" />}
+          icon={<Icon icon='print-16' iconSize={16} />}
           text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export" />}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
       </NavbarGroup>
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
index 86c0fd82c..7c18d18bf 100644
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
@@ -29,7 +29,7 @@ function ProfitLossActionsBar({
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon="cog" />}
+          icon={<Icon icon="cog-16" iconSize={16} />}
           text={<T id={'customize_report'} />}
         />
         <NavbarDivider />
@@ -56,12 +56,12 @@ function ProfitLossActionsBar({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export" />}
+          icon={<Icon icon='print-16' iconSize={16} />}
           text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export" />}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
       </NavbarGroup>
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
index 7e546fa0d..936bb66a3 100644
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
@@ -31,7 +31,7 @@ function TrialBalanceActionsBar({
       <NavbarGroup>
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon="cog" />}
+          icon={<Icon icon="cog-16" iconSize={16} />}
           text={<T id={'customize_report'} />}
         />
         <NavbarDivider />
@@ -58,12 +58,12 @@ function TrialBalanceActionsBar({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export" />}
+          icon={<Icon icon='print-16' iconSize={16} />}
           text={<T id={'print'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="file-export" />}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
       </NavbarGroup>
diff --git a/client/src/containers/Items/ItemCategoriesList.js b/client/src/containers/Items/ItemCategoriesList.js
index c3df219e0..47702682d 100644
--- a/client/src/containers/Items/ItemCategoriesList.js
+++ b/client/src/containers/Items/ItemCategoriesList.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback,useMemo } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
@@ -14,7 +14,7 @@ import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
 import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
 
 import withDialog from 'connectors/Dialog.connector';
-import withDashboardActions from 'containers/Dashboard/withDashboard';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
 
 import { compose } from 'utils';
@@ -45,11 +45,11 @@ const ItemCategoryList = ({
     id
       ? changePageTitle(formatMessage({ id: 'edit_category_details' }))
       : changePageTitle(formatMessage({ id: 'category_list' }));
-  }, [id,changePageTitle,formatMessage]);
+  }, [id, changePageTitle, formatMessage]);
 
   const fetchCategories = useQuery(
     ['items-categories-table', filter],
-    (key, query) => requestFetchItemCategories(query)
+    (key, query) => requestFetchItemCategories(query),
   );
 
   const handleFilterChanged = useCallback(() => {}, []);
@@ -59,7 +59,7 @@ const ItemCategoryList = ({
     (itemCategories) => {
       setSelectedRows(itemCategories);
     },
-    [setSelectedRows]
+    [setSelectedRows],
   );
 
   // Handle fetch data of accounts datatable.
@@ -107,7 +107,7 @@ const ItemCategoryList = ({
     (itemsCategoriesIds) => {
       setBulkDelete(itemsCategoriesIds);
     },
-    [setBulkDelete]
+    [setBulkDelete],
   );
 
   // handle confirm itemCategories bulk delete.
@@ -125,22 +125,20 @@ const ItemCategoryList = ({
       .catch((errors) => {
         setBulkDelete(false);
       });
-  }, [requestDeleteBulkItemCategories, bulkDelete,formatMessage]);
-
+  }, [requestDeleteBulkItemCategories, bulkDelete, formatMessage]);
 
   //Handel cancel itemCategories bulk delete.
-  const handleCancelBulkDelete =useCallback(()=>{
-    setBulkDelete(false)
-  },[])
-
-
-    // Calculates the data table selected rows count.
-    const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
+  const handleCancelBulkDelete = useCallback(() => {
+    setBulkDelete(false);
+  }, []);
 
+  // Calculates the data table selected rows count.
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
 
   return (
     <DashboardInsider name={'item-category-list'}>
-      
       <ItemsCategoryActionsBar
         selectedRows={selectedRows}
         onFilterChanged={handleFilterChanged}
@@ -153,13 +151,12 @@ const ItemCategoryList = ({
         onSelectedRowsChange={handleSelectedRowsChange}
         onDeleteCategory={handleDeleteCategory}
         loading={tableLoading}
-        
       />
 
       <Alert
         cancelButtonText={<T id={'cancel'} />}
         confirmButtonText={<T id={'delete'} />}
-        icon='trash'
+        icon="trash"
         intent={Intent.DANGER}
         isOpen={deleteCategory}
         onCancel={handleCancelItemDelete}
@@ -174,8 +171,10 @@ const ItemCategoryList = ({
 
       <Alert
         cancelButtonText={<T id={'cancel'} />}
-        confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
-        icon='trash'
+        confirmButtonText={`${formatMessage({
+          id: 'delete',
+        })} (${selectedRowsCount})`}
+        icon="trash"
         intent={Intent.DANGER}
         isOpen={bulkDelete}
         onCancel={handleCancelBulkDelete}
@@ -183,11 +182,12 @@ const ItemCategoryList = ({
       >
         <p>
           <FormattedHTMLMessage
-            id={'once_delete_these_item_categories_you_will_not_able_restore_them'}
+            id={
+              'once_delete_these_item_categories_you_will_not_able_restore_them'
+            }
           />
         </p>
       </Alert>
-
     </DashboardInsider>
   );
 };
diff --git a/client/src/containers/Items/ItemCategoriesTable.js b/client/src/containers/Items/ItemCategoriesTable.js
index eda8dec87..6c9677b18 100644
--- a/client/src/containers/Items/ItemCategoriesTable.js
+++ b/client/src/containers/Items/ItemCategoriesTable.js
@@ -1,11 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import {
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  Position,
-} from '@blueprintjs/core';
+import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import Icon from 'components/Icon';
@@ -15,7 +9,6 @@ import DataTable from 'components/DataTable';
 
 import withItemCategories from './withItemCategories';
 
-
 const ItemsCategoryList = ({
   // #withItemCategories
   categoriesList,
@@ -26,78 +19,103 @@ const ItemsCategoryList = ({
   onEditCategory,
   onSelectedRowsChange,
 }) => {
-  const {formatMessage} = useIntl();
+  const { formatMessage } = useIntl();
 
-  const handelEditCategory=useCallback((category)=>{onEditCategory(category);},[onEditCategory])
-  const handleDeleteCategory =useCallback((category)=>{onDeleteCategory(category);},[onDeleteCategory])
-  const actionMenuList = useCallback((category) => (
-    <Menu>
-      <MenuItem
-        text={<T id={'edit_category'} />}
-        onClick={() => handelEditCategory(category)} />
-      <MenuItem
-        text={<T id={'delete_category'}/>}
-        onClick={() => handleDeleteCategory(category)}
-      />
-    </Menu>
-  ), [handelEditCategory,handleDeleteCategory]);
-
-
-  const columns = useMemo(() => [
-    {
-      id: 'name',
-      Header: formatMessage({ id:'category_name' }),
-      accessor: 'name',
-      width: 150,
+  const handelEditCategory = useCallback(
+    (category) => {
+      onEditCategory(category);
     },
-    {
-      id: 'description',
-      Header: formatMessage({ id:'description' }),
-      accessor: 'description',
-      className: 'description',
-      width: 150,
+    [onEditCategory],
+  );
+  const handleDeleteCategory = useCallback(
+    (category) => {
+      onDeleteCategory(category);
     },
-    {
-      id: 'count',
-      Header: formatMessage({ id:'count' }),
-      accessor: (r) => r.count || '',
-      className: 'count',
-      width: 50,
+    [onDeleteCategory],
+  );
+  const actionMenuList = useCallback(
+    (category) => (
+      <Menu>
+        <MenuItem
+          text={<T id={'edit_category'} />}
+          onClick={() => handelEditCategory(category)}
+        />
+        <MenuItem
+          text={<T id={'delete_category'} />}
+          onClick={() => handleDeleteCategory(category)}
+        />
+      </Menu>
+    ),
+    [handelEditCategory, handleDeleteCategory],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: formatMessage({ id: 'category_name' }),
+        accessor: 'name',
+        width: 150,
+      },
+      {
+        id: 'description',
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'description',
+        className: 'description',
+        width: 150,
+      },
+      {
+        id: 'count',
+        Header: formatMessage({ id: 'count' }),
+        accessor: (r) => r.count || '',
+        className: 'count',
+        width: 50,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: false,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handelFetchData = useCallback(
+    (...params) => {
+      onFetchData && onFetchData(...params);
     },
-    {
-      id: 'actions',
-      Header: '',
-      Cell: ({ cell }) => (
-        <Popover
-          content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_BOTTOM}
-        >
-          <Button icon={<Icon icon='ellipsis-h' />} />
-        </Popover>
-      ),
-      className: 'actions',
-      width: 50,
-      disableResizing: false
+    [onFetchData],
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
     },
-  ], [actionMenuList,formatMessage]);
-
-  const handelFetchData = useCallback((...params) => {
-    onFetchData && onFetchData(...params);
-  }, [onFetchData]);
-
-  const handleSelectedRowsChange = useCallback((selectedRows) => {
-    onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
-  }, [onSelectedRowsChange]);
-
-  const selectionColumn = useMemo(() => ({
-    minWidth: 42,
-    width: 42,
-    maxWidth: 42,
-  }), []);
+    [onSelectedRowsChange],
+  );
 
+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 42,
+      width: 42,
+      maxWidth: 42,
+    }),
+    [],
+  );
 
   return (
-    <LoadingIndicator mount={false} >
+    <LoadingIndicator mount={false}>
       <DataTable
         noInitialFetch={true}
         columns={columns}
@@ -108,7 +126,7 @@ const ItemsCategoryList = ({
         expandable={true}
         onSelectedRowsChange={handleSelectedRowsChange}
         treeGraph={true}
-        spinnerProps={{size:30}}
+        spinnerProps={{ size: 30 }}
       />
     </LoadingIndicator>
   );
diff --git a/client/src/containers/Items/ItemsActionsBar.js b/client/src/containers/Items/ItemsActionsBar.js
index 1b061c2bd..29d450792 100644
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/client/src/containers/Items/ItemsActionsBar.js
@@ -44,7 +44,6 @@ const ItemsActionsBar = ({
     <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
   ));
 
- 
   const onClickNewItem = useCallback(() => {
     history.push('/items/new');
   }, [history]);
@@ -61,14 +60,13 @@ const ItemsActionsBar = ({
     },
   });
 
-  const onClickNewCategory = useCallback(() => {
-    openDialog('item-form', {});
-  }, [openDialog]);
-  
-  const handleBulkDelete = useCallback(() => {
-    onBulkDelete && onBulkDelete(selectedRows.map(r => r.id));
-  }, [onBulkDelete, selectedRows]);
+  // const onClickNewCategory = useCallback(() => {
+  //   openDialog('item-form', {});
+  // }, [openDialog]);
 
+  const handleBulkDelete = useCallback(() => {
+    onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
+  }, [onBulkDelete, selectedRows]);
 
   return (
     <DashboardActionsBar>
@@ -81,7 +79,7 @@ const ItemsActionsBar = ({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon='table' />}
+            icon={<Icon icon="table-16" iconSize={16} />}
             text={<T id={'table_views'} />}
             rightIcon={'caret-down'}
           />
@@ -91,17 +89,11 @@ const ItemsActionsBar = ({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='plus' />}
+          icon={<Icon icon="plus" />}
           text={<T id={'new_item'} />}
           onClick={onClickNewItem}
         />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon='plus' />}
-          text={<T id={'new_category'} />}
-          onClick={onClickNewCategory}
-        />
+        <NavbarDivider />
 
         <Popover
           content={filterDropdown}
@@ -111,21 +103,19 @@ const ItemsActionsBar = ({
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={
-              filterCount <= 0 ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
-              )
+              filterCount <= 0 ?
+                (<T id={'filter'} />) :
+                (`${filterCount} ${formatMessage({ id: 'filters_applied' })}`)
             }
-            icon={<Icon icon='filter' />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
 
         <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash' iconSize={15} />}
-            text={<T id={'delete'}/>}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
           />
@@ -133,12 +123,12 @@ const ItemsActionsBar = ({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-import' />}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
           text={<T id={'import'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export' />}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
       </NavbarGroup>
@@ -153,5 +143,5 @@ export default compose(
   })),
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
-  }))
+  })),
 )(ItemsActionsBar);
diff --git a/client/src/containers/Items/ItemsCategoryActionsBar.js b/client/src/containers/Items/ItemsCategoryActionsBar.js
index b968ca6e1..149687aac 100644
--- a/client/src/containers/Items/ItemsCategoryActionsBar.js
+++ b/client/src/containers/Items/ItemsCategoryActionsBar.js
@@ -79,7 +79,7 @@ const ItemsCategoryActionsBar = ({
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={ filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
-            icon={<Icon icon='filter' />}
+            icon={<Icon icon='filter-18' iconSize={18} />}
           />
         </Popover>
 
diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js
index 8125f80cb..a16a1981b 100644
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -29,9 +29,7 @@ const ItemsDataTable = ({
   onFetchData,
   onSelectedRowsChange,
 }) => {
-
-  
-  const {formatMessage} = useIntl();
+  const { formatMessage } = useIntl();
   const [initialMount, setInitialMount] = useState(false);
   
   useEffect(() => {
@@ -106,7 +104,7 @@ const ItemsDataTable = ({
         <Popover
           content={actionMenuList(cell.row.original)}
           position={Position.RIGHT_BOTTOM}>
-          <Button icon={<Icon icon="ellipsis-h" />} />
+          <Button icon={<Icon icon='more-h-16' iconSize={16} />} />
         </Popover>
       ),
       className: 'actions',
diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js
index e21c2109c..c7afafba1 100644
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -35,24 +35,6 @@ export default {
     ],
     viewBox: '0 0 384 512',
   },
-  'file-import': {
-    path: [
-      'M497.83 97.98L413.94 14.1c-9-9-21.2-14.1-33.89-14.1H175.99C149.5.1 128 21.6 128 48.09v215.98H12c-6.63 0-12 5.37-12 12v24c0 6.63 5.37 12 12 12h276v48.88c0 10.71 12.97 16.05 20.52 8.45l71.77-72.31c4.95-4.99 4.95-13.04 0-18.03l-71.77-72.31c-7.55-7.6-20.52-2.26-20.52 8.45v48.88H175.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H464v287.95H175.99V360.07H128v103.94c0 26.49 21.5 47.99 47.99 47.99h287.94c26.5 0 48.07-21.5 48.07-47.99V131.97c0-12.69-5.17-24.99-14.17-33.99zm-113.88 30.09V51.99l76.09 76.08h-76.09z',
-    ],
-    viewBox: '0 0 512 512',
-  },
-  'file-export': {
-    path: [
-      'M572.29 279.06l-71.77-72.31c-7.55-7.6-20.52-2.26-20.52 8.45v48.88h-96v-132.1c0-12.7-5.17-25-14.17-33.99L285.94 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h287.94c26.5 0 48.07-21.5 48.07-47.99V360.07h-48v103.94H47.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H336v88.01H172c-6.63 0-12 5.37-12 12v24c0 6.63 5.37 12 12 12h308v48.88c0 10.71 12.97 16.05 20.52 8.45l71.77-72.31c4.95-4.99 4.95-13.04 0-18.03zM255.95 128.07V51.99l76.09 76.08h-76.09z',
-    ],
-    viewBox: '0 0 576 512',
-  },
-  table: {
-    path: [
-      'M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM232 432H54a6 6 0 0 1-6-6V296h184v136zm0-184H48V112h184v136zm226 184H280V296h184v130a6 6 0 0 1-6 6zm6-184H280V112h184v136z',
-    ],
-    viewBox: '0 0 512 512',
-  },
   'arrow-up': {
     path: [
       'M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z',
@@ -95,18 +77,14 @@ export default {
     ],
     viewBox: '0 0 320 512',
   },
-  filter: {
-    path: [
-      'M91,32.1H8c-2.5,0-4.6-2.1-4.6-4.6s2.1-4.6,4.6-4.6H91c2.5,0,4.6,2.1,4.6,4.6S93.5,32.1,91,32.1z M21.9,45.9  h55.3c2.5,0,4.6,2.1,4.6,4.6c0,2.5-2.1,4.6-4.6,4.6H21.9c-2.5,0-4.6-2.1-4.6-4.6C17.2,48,19.3,45.9,21.9,45.9z M35.7,68.9h27.6  c2.5,0,4.6,2.1,4.6,4.6s-2.1,4.6-4.6,4.6H35.7c-2.5,0-4.6-2.1-4.6-4.6S33.1,68.9,35.7,68.9z',
-    ],
-    viewBox: '0 0 91 91',
-  },
+
   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',
@@ -143,11 +121,11 @@ export default {
     ],
     viewBox: '0 0 512 512',
   },
-  cog: {
+  'cog-16': {
     path: [
-      'M452.515 237l31.843-18.382c9.426-5.441 13.996-16.542 11.177-27.054-11.404-42.531-33.842-80.547-64.058-110.797-7.68-7.688-19.575-9.246-28.985-3.811l-31.785 18.358a196.276 196.276 0 0 0-32.899-19.02V39.541a24.016 24.016 0 0 0-17.842-23.206c-41.761-11.107-86.117-11.121-127.93-.001-10.519 2.798-17.844 12.321-17.844 23.206v36.753a196.276 196.276 0 0 0-32.899 19.02l-31.785-18.358c-9.41-5.435-21.305-3.877-28.985 3.811-30.216 30.25-52.654 68.265-64.058 110.797-2.819 10.512 1.751 21.613 11.177 27.054L59.485 237a197.715 197.715 0 0 0 0 37.999l-31.843 18.382c-9.426 5.441-13.996 16.542-11.177 27.054 11.404 42.531 33.842 80.547 64.058 110.797 7.68 7.688 19.575 9.246 28.985 3.811l31.785-18.358a196.202 196.202 0 0 0 32.899 19.019v36.753a24.016 24.016 0 0 0 17.842 23.206c41.761 11.107 86.117 11.122 127.93.001 10.519-2.798 17.844-12.321 17.844-23.206v-36.753a196.34 196.34 0 0 0 32.899-19.019l31.785 18.358c9.41 5.435 21.305 3.877 28.985-3.811 30.216-30.25 52.654-68.266 64.058-110.797 2.819-10.512-1.751-21.613-11.177-27.054L452.515 275c1.22-12.65 1.22-25.35 0-38zm-52.679 63.019l43.819 25.289a200.138 200.138 0 0 1-33.849 58.528l-43.829-25.309c-31.984 27.397-36.659 30.077-76.168 44.029v50.599a200.917 200.917 0 0 1-67.618 0v-50.599c-39.504-13.95-44.196-16.642-76.168-44.029l-43.829 25.309a200.15 200.15 0 0 1-33.849-58.528l43.819-25.289c-7.63-41.299-7.634-46.719 0-88.038l-43.819-25.289c7.85-21.229 19.31-41.049 33.849-58.529l43.829 25.309c31.984-27.397 36.66-30.078 76.168-44.029V58.845a200.917 200.917 0 0 1 67.618 0v50.599c39.504 13.95 44.196 16.642 76.168 44.029l43.829-25.309a200.143 200.143 0 0 1 33.849 58.529l-43.819 25.289c7.631 41.3 7.634 46.718 0 88.037zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 144c-26.468 0-48-21.532-48-48 0-26.467 21.532-48 48-48s48 21.533 48 48c0 26.468-21.532 48-48 48',
+      'M15.19,6.39h-1.85c-0.11-0.37-0.27-0.71-0.45-1.04l1.36-1.36c0.31-0.31,0.31-0.82,0-1.13l-1.13-1.13c-0.31-0.31-0.82-0.31-1.13,0l-1.36,1.36C10.3,2.92,9.96,2.76,9.59,2.65V0.79c0-0.44-0.36-0.8-0.8-0.8h-1.6c-0.44,0-0.8,0.36-0.8,0.8v1.86c-0.39,0.12-0.75,0.28-1.1,0.47l-1.3-1.3c-0.3-0.3-0.79-0.3-1.09,0L1.82,2.91c-0.3,0.3-0.3,0.79,0,1.09l1.3,1.3C2.92,5.64,2.76,6,2.64,6.39H0.79c-0.44,0-0.8,0.36-0.8,0.8v1.6c0,0.44,0.36,0.8,0.8,0.8h1.85c0.11,0.37,0.27,0.71,0.45,1.04l-1.36,1.36c-0.31,0.31-0.31,0.82,0,1.13l1.13,1.13c0.31,0.31,0.82,0.31,1.13,0l1.36-1.36c0.33,0.18,0.67,0.33,1.04,0.44v1.86c0,0.44,0.36,0.8,0.8,0.8h1.6c0.44,0,0.8-0.36,0.8-0.8v-1.86c0.39-0.12,0.75-0.28,1.1-0.47l1.3,1.3c0.3,0.3,0.79,0.3,1.09,0l1.09-1.09c0.3-0.3,0.3-0.79,0-1.09l-1.3-1.3c0.19-0.35,0.36-0.71,0.48-1.1h1.85c0.44,0,0.8-0.36,0.8-0.8v-1.6C15.99,6.75,15.63,6.39,15.19,6.39z M7.99,10.99c-1.66,0-3-1.34-3-3s1.34-3,3-3s3,1.34,3,3S9.65,10.99,7.99,10.99z',
     ],
-    viewBox: '0 0 512 512',
+    viewBox: '0 0 16 16',
   },
   'times-circle': {
     path: [
@@ -209,4 +187,57 @@ export default {
     ],
     viewBox: '0 0 384 512',
   },
+
+  // 16
+  'file-import-16': {
+    path: [
+      'M6,10.41l-3.29,3.3A1.0041,1.0041,0,0,1,1,13a.9655.9655,0,0,1,.3-.71L4.59,9H3A1,1,0,0,1,3,7H7A1.0029,1.0029,0,0,1,8,8v4a1,1,0,0,1-2,0ZM9.8818,0,5.9947-.0147A2.9947,2.9947,0,0,0,3,2.98V4.9929H5V1.9975H9V5.99h4V14H5.0183L4.011,15.0072l-.1248.1249a2.955,2.955,0,0,0,2.1085.8825h6.0106A2.9946,2.9946,0,0,0,15,13.02V5.1182L12.4409,2.5591Z',
+    ],
+    viewBox: '0 0 16 16',
+  },
+  'file-export-16': {
+    path: [
+      'M3,9.5852l3.29-3.294A1.0045,1.0045,0,0,1,8,7a.9627.9627,0,0,1-.3.7087l-3.29,3.284H6A.9982.9982,0,1,1,6,12.989H2a1.002,1.002,0,0,1-1-.9982V7.9981a1,1,0,0,1,2,0ZM9.8818.0146,5.9947,0A2.992,2.992,0,0,0,3,2.9892V4.9984H5v-2.99H9V5.9937h4V13.989H5.0183L4.011,14.9944l-.1248.1246A2.9574,2.9574,0,0,0,5.9947,16h6.0106A2.992,2.992,0,0,0,15,13.0108V5.1234L12.4409,2.569Z',
+    ],
+    viewBox: '0 0 16 16',
+  },
+  'trash-16': {
+    path: [
+      'M2.9,14.2149A1.7915,1.7915,0,0,0,4.6,16h6.8a1.7915,1.7915,0,0,0,1.7-1.7851V4H2.9Z',
+      'M14,1.0645H11L10.1,0H5.9L5,1.0645H2V3H14Z',
+    ],
+    viewBox: '0 0 16 16',
+  },
+  'pause-16': {
+    path: ['M3,13H6V3H3ZM10,3V13h3V3Z'],
+    viewBox: '0 0 16 16',
+  },
+  'filter-16': {
+    path: ['M6,13h4V11H6ZM0,3V5H16V3ZM3,9H13V7H3Z'],
+    viewBox: '0 0 16 16',
+  },
+  'print-16': {
+    path: [
+      'M16,5.12v6H13v4H3v-4H0v-6Zm-4-4H4v3h8Zm-1,8H5v4h6Zm2.54-3a.7109.7109,0,1,0,.021-.0546c-.0207.0108-.0411.0224-.061.0346',
+    ],
+    viewBox: '0 0 16 16',
+  },
+  'play-16': {
+    path: [
+      'M12,8c0-0.35-0.19-0.64-0.46-0.82l0.01-0.02l-6-4L5.54,3.18C5.39,3.08,5.21,3,5,3C4.45,3,4,3.45,4,4v8c0,0.55,0.45,1,1,1c0.21,0,0.39-0.08,0.54-0.18l0.01,0.02l6-4l-0.01-0.02C11.81,8.64,12,8.35,12,8z',
+    ],
+    viewBox: '0 0 16 16',
+  },
+  'more-h-16': {
+    path: [
+      'M2.5,6A1.5,1.5,0,1,0,4,7.5,1.5044,1.5044,0,0,0,2.5,6Zm11,0A1.5,1.5,0,1,0,15,7.5,1.5044,1.5044,0,0,0,13.5,6ZM8,6A1.5,1.5,0,1,0,9.5,7.5,1.5044,1.5044,0,0,0,8,6Z',
+    ],
+    viewBox: '0 0 16 16',
+  },
+  'table-16': {
+    path: [
+      'M0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994zM2 7v1.002C2 8.557 2.452 9 3.01 9h1.98A.999.999 0 0 0 6 8.001V6.999C6 6.443 5.548 6 4.99 6H3.01A.999.999 0 0 0 2 6.999zm5 0v1.002C7 8.557 7.449 9 8.003 9h4.994A.994.994 0 0 0 14 8.001V6.999A.998.998 0 0 0 12.997 6H8.003A.994.994 0 0 0 7 6.999zM2 3c0 .556.452 1 1.01 1h1.98a1 1 0 1 0 0-2H3.01A1 1 0 0 0 2 3zm5 0c0 .556.449 1 1.003 1h4.994A.994.994 0 0 0 14 3c0-.556-.449-1-1.003-1H8.003A.994.994 0 0 0 7 3zm-5 8.999v1.002c0 .556.452.999 1.01.999h1.98A.999.999 0 0 0 6 13.001v-1.002C6 11.443 5.548 11 4.99 11H3.01a.999.999 0 0 0-1.01.999zm5 0v1.002c0 .556.449.999 1.003.999h4.994A.994.994 0 0 0 14 13.001v-1.002A.998.998 0 0 0 12.997 11H8.003A.994.994 0 0 0 7 11.999z',
+    ],
+    viewBox: '0 0 16 16',
+  },
 };
diff --git a/client/src/style/components/data-table.scss b/client/src/style/components/data-table.scss
index b31e9d193..47f7c438b 100644
--- a/client/src/style/components/data-table.scss
+++ b/client/src/style/components/data-table.scss
@@ -134,6 +134,10 @@
         &:focus{
           background-color: #CFDCEE;
         }
+
+        .bp3-icon-more-h-16{
+          margin-top: 2px;
+        }
       }
       .tr.no-results{
         .td{
diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss
index b3ed36c07..93afeca4c 100644
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -23,7 +23,7 @@
           }
         }
         .code{
-          color: #666;
+          color: #333;
         }
         .normal{
           .bp3-popover-wrapper{
diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss
index 5ee4f18e6..410c208b9 100644
--- a/client/src/style/pages/dashboard.scss
+++ b/client/src/style/pages/dashboard.scss
@@ -104,6 +104,8 @@
 
     .#{$ns}-navbar{
       box-shadow: none;
+      padding-left: 12px;
+      padding-right: 12px;
 
       &,
       &-group{
@@ -163,7 +165,7 @@
 
     h1{
       font-size: 26px;
-      font-weight: 200;
+      font-weight: 300;
       color: #4d4c4c;
       margin: 0;
     }
diff --git a/client/src/style/pages/financial-statements.scss b/client/src/style/pages/financial-statements.scss
index ca3e1be5b..bbca9b9a8 100644
--- a/client/src/style/pages/financial-statements.scss
+++ b/client/src/style/pages/financial-statements.scss
@@ -62,9 +62,9 @@
 
   &__title{
     margin: 0;
-    font-weight: 200;
+    font-weight: 300;
     font-size: 22px;
-    color: #222;
+    color: #333;
     text-align: center;
   }
   &__sheet-type{
diff --git a/client/src/style/views/Sidebar.scss b/client/src/style/views/Sidebar.scss
index 1c58b088a..4426f0693 100644
--- a/client/src/style/views/Sidebar.scss
+++ b/client/src/style/views/Sidebar.scss
@@ -1,8 +1,7 @@
 $sidebar-background: #01194e;
 $sidebar-text-color: #fff;
 $sidebar-width: 220px;
-$sidebar-menu-item-color: #b8c0d5;
-
+$sidebar-menu-item-color: #cbd1dd;
 $sidebar-popover-submenu-bg: rgb(1, 20, 62);
 
 .sidebar {
@@ -41,7 +40,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       margin-top: 4px;
 
       svg{
-        opacity: 0.4;
+        opacity: 0.45;
       }
     }
   }
@@ -67,7 +66,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       &:hover,
       &.bp3-active {
         background: #012470;
-        color: #c1c9dd;
+        color: $sidebar-menu-item-color;
       }
       &:focus,
       &:active {
@@ -76,7 +75,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
 
       > .#{$ns}-icon {
         color: #767b9b;
-        margin-right: 14px;
+        margin-right: 16px;
         margin-top: 0;
       }
       > .#{$ns}-icon-caret-right {
@@ -120,10 +119,15 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       color: $sidebar-menu-item-color;
     }
     .#{$ns}-menu-divider {
-      border-top-color: #1d366a;
+      border-top-color: #152a55;
       color: #6b708c;
       margin: 4px 0;
     }
+    .#{$ns}-menu-spacer{
+      margin: 4px 0;
+      height: 1px;
+    }
+
   }
 
   &--mini-sidebar{