From 2ec7399f8797474033fa3726509101f131524b13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= <flesz3@o2.pl>
Date: Mon, 6 Dec 2021 13:03:41 +0100
Subject: [PATCH] Random fixes part 5 (#1669)

---
 package-lock.json                             |  5 +-
 .../AppDetailsPage/AppDetailsPage.tsx         | 14 +--
 .../TokenCreateDialog/TokenCreateDialog.tsx   |  5 +-
 src/apps/styles.ts                            |  1 +
 .../AttributeValueEditDialog.tsx              |  7 +-
 .../CategoryDeleteDialog.tsx                  |  5 +-
 src/components/ActionDialog/DialogButtons.tsx | 16 +---
 src/components/AppLayout/AppChannelSelect.tsx |  6 ++
 .../AssignAttributeDialog.tsx                 | 12 +--
 .../AssignContainerDialog.tsx                 |  8 +-
 .../AssignProductDialog.tsx                   |  8 +-
 .../AssignVariantDialog.tsx                   |  8 +-
 src/components/Attributes/Attributes.tsx      |  1 -
 src/components/BackButton.tsx                 | 13 +++
 src/components/CardTitle/CardTitle.tsx        |  2 +-
 .../ColumnPicker/ColumnPickerContent.tsx      | 14 ++-
 .../DeletableItem/DeletableItem.tsx           |  2 +-
 .../FilterContent/FilterContentHeader.tsx     |  7 +-
 src/components/Grid/Grid.tsx                  |  3 +
 src/components/ImageUpload/ImageUpload.tsx    |  7 +-
 src/components/Metadata/MetadataCard.tsx      | 89 ++++++++-----------
 src/components/Metadata/styles.ts             | 26 ++++--
 .../MultiAutocompleteSelectField.tsx          |  1 +
 src/components/Navigator/Navigator.tsx        | 11 ++-
 src/components/Navigator/NavigatorInput.tsx   | 32 +++++--
 src/components/Navigator/NavigatorSection.tsx |  7 +-
 .../NavigatorButton/NavigatorButton.tsx       |  2 +-
 src/components/PageHeader/PageHeader.tsx      |  8 +-
 .../SaveFilterTabDialog.tsx                   |  7 +-
 .../SortableChip/SortableHandle.tsx           |  5 +-
 .../SortableTable/SortableHandle.tsx          |  4 +-
 src/components/TableCellAvatar/Avatar.tsx     | 13 +--
 src/components/TableHead/TableHead.tsx        | 22 ++---
 src/configuration/ConfigurationPage.tsx       | 73 +++++----------
 src/configuration/index.tsx                   | 25 +++---
 .../CustomerAddressDialog.tsx                 | 11 +--
 .../DiscountCountrySelectDialog.tsx           |  8 +-
 .../SaleDetailsPage/SaleDetailsPage.tsx       |  4 +-
 .../components/SaleSummary/SaleSummary.tsx    |  7 +-
 .../components/SaleSummary/styles.ts          | 14 +--
 .../components/SaleValue/SaleValue.tsx        |  8 +-
 src/discounts/components/SaleValue/styles.ts  |  3 +
 .../VoucherDetailsPage/VoucherDetailsPage.tsx |  7 +-
 .../VoucherSummary/VoucherSummary.tsx         |  4 +-
 .../components/VoucherSummary/styles.ts       | 14 +--
 src/icons/Attributes.tsx                      | 17 ++--
 src/icons/Channels.tsx                        | 19 ++--
 src/icons/Navigation.tsx                      | 17 ++--
 src/icons/PageTypes.tsx                       | 17 ++--
 src/icons/PermissionGroups.tsx                | 17 ++--
 src/icons/Plugins.tsx                         |  2 +-
 src/icons/ProductTypes.tsx                    |  5 +-
 src/icons/ShippingMethods.tsx                 | 17 ++--
 src/icons/SiteSettings.tsx                    | 13 ++-
 src/icons/StaffMembers.tsx                    | 17 ++--
 src/icons/Taxes.tsx                           | 17 ++--
 src/icons/Warehouses.tsx                      | 17 ++--
 .../MenuCreateDialog/MenuCreateDialog.tsx     |  7 +-
 .../MenuItemDialog/MenuItemDialog.tsx         |  7 +-
 .../components/MenuItems/MenuItems.tsx        |  3 +-
 .../OrderAddressEditDialog.tsx                | 11 +--
 .../OrderCancelDialog/OrderCancelDialog.tsx   |  7 +-
 .../OrderFulfillmentCancelDialog.tsx          | 11 +--
 .../OrderFulfillmentDialog.tsx                | 11 +--
 .../OrderFulfillmentTrackingDialog.tsx        |  7 +-
 .../OrderInvoiceEmailSendDialog.tsx           |  7 +-
 .../OrderPaymentDialog/OrderPaymentDialog.tsx |  7 +-
 .../OrderPaymentVoidDialog.tsx                |  7 +-
 .../OrderProductAddDialog.tsx                 | 11 +--
 .../OrderShippingMethodEditDialog.tsx         | 11 +--
 .../AssignMembersDialog.tsx                   | 11 +--
 .../PluginSecretFieldDialog.tsx               |  7 +-
 .../ProductExportDialog.tsx                   | 14 ++-
 .../ProductExternalMediaDialog.tsx            |  6 +-
 .../ProductStocks/CardAddItemsFooter.tsx      |  1 -
 .../ProductVariantDeleteDialog.tsx            | 12 +--
 .../ProductVariantMediaSelectDialog.tsx       |  8 +-
 .../ShippingMethodProductsAddDialog.tsx       | 11 +--
 .../ShippingZoneAddWarehouseDialog.tsx        | 11 +--
 .../ShippingZoneCountriesAssignDialog.tsx     |  8 +-
 .../ShippingZonePostalCodeRangeDialog.tsx     | 13 +--
 .../ShippingZonesList/ShippingZonesList.tsx   | 16 ++--
 .../StaffAddMemberDialog.tsx                  | 13 +--
 .../StaffPasswordResetDialog.tsx              |  7 +-
 .../configuration/ConfigurationPage.tsx       |  1 -
 85 files changed, 455 insertions(+), 515 deletions(-)
 create mode 100644 src/components/BackButton.tsx

diff --git a/package-lock.json b/package-lock.json
index 6c50426e70a..1e7a3b85388 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4319,9 +4319,8 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.3.0-a.6",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.3.0-a.6.tgz",
-      "integrity": "sha512-LnGsocG5Lk6I8puqhIHIChrBG3gLn76by0OPQXfkOS5AEIjHQpdj0qA4cBO2jfxu0MRYlVZoNJoKH/ykXiC7eg==",
+      "version": "github:saleor/macaw-ui#d6942921dadcccd7d1514ee8330db07cae211360",
+      "from": "github:saleor/macaw-ui#d694292",
       "requires": {
         "clsx": "^1.1.1",
         "lodash": "^4.17.21",
diff --git a/src/apps/components/AppDetailsPage/AppDetailsPage.tsx b/src/apps/components/AppDetailsPage/AppDetailsPage.tsx
index bfba5bc611f..1b46ea55b3a 100644
--- a/src/apps/components/AppDetailsPage/AppDetailsPage.tsx
+++ b/src/apps/components/AppDetailsPage/AppDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Typography } from "@material-ui/core";
+import { ButtonBase, Card, CardContent, Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
@@ -75,8 +75,9 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
                 description="link"
               />
             </ExternalLink>
-            <Button
+            <ButtonBase
               className={classes.headerLinkContainer}
+              disableRipple
               onClick={navigateToAppSettings}
             >
               <SVG src={settingsIcon} />
@@ -85,11 +86,10 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
                 defaultMessage="Edit settings"
                 description="link"
               />
-            </Button>
-            <Button
-              variant="tertiary"
+            </ButtonBase>
+            <ButtonBase
               className={classes.headerLinkContainer}
-              disableFocusRipple
+              disableRipple
               onClick={data.isActive ? onAppDeactivateOpen : onAppActivateOpen}
             >
               <SVG src={activateIcon} />
@@ -104,7 +104,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
                   description="link"
                 />
               )}
