- Re-shape dashboard icons in 16 and 24 grid.

2026-02-17 05:10:31 +00:00 · 2020-06-01 18:22:29 +02:00
parent 2a466ce2da
commit b0d53e4fad
25 changed files with 311 additions and 252 deletions
--- 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>
--- 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',
--- 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>
  );
--- 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',
--- 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);
--- 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',
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
  );
 };
--- 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>
  );
--- 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);
--- 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>

--- 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',