feat(branches& warehouses): fix EmptyStatus.

src/containers/Preferences/Branches/Branches.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
 
 import BranchesDataTable from './BranchesDataTable';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';

src/containers/Preferences/Branches/BranchesDataTable.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { DataTable } from 'components';
+import 'style/pages/Preferences/branchesList.scss';
+
+import { DataTable, Card } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import BranchesEmptyStatus from './BranchesEmptyStatus';
 import { useBranchesTableColumns, ActionsMenu } from './components';
@@ -43,23 +45,27 @@ function BranchesDataTable({
   }
 
   return (
-    <BranchesTable
-      columns={columns}
-      data={branches}
-      loading={isBranchesLoading}
-      headerLoading={isBranchesLoading}
-      progressBarLoading={isBranchesFetching}
-      TableLoadingRenderer={TableSkeletonRows}
-      noInitialFetch={true}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onEdit: handleEditBranch,
-        onDelete: handleDeleteBranch,
-      }}
-    />
+    <BranchesTableCard>
+      <DataTable
+        columns={columns}
+        data={branches}
+        loading={isBranchesLoading}
+        headerLoading={isBranchesLoading}
+        progressBarLoading={isBranchesFetching}
+        TableLoadingRenderer={TableSkeletonRows}
+        noInitialFetch={true}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onEdit: handleEditBranch,
+          onDelete: handleDeleteBranch,
+        }}
+      />
+    </BranchesTableCard>
   );
 }
 
 export default compose(withDialogActions, withAlertActions)(BranchesDataTable);
 
-const BranchesTable = styled(DataTable)``;
+const BranchesTableCard = styled(Card)`
+  padding: 0;
+`;

src/containers/Preferences/Branches/BranchesProvider.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { Card } from 'components';
 import { useBranches } from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
@@ -33,16 +31,10 @@ function BranchesProvider({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_BRANCHES,
       )}
     >
-      <BrachesPreferencesCard>
-        <BranchesContext.Provider value={provider} {...props} />
-      </BrachesPreferencesCard>
+      <BranchesContext.Provider value={provider} {...props} />
     </div>
   );
 }
 
 const useBranchesContext = () => React.useContext(BranchesContext);
 export { BranchesProvider, useBranchesContext };
-
-const BrachesPreferencesCard = styled(Card)`
-  padding: 0;
-`;