BiG-5: Complete, add switch small and medium table row size.

src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -86,10 +86,10 @@ function CustomerActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
-  
+
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('customer', 'tableSize', size);
+    addSetting('custoemrs', 'tableSize', size);
   };
 
   return (
@@ -177,8 +177,8 @@ export default compose(
     accountsInactiveMode: customersTableState.inactiveMode,
     customersFilterConditions: customersTableState.filterRoles,
   })),
-  // withSettings(({  }) => ({
-  //   customersTableSize:
-  // })),
+  withSettings(({ customersSettings }) => ({
+    customersTableSize: customersSettings?.tableSize,
+  })),
   withAlertActions,
 )(CustomerActionsBar);

src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -14,6 +14,7 @@ import withCustomersActions from './withCustomersActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { useCustomersListContext } from './CustomersListProvider';
 import { useMemorizedColumnsWidths } from 'hooks';
@@ -38,6 +39,9 @@ function CustomersTable({
 
   // #withDialogActions
   openDialog,
+
+  // #withSettings
+  customersTableSize,
 }) {
   const history = useHistory();
 
@@ -135,6 +139,7 @@ function CustomersTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={customersTableSize}
         payload={{
           onDelete: handleCustomerDelete,
           onEdit: handleCustomerEdit,
@@ -155,4 +160,7 @@ export default compose(
   withCustomersActions,
   withDrawerActions,
   withCustomers(({ customersTableState }) => ({ customersTableState })),
+  withSettings(({ customersSettings }) => ({
+    customersTableSize: customersSettings?.tableSize,
+  })),
 )(CustomersTable);

src/containers/Customers/CustomersLanding/components.js

@@ -1,17 +1,12 @@
 import React, { useMemo } from 'react';
-import {
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Intent,
-} from '@blueprintjs/core';
+import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
 import clsx from 'classnames';
+
 import intl from 'react-intl-universal';
 
-import { CLASSES } from '../../../common/classes';
-import { Icon, Money, If } from 'components';
-import {  } from 'utils';
-import { safeCallback, firstLettersArgs } from 'utils';
+import { Icon, Money, If, AvaterCell } from 'components';
+
+import { safeCallback } from 'utils';
 
 /**
  * Actions menu.
@@ -69,13 +64,6 @@ export function ActionsMenu({
   );
 }
 
-/**
- * Avatar cell.
- */
-export function AvatarCell(row) {
-  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
-}
-
 /**
  * Phone number accessor.
  */
@@ -99,7 +87,7 @@ export function useCustomersTableColumns() {
       {
         id: 'avatar',
         Header: '',
-        accessor: AvatarCell,
+        Cell: AvaterCell,
         className: 'avatar',
         width: 45,
         disableResizing: true,