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

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);

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