-            </Button>
+            </ButtonBase>
           </div>
         ) : (
           <Skeleton />
diff --git a/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx b/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx
index 715103f2267..765d3ddd9f5 100644
--- a/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx
+++ b/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx
@@ -7,6 +7,7 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import CardSpacer from "@saleor/components/CardSpacer";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
@@ -106,9 +107,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
             <DialogActions>
               {step === "form" ? (
                 <>
-                  <Button className={classes.cancel} onClick={onClose}>
-                    <FormattedMessage {...buttonMessages.back} />
-                  </Button>
+                  <BackButton className={classes.cancel} onClick={onClose} />
                   <ConfirmButton
                     data-test="submit"
                     transitionState={confirmButtonState}
diff --git a/src/apps/styles.ts b/src/apps/styles.ts
index 2f0ee17fac7..e55993ec83a 100644
--- a/src/apps/styles.ts
+++ b/src/apps/styles.ts
@@ -87,6 +87,7 @@ export const useStyles = makeStyles(
         fontWeight: 500
       },
       alignItems: "center",
+      color: theme.palette.text.primary,
       display: "flex",
       fontSize: theme.spacing(2),
       fontWeight: 500,
diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
index b5598785a7c..457db2764d2 100644
--- a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
+++ b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
@@ -6,12 +6,13 @@ import {
   TextField
 } from "@material-ui/core";
 import { getAttributeValueErrorMessage } from "@saleor/attributes/errors";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
 import { getFormErrors } from "@saleor/utils/errors";
 import React from "react";
@@ -85,9 +86,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
               />
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 data-test="submit"
                 transitionState={confirmButtonState}
diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
index 19ca7729873..f04376423b9 100644
--- a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
+++ b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
@@ -5,6 +5,7 @@ import {
   DialogContentText,
   DialogTitle
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import { buttonMessages } from "@saleor/intl";
 import { Button, makeStyles } from "@saleor/macaw-ui";
 import React from "react";
@@ -57,9 +58,7 @@ const CategoryDeleteDialog: React.FC<CategoryDeleteDialogProps> = props => {
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <Button
           className={classes.deleteButton}
           variant="primary"
diff --git a/src/components/ActionDialog/DialogButtons.tsx b/src/components/ActionDialog/DialogButtons.tsx
index 12a1c45913d..f852a420a8e 100644
--- a/src/components/ActionDialog/DialogButtons.tsx
+++ b/src/components/ActionDialog/DialogButtons.tsx
@@ -1,9 +1,10 @@
 import { DialogActions } from "@material-ui/core";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
 import ConfirmButton from "../ConfirmButton";
 import { ActionDialogVariant } from "./types";
 
@@ -35,16 +36,7 @@ const DialogButtons: React.FC<DialogButtonsProps> = props => {
   return (
     <DialogActions>
       {children}
-      {showBackButton && (
-        <Button
-          data-test="back"
-          color="text"
-          onClick={onClose}
-          variant="secondary"
-        >
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
-      )}
+      {showBackButton && <BackButton onClick={onClose} />}
       {variant !== "info" && (
         <ConfirmButton
           disabled={disabled}
diff --git a/src/components/AppLayout/AppChannelSelect.tsx b/src/components/AppLayout/AppChannelSelect.tsx
index 023758bc75f..9942438badc 100644
--- a/src/components/AppLayout/AppChannelSelect.tsx
+++ b/src/components/AppLayout/AppChannelSelect.tsx
@@ -8,6 +8,9 @@ import SingleSelectField from "../SingleSelectField";
 
 const useStyles = makeStyles(
   theme => ({
+    input: {
+      height: 40
+    },
     root: {
       "&& fieldset": {
         borderColor: theme.palette.divider
@@ -36,6 +39,9 @@ const AppChannelSelect: React.FC<AppChannelSelectProps> = ({
   return (
     <div className={classes.root}>
       <SingleSelectField
+        InputProps={{
+          className: classes.input
+        }}
         testId="app-channel-select"
         choices={mapNodeToChoice(channels)}
         value={selectedChannelId}
diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
index b47acec7432..a0e220ed0fb 100644
--- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
+++ b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -21,12 +21,7 @@ import useElementScroll, {
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
@@ -34,6 +29,7 @@ import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
 import { messages } from "./messages";
 
 const useStyles = makeStyles(
@@ -219,9 +215,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
           [classes.dropShadow]: !isScrolledToBottom(anchor, position)
         })}
       >
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           transitionState={confirmButtonState}
           type="submit"
diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
index dc30e03a6e2..9690280941a 100644
--- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx
+++ b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
@@ -11,14 +11,14 @@ import {
 } from "@material-ui/core";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { DialogProps, FetchMoreProps, Node } from "@saleor/types";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage } from "react-intl";
 
+import BackButton from "../BackButton";
 import Checkbox from "../Checkbox";
 import ConfirmButton from "../ConfirmButton";
 import { messages } from "./messages";
@@ -162,9 +162,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           transitionState={confirmButtonState}
           type="submit"
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index c85c3a0290f..52811292b37 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -13,8 +13,7 @@ import ConfirmButton from "@saleor/components/ConfirmButton";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
@@ -23,6 +22,7 @@ import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
 import Checkbox from "../Checkbox";
 import { messages } from "./messages";
 import { useStyles } from "./styles";
@@ -163,9 +163,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           data-test="submit"
           transitionState={confirmButtonState}
diff --git a/src/components/AssignVariantDialog/AssignVariantDialog.tsx b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
index fc281a13c20..9b9d89ded29 100644
--- a/src/components/AssignVariantDialog/AssignVariantDialog.tsx
+++ b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
@@ -14,8 +14,7 @@ import Money from "@saleor/components/Money";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import {
   getById,
@@ -31,6 +30,7 @@ import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
 import Checkbox from "../Checkbox";
 import { messages } from "./messages";
 import { useStyles } from "./styles";
@@ -278,9 +278,7 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
         </InfiniteScroll>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           data-test="submit"
           transitionState={confirmButtonState}
diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx
index 8959cffca97..38d78a0337e 100644
--- a/src/components/Attributes/Attributes.tsx
+++ b/src/components/Attributes/Attributes.tsx
@@ -144,7 +144,6 @@ const Attributes: React.FC<AttributesProps> = ({
           </div>
           <IconButton
             variant="secondary"
-            hoverOutline
             className={classes.expansionBarButton}
             onClick={toggleExpansion}
             data-test="attributes-expand"
diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
new file mode 100644
index 00000000000..ccaab711332
--- /dev/null
+++ b/src/components/BackButton.tsx
@@ -0,0 +1,13 @@
+import { buttonMessages } from "@saleor/intl";
+import { Button, ButtonProps } from "@saleor/macaw-ui";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+const BackButton: React.FC<ButtonProps> = props => (
+  <Button data-test="back" variant="secondary" color="text" {...props}>
+    <FormattedMessage {...buttonMessages.back} />
+  </Button>
+);
+
+BackButton.displayName = "BackButton";
+export default BackButton;
diff --git a/src/components/CardTitle/CardTitle.tsx b/src/components/CardTitle/CardTitle.tsx
index 3d91cad8d25..ae0a8bde104 100644
--- a/src/components/CardTitle/CardTitle.tsx
+++ b/src/components/CardTitle/CardTitle.tsx
@@ -19,7 +19,7 @@ const CardTitle: React.FC<CardTitleProps> = ({
   onClick,
   ...rest
 }) => (
-  <CardHeader action={toolbar} title={title} {...rest}>
+  <CardHeader action={toolbar} className={className} title={title} {...rest}>
     {children}
   </CardHeader>
 );
diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx
index dfa5326e56b..1891e349a95 100644
--- a/src/components/ColumnPicker/ColumnPickerContent.tsx
+++ b/src/components/ColumnPicker/ColumnPickerContent.tsx
@@ -56,7 +56,7 @@ const useStyles = makeStyles(
       },
       display: "grid",
       gridColumnGap: theme.spacing(3),
-      gridTemplateColumns: "repeat(3, 1fr)",
+      gridTemplateColumns: "repeat(3, 210px)",
       padding: theme.spacing(2, 3)
     },
     contentContainer: {
@@ -68,6 +68,14 @@ const useStyles = makeStyles(
     dropShadow: {
       boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`
     },
+    label: {
+      "& span": {
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis"
+      },
+      marginRight: 0
+    },
     loadMoreLoaderContainer: {
       alignItems: "center",
       display: "flex",
@@ -141,6 +149,7 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
           <div className={classes.content}>
             {columns.map(column => (
               <ControlledCheckbox
+                className={classes.label}
                 checked={isSelected(
                   column.value,
                   selectedColumns,
@@ -162,13 +171,14 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
         })}
       >
         <div className={classes.actionBar}>
-          <Button color="text" onClick={onReset}>
+          <Button variant="secondary" color="text" onClick={onReset}>
             <FormattedMessage defaultMessage="Reset" description="button" />
           </Button>
           <div>
             <Button
               className={classes.cancelButton}
               color="text"
+              variant="secondary"
               onClick={onCancel}
             >
               <FormattedMessage {...buttonMessages.cancel} />
diff --git a/src/components/DeletableItem/DeletableItem.tsx b/src/components/DeletableItem/DeletableItem.tsx
index b37d59a14b5..317f78da981 100644
--- a/src/components/DeletableItem/DeletableItem.tsx
+++ b/src/components/DeletableItem/DeletableItem.tsx
@@ -10,7 +10,7 @@ const DeletableItem: React.FC<DeletableItemProps> = ({ onDelete, id }) => {
   const handleDelete = () => onDelete(id);
 
   return (
-    <IconButton variant="secondary" hoverOutline onClick={handleDelete}>
+    <IconButton variant="secondary" onClick={handleDelete}>
       <DeleteIcon />
     </IconButton>
   );
diff --git a/src/components/Filter/FilterContent/FilterContentHeader.tsx b/src/components/Filter/FilterContent/FilterContentHeader.tsx
index 8bb9996be44..555e5ba890b 100644
--- a/src/components/Filter/FilterContent/FilterContentHeader.tsx
+++ b/src/components/Filter/FilterContent/FilterContentHeader.tsx
@@ -37,7 +37,12 @@ const FilterContentHeader: React.FC<FilterContentHeaderProps> = ({
         <FormattedMessage defaultMessage="Filters" />
       </Typography>
       <div>
-        <Button data-test="clear" className={classes.clear} onClick={onClear}>
+        <Button
+          data-test="clear"
+          variant="secondary"
+          className={classes.clear}
+          onClick={onClear}
+        >
           <FormattedMessage {...buttonMessages.clear} />
         </Button>
         <Button data-test="submit" variant="primary" type="submit">
diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
index 3750e9bc150..c97f278cc85 100644
--- a/src/components/Grid/Grid.tsx
+++ b/src/components/Grid/Grid.tsx
@@ -18,6 +18,9 @@ const useStyles = makeStyles(
       gridTemplateColumns: "4fr 9fr"
     },
     root: {
+      "& > div": {
+        overflow: "hidden"
+      },
       display: "grid",
       gridColumnGap: theme.spacing(3),
       gridRowGap: theme.spacing(3),
diff --git a/src/components/ImageUpload/ImageUpload.tsx b/src/components/ImageUpload/ImageUpload.tsx
index 32a5089ab30..e6714473a85 100644
--- a/src/components/ImageUpload/ImageUpload.tsx
+++ b/src/components/ImageUpload/ImageUpload.tsx
@@ -1,11 +1,10 @@
 import { Typography } from "@material-ui/core";
 import { fade } from "@material-ui/core/styles/colorManipulator";
-import { makeStyles } from "@saleor/macaw-ui";
+import { ImageIcon, makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import ImageIcon from "../../icons/Image";
 import Dropzone from "../Dropzone";
 
 interface ImageUploadProps {
@@ -41,9 +40,9 @@ const useStyles = makeStyles(
       width: 148
     },
     photosIcon: {
-      height: "64px",
+      height: 32,
       margin: "0 auto",
-      width: "64px"
+      width: 32
     },
     photosIconContainer: {
       padding: theme.spacing(5, 0),
diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx
index def24b53162..07513490061 100644
--- a/src/components/Metadata/MetadataCard.tsx
+++ b/src/components/Metadata/MetadataCard.tsx
@@ -1,4 +1,3 @@
-import emptyMetadata from "@assets/images/empty-metadata.svg";
 import {
   Card,
   CardActions,
@@ -11,12 +10,11 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
-import ToggleIcon from "@material-ui/icons/ArrowDropDown";
 import { FormChange } from "@saleor/hooks/useForm";
-import { Button, DeleteIcon, IconButton } from "@saleor/macaw-ui";
+import { Button, DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui";
 import { MetadataInput } from "@saleor/types/globalTypes";
+import classNames from "classnames";
 import React, { useEffect } from "react";
-import SVG from "react-inlinesvg";
 import { useIntl } from "react-intl";
 import { FormattedMessage } from "react-intl";
 
@@ -61,16 +59,30 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
       data-test-expanded={expanded}
     >
       <CardTitle
+        className={classes.header}
         title={
-          isPrivate
-            ? intl.formatMessage({
-                defaultMessage: "Private Metadata",
-                description: "header"
-              })
-            : intl.formatMessage({
-                defaultMessage: "Metadata",
-                description: "header"
-              })
+          <>
+            {isPrivate
+              ? intl.formatMessage({
+                  defaultMessage: "Private Metadata",
+                  description: "header"
+                })
+              : intl.formatMessage({
+                  defaultMessage: "Metadata",
+                  description: "header"
+                })}
+            <IconButton
+              className={classNames(classes.expandBtn, {
+                [classes.rotate]: expanded
+              })}
+              hoverOutline={false}
+              variant="secondary"
+              data-test="expand"
+              onClick={() => setExpanded(!expanded)}
+            >
+              <ExpandIcon />
+            </IconButton>
+          </>
         }
       />
       {data === undefined ? (
@@ -81,52 +93,28 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
         <>
           <CardContent className={classes.content}>
             {data.length > 0 && (
-              <div className={classes.togglable}>
-                <Typography color="textSecondary" variant="body2">
-                  <FormattedMessage
-                    defaultMessage="{number,plural,one{{number} Field} other{{number} Fields}}"
-                    description="number of metadata fields in model"
-                    values={{
-                      number: data.length
-                    }}
-                  />
-                </Typography>
-                <IconButton
-                  variant="secondary"
-                  hoverOutline
-                  data-test="expand"
-                  onClick={() => setExpanded(!expanded)}
-                >
-                  <ToggleIcon />
-                </IconButton>
-              </div>
+              <Typography color="textSecondary" variant="body2">
+                <FormattedMessage
+                  defaultMessage="{number,plural,one{{number} string} other{{number} strings}}"
+                  description="number of metadata fields in model"
+                  values={{
+                    number: data.length
+                  }}
+                />
+              </Typography>
             )}
           </CardContent>
           {expanded && (
             <>
               {data.length === 0 ? (
-                <div className={classes.emptyContainer}>
-                  <SVG className={classes.emptyImage} src={emptyMetadata} />
-                  <Typography color="textSecondary">
-                    {isPrivate ? (
-                      <FormattedMessage
-                        defaultMessage="There is no private metadata created for this element."
-                        description="empty metadata text"
-                      />
-                    ) : (
-                      <FormattedMessage
-                        defaultMessage="There is no metadata created for this element."
-                        description="empty metadata text"
-                      />
-                    )}
-                  </Typography>
-                  <Typography color="textSecondary">
+                <CardContent className={classes.emptyContainer}>
+                  <Typography variant="body2" color="textSecondary">
                     <FormattedMessage
-                      defaultMessage="Use the button below to add new metadata field"
+                      defaultMessage="No metadata created for this element. Use the button below to add new metadata field."
                       description="empty metadata text"
                     />
                   </Typography>
-                </div>
+                </CardContent>
               ) : (
                 <Table className={classes.table}>
                   <TableHead>
@@ -205,6 +193,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
               )}
               <CardActions className={classes.actions}>
                 <Button
+                  variant="secondary"
                   data-test="addField"
                   onClick={() =>
                     onChange({
diff --git a/src/components/Metadata/styles.ts b/src/components/Metadata/styles.ts
index 7dcaa242612..df7aff0e617 100644
--- a/src/components/Metadata/styles.ts
+++ b/src/components/Metadata/styles.ts
@@ -39,12 +39,21 @@ const useStyles = makeStyles(
         paddingTop: theme.spacing()
       },
       emptyContainer: {
-        paddingBottom: theme.spacing(4),
-        paddingTop: theme.spacing(3),
-        textAlign: "center"
+        paddingBottom: 0,
+        paddingTop: 0
+      },
+      expandBtn: {
+        position: "relative",
+        left: theme.spacing(1),
+        top: -2,
+        transition: theme.transitions.create("transform", {
+          duration: theme.transitions.duration.shorter
+        })
       },
-      emptyImage: {
-        marginBottom: theme.spacing(2)
+      header: {
+        "&&": {
+          paddingBottom: theme.spacing(1)
+        }
       },
       input: {
         padding: theme.spacing(0.5, 2)
@@ -53,12 +62,11 @@ const useStyles = makeStyles(
         padding: `13px 16px`
       },
       table: {
+        marginTop: theme.spacing(2),
         tableLayout: "fixed"
       },
-      togglable: {
-        alignItems: "center",
-        display: "flex",
-        justifyContent: "space-between"
+      rotate: {
+        transform: "rotate(-180deg)"
       }
     };
   },
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
index b374770ac47..5783396fa34 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
@@ -247,6 +247,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
               </Typography>
 
               <IconButton
+                hoverOutline={false}
                 variant="secondary"
                 data-test-id={testId ? `${testId}Remove` : "remove"}
                 className={classes.chipClose}
diff --git a/src/components/Navigator/Navigator.tsx b/src/components/Navigator/Navigator.tsx
index 9764e1b1735..668fceafe08 100644
--- a/src/components/Navigator/Navigator.tsx
+++ b/src/components/Navigator/Navigator.tsx
@@ -1,4 +1,4 @@
-import { Fade, Modal, Paper } from "@material-ui/core";
+import { Divider, Fade, Modal, Paper } from "@material-ui/core";
 import { APP_VERSION } from "@saleor/config";
 import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNotifier from "@saleor/hooks/useNotifier";
@@ -51,7 +51,7 @@ const useStyles = makeStyles(
         height: "auto"
       },
       height: 500,
-      maxWidth: 600,
+      maxWidth: 900,
       outline: 0,
       width: "100%"
     }
@@ -111,6 +111,12 @@ const Navigator: React.FC<NavigatorProps> = ({ visible, setVisibility }) => {
     return () => hotkeys.unbind(navigatorHotkey);
   }, []);
 
+  const hasAnything =
+    hasViews(actions) ||
+    hasActions(actions) ||
+    hasCustomers(actions) ||
+    hasCatalog(actions);
+
   return (
     <Modal
       className={classes.modal}
@@ -150,6 +156,7 @@ const Navigator: React.FC<NavigatorProps> = ({ visible, setVisibility }) => {
                     })}
                     ref={input}
                   />
+                  {hasAnything && <Divider />}
                   {hasViews(actions) && (
                     <NavigatorSection
                       label={intl.formatMessage({
diff --git a/src/components/Navigator/NavigatorInput.tsx b/src/components/Navigator/NavigatorInput.tsx
index 27aa990caef..b3e3bada535 100644
--- a/src/components/Navigator/NavigatorInput.tsx
+++ b/src/components/Navigator/NavigatorInput.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@saleor/macaw-ui";
+import { makeStyles, SearchLargeIcon } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -7,18 +7,25 @@ import { QuickSearchMode } from "./types";
 const useStyles = makeStyles(
   theme => {
     const typography = {
-      color: theme.palette.text.primary,
-      fontSize: 24,
-      lineHeight: 1.33
+      ...theme.typography.body1,
+      color: theme.palette.saleor.main[1],
+      fontWeight: 500,
+      letterSpacing: "0.02rem"
     };
 
     return {
       adornment: {
         ...typography,
+        alignSelf: "center",
         color: theme.palette.text.secondary,
-        paddingRight: theme.spacing(1)
+        marginRight: theme.spacing(1),
+        textAlign: "center",
+        width: 32
       },
       input: {
+        "&::placeholder": {
+          color: theme.palette.saleor.main[3]
+        },
         ...typography,
         background: "transparent",
         border: "none",
@@ -27,9 +34,16 @@ const useStyles = makeStyles(
         width: "100%"
       },
       root: {
-        background: theme.palette.background.default,
+        background: theme.palette.background.paper,
         display: "flex",
-        padding: theme.spacing(2, 3)
+        padding: theme.spacing(2, 3),
+        height: 72
+      },
+      searchIcon: {
+        alignSelf: "center",
+        width: 32,
+        height: 32,
+        marginRight: theme.spacing(1)
       }
     };
   },
@@ -51,7 +65,7 @@ const NavigatorInput = React.forwardRef<HTMLInputElement, NavigatorInputProps>(
 
     return (
       <div className={classes.root}>
-        {mode !== "default" && (
+        {mode !== "default" ? (
           <span className={classes.adornment}>
             {mode === "orders"
               ? "#"
@@ -63,6 +77,8 @@ const NavigatorInput = React.forwardRef<HTMLInputElement, NavigatorInputProps>(
               ? "?"
               : ">"}
           </span>
+        ) : (
+          <SearchLargeIcon className={classes.searchIcon} />
         )}
         <input
           autoFocus
diff --git a/src/components/Navigator/NavigatorSection.tsx b/src/components/Navigator/NavigatorSection.tsx
index 0e46d9fd101..863b8fea647 100644
--- a/src/components/Navigator/NavigatorSection.tsx
+++ b/src/components/Navigator/NavigatorSection.tsx
@@ -3,7 +3,6 @@ import { makeStyles } from "@saleor/macaw-ui";
 import { GetItemPropsOptions } from "downshift";
 import React from "react";
 
-import Hr from "../Hr";
 import { QuickSearchAction } from "./types";
 
 interface NavigatorSectionProps {
@@ -35,8 +34,7 @@ const useStyles = makeStyles(
       "&:last-child": {
         marginBottom: 0
       },
-      margin: theme.spacing(2, 0),
-      padding: theme.spacing(0, 1)
+      margin: theme.spacing(2, 0)
     },
     spacer: {
       flex: 1
@@ -61,12 +59,11 @@ const NavigatorSection: React.FC<NavigatorSectionProps> = props => {
     <div className={classes.root}>
       <Typography
         className={classes.label}
-        variant="body2"
+        variant="caption"
         color="textSecondary"
       >
         {label}
       </Typography>
-      <Hr />
       {items.map((item, itemIndex) => {
         const index = offset + itemIndex;
         const itemProps = getItemProps({
diff --git a/src/components/NavigatorButton/NavigatorButton.tsx b/src/components/NavigatorButton/NavigatorButton.tsx
index 915a0d1acba..023f521b8a6 100644
--- a/src/components/NavigatorButton/NavigatorButton.tsx
+++ b/src/components/NavigatorButton/NavigatorButton.tsx
@@ -60,7 +60,7 @@ const useStyles = makeStyles(
           color: theme.palette.primary.main
         },
         marginRight: theme.spacing(2),
-        width: 48
+        width: 40
       }
     };
   },
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index 916c7ffdb9a..de6792eefbf 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -8,7 +8,7 @@ import Skeleton from "../Skeleton";
 const useStyles = makeStyles(
   theme => ({
     limit: {
-      marginRight: theme.spacing(3)
+      marginRight: theme.spacing(4)
     },
     root: {
       alignItems: "center",
@@ -32,7 +32,9 @@ const useStyles = makeStyles(
       },
       alignSelf: "flex-start",
       flex: 1,
-      fontSize: 24
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
     }
   }),
   { name: "PageHeader" }
@@ -57,7 +59,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
       className={className}
       inline={inline}
       title={
-        <Typography className={classes.title} variant="h5">
+        <Typography className={classes.title} variant="h1">
           {title !== undefined ? title : <Skeleton style={{ width: "10em" }} />}
         </Typography>
       }
diff --git a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
index b4201eb9f42..9708007d81a 100644
--- a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
+++ b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
@@ -6,10 +6,11 @@ import {
   TextField
 } from "@material-ui/core";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import BackButton from "../BackButton";
 import ConfirmButton from "../ConfirmButton";
 import Form from "../Form";
 
@@ -72,9 +73,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
               />
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 transitionState={confirmButtonState}
                 onClick={submit}
diff --git a/src/components/SortableChip/SortableHandle.tsx b/src/components/SortableChip/SortableHandle.tsx
index 27c6bfb177e..e8a4462a787 100644
--- a/src/components/SortableChip/SortableHandle.tsx
+++ b/src/components/SortableChip/SortableHandle.tsx
@@ -1,5 +1,4 @@
-import Draggable from "@saleor/icons/Draggable";
-import { makeStyles } from "@saleor/macaw-ui";
+import { DragIcon, makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
@@ -22,7 +21,7 @@ const SortableHandle = SortableHandleHoc(props => {
   const classes = useStyles(props);
 
   return (
-    <Draggable className={classNames(classes.drag, className)} {...restProps} />
+    <DragIcon className={classNames(classes.drag, className)} {...restProps} />
   );
 });
 
diff --git a/src/components/SortableTable/SortableHandle.tsx b/src/components/SortableTable/SortableHandle.tsx
index 3657a547fe7..98767c891e4 100644
--- a/src/components/SortableTable/SortableHandle.tsx
+++ b/src/components/SortableTable/SortableHandle.tsx
@@ -1,5 +1,5 @@
 import { TableCell } from "@material-ui/core";
-import Draggable from "@saleor/icons/Draggable";
+import { DragIcon } from "@saleor/macaw-ui";
 import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
@@ -23,7 +23,7 @@ const SortableHandle = SortableHandleHoc(() => {
 
   return (
     <TableCell className={classes.columnDrag}>
-      <Draggable />
+      <DragIcon color="primary" />
     </TableCell>
   );
 });
diff --git a/src/components/TableCellAvatar/Avatar.tsx b/src/components/TableCellAvatar/Avatar.tsx
index 87b736b8d12..66531c26c0b 100644
--- a/src/components/TableCellAvatar/Avatar.tsx
+++ b/src/components/TableCellAvatar/Avatar.tsx
@@ -1,11 +1,8 @@
 import { Avatar as MuiAvatar } from "@material-ui/core";
-import Cached from "@material-ui/icons/Cached";
-import { makeStyles } from "@saleor/macaw-ui";
+import { ImageIcon, makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 
-import Image from "../../icons/Image";
-
 export const AVATAR_MARGIN = 40;
 
 const useStyles = makeStyles(
@@ -64,13 +61,9 @@ const Avatar: React.FC<AvatarProps> = ({
       })}
     >
       {badge}
-      {thumbnail === undefined ? (
-        <MuiAvatar className={classNames(classes.avatar, avatarProps)}>
-          <Cached color="primary" />
-        </MuiAvatar>
-      ) : thumbnail === null ? (
+      {!thumbnail ? (
         <MuiAvatar className={classNames(classes.avatar, avatarProps)}>
-          <Image color="primary" />
+          <ImageIcon color="primary" />
         </MuiAvatar>
       ) : (
         <MuiAvatar
diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx
index 22c8131832b..0bc806d2a00 100644
--- a/src/components/TableHead/TableHead.tsx
+++ b/src/components/TableHead/TableHead.tsx
@@ -26,10 +26,7 @@ export interface TableHeadProps extends MuiTableHeadProps {
 const useStyles = makeStyles(
   theme => ({
     cell: {
-      padding: 0
-    },
-    checkboxSelected: {
-      backgroundColor: theme.palette.saleor.active[5]
+      height: 56
     },
     container: {
       alignItems: "center",
@@ -47,7 +44,6 @@ const useStyles = makeStyles(
       }
     },
     root: {
-      backgroundColor: theme.palette.saleor.active[5],
       paddingLeft: 0,
       paddingRight: 24
     },
@@ -57,7 +53,8 @@ const useStyles = makeStyles(
     toolbar: {
       "& > *": {
         marginLeft: theme.spacing(1)
-      }
+      },
+      marginRight: theme.spacing(1.5)
     }
   }),
   { name: "TableHead" }
@@ -88,18 +85,11 @@ const TableHead: React.FC<TableHeadProps> = props => {
   return (
     <MuiTableHead {...muiTableHeadProps}>
       <TableRow>
-        {dragRows && (items === undefined || items.length > 0) && (
-          <TableCell
-            className={classNames({
-              [classes.checkboxSelected]: selected
-            })}
-          />
-        )}
+        {dragRows && (items === undefined || items.length > 0) && <TableCell />}
         {(items === undefined || items.length > 0) && (
           <TableCell
             padding="checkbox"
-            className={classNames({
-              [classes.checkboxSelected]: selected,
+            className={classNames(classes.cell, {
               [classes.dragRows]: dragRows
             })}
           >
@@ -114,7 +104,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
         {selected ? (
           <>
             <TableCell
-              className={classNames(classes.root)}
+              className={classNames(classes.cell, classes.root)}
               colSpan={getColSpan(colSpan, dragRows)}
             >
               <div className={classes.container}>
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index 33e67a2d267..e90ac65ee27 100644
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@@ -1,12 +1,14 @@
-import { Card, CardContent, Typography } from "@material-ui/core";
+import { Typography } from "@material-ui/core";
 import { IconProps } from "@material-ui/core/Icon";
 import { useTheme } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import { User } from "@saleor/fragments/types/User";
 import { sectionNames } from "@saleor/intl";
+import { NavigationCard } from "@saleor/macaw-ui";
 import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
+import { Link } from "react-router-dom";
 
 import { hasAnyPermissions } from "../auth/misc";
 import Container from "../components/Container";
@@ -35,45 +37,22 @@ interface VersionInfo {
 
 const useStyles = makeStyles(
   theme => ({
-    card: {
-      "&:hover": {
-        boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);"
-      },
-      cursor: "pointer",
-      marginBottom: theme.spacing(3),
-      transition: theme.transitions.duration.standard + "ms"
-    },
-    cardContent: {
-      // Overrides Material-UI default theme
-      "&:last-child": {
-        paddingBottom: 16
-      },
-      display: "grid",
-      gridColumnGap: theme.spacing(4),
-      gridTemplateColumns: "48px 1fr"
-    },
-    cardDisabled: {
-      "& $icon, & $sectionTitle, & $sectionDescription": {
-        color: theme.palette.text.disabled
-      },
-      marginBottom: theme.spacing(3)
-    },
     configurationCategory: {
       [theme.breakpoints.down("md")]: {
         gridTemplateColumns: "1fr"
       },
       borderTop: `solid 1px ${theme.palette.divider}`,
       display: "grid",
-      gridColumnGap: theme.spacing(4),
+      gap: theme.spacing(4),
       gridTemplateColumns: "1fr 3fr",
-      paddingTop: theme.spacing(3)
+      padding: theme.spacing(4, 0)
     },
     configurationItem: {
       [theme.breakpoints.down("md")]: {
         gridTemplateColumns: "1fr"
       },
       display: "grid",
-      gridColumnGap: theme.spacing(4),
+      gap: theme.spacing(4),
       gridTemplateColumns: "1fr 1fr"
     },
     configurationLabel: {
@@ -82,6 +61,10 @@ const useStyles = makeStyles(
     header: {
       margin: 0
     },
+    link: {
+      display: "contents",
+      marginBottom: theme.spacing(4)
+    },
     icon: {
       "& path": {
         fill: theme.palette.primary.main
@@ -101,14 +84,12 @@ export interface ConfigurationPageProps {
   menu: MenuSection[];
   user: User;
   versionInfo: VersionInfo;
-  onSectionClick: (sectionName: string) => void;
 }
 
 export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
   const {
     menu: menus,
     user,
-    onSectionClick,
     versionInfo: { dashboardVersion, coreVersion }
   } = props;
   const classes = useStyles(props);
@@ -150,29 +131,17 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
                   hasAnyPermissions(menuItem.permissions, user)
                 )
                 .map((item, itemIndex) => (
-                  <Card
-                    className={item.url ? classes.card : classes.cardDisabled}
-                    onClick={() => onSectionClick(item.url)}
-                    key={itemIndex}
-                    data-test="settingsSubsection"
-                    data-testid={item.title.toLowerCase()}
-                    data-test-id={item.testId}
-                  >
-                    <CardContent className={classes.cardContent}>
-                      <div className={classes.icon}>{item.icon}</div>
-                      <div>
-                        <Typography
-                          className={classes.sectionTitle}
-                          color="primary"
-                        >
-                          {item.title}
-                        </Typography>
-                        <Typography className={classes.sectionDescription}>
-                          {item.description}
-                        </Typography>
-                      </div>
-                    </CardContent>
-                  </Card>
+                  <Link className={classes.link} to={item.url}>
+                    <NavigationCard
+                      key={itemIndex}
+                      icon={item.icon}
+                      title={item.title}
+                      description={item.description}
+                      data-test="settingsSubsection"
+                      data-testid={item.title.toLowerCase()}
+                      data-test-id={item.testId}
+                    />
+                  </Link>
                 ))}
             </div>
           </div>
diff --git a/src/configuration/index.tsx b/src/configuration/index.tsx
index 8cf275e34be..0758298c15a 100644
--- a/src/configuration/index.tsx
+++ b/src/configuration/index.tsx
@@ -3,7 +3,6 @@ import { useUser } from "@saleor/auth";
 import { channelsListUrl } from "@saleor/channels/urls";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import { APP_VERSION as dashboardVersion } from "@saleor/config";
-import useNavigator from "@saleor/hooks/useNavigator";
 import useShop from "@saleor/hooks/useShop";
 import Attributes from "@saleor/icons/Attributes";
 import Channels from "@saleor/icons/Channels";
@@ -47,7 +46,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Determine attributes used to create product types",
             id: "configurationMenuAttributes"
           }),
-          icon: <Attributes fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <Attributes />,
           permissions: [
             PermissionEnum.MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES,
             PermissionEnum.MANAGE_PAGE_TYPES_AND_ATTRIBUTES
@@ -61,7 +60,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Define types of products you sell",
             id: "configurationMenuProductTypes"
           }),
-          icon: <ProductTypes fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <ProductTypes />,
           permissions: [PermissionEnum.MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES],
           title: intl.formatMessage(sectionNames.productTypes),
           url: productTypeListUrl(),
@@ -79,7 +78,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Manage how your store charges tax",
             id: "configurationMenuTaxes"
           }),
-          icon: <Taxes fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <Taxes />,
           permissions: [PermissionEnum.MANAGE_SETTINGS],
           title: intl.formatMessage(sectionNames.taxes),
           url: taxSection,
@@ -97,7 +96,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Manage your employees and their permissions",
             id: "configurationMenuStaff"
           }),
-          icon: <StaffMembers fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <StaffMembers />,
           permissions: [PermissionEnum.MANAGE_STAFF],
           title: intl.formatMessage(sectionNames.staff),
           url: staffListUrl(),
@@ -109,7 +108,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
               "Manage your permission groups and their permissions",
             id: "configurationMenuPermissionGroups"
           }),
-          icon: <PermissionGroups fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <PermissionGroups />,
           permissions: [PermissionEnum.MANAGE_STAFF],
           title: intl.formatMessage(sectionNames.permissionGroups),
           url: permissionGroupListUrl(),
@@ -127,7 +126,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Manage how you ship out orders",
             id: "configurationMenuShipping"
           }),
-          icon: <ShippingMethods fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <ShippingMethods />,
           permissions: [PermissionEnum.MANAGE_SHIPPING],
           title: intl.formatMessage(sectionNames.shipping),
           url: shippingZonesListUrl(),
@@ -138,7 +137,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Manage and update your warehouse information",
             id: "configurationMenuWarehouses"
           }),
-          icon: <Warehouses fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <Warehouses />,
           permissions: [PermissionEnum.MANAGE_PRODUCTS],
           title: intl.formatMessage(sectionNames.warehouses),
           url: warehouseSection,
@@ -156,7 +155,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Define and manage your sales channels",
             id: "configurationMenuChannels"
           }),
-          icon: <Channels fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <Channels />,
           permissions: [PermissionEnum.MANAGE_CHANNELS],
           title: intl.formatMessage(sectionNames.channels),
           url: channelsListUrl(),
@@ -174,7 +173,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Define types of content pages used in your store",
             id: "configurationMenuPageTypes"
           }),
-          icon: <PageTypes fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <PageTypes />,
           permissions: [
             PermissionEnum.MANAGE_PAGES,
             PermissionEnum.MANAGE_PAGE_TYPES_AND_ATTRIBUTES
@@ -195,7 +194,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "Define how users can navigate through your store",
             id: "configurationMenuNavigation"
           }),
-          icon: <Navigation fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <Navigation />,
           permissions: [PermissionEnum.MANAGE_MENUS],
           title: intl.formatMessage(sectionNames.navigation),
           url: menuListUrl(),
@@ -206,7 +205,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
             defaultMessage: "View and update your site settings",
             id: "configurationMenuSiteSettings"
           }),
-          icon: <SiteSettings fontSize="inherit" viewBox="0 0 44 44" />,
+          icon: <SiteSettings />,
           permissions: [PermissionEnum.MANAGE_SETTINGS],
           title: intl.formatMessage(sectionNames.siteSettings),
           url: siteSettingsUrl(),
@@ -243,7 +242,6 @@ export const ConfigurationSection: React.FC = () => {
     coreVersion
   };
 
-  const navigate = useNavigator();
   const user = useUser();
   const intl = useIntl();
 
@@ -253,7 +251,6 @@ export const ConfigurationSection: React.FC = () => {
       <ConfigurationPage
         menu={createConfigurationMenu(intl)}
         user={maybe(() => user.user)}
-        onSectionClick={navigate}
         versionInfo={versions}
       />
     </>
diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
index 820e6e6b75a..ac94dd9e1e7 100644
--- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
+++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
@@ -5,6 +5,7 @@ import {
   DialogTitle
 } from "@material-ui/core";
 import AddressEdit from "@saleor/components/AddressEdit";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
@@ -13,11 +14,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { mapCountriesToChoices } from "@saleor/utils/maps";
@@ -128,9 +125,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
                 />
               </DialogContent>
               <DialogActions>
-                <Button onClick={onClose}>
-                  <FormattedMessage {...buttonMessages.back} />
-                </Button>
+                <BackButton onClick={onClose} />
                 <ConfirmButton
                   transitionState={confirmButtonState}
                   type="submit"
diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
index 9f14d33766f..aabffac84af 100644
--- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
+++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
@@ -9,6 +9,7 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import Checkbox from "@saleor/components/Checkbox";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
@@ -16,8 +17,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
-import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { filter } from "fuzzaldrin";
 import React from "react";
@@ -157,9 +157,7 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
                 </ResponsiveTable>
               </DialogContent>
               <DialogActions>
-                <Button onClick={onClose}>
-                  <FormattedMessage {...buttonMessages.back} />
-                </Button>
+                <BackButton onClick={onClose} />
                 <ConfirmButton
                   transitionState={confirmButtonState}
                   type="submit"
diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
index 853db731b31..61abad3c8b5 100644
--- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
+++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
@@ -33,7 +33,6 @@ import DiscountProducts from "../DiscountProducts";
 import DiscountVariants from "../DiscountVariants";
 import SaleInfo from "../SaleInfo";
 import SaleSummary from "../SaleSummary";
-import { useStyles } from "../SaleSummary/styles";
 import SaleType from "../SaleType";
 import SaleValue from "../SaleValue";
 
@@ -141,7 +140,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
   toggleAll
 }) => {
   const intl = useIntl();
-  const classes = useStyles();
   const {
     makeChangeHandler: makeMetadataChangeHandler
   } = useMetadataChangeTrigger();
@@ -177,7 +175,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
             <Backlink onClick={onBack}>
               {intl.formatMessage(sectionNames.sales)}
             </Backlink>
-            <PageHeader className={classes.wrapAnywhere} title={sale?.name} />
+            <PageHeader title={sale?.name} />
             <Grid>
               <div>
                 <SaleInfo
diff --git a/src/discounts/components/SaleSummary/SaleSummary.tsx b/src/discounts/components/SaleSummary/SaleSummary.tsx
index b470255e9dd..e1579f685a0 100644
--- a/src/discounts/components/SaleSummary/SaleSummary.tsx
+++ b/src/discounts/components/SaleSummary/SaleSummary.tsx
@@ -15,7 +15,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { maybe } from "../../../misc";
 import { SaleType } from "../../../types/globalTypes";
 import { SaleDetails_sale } from "../../types/SaleDetails";
-import { useStyles } from "./styles";
+import useStyles from "./styles";
+
 export interface SaleSummaryProps extends ChannelProps {
   sale: SaleDetails_sale;
 }
@@ -24,8 +25,8 @@ const SaleSummary: React.FC<SaleSummaryProps> = ({
   selectedChannelId,
   sale
 }) => {
-  const intl = useIntl();
   const classes = useStyles();
+  const intl = useIntl();
 
   const channel = sale?.channelListings?.find(
     listing => listing.channel.id === selectedChannelId
@@ -37,7 +38,7 @@ const SaleSummary: React.FC<SaleSummaryProps> = ({
         <Typography variant="caption">
           <FormattedMessage defaultMessage="Name" description="sale name" />
         </Typography>
-        <Typography className={classes.wrapAnywhere}>
+        <Typography className={classes.ellipsis}>
           {maybe<React.ReactNode>(() => sale.name, <Skeleton />)}
         </Typography>
         <FormSpacer />
diff --git a/src/discounts/components/SaleSummary/styles.ts b/src/discounts/components/SaleSummary/styles.ts
index a8e97277a8d..155970a9680 100644
--- a/src/discounts/components/SaleSummary/styles.ts
+++ b/src/discounts/components/SaleSummary/styles.ts
@@ -1,10 +1,14 @@
 import { makeStyles } from "@saleor/macaw-ui";
 
-export const useStyles = makeStyles(
-  () => ({
-    wrapAnywhere: {
-      overflowWrap: "anywhere"
+const useStyles = makeStyles(
+  {
+    ellipsis: {
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
     }
-  }),
+  },
   { name: "SaleSummary" }
 );
+
+export default useStyles;
diff --git a/src/discounts/components/SaleValue/SaleValue.tsx b/src/discounts/components/SaleValue/SaleValue.tsx
index ac3f0a88d16..37c27d49ccc 100644
--- a/src/discounts/components/SaleValue/SaleValue.tsx
+++ b/src/discounts/components/SaleValue/SaleValue.tsx
@@ -3,13 +3,13 @@ import {
   CardContent,
   TableBody,
   TableCell,
+  TableHead,
   TableRow,
   Typography
 } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
-import TableHead from "@saleor/components/TableHead";
 import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment";
 import { renderCollection } from "@saleor/misc";
 import { getFormErrors } from "@saleor/utils/errors";
@@ -59,7 +59,11 @@ const SaleValue: React.FC<SaleValueProps> = ({
         </Typography>
       </CardContent>
       <ResponsiveTable className={classes.table}>
-        <TableHead colSpan={numberOfColumns} disabled={disabled} items={[]}>
+        <colgroup>
+          <col />
+          <col className={classes.colValue} />
+        </colgroup>
+        <TableHead>
           <TableCell className={classes.colName}>
             <span>
               <FormattedMessage
diff --git a/src/discounts/components/SaleValue/styles.ts b/src/discounts/components/SaleValue/styles.ts
index a10fe4b522f..2c5d41c7834 100644
--- a/src/discounts/components/SaleValue/styles.ts
+++ b/src/discounts/components/SaleValue/styles.ts
@@ -7,6 +7,9 @@ export const useStyles = makeStyles(
         paddingBottom: 0
       }
     },
+    colValue: {
+      width: 300
+    },
     colName: {
       fontSize: 14,
       paddingLeft: 0,
diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
index 98d8835a669..03850337776 100644
--- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
+++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
@@ -42,7 +42,6 @@ import VoucherInfo from "../VoucherInfo";
 import VoucherLimits from "../VoucherLimits";
 import VoucherRequirements from "../VoucherRequirements";
 import VoucherSummary from "../VoucherSummary";
-import { useStyles } from "../VoucherSummary/styles";
 import VoucherTypes from "../VoucherTypes";
 import VoucherValue from "../VoucherValue";
 
@@ -147,7 +146,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   productListToolbar
 }) => {
   const intl = useIntl();
-  const classes = useStyles();
   const {
     makeChangeHandler: makeMetadataChangeHandler
   } = useMetadataChangeTrigger();
@@ -220,10 +218,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
             <Backlink onClick={onBack}>
               {intl.formatMessage(sectionNames.vouchers)}
             </Backlink>
-            <PageHeader
-              className={classes.wrapAnywhere}
-              title={voucher?.code}
-            />
+            <PageHeader title={voucher?.code} />
             <Grid>
               <div>
                 <VoucherInfo
diff --git a/src/discounts/components/VoucherSummary/VoucherSummary.tsx b/src/discounts/components/VoucherSummary/VoucherSummary.tsx
index 583c0f21339..e9fa57c26db 100644
--- a/src/discounts/components/VoucherSummary/VoucherSummary.tsx
+++ b/src/discounts/components/VoucherSummary/VoucherSummary.tsx
@@ -16,7 +16,7 @@ import { maybe } from "../../../misc";
 import { DiscountValueTypeEnum } from "../../../types/globalTypes";
 import { translateVoucherTypes } from "../../translations";
 import { VoucherDetails_voucher } from "../../types/VoucherDetails";
-import { useStyles } from "./styles";
+import useStyles from "./styles";
 
 export interface VoucherSummaryProps extends ChannelProps {
   voucher: VoucherDetails_voucher;
@@ -41,7 +41,7 @@ const VoucherSummary: React.FC<VoucherSummaryProps> = ({
         <Typography variant="caption">
           <FormattedMessage defaultMessage="Code" description="voucher code" />
         </Typography>
-        <Typography className={classes.wrapAnywhere}>
+        <Typography className={classes.ellipsis}>
           {maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
         </Typography>
         <FormSpacer />
diff --git a/src/discounts/components/VoucherSummary/styles.ts b/src/discounts/components/VoucherSummary/styles.ts
index d58c6c98cd4..9ef75fbb97c 100644
--- a/src/discounts/components/VoucherSummary/styles.ts
+++ b/src/discounts/components/VoucherSummary/styles.ts
@@ -1,10 +1,14 @@
 import { makeStyles } from "@saleor/macaw-ui";
 
-export const useStyles = makeStyles(
-  () => ({
-    wrapAnywhere: {
-      overflowWrap: "anywhere"
+const useStyles = makeStyles(
+  {
+    ellipsis: {
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
     }
-  }),
+  },
   { name: "VoucherSummary" }
 );
+
+export default useStyles;
diff --git a/src/icons/Attributes.tsx b/src/icons/Attributes.tsx
index c1438635734..bd222e25766 100644
--- a/src/icons/Attributes.tsx
+++ b/src/icons/Attributes.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const Attributes = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M37.9487 10.4808C37.9487 14.4459 34.7343 17.6603 30.7692 17.6603C26.8041 17.6603 23.5897 14.4459 23.5897 10.4808C23.5897 6.51565 26.8041 3.30128 30.7692 3.30128C34.7343 3.30128 37.9487 6.51565 37.9487 10.4808ZM40 10.4808C40 15.5788 35.8672 19.7115 30.7692 19.7115C25.6712 19.7115 21.5385 15.5788 21.5385 10.4808C21.5385 5.38275 25.6712 1.25 30.7692 1.25C35.8672 1.25 40 5.38275 40 10.4808ZM16.4103 9.45484H2.05128V23.8138H16.4103V9.45484ZM0 7.40356V25.8651H18.4615V7.40356H0ZM24.6154 20.7371L13.9566 39.1987H35.2741L24.6154 20.7371ZM24.6154 24.8397L17.5095 37.1474H31.7212L24.6154 24.8397Z"
-      fill="#06847B"
-    />
-  </>,
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M29 3C29.5523 3 30 3.44772 30 4V8C30 8.55229 29.5523 9 29 9C28.4477 9 28 8.55229 28 8V7L12 7V8C12 8.55229 11.5523 9 11 9C10.4477 9 10 8.55229 10 8V4C10 3.44772 10.4477 3 11 3C11.5523 3 12 3.44772 12 4V5L28 5V4C28 3.44772 28.4477 3 29 3ZM2 12C2 11.4477 2.44772 11 3 11H7C7.55228 11 8 11.4477 8 12C8 12.5523 7.55228 13 7 13H6V27H7C7.55228 27 8 27.4477 8 28C8 28.5523 7.55228 29 7 29H3C2.44772 29 2 28.5523 2 28C2 27.4477 2.44772 27 3 27H4V13H3C2.44772 13 2 12.5523 2 12ZM14.2997 11C13.1142 11 12.0398 11.6982 11.5583 12.7816L10.0862 16.0939C10.0294 16.2217 10 16.3601 10 16.5V26C10 27.6569 11.3431 29 13 29H27C28.6569 29 30 27.6569 30 26V16.5C30 16.3601 29.9706 16.2217 29.9138 16.0939L28.4417 12.7816C27.9602 11.6982 26.8858 11 25.7003 11H14.2997ZM13.3859 13.5939C13.5464 13.2327 13.9046 13 14.2997 13H25.7003C26.0954 13 26.4536 13.2327 26.6141 13.5939L27.4612 15.5H12.5388L13.3859 13.5939ZM23.5 17.5H28V26C28 26.5523 27.5523 27 27 27H13C12.4477 27 12 26.5523 12 26V17.5H16.5V23C16.5 23.3603 16.6938 23.6927 17.0073 23.8702C17.3208 24.0477 17.7056 24.0429 18.0145 23.8575L20 22.6662L21.9855 23.8575C22.2944 24.0429 22.6792 24.0477 22.9927 23.8702C23.3062 23.6927 23.5 23.3603 23.5 23V17.5ZM18.5 21.2338V17.5H21.5V21.2338L20.5145 20.6425C20.1978 20.4525 19.8022 20.4525 19.4855 20.6425L18.5 21.2338Z"
+    fill="currentColor"
+  />,
   "Attributes"
 );
+Attributes.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default Attributes;
diff --git a/src/icons/Channels.tsx b/src/icons/Channels.tsx
index 182880b4f60..0b3f11b2c65 100644
--- a/src/icons/Channels.tsx
+++ b/src/icons/Channels.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const Channels = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M5.625 1.875H1.875V5.625H5.625V1.875ZM0 0V7.5H7.5V4.6875H11.9207L15.8269 12.5H15V16.5625H7.5V13.75H0V21.25H7.5V18.4375H15V22.5H15.8269L11.9207 30.3125H7.5V27.5H0V35H7.5V32.1875H13.0795L17.9233 22.5H22.0767L26.9205 32.1875H32.5V35H40V27.5H32.5V30.3125H28.0793L24.1731 22.5H25V18.4375H32.5V21.25H40V13.75H32.5V16.5625H25V12.5H24.1731L28.0793 4.6875H32.5V7.5H40V0H32.5V2.8125H26.9205L22.0767 12.5H17.9233L13.0795 2.8125H7.5V0H0ZM23.125 14.375H16.875V20.625H23.125V14.375ZM1.875 29.375H5.625V33.125H1.875V29.375ZM38.125 29.375H34.375V33.125H38.125V29.375ZM34.375 1.875H38.125V5.625H34.375V1.875ZM5.625 15.625H1.875V19.375H5.625V15.625ZM34.375 15.625H38.125V19.375H34.375V15.625Z"
-      fill="#06847B"
-    />
-  </>,
-  "StaffMembers"
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M22.2066 26.2723C20.3957 27.3688 18.2716 28 16 28C13.7284 28 11.6043 27.3688 9.7934 26.2723C9.9274 25.8726 10 25.4448 10 25C10 22.7909 8.20914 21 6 21C5.7019 21 5.41143 21.0326 5.13194 21.0945C4.4058 19.5481 4 17.8214 4 16C4 14.1786 4.4058 12.4519 5.13194 10.9055C5.41143 10.9674 5.7019 11 6 11C8.20914 11 10 9.20914 10 7C10 6.5552 9.9274 6.12736 9.7934 5.72768C11.6043 4.63116 13.7284 4 16 4C18.2716 4 20.3957 4.63116 22.2066 5.72768C22.0726 6.12736 22 6.5552 22 7C22 9.20914 23.7909 11 26 11C26.2981 11 26.5886 10.9674 26.8681 10.9055C27.5942 12.4519 28 14.1786 28 16C28 17.8214 27.5942 19.5481 26.8681 21.0945C26.5886 21.0326 26.2981 21 26 21C23.7909 21 22 22.7909 22 25C22 25.4448 22.0726 25.8726 22.2066 26.2723ZM23.2982 27.9496C21.173 29.2503 18.6741 30 16 30C13.3259 30 10.827 29.2503 8.70185 27.9496C7.9901 28.6019 7.04154 29 6 29C3.79086 29 2 27.2091 2 25C2 23.8076 2.52171 22.7371 3.34931 22.0043C2.48415 20.1847 2 18.1489 2 16C2 13.8511 2.48415 11.8153 3.34931 9.9957C2.52171 9.26286 2 8.19236 2 7C2 4.79086 3.79086 3 6 3C7.04154 3 7.99011 3.39808 8.70185 4.05039C10.827 2.7497 13.3259 2 16 2C18.6741 2 21.173 2.74971 23.2982 4.05039C24.0099 3.39808 24.9585 3 26 3C28.2091 3 30 4.79086 30 7C30 8.19236 29.4783 9.26286 28.6507 9.99569C29.5159 11.8153 30 13.8511 30 16C30 18.1489 29.5159 20.1847 28.6507 22.0043C29.4783 22.7371 30 23.8076 30 25C30 27.2091 28.2091 29 26 29C24.9585 29 24.0099 28.6019 23.2982 27.9496ZM6 9C7.10457 9 8 8.10457 8 7C8 5.89543 7.10457 5 6 5C4.89543 5 4 5.89543 4 7C4 8.10457 4.89543 9 6 9ZM26 9C27.1046 9 28 8.10457 28 7C28 5.89543 27.1046 5 26 5C24.8954 5 24 5.89543 24 7C24 8.10457 24.8954 9 26 9ZM28 25C28 26.1046 27.1046 27 26 27C24.8954 27 24 26.1046 24 25C24 23.8954 24.8954 23 26 23C27.1046 23 28 23.8954 28 25ZM6 27C7.10457 27 8 26.1046 8 25C8 23.8954 7.10457 23 6 23C4.89543 23 4 23.8954 4 25C4 26.1046 4.89543 27 6 27ZM17.6882 15C17.5151 13.5884 16.9729 12.0742 16 10.1898C15.0271 12.0742 14.4849 13.5884 14.3118 15H17.6882ZM18.3698 10.4862C20.2107 11.2784 21.5757 12.9657 21.917 15H19.7003C19.556 13.5436 19.1004 12.0837 18.3698 10.4862ZM19.7003 17H21.917C21.5757 19.0344 20.2107 20.7216 18.3697 21.5139C19.1003 19.9163 19.556 18.4564 19.7003 17ZM16 21.81C16.9729 19.9257 17.515 18.4115 17.6882 17H14.3118C14.485 18.4115 15.0271 19.9257 16 21.81ZM13.6302 10.4862C12.8996 12.0837 12.444 13.5436 12.2997 15H10.083C10.4243 12.9657 11.7893 11.2784 13.6302 10.4862ZM13.6303 21.5139C12.8997 19.9163 12.444 18.4564 12.2997 17H10.083C10.4243 19.0344 11.7893 20.7216 13.6303 21.5139ZM16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24Z"
+    fill="currentColor"
+  />,
+  "Channels"
 );
+Channels.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default Channels;
diff --git a/src/icons/Navigation.tsx b/src/icons/Navigation.tsx
index ccd745a7616..3571af2d2df 100644
--- a/src/icons/Navigation.tsx
+++ b/src/icons/Navigation.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const Navigation = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M35.9075 11.3232C40.8772 19.931 37.928 30.9378 29.3202 35.9075C20.7123 40.8772 9.70553 37.928 4.7358 29.3201C-0.233933 20.7123 2.71533 9.70553 11.3232 4.7358C19.931 -0.233933 30.9378 2.71533 35.9075 11.3232ZM37.6393 10.3233C43.1612 19.8876 39.8842 32.1173 30.32 37.6393C20.7557 43.1612 8.52596 39.8842 3.00404 30.32C-2.51789 20.7557 0.759069 8.52596 10.3233 3.00404C19.8876 -2.51789 32.1173 0.759069 37.6393 10.3233ZM14.9402 14.5709L31.0335 9.60975L26.0724 25.7031L21.7789 21.4096C22.3117 20.6975 22.2544 19.6836 21.6072 19.0364C20.9599 18.3891 19.946 18.3319 19.2339 18.8647L14.9402 14.5709ZM19.0359 21.6077C18.3884 20.9602 18.3314 19.946 18.8646 19.2338L14.571 14.9402L9.6098 31.0335L25.7032 26.0723L21.4097 21.7789C20.6976 22.3122 19.6833 22.2551 19.0359 21.6077ZM18.7012 15.504L28.0085 12.6348L25.1393 21.9421L18.7012 15.504Z"
-      fill="#06847B"
-    />
-  </>,
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16ZM30 16C30 23.732 23.732 30 16 30C8.26801 30 2 23.732 2 16C2 8.26801 8.26801 2 16 2C23.732 2 30 8.26801 30 16ZM23.1271 11.4417C23.7506 9.83112 22.1768 8.24068 20.5597 8.8471L8.83347 13.2444C7.18709 13.8618 7.08139 16.1506 8.66386 16.9171L12.4577 18.7547L14.8987 23.4842C15.6895 25.0163 17.9187 24.8968 18.5411 23.2889L23.1271 11.4417ZM9.53571 15.1171L21.262 10.7198L16.676 22.5669L14.235 17.8374C14.0366 17.4531 13.7189 17.1433 13.3296 16.9548L9.53571 15.1171Z"
+    fill="currentColor"
+  />,
   "Navigation"
 );
+Navigation.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default Navigation;
diff --git a/src/icons/PageTypes.tsx b/src/icons/PageTypes.tsx
index b36ada619be..eb81206051b 100644
--- a/src/icons/PageTypes.tsx
+++ b/src/icons/PageTypes.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const PageTypes = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M19 0H0V40H26.4056H27.6667V8L19 0ZM25.1445 9.00369V37.5769H2.52221V2.42311H17.9553L18 2.46406V9H25.1404L25.1445 9.00369ZM5 12H23V17H5V12ZM12 20H5V30H12V20ZM15 20H23V35H15V20ZM12 33H5V35H12V33Z"
-      fill="#06847B"
-    />
-  </>,
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M9 4.00195C8.44772 4.00195 8 4.44967 8 5.00195V19.002C8 19.5542 8.44772 20.002 9 20.002H17C17.5523 20.002 18 19.5542 18 19.002V7.58038C18 7.31516 17.8946 7.06081 17.7071 6.87327L15.1287 4.29485C14.9411 4.10731 14.6868 4.00195 14.4216 4.00195H9ZM6 5.00195C6 3.3451 7.34315 2.00195 9 2.00195H14.4216C15.2172 2.00195 15.9803 2.31802 16.5429 2.88063L19.1213 5.45906C19.6839 6.02167 20 6.78473 20 7.58038V19.002C20 20.6588 18.6569 22.002 17 22.002H9C7.34315 22.002 6 20.6588 6 19.002V5.00195ZM4 6.00195C4.55228 6.00195 5 6.44967 5 7.00195V20.002C5 20.5542 4.55228 21.002 4 21.002C3.44772 21.002 3 20.5542 3 20.002V7.00195C3 6.44967 3.44772 6.00195 4 6.00195ZM10.5 13.002C10.2239 13.002 10 13.2258 10 13.502V14.502C10 14.7781 10.2239 15.002 10.5 15.002H15.5C15.7761 15.002 16 14.7781 16 14.502V13.502C16 13.2258 15.7761 13.002 15.5 13.002H10.5ZM10 10.502C10 10.2258 10.2239 10.002 10.5 10.002H15.5C15.7761 10.002 16 10.2258 16 10.502V11.502C16 11.7781 15.7761 12.002 15.5 12.002H10.5C10.2239 12.002 10 11.7781 10 11.502V10.502ZM10.5 16.002C10.2239 16.002 10 16.2258 10 16.502V17.502C10 17.7781 10.2239 18.002 10.5 18.002H15.5C15.7761 18.002 16 17.7781 16 17.502V16.502C16 16.2258 15.7761 16.002 15.5 16.002H10.5Z"
+    fill="currentColor"
+  />,
   "PageTypes"
 );
+PageTypes.defaultProps = {
+  viewBox: "0 0 24 25"
+};
 
 export default PageTypes;
diff --git a/src/icons/PermissionGroups.tsx b/src/icons/PermissionGroups.tsx
index 80b149abc55..ed76ee326bb 100644
--- a/src/icons/PermissionGroups.tsx
+++ b/src/icons/PermissionGroups.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const PermissionGroups = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M0 0H22.7652L30.4497 7.70511V16.7623C32.4381 16.9409 33.8497 17.6711 34.6541 18.9799C35.5326 20.4092 35.4932 22.2483 35.212 23.9721C34.9657 25.4823 34.4931 27.1133 34.0547 28.6263C33.9837 28.8716 33.9135 29.1138 33.8454 29.3518C33.4479 30.7401 33.1267 31.9645 33.0062 32.9688H40V40H20H18.8281H0V0ZM31.8926 28.7927C31.4864 30.2113 31.089 31.679 30.964 32.9688H27.982C27.8555 31.6772 27.4528 30.2082 27.0405 28.7889C26.9647 28.5282 26.8882 28.2678 26.8119 28.0082L26.811 28.0052L26.8106 28.0036C26.3664 26.4922 25.9303 25.0083 25.699 23.6394C25.4224 22.0022 25.4937 20.8052 25.9593 20.0393C26.3673 19.3682 27.2649 18.75 29.434 18.75C31.6024 18.75 32.5084 19.3679 32.9236 20.0435C33.3956 20.8115 33.4741 22.0095 33.2073 23.6451C32.9824 25.0238 32.5494 26.5201 32.1087 28.0431L32.1086 28.0434C32.0365 28.2926 31.9642 28.5425 31.8926 28.7927ZM25.0899 29.3556C25.4929 30.743 25.8176 31.9661 25.9395 32.9688H18.8281V37.9688H2.03125V2.03125H21.3281V9.14062H28.4184V16.7623C26.4311 16.941 25.0216 17.6715 24.2236 18.9841C23.3534 20.4155 23.4052 22.2556 23.6961 23.9778C23.9494 25.4766 24.4257 27.0953 24.8681 28.5988L24.8681 28.5988C24.9434 28.8548 25.0178 29.1075 25.0899 29.3556ZM23.3594 3.47223L26.9868 7.10938H23.3594V3.47223ZM14.0625 16.4844H4.6875V14.4531H14.0625V16.4844ZM18.5938 21.25H4.76562V19.2188H18.5938V21.25ZM37.9688 35V37.9688H20.8594V35H37.9688ZM10 31.6406C10 32.5467 9.26547 33.2812 8.35938 33.2812C7.45328 33.2812 6.71875 32.5467 6.71875 31.6406C6.71875 30.7345 7.45328 30 8.35938 30C9.26547 30 10 30.7345 10 31.6406ZM12.0312 31.6406C12.0312 33.6685 10.3873 35.3125 8.35938 35.3125C6.33145 35.3125 4.6875 33.6685 4.6875 31.6406C4.6875 29.6127 6.33145 27.9688 8.35938 27.9688C10.3873 27.9688 12.0312 29.6127 12.0312 31.6406Z"
-      fill="#06847B"
-    />
-  </>,
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M16 4C13.7909 4 12 5.79086 12 8V11.9355C13.205 11.3367 14.5632 11 16 11C17.4368 11 18.795 11.3367 20 11.9355V8C20 5.79086 18.2091 4 16 4ZM22 13.2917V8C22 4.68629 19.3137 2 16 2C12.6863 2 10 4.68629 10 8V13.2917C8.15875 14.9396 7 17.3345 7 20C7 24.9706 11.0294 29 16 29C20.9706 29 25 24.9706 25 20C25 17.3345 23.8412 14.9396 22 13.2917ZM14 18C14 17.4477 14.4477 17 15 17H17C17.5523 17 18 17.4477 18 18C18 18.5523 17.5523 19 17 19V22C17 22.5523 16.5523 23 16 23C15.4477 23 15 22.5523 15 22V19C14.4477 19 14 18.5523 14 18ZM23 20C23 23.866 19.866 27 16 27C12.134 27 9 23.866 9 20C9 16.134 12.134 13 16 13C19.866 13 23 16.134 23 20Z"
+    fill="currentColor"
+  />,
   "PermissionGroups"
 );
+PermissionGroups.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default PermissionGroups;
diff --git a/src/icons/Plugins.tsx b/src/icons/Plugins.tsx
index 7f6b74439bb..ce10a9cd8a3 100644
--- a/src/icons/Plugins.tsx
+++ b/src/icons/Plugins.tsx
@@ -8,7 +8,7 @@ const Plugins = createSvgIcon(
         fillRule="evenodd"
         clipRule="evenodd"
         d="M7.12891 6.10352e-05H12.9999V7.80006H18.7418V6.10352e-05H24.6128V7.80006H31.9999V14.6751H29.0967V29.7876H20.7418V33.6876H16.8708V40.0001H14.8708V33.6876H10.9999V29.7876H2.9031V14.6751H-0.00012207V7.80006H7.12891V6.10352e-05ZM9.12891 7.80006H10.9999V2.00006H9.12891V7.80006ZM4.9031 14.6751V27.7876H27.0967V14.6751H4.9031ZM12.9999 29.7876V31.6876H18.7418V29.7876H12.9999ZM22.6128 7.80006V2.00006H20.7418V7.80006H22.6128ZM1.99988 9.80006V12.6751H29.9999V9.80006H1.99988Z"
-        fill="#06847B"
+        fill="currentColor"
       />
     </g>
   </>,
diff --git a/src/icons/ProductTypes.tsx b/src/icons/ProductTypes.tsx
index 2c924859f0c..9a3a5b803e0 100644
--- a/src/icons/ProductTypes.tsx
+++ b/src/icons/ProductTypes.tsx
@@ -7,10 +7,13 @@ const ProductTypes = createSvgIcon(
       fillRule="evenodd"
       clipRule="evenodd"
       d="M0 6.5V33L20 40L40 33V6.5L20 0L0 6.5ZM2.5 8.69935V31.2263L18.75 36.9138V14.3869L2.5 8.69935ZM21.25 14.3869V36.9138L37.5 31.2263V8.69935L21.25 14.3869ZM34.1436 7.22539L20 2.62872L5.8564 7.22539L20 12.1756L34.1436 7.22539Z"
-      fill="#06847B"
+      fill="currentColor"
     />
   </>,
   "ProductTypes"
 );
+ProductTypes.defaultProps = {
+  viewBox: "0 0 44 44"
+};
 
 export default ProductTypes;
diff --git a/src/icons/ShippingMethods.tsx b/src/icons/ShippingMethods.tsx
index 62977adb3d8..f9cae52f0d8 100644
--- a/src/icons/ShippingMethods.tsx
+++ b/src/icons/ShippingMethods.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const ShippingMethods = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M0 0H29.3333V12.2666H40V32.9751L32.9752 40H7.4667V19.8248L9.15816 18.1333H0V0ZM27.2 3.35694V12.2666H15.0249L11.2915 16H2.13333V3.07966L14.9333 9.73563L27.2 3.35694ZM24.929 2.13333H4.93756L14.9333 7.33111L24.929 2.13333ZM12.2667 18.1333H12.1752L11.1085 19.2H31.5582L36.3582 14.4H15.9085L12.2667 18.0418V18.1333ZM32.5334 21.2418L37.8667 15.9085V32.0915L32.5334 37.4248V21.2418ZM9.60003 21.3333V37.8666H30.4V21.3333H9.60003ZM18.6667 30.9333H26.6667V28.8H18.6667V30.9333ZM18.6667 34.6666H25.0667V32.5333H18.6667V34.6666Z"
-      fill="#06847B"
-    />
-  </>,
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M12.4476 8.88049C12.5081 8.37806 12.9344 8 13.4405 8H15.8867L15.4413 10.467C15.109 12.3074 16.5233 14 18.3936 14H20.8289C22.2801 14 23.5233 12.9612 23.7812 11.533L24.4191 8H26.7449C27.3446 8 27.8094 8.52414 27.7378 9.11951L26.0526 23.1195C25.9921 23.6219 25.5658 24 25.0598 24H11.7553C11.1556 24 10.6908 23.4759 10.7625 22.8805L12.4476 8.88049ZM17.4095 10.8223L17.9191 8H22.3867L21.813 11.1777C21.727 11.6537 21.3126 12 20.8289 12H18.3936C17.7702 12 17.2987 11.4358 17.4095 10.8223ZM13.4405 6C11.9223 6 10.6434 7.13417 10.462 8.64148L8.7768 22.6415C8.5618 24.4276 9.95629 26 11.7553 26H25.0598C26.5779 26 27.8568 24.8658 28.0383 23.3585L29.7234 9.35852C29.9384 7.57241 28.5439 6 26.7449 6H13.4405ZM3 9.78943C2.44772 9.78943 2 10.2371 2 10.7894C2 11.3417 2.44772 11.7894 3 11.7894H8.57143C9.12371 11.7894 9.57143 11.3417 9.57143 10.7894C9.57143 10.2371 9.12371 9.78943 8.57143 9.78943H3ZM2 15.5264C2 14.9741 2.44772 14.5264 3 14.5264H7.64286C8.19514 14.5264 8.64286 14.9741 8.64286 15.5264C8.64286 16.0787 8.19514 16.5264 7.64286 16.5264H3C2.44772 16.5264 2 16.0787 2 15.5264ZM3 19.2632C2.44772 19.2632 2 19.7109 2 20.2632C2 20.8155 2.44772 21.2632 3 21.2632H6.71429C7.26657 21.2632 7.71429 20.8155 7.71429 20.2632C7.71429 19.7109 7.26657 19.2632 6.71429 19.2632H3Z"
+    fill="currentColor"
+  />,
   "ShippingMethods"
 );
+ShippingMethods.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default ShippingMethods;
diff --git a/src/icons/SiteSettings.tsx b/src/icons/SiteSettings.tsx
index 515109666bc..4dd1d31a586 100644
--- a/src/icons/SiteSettings.tsx
+++ b/src/icons/SiteSettings.tsx
@@ -6,11 +6,20 @@ const SiteSettings = createSvgIcon(
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M31.8208 5.55248L30.7926 8.35093L31.545 9.18475C33.147 10.9601 34.3637 13.1054 35.0581 15.4817L35.3837 16.596L38.1395 17.0712V23.1349L35.3838 23.6101L35.0582 24.7244C34.4073 26.9518 33.2976 28.9763 31.8417 30.6834L31.1357 31.5111L32.2146 34.4475L26.7281 37.6084L24.9142 35.4411L23.7814 35.7276C22.572 36.0334 21.3058 36.1961 20 36.1961C18.6942 36.1961 17.428 36.0334 16.2186 35.7276L15.0858 35.4411L13.2719 37.6084L7.78535 34.4475L8.86424 31.5111L8.15831 30.6834C6.70243 28.9763 5.59267 26.9518 4.94182 24.7244L4.61622 23.6101L1.86047 23.1349L1.86047 17.0712L4.61625 16.596L4.94186 15.4817C5.63625 13.1054 6.85296 10.9601 8.45495 9.18475L9.20736 8.35093L8.17916 5.55248L13.6657 2.39164L15.5348 4.62486L16.6397 4.37851C17.7208 4.1375 18.8448 4.01018 20 4.01018C21.1552 4.01018 22.2792 4.1375 23.3603 4.37851L24.4652 4.62486L26.3343 2.39164L31.8208 5.55248ZM40 24.702V15.5042L36.8439 14.9599C36.0699 12.311 34.7134 9.91885 32.9263 7.93836L34.1077 4.72285L25.9098 0L23.7651 2.56262C22.5521 2.2922 21.2924 2.14972 20 2.14972C18.7076 2.14972 17.4479 2.2922 16.2349 2.56262L14.0902 0L5.89227 4.72285L7.07371 7.93836C5.28657 9.91885 3.93009 12.311 3.15607 14.9599L0 15.5042V24.702L3.15603 25.2462C3.88152 27.7291 5.11876 29.9864 6.74273 31.8906L5.49846 35.2772L13.6964 40L15.7625 37.5313C17.1197 37.8744 18.539 38.0565 20 38.0565C21.461 38.0565 22.8803 37.8744 24.2375 37.5313L26.3036 40L34.5015 35.2772L33.2573 31.8906C34.8812 29.9864 36.1185 27.7291 36.844 25.2462L40 24.702ZM28.4425 20C28.4425 24.6627 24.6627 28.4425 20 28.4425C15.3373 28.4425 11.5574 24.6627 11.5574 20C11.5574 15.3373 15.3373 11.5574 20 11.5574C24.6627 11.5574 28.4425 15.3373 28.4425 20ZM30.303 20C30.303 25.6902 25.6902 30.303 20 30.303C14.3097 30.303 9.69693 25.6902 9.69693 20C9.69693 14.3097 14.3097 9.69693 20 9.69693C25.6902 9.69693 30.303 14.3097 30.303 20Z"
-      fill="#06847B"
+      d="M14.5569 1.99987C14.5633 1.99994 14.5687 2 14.5732 2H17.3059C17.3105 2 17.3159 1.99994 17.3223 1.99987C17.4196 1.9988 17.7281 1.9954 18.0457 2.16599C18.3621 2.33595 18.568 2.60603 18.7172 2.84313C19.0113 3.31075 19.3827 4.15404 19.9745 5.63276C20.0129 5.7286 20.0876 5.80239 20.1755 5.83857C20.2665 5.87602 20.3735 5.87516 20.4702 5.83113C21.7035 5.26978 22.4275 4.97615 22.8699 4.82166C23.3214 4.66397 23.5477 4.62638 23.7607 4.62638C24.1447 4.62638 24.516 4.76407 24.8072 5.01445L24.8573 5.05748L26.8264 7.02071L26.8321 7.0266C26.8354 7.02999 26.8394 7.03403 26.8441 7.03872C26.914 7.10928 27.1285 7.3257 27.2303 7.66631C27.333 8.00963 27.2893 8.34564 27.2265 8.62294C27.1034 9.16609 26.7678 10.0291 26.1382 11.4982C26.0995 11.5884 26.1 11.688 26.1343 11.771C26.17 11.8573 26.2436 11.9299 26.339 11.9651C27.8172 12.5108 28.6684 12.8602 29.1436 13.1493C29.3878 13.2978 29.665 13.5062 29.8374 13.8331C30.0045 14.1502 30.0012 14.4607 30.0001 14.5585C30 14.5652 30 14.5709 30 14.5755V17.3077C30 17.3124 30.0001 17.318 30.0001 17.3245C30.0012 17.4229 30.0046 17.7311 29.8361 18.0485C29.6668 18.3676 29.3963 18.5758 29.1565 18.7273C28.6855 19.0249 27.8367 19.3984 26.3501 19.992C26.2595 20.0281 26.19 20.0987 26.1562 20.1812C26.1215 20.2658 26.1224 20.3671 26.164 20.4577C26.8211 21.8881 27.1744 22.7356 27.3062 23.2749C27.374 23.5522 27.4225 23.8923 27.3174 24.2424C27.2153 24.5829 26.9987 24.8009 26.9297 24.8703C26.925 24.8751 26.921 24.8791 26.9177 24.8825L26.9124 24.8879L24.9915 26.807C24.6928 27.1054 24.2913 27.2783 23.8693 27.2905L23.8405 26.2909V27.2909C23.6183 27.2909 23.3858 27.2317 23.2246 27.1862C23.033 27.1321 22.8055 27.056 22.549 26.9628C22.0343 26.7757 21.3525 26.5011 20.513 26.1445C20.4183 26.1042 20.3147 26.1046 20.2255 26.1414C20.134 26.1791 20.0576 26.2567 20.0203 26.357C19.4731 27.8282 19.124 28.6735 18.838 29.1449C18.6918 29.3856 18.4862 29.662 18.1631 29.8349C17.8454 30.005 17.5345 30.0013 17.4381 30.0001C17.4316 30.0001 17.4261 30 17.4216 30H14.6884C14.6839 30 14.6784 30.0001 14.6719 30.0001C14.5749 30.0012 14.2665 30.0047 13.949 29.8347C13.6321 29.6649 13.4258 29.3948 13.2763 29.1574C12.9817 28.6896 12.6099 27.8457 12.0175 26.366C11.9793 26.2707 11.9052 26.1973 11.818 26.1611C11.727 26.1233 11.6197 26.124 11.5229 26.1681C10.289 26.7303 9.56587 27.0242 9.12494 27.1788C8.67577 27.3363 8.44992 27.3747 8.23624 27.3747C7.84824 27.3747 7.47347 27.2336 7.18179 26.9778L7.13438 26.9362L5.16666 24.972C5.16337 24.9686 5.15942 24.9646 5.15478 24.9599C5.0846 24.8898 4.86835 24.6737 4.76541 24.3321C4.66184 23.9883 4.70551 23.6517 4.76815 23.3746C4.89096 22.8313 5.22649 21.9679 5.85632 20.4988C5.89444 20.4099 5.89387 20.3116 5.86007 20.23C5.82504 20.1454 5.75279 20.074 5.65904 20.0393C4.18074 19.491 3.32977 19.1401 2.85487 18.8502C2.61094 18.7013 2.33422 18.4928 2.16222 18.1663C1.99509 17.849 1.99871 17.5386 1.99985 17.4408C1.99992 17.4341 1.99999 17.4285 1.99999 17.4238V14.6895C1.99999 14.6848 1.99993 14.6791 1.99985 14.6724C1.99874 14.5736 1.99524 14.2642 2.16284 13.9468C2.33284 13.6248 2.60536 13.4163 2.84509 13.2656C3.31517 12.9702 4.16344 12.5995 5.64698 12.0074C5.73702 11.9714 5.80635 11.9013 5.84029 11.8192C5.87534 11.7344 5.87461 11.6326 5.8327 11.5414C5.1727 10.1062 4.81717 9.25205 4.68784 8.70729C4.62117 8.42646 4.57457 8.07733 4.69254 7.71996C4.80574 7.37703 5.03525 7.16207 5.10707 7.0948C5.10944 7.09257 5.11164 7.09051 5.11366 7.08861L7.0056 5.19568C7.30278 4.89835 7.70209 4.72542 8.12227 4.71211L8.15395 5.7116V4.7116C8.37565 4.7116 8.60784 4.77026 8.77018 4.81582C8.96241 4.86977 9.19061 4.94573 9.44798 5.03891C9.9644 5.22588 10.6481 5.50041 11.4896 5.85727C11.5829 5.89683 11.6849 5.89633 11.7723 5.86009C11.8619 5.82297 11.9371 5.74672 11.9737 5.64785C12.5208 4.17297 12.8719 3.32652 13.16 2.85389C13.307 2.61271 13.5125 2.33806 13.8335 2.16572C14.1511 1.99518 14.461 1.99876 14.5569 1.99987ZM8.27526 6.75452L6.66608 8.36455C6.77144 8.71717 7.04331 9.38697 7.64979 10.7059C7.92061 11.2948 7.9395 11.9761 7.68866 12.5831C7.4454 13.1717 6.97234 13.6318 6.38834 13.8649C4.99859 14.4196 4.32571 14.7205 3.99999 14.9051V17.2019C4.32437 17.3767 4.99072 17.6583 6.35448 18.1641C6.96227 18.3895 7.45687 18.8583 7.70801 19.4651C7.95107 20.0523 7.94163 20.7105 7.69451 21.2869C7.10208 22.6688 6.84085 23.3592 6.74298 23.7196L8.35461 25.3283C8.38591 25.3181 8.42192 25.3059 8.46313 25.2915C8.81825 25.167 9.47667 24.9026 10.6937 24.3481C11.2885 24.0772 11.9737 24.0603 12.5846 24.3138C13.1764 24.5595 13.639 25.0353 13.8742 25.6226C14.4272 27.0038 14.7294 27.6748 14.9141 28H17.1889C17.363 27.6747 17.6434 27.0105 18.1457 25.6598C18.3743 25.0452 18.849 24.5458 19.4626 24.2926C20.053 24.049 20.7131 24.0565 21.2949 24.3037C22.122 24.655 22.7664 24.9138 23.2323 25.0831C23.4389 25.1582 23.6007 25.2122 23.722 25.2481L25.3329 23.6388C25.2272 23.2864 24.9549 22.6168 24.3466 21.2926C24.0771 20.7058 24.0576 20.0275 24.3057 19.4223C24.5483 18.8309 25.0226 18.3685 25.6085 18.1346C27.0016 17.5783 27.6751 17.2749 28 17.0893V14.7987C27.6754 14.6246 27.0092 14.3444 25.6464 13.8414C25.0353 13.6157 24.538 13.1447 24.286 12.535C24.0429 11.9468 24.0524 11.2877 24.2999 10.7103C24.8931 9.32619 25.1545 8.63573 25.2523 8.27547L23.6433 6.67135C23.6107 6.6819 23.5729 6.69459 23.5293 6.70982C23.1736 6.83405 22.5149 7.09788 21.2988 7.65142C20.7062 7.92117 20.0239 7.93887 19.4145 7.68813C18.8193 7.44325 18.3539 6.96588 18.1177 6.37596C17.5655 4.9962 17.2635 4.32536 17.079 4H14.8078C14.6332 4.32454 14.3511 4.98941 13.8489 6.34343C13.6216 6.956 13.1493 7.45446 12.5379 7.70778C11.9488 7.95184 11.2897 7.94488 10.7088 7.69857C9.88024 7.34721 9.23429 7.08859 8.76713 6.91946C8.55969 6.84435 8.39715 6.79042 8.27526 6.75452ZM25.3793 23.831C25.3793 23.831 25.3791 23.8298 25.379 23.8276Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18ZM16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z"
+      fill="currentColor"
     />
   </>,
   "SiteSettings"
 );
+SiteSettings.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default SiteSettings;
diff --git a/src/icons/StaffMembers.tsx b/src/icons/StaffMembers.tsx
index fdffb50710c..4f920079829 100644
--- a/src/icons/StaffMembers.tsx
+++ b/src/icons/StaffMembers.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const StaffMembers = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M20 8C20 11.3137 17.3137 14 14 14C10.6863 14 8 11.3137 8 8C8 4.68629 10.6863 2 14 2C17.3137 2 20 4.68629 20 8ZM22 8C22 12.4183 18.4183 16 14 16C9.58172 16 6 12.4183 6 8C6 3.58172 9.58172 0 14 0C18.4183 0 22 3.58172 22 8ZM2.31344 38L4.94331 20H22.0567L23.0395 26.7268L23 27H23.0794L24.6866 38H2.31344ZM25.1006 27L27 40H0L3.21429 18H23.7857L24.0447 19.7729L25.0238 13H31.5H37.9762L40 27H25.1006ZM31.5 13C28.4624 13 26 10.5376 26 7.5C26 4.46243 28.4624 2 31.5 2C34.5376 2 37 4.46243 37 7.5C37 10.5376 34.5376 13 31.5 13ZM31.5 11C33.433 11 35 9.433 35 7.5C35 5.567 33.433 4 31.5 4C29.567 4 28 5.567 28 7.5C28 9.433 29.567 11 31.5 11ZM25.3099 25L26.7555 15H36.2445L37.6901 25H25.3099Z"
-      fill="#06847B"
-    />
-  </>,
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M10 4C10 2.89543 10.8954 2 12 2H14C15.1046 2 16 2.89543 16 4V5.5H19C20.6569 5.5 22 6.84315 22 8.5V27C22 28.6569 20.6569 30 19 30H7C5.34315 30 4 28.6569 4 27V8.5C4 6.84315 5.34315 5.5 7 5.5H10V4ZM10 7.5H7C6.44772 7.5 6 7.94772 6 8.5V27C6 27.5523 6.44772 28 7 28H19C19.5523 28 20 27.5523 20 27V8.5C20 7.94772 19.5523 7.5 19 7.5H16V7.57143C16 8.676 15.1046 9.57143 14 9.57143H12C10.8954 9.57143 10 8.676 10 7.57143V7.5ZM14 4H12V7.57143L14 7.57143V4ZM8.5835 18.4762C8.5835 16.5563 10.1398 15 12.0597 15H14.4406C16.3605 15 17.9168 16.5563 17.9168 18.4762C17.9168 19.7123 16.9148 20.7143 15.6787 20.7143H10.8216C9.58553 20.7143 8.5835 19.7123 8.5835 18.4762ZM12.0597 17C11.2444 17 10.5835 17.6609 10.5835 18.4762C10.5835 18.6077 10.6901 18.7143 10.8216 18.7143H15.6787C15.8102 18.7143 15.9168 18.6077 15.9168 18.4762C15.9168 17.6609 15.2559 17 14.4406 17H12.0597ZM8.66675 21.5C8.11446 21.5 7.66675 21.9477 7.66675 22.5C7.66675 23.0523 8.11446 23.5 8.66675 23.5H17.8334C18.3857 23.5 18.8334 23.0523 18.8334 22.5C18.8334 21.9477 18.3857 21.5 17.8334 21.5H8.66675ZM7.66675 25.2858C7.66675 24.7335 8.11446 24.2858 8.66675 24.2858H11.4167C11.969 24.2858 12.4167 24.7335 12.4167 25.2858C12.4167 25.8381 11.969 26.2858 11.4167 26.2858H8.66675C8.11446 26.2858 7.66675 25.8381 7.66675 25.2858ZM16.0002 24.2858C15.448 24.2858 15.0002 24.7335 15.0002 25.2858C15.0002 25.8381 15.448 26.2858 16.0002 26.2858H17.8336C18.3859 26.2858 18.8336 25.8381 18.8336 25.2858C18.8336 24.7335 18.3859 24.2858 17.8336 24.2858H16.0002ZM15.0834 12.2857C15.0834 13.3114 14.2626 14.1429 13.2501 14.1429C12.2376 14.1429 11.4167 13.3114 11.4167 12.2857C11.4167 11.2601 12.2376 10.4286 13.2501 10.4286C14.2626 10.4286 15.0834 11.2601 15.0834 12.2857ZM21 2C20.4477 2 20 2.44772 20 3C20 3.55228 20.4477 4 21 4H25C25.5523 4 26 4.44772 26 5V25C26 25.5523 25.5523 26 25 26H24.4285C23.8763 26 23.4285 26.4477 23.4285 27C23.4285 27.5523 23.8763 28 24.4285 28H25C26.6569 28 28 26.6569 28 25V5C28 3.34314 26.6569 2 25 2H21Z"
+    fill="currentColor"
+  />,
   "StaffMembers"
 );
+StaffMembers.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default StaffMembers;
diff --git a/src/icons/Taxes.tsx b/src/icons/Taxes.tsx
index d2d8d69b1b7..1d2eb318fdf 100644
--- a/src/icons/Taxes.tsx
+++ b/src/icons/Taxes.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const Taxes = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2 0H34.6316V21.0526H32.5263V2.10526H4.10526V37.8947H32.5263V35.2632H34.6316V40H2V0ZM8.31579 20H11.4737V23.1579H8.31579V20ZM16.7368 20H13.5789V23.1579H16.7368V20ZM18.8421 20H22V23.1579H18.8421V20ZM27.2632 20H24.1053V23.1579H27.2632V20ZM8.31579 25.2632H11.4737V28.4211H8.31579V25.2632ZM16.7368 25.2632H13.5789V28.4211H16.7368V25.2632ZM18.8421 25.2632H22V28.4211H18.8421V25.2632ZM11.4737 30.5263H8.31579V33.6842H11.4737V30.5263ZM13.5789 30.5263H16.7368V33.6842H13.5789V30.5263ZM22 30.5263H18.8421V33.6842H22V30.5263ZM26.2105 9.47368H10.4211V14.7368H26.2105V9.47368ZM8.31579 7.36842V16.8421H28.3158V7.36842H8.31579ZM37.7895 30.5263H34.6316V33.6842H37.7895V30.5263ZM28.3158 24.2105H31.4737V27.3684H28.3158V24.2105ZM29.0602 34.4285L38.5339 24.9548L37.0452 23.4662L27.5715 32.9398L29.0602 34.4285Z"
-      fill="#06847B"
-    />
-  </>,
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M8 4C7.44772 4 7 4.44772 7 5V27C7 27.5523 7.44772 28 8 28H24C24.5523 28 25 27.5523 25 27V5C25 4.44772 24.5523 4 24 4H8ZM5 5C5 3.34315 6.34315 2 8 2H24C25.6569 2 27 3.34315 27 5V27C27 28.6569 25.6569 30 24 30H8C6.34315 30 5 28.6569 5 27V5ZM9 9C9 7.89543 9.89543 7 11 7L21 7C22.1046 7 23 7.89543 23 9V11C23 12.1046 22.1046 13 21 13H11C9.89543 13 9 12.1046 9 11V9ZM21 9L11 9V11H21V9ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17ZM17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16ZM20 17C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15C19.4477 15 19 15.4477 19 16C19 16.5523 19.4477 17 20 17ZM13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20ZM16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21ZM21 20C21 20.5523 20.5523 21 20 21C19.4477 21 19 20.5523 19 20C19 19.4477 19.4477 19 20 19C20.5523 19 21 19.4477 21 20ZM16 25C16.5523 25 17 24.5523 17 24C17 23.4477 16.5523 23 16 23C15.4477 23 15 23.4477 15 24C15 24.5523 15.4477 25 16 25Z"
+    fill="currentColor"
+  />,
   "Taxes"
 );
+Taxes.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default Taxes;
diff --git a/src/icons/Warehouses.tsx b/src/icons/Warehouses.tsx
index 56170523f97..8e5d1184657 100644
--- a/src/icons/Warehouses.tsx
+++ b/src/icons/Warehouses.tsx
@@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
 import React from "react";
 
 const Warehouses = createSvgIcon(
-  <>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M5.23438 15.2344H34.7656V38.4375H38.2812V12.3121L19.9219 1.80048L1.5625 12.3121V38.4375H5.23438V15.2344ZM6.79688 40H0V11.4062L19.9219 0L39.8438 11.4062V40H33.2031V16.7969H6.79688V40ZM23.8281 9.84375H16.1719V11.7188H23.8281V9.84375ZM14.6094 8.28125V13.2812H25.3906V8.28125H14.6094ZM15.8594 32.3438H21.6406V38.4375H15.8594V32.3438ZM21.6406 30.7812V23.125H30.5469V30.7812V32.3438V40H23.2031H21.6406H14.2969V30.7812H21.6406ZM28.9844 32.3438H23.2031V38.4375H28.9844V32.3438ZM28.9844 30.7812V24.6875H23.2031V30.7812H28.9844Z"
-      fill="#06847B"
-    />
-  </>,
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M10.5 5C10.5 4.44772 10.9477 4 11.5 4H13.1429V6.64286C13.1429 7.74743 14.0383 8.64286 15.1429 8.64286H16.8571C17.9617 8.64286 18.8571 7.74743 18.8571 6.64286V4H20.5C21.0523 4 21.5 4.44772 21.5 5V14C21.5 14.5523 21.0523 15 20.5 15H18H14H11.5C10.9477 15 10.5 14.5523 10.5 14V5ZM8.67071 15C8.56015 14.6872 8.5 14.3506 8.5 14V5C8.5 3.34315 9.84314 2 11.5 2H20.5C22.1569 2 23.5 3.34315 23.5 5V14C23.5 14.3506 23.4398 14.6872 23.3293 15H27C28.6569 15 30 16.3431 30 18V27C30 28.6569 28.6569 30 27 30H18C17.2316 30 16.5308 29.7111 16 29.2361C15.4692 29.7111 14.7684 30 14 30H5C3.34315 30 2 28.6569 2 27V18C2 16.3431 3.34315 15 5 15H8.67071ZM12.3571 17V19.6429C12.3571 20.7474 11.4617 21.6429 10.3571 21.6429H8.64286C7.53829 21.6429 6.64286 20.7474 6.64286 19.6429V17H5C4.44772 17 4 17.4477 4 18V27C4 27.5523 4.44772 28 5 28H14C14.5523 28 15 27.5523 15 27V18C15 17.4477 14.5523 17 14 17H12.3571ZM18 17C17.4477 17 17 17.4477 17 18V27C17 27.5523 17.4477 28 18 28H27C27.5523 28 28 27.5523 28 27V18C28 17.4477 27.5523 17 27 17H25.3571V19.6429C25.3571 20.7474 24.4617 21.6429 23.3571 21.6429H21.6429C20.5383 21.6429 19.6429 20.7474 19.6429 19.6429V17H18ZM15.1429 6.64286V4H16.8571V6.64286L15.1429 6.64286ZM8.64286 17V19.6429H10.3571V17H8.64286ZM21.6429 17V19.6429H23.3571V17H21.6429Z"
+    fill="currentColor"
+  />,
   "Warehouses"
 );
+Warehouses.defaultProps = {
+  viewBox: "0 0 32 32"
+};
 
 export default Warehouses;
diff --git a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
index 3a0a56b7216..85837a8e403 100644
--- a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
+++ b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
@@ -5,11 +5,12 @@ import {
   DialogTitle,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { MenuErrorFragment } from "@saleor/fragments/types/MenuErrorFragment";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getMenuErrorMessage from "@saleor/utils/errors/menu";
 import React from "react";
@@ -72,9 +73,7 @@ const MenuCreateDialog: React.FC<MenuCreateDialogProps> = ({
               />
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 transitionState={confirmButtonState}
                 onClick={submit}
diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
index 5c025d13056..d3cea385a2c 100644
--- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
+++ b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
@@ -7,6 +7,7 @@ import {
   Typography
 } from "@material-ui/core";
 import AutocompleteSelectMenu from "@saleor/components/AutocompleteSelectMenu";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { MenuErrorFragment } from "@saleor/fragments/types/MenuErrorFragment";
@@ -14,7 +15,7 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages, sectionNames } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
 import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
 import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages";
@@ -290,9 +291,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
         )}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           data-test="submit"
           transitionState={confirmButtonState}
diff --git a/src/navigation/components/MenuItems/MenuItems.tsx b/src/navigation/components/MenuItems/MenuItems.tsx
index bd93b775415..decd195d07d 100644
--- a/src/navigation/components/MenuItems/MenuItems.tsx
+++ b/src/navigation/components/MenuItems/MenuItems.tsx
@@ -174,13 +174,12 @@ const Node: React.FC<NodeRendererProps> = props => {
         <Button onClick={node.onClick}>
           <FormattedMessage {...buttonMessages.show} />
         </Button>
-        <IconButton variant="secondary" hoverOutline onClick={node.onEdit}>
+        <IconButton variant="secondary" onClick={node.onEdit}>
           <EditIcon />
         </IconButton>
         <IconButton
           className={classes.deleteButton}
           variant="secondary"
-          hoverOutline
           onClick={() =>
             node.onChange({
               id: node.id as any,
diff --git a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
index a5ed6affb08..fa53ae26418 100644
--- a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
+++ b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx
@@ -5,6 +5,7 @@ import {
   DialogTitle
 } from "@material-ui/core";
 import AddressEdit from "@saleor/components/AddressEdit";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
@@ -14,11 +15,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { mapCountriesToChoices } from "@saleor/utils/maps";
@@ -107,9 +104,7 @@ const OrderAddressEditDialog: React.FC<OrderAddressEditDialogProps> = props => {
                 />
               </DialogContent>
               <DialogActions>
-                <Button onClick={onClose}>
-                  <FormattedMessage {...buttonMessages.back} />
-                </Button>
+                <BackButton onClick={onClose} />
                 <ConfirmButton
                   data-test-id="order-address-edit-dialog-confirm-button"
                   transitionState={confirmButtonState}
diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
index f3e50e29d72..f85e2b15469 100644
--- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
+++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
@@ -5,12 +5,13 @@ import {
   DialogContentText,
   DialogTitle
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -68,9 +69,7 @@ const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
         )}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           onClick={onSubmit}
           transitionState={confirmButtonState}
diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
index 8a217d66621..4adf543c2e8 100644
--- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
+++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
@@ -5,6 +5,7 @@ import {
   DialogContentText,
   DialogTitle
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
@@ -12,11 +13,7 @@ import SingleAutocompleteSelectField from "@saleor/components/SingleAutocomplete
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import React from "react";
@@ -126,9 +123,7 @@ const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps>
                 )}
               </DialogContent>
               <DialogActions>
-                <Button onClick={onClose}>
-                  <FormattedMessage {...buttonMessages.back} />
-                </Button>
+                <BackButton onClick={onClose} />
                 <ConfirmButton
                   data-test="submit"
                   disabled={formData.warehouseId === null}
diff --git a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
index 05724101bcc..2308ec90f93 100644
--- a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
+++ b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
@@ -10,6 +10,7 @@ import {
   TableRow,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import { FormSpacer } from "@saleor/components/FormSpacer";
@@ -18,11 +19,7 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import React from "react";
@@ -224,9 +221,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
                 )}
               </DialogContent>
               <DialogActions>
-                <Button onClick={onClose}>
-                  <FormattedMessage {...buttonMessages.back} />
-                </Button>
+                <BackButton onClick={onClose} />
                 <ConfirmButton
                   transitionState={confirmButtonState}
                   type="submit"
diff --git a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
index 5e2302f41e7..df7b2776ead 100644
--- a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
+++ b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
@@ -6,13 +6,14 @@ import {
   DialogTitle,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import React from "react";
@@ -85,9 +86,7 @@ const OrderFulfillmentTrackingDialog: React.FC<OrderFulfillmentTrackingDialogPro
               )}
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 transitionState={confirmButtonState}
                 onClick={submit}
diff --git a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
index 8f74ae4066d..f0b66117b43 100644
--- a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
+++ b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
@@ -5,12 +5,13 @@ import {
   DialogContentText,
   DialogTitle
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { InvoiceErrorFragment } from "@saleor/fragments/types/InvoiceErrorFragment";
 import { InvoiceFragment } from "@saleor/fragments/types/InvoiceFragment";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { DialogProps } from "@saleor/types";
 import getInvoiceErrorMessage from "@saleor/utils/errors/invoice";
 import React from "react";
@@ -62,9 +63,7 @@ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> =
         )}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton transitionState={confirmButtonState} onClick={onSend}>
           <FormattedMessage {...buttonMessages.send} />
         </ConfirmButton>
diff --git a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
index 93458f9085e..bdd965210aa 100644
--- a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
+++ b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
@@ -6,12 +6,13 @@ import {
   DialogTitle,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import React from "react";
@@ -90,9 +91,7 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
               )}
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 transitionState={confirmButtonState}
                 onClick={submit}
diff --git a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
index a33f82d5336..64136ab8bcd 100644
--- a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
+++ b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
@@ -5,11 +5,12 @@ import {
   DialogContentText,
   DialogTitle
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -55,9 +56,7 @@ const OrderPaymentVoidDialog: React.FC<OrderPaymentVoidDialogProps> = ({
         )}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton transitionState={confirmButtonState} onClick={onConfirm}>
           <FormattedMessage {...buttonMessages.confirm} />
         </ConfirmButton>
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index f0b9fe3d0a8..9b68e19ebe5 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -10,6 +10,7 @@ import {
   TableRow,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import Checkbox from "@saleor/components/Checkbox";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
@@ -21,11 +22,7 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ChannelProps, FetchMoreProps } from "@saleor/types";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
@@ -395,9 +392,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
         )}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           transitionState={confirmButtonState}
           type="submit"
diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
index 71478c63615..7f90d7eca09 100644
--- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
+++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
@@ -6,6 +6,7 @@ import {
   DialogTitle,
   Typography
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
@@ -14,11 +15,7 @@ import { SingleSelectField } from "@saleor/components/SingleSelectField";
 import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getOrderErrorMessage from "@saleor/utils/errors/order";
 import React from "react";
@@ -147,9 +144,7 @@ const OrderShippingMethodEditDialog: React.FC<OrderShippingMethodEditDialogProps
               )}
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 transitionState={confirmButtonState}
                 type="submit"
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index 5138ea29a2b..734e2eef031 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -11,6 +11,7 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import CardSpacer from "@saleor/components/CardSpacer";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
@@ -20,11 +21,7 @@ import useElementScroll, {
 } from "@saleor/hooks/useElementScroll";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { getUserInitials, getUserName, renderCollection } from "@saleor/misc";
 import { SearchStaffMembers_search_edges_node } from "@saleor/searches/types/SearchStaffMembers";
 import { DialogProps, FetchMoreProps, SearchPageProps } from "@saleor/types";
@@ -303,9 +300,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
           [classes.dropShadow]: dropShadow
         })}
       >
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           data-test="submit"
           type="submit"
diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
index fcefc655019..b08c6a644fc 100644
--- a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
+++ b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
@@ -5,12 +5,13 @@ import {
   DialogTitle,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import Skeleton from "@saleor/components/Skeleton";
 import { PluginConfigurationFragment_configuration } from "@saleor/fragments/types/PluginConfigurationFragment";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
 import { DialogProps } from "@saleor/types";
 import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
@@ -79,9 +80,7 @@ const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
               />
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 transitionState={confirmButtonState}
                 onClick={submit}
diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
index 08308b73e71..e4632a43773 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialog.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
@@ -269,12 +269,22 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
 
         <DialogActions>
           {step === ProductExportStep.INFO && (
-            <Button onClick={onClose} data-test="cancel">
+            <Button
+              variant="secondary"
+              color="text"
+              onClick={onClose}
+              data-test="cancel"
+            >
               <FormattedMessage {...buttonMessages.cancel} />
             </Button>
           )}
           {step === ProductExportStep.SETTINGS && (
-            <Button onClick={prev} data-test="back">
+            <Button
+              variant="secondary"
+              color="text"
+              onClick={prev}
+              data-test="back"
+            >
               <FormattedMessage {...buttonMessages.back} />
             </Button>
           )}
diff --git a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
index 506a933d0e0..2b7b1a9f0b6 100644
--- a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
+++ b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
@@ -6,9 +6,9 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
-import { buttonMessages } from "@saleor/intl";
 import { Button } from "@saleor/macaw-ui";
 import { ProductDetails_product } from "@saleor/products/types/ProductDetails";
 import React from "react";
@@ -73,9 +73,7 @@ const ProductExternalMediaDialog: React.FC<ProductExternalMediaDialogProps> = ({
             </DialogContent>
 
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <Button onClick={submit}>
                 {intl.formatMessage(messages.buttonMessage)}
               </Button>
diff --git a/src/products/components/ProductStocks/CardAddItemsFooter.tsx b/src/products/components/ProductStocks/CardAddItemsFooter.tsx
index c52f451b898..5bd1a693d98 100644
--- a/src/products/components/ProductStocks/CardAddItemsFooter.tsx
+++ b/src/products/components/ProductStocks/CardAddItemsFooter.tsx
@@ -46,7 +46,6 @@ const CardAddItemsFooter: React.FC<CardAddItemsFooterProps> = ({
         {intl.formatMessage(title)}
       </Link>
       <IconButton
-        hoverOutline
         variant="secondary"
         data-test-id={testIds.button}
         color="primary"
diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
index 6f2c16986df..6e042cd4a8f 100644
--- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
+++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
@@ -5,13 +5,9 @@ import {
   DialogContentText,
   DialogTitle
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
-import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -61,9 +57,7 @@ const ProductVariantDeleteDialog: React.FC<ProductVariantDeleteDialogProps> = pr
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
         <ConfirmButton
           transitionState={confirmButtonState}
           className={classes.deleteButton}
diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
index d5225e87274..ad5aba3f4b5 100644
--- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
+++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
@@ -4,9 +4,9 @@ import {
   DialogContent,
   DialogTitle
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment";
-import { buttonMessages } from "@saleor/intl";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -100,9 +100,7 @@ const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogP
         </div>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={onClose} />
       </DialogActions>
     </Dialog>
   );
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
index f416c3e6137..69349c69069 100644
--- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
@@ -9,6 +9,7 @@ import {
   TableRow,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import Checkbox from "@saleor/components/Checkbox";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
@@ -16,11 +17,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
 import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
 import { ShippingPriceExcludeProduct } from "@saleor/shipping/types/ShippingPriceExcludeProduct";
@@ -226,9 +223,7 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
         </div>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleClose}>
-          <FormattedMessage {...buttonMessages.back} />
-        </Button>
+        <BackButton onClick={handleClose} />
         <ConfirmButton
           transitionState={confirmButtonState}
           type="submit"
diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
index 776297e9983..c80d4538e64 100644
--- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
+++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
@@ -5,6 +5,7 @@ import {
   DialogTitle,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import CompanyAddressForm from "@saleor/components/CompanyAddressInput/CompanyAddressForm";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
@@ -18,11 +19,7 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { buttonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { DialogProps } from "@saleor/types";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { mapCountriesToChoices } from "@saleor/utils/maps";
@@ -139,9 +136,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
                 />
               </DialogContent>
               <DialogActions>
-                <Button onClick={onClose}>
-                  <FormattedMessage {...buttonMessages.back} />
-                </Button>
+                <BackButton onClick={onClose} />
                 <ConfirmButton
                   transitionState={confirmButtonState}
                   type="submit"
diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
index a41056e1efa..41f8df714cf 100644
--- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
+++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
@@ -9,6 +9,7 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import Checkbox from "@saleor/components/Checkbox";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
@@ -16,8 +17,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
-import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { filter } from "fuzzaldrin";
 import React from "react";
@@ -190,9 +190,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
                 </ResponsiveTable>
               </DialogContent>
               <DialogActions>
-                <Button onClick={onClose}>
-                  <FormattedMessage {...buttonMessages.back} />
-                </Button>
+                <BackButton onClick={onClose} />
                 <ConfirmButton
                   transitionState={confirmButtonState}
                   type="submit"
diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
index e25631e218e..a448b1c771c 100644
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
@@ -6,15 +6,12 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
-import { buttonMessages, commonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { commonMessages } from "@saleor/intl";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { DialogProps, MinMax } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -87,9 +84,7 @@ const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDia
               </Grid>
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 disabled={!hasChanged || !data.min}
                 transitionState={confirmButtonState}
diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
index de5f5660969..bc954f4b884 100644
--- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
+++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
@@ -15,7 +15,6 @@ import { ShippingZoneFragment } from "@saleor/fragments/types/ShippingZoneFragme
 import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
-import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -31,7 +30,7 @@ const useStyles = makeStyles(
       "&:last-child": {
         paddingRight: theme.spacing(1)
       },
-      width: 80
+      width: 92
     },
     colCountries: {
       width: 180
@@ -46,7 +45,7 @@ const useStyles = makeStyles(
   { name: "ShippingZonesList" }
 );
 
-const numberOfColumns = 3;
+const numberOfColumns = 4;
 
 const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
   const {
@@ -88,6 +87,12 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
         }
       />
       <ResponsiveTable>
+        <colgroup>
+          <col />
+          <col className={classes.colName} />
+          <col className={classes.colCountries} />
+          <col className={classes.colAction} />
+        </colgroup>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -110,10 +115,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={getFooterColSpanWithBulkActions(
-                shippingZones,
-                numberOfColumns
-              )}
+              colSpan={numberOfColumns}
               settings={settings}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
index 8b42dd1114a..9699aeb7ccf 100644
--- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
+++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
@@ -5,17 +5,14 @@ import {
   DialogTitle,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { StaffErrorFragment } from "@saleor/fragments/types/StaffErrorFragment";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
-import { buttonMessages, commonMessages } from "@saleor/intl";
-import {
-  Button,
-  ConfirmButtonTransitionState,
-  makeStyles
-} from "@saleor/macaw-ui";
+import { commonMessages } from "@saleor/intl";
+import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups";
 import { FetchMoreProps, SearchPageProps } from "@saleor/types";
 import { getFormErrors } from "@saleor/utils/errors";
@@ -136,9 +133,7 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
             </DialogContent>
             <hr className={classes.hr} />
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 data-test="submit"
                 disabled={!hasChanged}
diff --git a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
index 6b9fc6090bd..0c95756e6e5 100644
--- a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
+++ b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
@@ -5,13 +5,14 @@ import {
   DialogTitle,
   TextField
 } from "@material-ui/core";
+import BackButton from "@saleor/components/BackButton";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
 import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { DialogProps } from "@saleor/types";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAccountErrorMessage from "@saleor/utils/errors/account";
@@ -96,9 +97,7 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
               />
             </DialogContent>
             <DialogActions>
-              <Button onClick={onClose}>
-                <FormattedMessage {...buttonMessages.back} />
-              </Button>
+              <BackButton onClick={onClose} />
               <ConfirmButton
                 disabled={data.newPassword.length < 8}
                 transitionState={confirmButtonState}
diff --git a/src/storybook/stories/configuration/ConfigurationPage.tsx b/src/storybook/stories/configuration/ConfigurationPage.tsx
index 2aac04d1f0a..e3cfb26edfa 100644
--- a/src/storybook/stories/configuration/ConfigurationPage.tsx
+++ b/src/storybook/stories/configuration/ConfigurationPage.tsx
@@ -33,7 +33,6 @@ const Story: React.FC<{ user: User }> = ({ user }) => {
   return (
     <ConfigurationPage
       menu={createConfigurationMenu(intl)}
-      onSectionClick={() => undefined}
       user={user}
       versionInfo={versions}
     />