Macaw UI update (#2512)

Co-authored-by: andrzejewsky <vox3r69@gmail.com> Co-authored-by: timur <timuric@gmail.com> Co-authored-by: Krzysztof Żuraw <9116238+krzysztofzuraw@users.noreply.github.com>
2022-11-24 13:16:51 +01:00 · 2022-11-24 13:16:51 +01:00 · 9574e6a92c
commit 9574e6a92c
parent dbe394f2a8
67 changed files with 22783 additions and 10608 deletions
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@ -6106,6 +6106,9 @@
    "context": "set balance dialog subtitle",
    "string": "What would you like to set cards balance to. When you change the balance both values will be changed"
  },
+  "kFkPWB": {
+    "string": "Number"
+  },
  "kIXV5V": {
    "context": "install with app manifest button",
    "string": "Install with App Manifest"
@ -6746,9 +6749,6 @@
    "context": "checkbox label description",
    "string": "Expiration date will be automatically set, once gift card is issued"
  },
-  "ps0WUQ": {
-    "string": "No. of Order"
-  },
  "ptPPVk": {
    "string": "No languages found"
  },
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -25,12 +25,12 @@
    "@editorjs/paragraph": "^2.8.0",
    "@editorjs/quote": "^2.4.0",
    "@glideapps/glide-data-grid": "^5.0.0",
-    "@material-ui/core": "^4.11.4",
+    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
+    "@material-ui/lab": "^4.0.0-alpha.61",
    "@material-ui/styles": "^4.11.4",
    "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.6.5",
+    "@saleor/macaw-ui": "0.6.8-0",
    "@saleor/sdk": "^0.4.4",
    "@sentry/react": "^6.0.0",
    "@types/faker": "^5.1.6",
--- a/src/apps/components/CustomAppDefaultToken/styles.ts
+++ b/src/apps/components/CustomAppDefaultToken/styles.ts
@ -1,4 +1,4 @@
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { makeStyles } from "@saleor/macaw-ui";

 export const useStyles = makeStyles(
@ -25,7 +25,7 @@ export const useStyles = makeStyles(
      right: theme.spacing(1),
    },
    paper: {
-      background: fade(theme.palette.primary.main, 0.05),
+      background: alpha(theme.palette.primary.main, 0.05),
      padding: theme.spacing(2, 3),
    },
    root: {
--- a/src/apps/components/TokenCreateDialog/styles.ts
+++ b/src/apps/components/TokenCreateDialog/styles.ts
@ -1,4 +1,4 @@
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { makeStyles } from "@saleor/macaw-ui";

 export const useStyles = makeStyles(
@ -12,7 +12,7 @@ export const useStyles = makeStyles(
      right: theme.spacing(1),
    },
    paper: {
-      background: fade(theme.palette.primary.main, 0.05),
+      background: alpha(theme.palette.primary.main, 0.05),
      padding: theme.spacing(2, 3),
    },
  }),
--- a/src/apps/styles.ts
+++ b/src/apps/styles.ts
@ -45,6 +45,7 @@ export const useStyles = makeStyles(
      flexDirection: "row",
      justifyContent: "flex-end",
      textAlign: "right",
+      gap: theme.spacing(1),
    },
    colInstallAction: {
      "& > *": {
--- a/src/auth/components/LoginPage/LoginPage.tsx
+++ b/src/auth/components/LoginPage/LoginPage.tsx
@ -107,7 +107,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
            {/* Not using endAdornment as it looks weird with autocomplete */}
            <IconButton
              className={classes.showPasswordBtn}
-              variant="secondary"
+              variant="ghost"
              hoverOutline={false}
              onMouseDown={() => setShowPassword(true)}
              onMouseUp={() => setShowPassword(false)}
--- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
+++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
@ -36,7 +36,11 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
    <Form initial={{ email: "" }} onSubmit={onSubmit}>
      {({ change: handleChange, data, submit: handleSubmit }) => (
        <>
-          <IconButton className={classes.backBtn} href={getAppMountUri()}>
+          <IconButton
+            className={classes.backBtn}
+            href={getAppMountUri()}
+            variant="secondary"
+          >
            <ArrowRightIcon className={classes.arrow} />
          </IconButton>
          <Typography variant="h3" className={classes.header}>
--- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
+++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
@ -1,7 +1,6 @@
 import { Typography } from "@material-ui/core";
 import { Button } from "@saleor/components/Button";
 import FormSpacer from "@saleor/components/FormSpacer";
-import {} from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";

--- a/src/channels/components/AssignmentList/AssignmentListHeader.tsx
+++ b/src/channels/components/AssignmentList/AssignmentListHeader.tsx
@ -1,7 +1,7 @@
-import { AccordionSummary, Typography } from "@material-ui/core";
+import { Typography } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import Skeleton from "@saleor/components/Skeleton";
-import IconChevronDown from "@saleor/icons/ChevronDown";
+import { AccordionSummary } from "@saleor/macaw-ui";
 import React from "react";

 import { useHeaderStyles } from "./styles";
@ -21,7 +21,7 @@ const AssignmentListHeader: React.FC<AssignmentListHeaderProps> = ({

  return (
    <div className={container}>
-      <AccordionSummary expandIcon={<IconChevronDown />} classes={accordion}>
+      <AccordionSummary className={accordion.root}>
        {loading ? (
          <Skeleton className={skeleton} />
        ) : (
--- a/src/channels/components/AssignmentList/styles.ts
+++ b/src/channels/components/AssignmentList/styles.ts
@ -46,13 +46,6 @@ export const useHeaderStyles = makeStyles(
        minHeight: 0,
      },
    },
-    content: {
-      margin: 0,
-
-      "&$expanded": {
-        margin: 0,
-      },
-    },
  }),
  { name: "AssignmentListHeader" },
 );
--- a/src/components/AccountPermissions/AccountPermissions.tsx
+++ b/src/components/AccountPermissions/AccountPermissions.tsx
@ -140,7 +140,7 @@ const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
              <ListItemIcon>
                <Checkbox
                  data-test-id="full-access"
-                  color="primary"
+                  color="secondary"
                  edge="start"
                  checked={data.hasFullAccess}
                  disabled={disabled}
@ -175,7 +175,7 @@ const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
                    >
                      <ListItemIcon>
                        <Checkbox
-                          color="primary"
+                          color="secondary"
                          edge="start"
                          checked={
                            data.permissions.filter(
--- a/src/components/Attributes/Attributes.tsx
+++ b/src/components/Attributes/Attributes.tsx
@ -1,5 +1,4 @@
 import { Card, CardContent, Typography } from "@material-ui/core";
-import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import { AttributeReference } from "@saleor/attributes/utils/data";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
@ -13,7 +12,7 @@ import {
  ProductErrorWithAttributesFragment,
 } from "@saleor/graphql";
 import { FormsetAtomicData } from "@saleor/hooks/useFormset";
-import { IconButton, makeStyles } from "@saleor/macaw-ui";
+import { ChevronIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
 import { RichTextGetters } from "@saleor/utils/richText/useMultipleRichText";
 import classNames from "classnames";
@ -75,6 +74,7 @@ const useStyles = makeStyles(
      display: "flex",
    },
    expansionBarButton: {
+      padding: 4,
      marginBottom: theme.spacing(1),
    },
    expansionBarButtonIcon: {
@ -148,11 +148,12 @@ const Attributes: React.FC<AttributesProps> = ({
          </div>
          <IconButton
            variant="secondary"
+            hoverOutline={false}
            className={classes.expansionBarButton}
            onClick={toggleExpansion}
            data-test-id="attributes-expand"
          >
-            <ArrowDropDownIcon
+            <ChevronIcon
              className={classNames(classes.expansionBarButtonIcon, {
                [classes.rotate]: expanded,
              })}
--- a/src/components/CardMenu/CardMenu.tsx
+++ b/src/components/CardMenu/CardMenu.tsx
@ -139,7 +139,6 @@ const CardMenu: React.FC<CardMenuProps> = props => {
        aria-label="More"
        aria-owns={open ? "long-menu" : null}
        aria-haspopup="true"
-        color="primary"
        disabled={disabled}
        ref={anchorRef}
        onClick={handleToggle}
--- a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
+++ b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
@ -1,7 +1,6 @@
-import { Accordion, AccordionSummary, Typography } from "@material-ui/core";
+import { Typography } from "@material-ui/core";
 import { ChannelData } from "@saleor/channels/utils";
-import IconChevronDown from "@saleor/icons/ChevronDown";
-import { makeStyles } from "@saleor/macaw-ui";
+import { Accordion, AccordionSummary, makeStyles } from "@saleor/macaw-ui";
 import Label from "@saleor/orders/components/OrderHistory/Label";
 import React from "react";

@ -45,13 +44,6 @@ const useSummaryStyles = makeStyles(
        padding: theme.spacing(2, 0),
      },
    },
-    content: {
-      margin: 0,
-
-      "&$expanded": {
-        margin: 0,
-      },
-    },
  }),
  { name: "ChannelContentWrapperExpanderSummary" },
 );
@ -88,10 +80,7 @@ const ChannelContentWrapper: React.FC<ChannelContentWrapperProps> = ({
      classes={expanderClasses}
      data-test-id="channel-availability-item"
    >
-      <AccordionSummary
-        expandIcon={<IconChevronDown />}
-        classes={summaryClasses}
-      >
+      <AccordionSummary className={summaryClasses.root}>
        <div className={classes.container}>
          <Typography>{name}</Typography>
          <Label text={messages.availableDateText} />
--- a/src/components/Chip/Chip.tsx
+++ b/src/components/Chip/Chip.tsx
@ -1,5 +1,5 @@
 import { Typography } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import CloseIcon from "@material-ui/icons/Close";
 import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
@ -23,7 +23,7 @@ const useStyles = makeStyles(
      color: theme.palette.common.white,
    },
    root: {
-      background: fade(theme.palette.primary.main, 0.8),
+      background: alpha(theme.palette.primary.main, 0.8),
      borderRadius: 18,
      display: "inline-block",
      marginRight: theme.spacing(2),
--- a/src/components/ColumnPicker/ColumnPickerButton.tsx
+++ b/src/components/ColumnPicker/ColumnPickerButton.tsx
@ -1,4 +1,4 @@
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import { Button } from "@saleor/components/Button";
 import { makeStyles } from "@saleor/macaw-ui";
@ -25,7 +25,7 @@ const useStyles = makeStyles(
      paddingRight: theme.spacing(1),
    },
    rootActive: {
-      background: fade(theme.palette.primary.main, 0.1),
+      background: alpha(theme.palette.primary.main, 0.1),
    },
    rotate: {
      transform: "rotate(180deg)",
--- a/src/components/ControlledSwitch.tsx
+++ b/src/components/ControlledSwitch.tsx
@ -42,7 +42,6 @@ export const ControlledSwitch: React.FC<ControlledSwitchProps> = props => {
            onChange({ target: { name, value: !checked } } as any)
          }
          checked={checked}
-          color="primary"
          name={name}
        />
      }
--- a/src/components/CountryList/CountryList.tsx
+++ b/src/components/CountryList/CountryList.tsx
@ -26,7 +26,8 @@ const useStyles = makeStyles(
  theme => ({
    iconCell: {
      "&:last-child": {
-        paddingRight: theme.spacing(2),
+        paddingRight: theme.spacing(3),
+        paddingLeft: 0,
      },
      width: `calc(48px + ${theme.spacing(4)})`,
    },
@ -161,7 +162,7 @@ const CountryList: React.FC<CountryListProps> = props => {
                  >
                    <IconButton
                      data-test-id="delete-icon"
-                      color="primary"
+                      variant="secondary"
                      disabled={!country || disabled}
                      onClick={() => onCountryUnassign(country.code)}
                    >
--- a/src/components/Datagrid/styles.ts
+++ b/src/components/Datagrid/styles.ts
@ -91,6 +91,7 @@ const useStyles = makeStyles(
        boxSizing: "content-box",
        width: "100%",
        paddingBottom: "1px",
+        color: "red",
      },
      root: {
        position: "relative",
@ -194,7 +195,7 @@ export function useDatagridTheme() {

  const datagridTheme = useMemo(
    (): Partial<Theme> => ({
-      accentColor: theme.palette.primary.main,
+      accentColor: theme.palette.secondary.main,
      accentLight: theme.palette.background.default,
      accentFg: "transparent",
      bgCell: theme.palette.background.paper,
--- a/src/components/Date/Date.test.tsx
+++ b/src/components/Date/Date.test.tsx
@ -1,3 +1,4 @@
+import { ThemeProvider } from "@saleor/macaw-ui";
 import React from "react";
 import renderer, { ReactTestRendererJSON } from "react-test-renderer";

@ -9,27 +10,33 @@ const expectedDate = "Apr 7, 2018";

 test("Render plain date with timezone GMT-11", () => {
  const date = renderer.create(
+    <ThemeProvider>
      <TimezoneProvider value="Pacific/Midway">
        <Date date={testDate} plain />
-    </TimezoneProvider>,
+      </TimezoneProvider>
+    </ThemeProvider>,
  );
  expect(date.toJSON()).toEqual(expectedDate);
 });

 test("Render plain date with timezone GMT+13", () => {
  const date = renderer.create(
+    <ThemeProvider>
      <TimezoneProvider value="Pacific/Tongatapu">
        <Date date={testDate} plain />
-    </TimezoneProvider>,
+      </TimezoneProvider>
+    </ThemeProvider>,
  );
  expect(date.toJSON()).toEqual(expectedDate);
 });

 test("Render humanized date with timezone GMT-11", () => {
  const date = renderer.create(
+    <ThemeProvider>
      <TimezoneProvider value="Pacific/Midway">
        <Date date={testDate} />
-    </TimezoneProvider>,
+      </TimezoneProvider>
+    </ThemeProvider>,
  );
  expect((date.toJSON() as ReactTestRendererJSON).props.dateTime).toEqual(
    testDate,
@ -38,9 +45,11 @@ test("Render humanized date with timezone GMT-11", () => {

 test("Render humanized date with timezone GMT+13", () => {
  const date = renderer.create(
+    <ThemeProvider>
      <TimezoneProvider value="Pacific/Tongatapu">
        <Date date={testDate} />
-    </TimezoneProvider>,
+      </TimezoneProvider>
+    </ThemeProvider>,
  );
  expect((date.toJSON() as ReactTestRendererJSON).props.dateTime).toEqual(
    testDate,
--- a/src/components/Date/Date.tsx
+++ b/src/components/Date/Date.tsx
@ -1,11 +1,10 @@
-import { Tooltip } from "@material-ui/core";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
+import { Tooltip } from "@saleor/macaw-ui";
 import moment from "moment-timezone";
 import React from "react";

 import { LocaleConsumer } from "../Locale";
 import { Consumer } from "./DateContext";
-import { useStyles } from "./styles";

 interface DateProps {
  date: string;
@ -13,8 +12,6 @@ interface DateProps {
 }

 export const Date: React.FC<DateProps> = ({ date, plain }) => {
-  const classes = useStyles();
-
  const localizeDate = useDateLocalize();

  const getHumanized = (value: string, locale: string, currentDate: number) =>
@ -30,12 +27,7 @@ export const Date: React.FC<DateProps> = ({ date, plain }) => {
            plain ? (
              localizeDate(date)
            ) : (
-              <Tooltip
-                title={localizeDate(date)}
-                PopperProps={{
-                  className: classes.tooltip,
-                }}
-              >
+              <Tooltip title={localizeDate(date)}>
                <time dateTime={date}>
                  {getHumanized(date, locale, currentDate)}
                </time>
--- a/src/components/Date/DateTime.tsx
+++ b/src/components/Date/DateTime.tsx
@ -1,4 +1,4 @@
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@saleor/macaw-ui";
 import moment from "moment-timezone";
 import React from "react";
 import ReactMoment from "react-moment";
@ -6,7 +6,6 @@ import ReactMoment from "react-moment";
 import { LocaleConsumer } from "../Locale";
 import { TimezoneConsumer } from "../Timezone";
 import { Consumer } from "./DateContext";
-import { useStyles } from "./styles";

 interface DateTimeProps {
  date: string;
@ -14,8 +13,6 @@ interface DateTimeProps {
 }

 export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
-  const classes = useStyles();
-
  const getTitle = (value: string, locale?: string, tz?: string) => {
    let date = moment(value).locale(locale);
    if (tz !== undefined) {
@ -34,12 +31,7 @@ export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
                plain ? (
                  getTitle(date, locale, tz)
                ) : (
-                  <Tooltip
-                    title={getTitle(date, locale, tz)}
-                    PopperProps={{
-                      className: classes.tooltip,
-                    }}
-                  >
+                  <Tooltip title={getTitle(date, locale, tz)}>
                    <ReactMoment from={currentDate} locale={locale} tz={tz}>
                      {date}
                    </ReactMoment>
--- a/src/components/Date/styles.ts
+++ b/src/components/Date/styles.ts
@ -1,14 +0,0 @@
-import { makeStyles } from "@saleor/macaw-ui";
-
-export const useStyles = makeStyles(
-  theme => ({
-    tooltip: {
-      "& .MuiTooltip-tooltip": {
-        color: theme.palette.getContrastText(theme.palette.text.primary),
-      },
-    },
-  }),
-  {
-    name: "DateTime",
-  },
-);
--- a/src/components/Filter/Filter.tsx
+++ b/src/components/Filter/Filter.tsx
@ -1,12 +1,6 @@
-import {
-  ButtonBase,
-  ClickAwayListener,
-  Grow,
-  Popper,
-  Typography,
-} from "@material-ui/core";
-import { fade } from "@material-ui/core/styles/colorManipulator";
-import { makeStyles } from "@saleor/macaw-ui";
+import { ClickAwayListener, Grow, Popper, Typography } from "@material-ui/core";
+import { alpha } from "@material-ui/core/styles";
+import { Button, makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
@ -34,7 +28,7 @@ const useStyles = makeStyles(
    addFilterButton: {
      "&$filterButton": {
        "&:hover, &:focus": {
-          backgroundColor: fade(theme.palette.primary.main, 0.1),
+          backgroundColor: alpha(theme.palette.primary.main, 0.1),
        },
        backgroundColor: theme.palette.background.paper,
        border: `1px solid ${theme.palette.primary.main}`,
@ -47,7 +41,7 @@ const useStyles = makeStyles(
    },
    addFilterButtonActive: {
      "&$addFilterButton": {
-        backgroundColor: fade(theme.palette.primary.main, 0.1),
+        backgroundColor: alpha(theme.palette.primary.main, 0.1),
      },
    },
    addFilterIcon: {
@ -60,16 +54,8 @@ const useStyles = makeStyles(
      textTransform: "uppercase",
    },
    filterButton: {
-      alignItems: "center",
-      backgroundColor: fade(theme.palette.primary.main, 0.6),
-      borderRadius: "4px",
-      display: "flex",
-      height: 40,
-      justifyContent: "space-around",
-      margin: theme.spacing(2, 1),
-      marginLeft: 0,
-      padding: theme.spacing(0, 2),
-      position: "relative",
+      padding: theme.spacing(1, 2),
+      marginRight: theme.spacing(2),
    },
    paper: {
      "& p": {
@ -89,7 +75,7 @@ const useStyles = makeStyles(
    separator: {
      backgroundColor: theme.palette.primary.main,
      display: "inline-block",
-      height: 28,
+      height: 14,
      margin: theme.spacing(0, 1.5, 0, 1),
      width: 1,
    },
@ -141,13 +127,14 @@ const Filter: React.FC<FilterProps> = props => {
      mouseEvent="onMouseUp"
    >
      <div ref={anchor}>
-        <ButtonBase
-          className={classNames(classes.filterButton, classes.addFilterButton, {
+        <Button
+          className={classNames(classes.filterButton, {
            [classes.addFilterButtonActive]:
              isFilterMenuOpened || isFilterActive,
          })}
          onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
          data-test-id="show-filters-button"
+          variant="secondary"
        >
          <Typography className={classes.addFilterText}>
            <FormattedMessage
@ -174,7 +161,7 @@ const Filter: React.FC<FilterProps> = props => {
              </Typography>
            </>
          )}
-        </ButtonBase>
+        </Button>
        <Popper
          className={classes.popover}
          open={isFilterMenuOpened}
--- a/src/components/Filter/FilterContent/FilterContent.tsx
+++ b/src/components/Filter/FilterContent/FilterContent.tsx
@ -1,14 +1,8 @@
-import {
-  Accordion,
-  AccordionSummary,
-  makeStyles,
-  Paper,
-  Typography,
-} from "@material-ui/core";
+import { makeStyles, Paper, Typography } from "@material-ui/core";
 import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
 import Hr from "@saleor/components/Hr";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
-import IconChevronDown from "@saleor/icons/ChevronDown";
+import { Accordion, AccordionSummary } from "@saleor/macaw-ui";
 import React, { useState } from "react";

 import { FilterAutocompleteDisplayValues } from "../FilterAutocompleteField";
@ -28,7 +22,6 @@ import FilterErrorsList from "./FilterErrorsList";
 const useExpanderStyles = makeStyles(
  theme => ({
    btn: {
-      border: "none",
      marginRight: theme.spacing(1),
    },

@ -66,13 +59,6 @@ const useSummaryStyles = makeStyles(
        minHeight: 0,
      },
    },
-    content: {
-      margin: 0,
-
-      "&$expanded": {
-        margin: 0,
-      },
-    },
  }),
  { name: "FilterContentExpanderSummary" },
 );
@ -229,8 +215,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
                    },
                    disableRipple: true,
                  }}
-                  expandIcon={<IconChevronDown />}
-                  classes={summaryClasses}
+                  className={summaryClasses.root}
                  onClick={() => handleFilterOpen(filter)}
                >
                  {currentFilter && (
--- a/src/components/Filter/FilterContent/FilterContentBody.tsx
+++ b/src/components/Filter/FilterContent/FilterContentBody.tsx
@ -1,5 +1,5 @@
 import { FormControlLabel, Radio, TextField } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { FilterDateTimeField } from "@saleor/components/Filter/FilterContent/FilterDateTimeField";
 import { FilterNumericField } from "@saleor/components/Filter/FilterContent/FilterNumericField";
 import { FilterSingleSelectField } from "@saleor/components/Filter/FilterContent/FilterSingleSelectField";
@ -27,7 +27,7 @@ import {
 const useStyles = makeStyles(
  theme => ({
    filterSettings: {
-      background: fade(theme.palette.primary.main, 0.1),
+      background: alpha(theme.palette.primary.main, 0.1),
      padding: theme.spacing(2, 3),
    },

@ -142,7 +142,7 @@ const FilterContentBody = <K extends string = string>({
                  data-test-id="filter-boolean"
                  data-test-is-checked={filter.value[0] === option.value}
                  checked={filter.value[0] === option.value}
-                  color="primary"
+                  color="secondary"
                />
              }
              label={option.label}
--- a/src/components/Filter/FilterContent/FilterErrorsList.tsx
+++ b/src/components/Filter/FilterContent/FilterErrorsList.tsx
@ -1,5 +1,5 @@
 import { Typography } from "@material-ui/core";
-import { fade, makeStyles } from "@material-ui/core/styles";
+import { alpha, makeStyles } from "@material-ui/core/styles";
 import InlineAlert from "@saleor/components/Alert/InlineAlert";
 import errorTracker from "@saleor/services/errorTracking";
 import React from "react";
@ -11,7 +11,7 @@ import { FilterElement, FilterErrorMessages, FilterErrors } from "../types";
 const useStyles = makeStyles(
  theme => ({
    container: {
-      backgroundColor: fade(theme.palette.primary.main, 0.1),
+      backgroundColor: alpha(theme.palette.primary.main, 0.1),
      padding: theme.spacing(3, 3, 0, 3),
    },
    listItemTitle: {
--- a/src/components/Filter/FilterContent/styles.ts
+++ b/src/components/Filter/FilterContent/styles.ts
@ -1,4 +1,4 @@
-import { fade } from "@material-ui/core";
+import { alpha } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";

 const useStyles = makeStyles(
@ -10,7 +10,7 @@ const useStyles = makeStyles(
      marginRight: theme.spacing(2),
    },
    filterSettings: {
-      background: fade(theme.palette.primary.main, 0.1),
+      background: alpha(theme.palette.primary.main, 0.1),
      padding: theme.spacing(2, 3),
    },
    inputRange: {
--- a/src/components/ImageUpload/ImageUpload.tsx
+++ b/src/components/ImageUpload/ImageUpload.tsx
@ -1,5 +1,5 @@
 import { Typography } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { ImageIcon, makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
@ -21,7 +21,7 @@ interface ImageUploadProps {
 const useStyles = makeStyles(
  theme => ({
    backdrop: {
-      background: fade(theme.palette.primary.main, 0.1),
+      background: alpha(theme.palette.primary.main, 0.1),
      color: theme.palette.primary.main,
    },
    fileField: {
--- a/src/components/Metadata/styles.ts
+++ b/src/components/Metadata/styles.ts
@ -22,7 +22,6 @@ const useStyles = makeStyles(
      },
      colName: {
        ...colName,
-        verticalAlign: "top",
      },
      colNameHeader: {
        ...colName,
@ -49,6 +48,7 @@ const useStyles = makeStyles(
        transition: theme.transitions.create("transform", {
          duration: theme.transitions.duration.shorter,
        }),
+        border: 0,
      },
      header: {
        "&&": {
--- a/src/components/Money/Money.tsx
+++ b/src/components/Money/Money.tsx
@ -4,9 +4,12 @@ import React from "react";

 const useStyles = makeStyles(
  {
+    root: {
+      fontWeight: 500,
+    },
    currency: {
-      fontSize: "0.875em",
-      marginRight: "0.5rem",
+      fontSize: "0.87em",
+      marginRight: "0.2rem",
    },
  },
  { name: "Money" },
@ -40,10 +43,10 @@ export const Money: React.FC<MoneyProps> = ({ money }) => {
  });

  return (
-    <>
+    <span className={classes.root}>
      <span className={classes.currency}>{money.currency}</span>
      {amount}
-    </>
+    </span>
  );
 };

--- a/src/components/MultiAutocompleteSelectField/styles.ts
+++ b/src/components/MultiAutocompleteSelectField/styles.ts
@ -1,4 +1,4 @@
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { makeStyles } from "@saleor/macaw-ui";

 export const useStyles = makeStyles(
@ -10,6 +10,7 @@ export const useStyles = makeStyles(
      height: 32,
      padding: 0,
      width: 32,
+      border: 0,
    },
    chipContainer: {
      display: "flex",
@ -21,7 +22,10 @@ export const useStyles = makeStyles(
        color: theme.palette.primary.contrastText,
      },
      alignItems: "center",
-      background: fade(theme.palette.primary.main, 0.8),
+      background:
+        theme.palette.type === "dark"
+          ? theme.palette.secondary.main
+          : alpha(theme.palette.primary.main, 0.8),
      borderRadius: 18,
      color: theme.palette.primary.contrastText,
      display: "flex",
@ -42,7 +46,7 @@ export const useStyles = makeStyles(
        color: theme.palette.grey[200],
      },
      alignItems: "center",
-      background: fade(theme.palette.grey[400], 0.8),
+      background: alpha(theme.palette.grey[400], 0.8),
      borderRadius: 18,
      color: theme.palette.primary.contrastText,
      display: "flex",
--- a/src/components/Navigator/Navigator.tsx
+++ b/src/components/Navigator/Navigator.tsx
@ -152,9 +152,9 @@ const Navigator: React.FC<NavigatorProps> = ({ visible, setVisibility }) => {
                  <NavigatorInput
                    mode={mode}
                    value={query}
-                    {...getInputProps({
+                    {...(getInputProps({
                      value: query,
-                    })}
+                    }) as React.InputHTMLAttributes<HTMLInputElement>)}
                    ref={input}
                  />
                  {hasAnything && <Divider />}
--- a/src/components/RadioGroupField/RadioGroupField.tsx
+++ b/src/components/RadioGroupField/RadioGroupField.tsx
@ -88,7 +88,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
                  className={classNames({
                    [classes.alignTop]: alignTop,
                  })}
-                  color="primary"
+                  color="secondary"
                />
              }
              label={choice.label}
--- a/src/components/RadioSwitchField/RadioSwitchField.tsx
+++ b/src/components/RadioSwitchField/RadioSwitchField.tsx
@ -87,7 +87,7 @@ export const RadioSwitchField: React.FC<RadioSwitchFieldProps> = props => {
            classes.radioLabel,
            overrideClasses?.radioLabel,
          )}
-          control={<Radio color="primary" />}
+          control={<Radio color="secondary" />}
          label={firstOptionLabel}
          name={name}
        />
@ -97,7 +97,7 @@ export const RadioSwitchField: React.FC<RadioSwitchFieldProps> = props => {
            classes.radioLabel,
            overrideClasses?.radioLabel,
          )}
-          control={<Radio color="primary" />}
+          control={<Radio color="secondary" />}
          label={secondOptionLabel}
          name={name}
        />
--- a/src/components/RichTextEditor/styles.ts
+++ b/src/components/RichTextEditor/styles.ts
@ -1,14 +1,16 @@
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { makeStyles } from "@saleor/macaw-ui";

 const useStyles = makeStyles(
  theme => {
    const hover = {
      "&:hover": {
-        background: fade(theme.palette.primary.main, 0.1),
+        background: alpha(theme.palette.primary.main, 0.1),
      },
    };

+    const isDarkMode = theme.palette.type === "dark";
+
    return {
      editor: {
        "& .codex-editor": {
@ -18,7 +20,7 @@ const useStyles = makeStyles(
          minHeight: 24,
        },
        "& .ce-block--selected .ce-block__content": {
-          background: `${fade(theme.palette.primary.main, 0.2)} !important`,
+          background: `${alpha(theme.palette.primary.main, 0.2)} !important`,
        },
        "& .ce-block__content": {
          margin: 0,
@ -28,7 +30,7 @@ const useStyles = makeStyles(
          ...hover,
        },
        "& .ce-conversion-tool--focused": {
-          background: `${fade(theme.palette.primary.main, 0.1)} !important`,
+          background: `${alpha(theme.palette.primary.main, 0.1)} !important`,
        },
        "& .ce-conversion-tool__icon": {
          background: "none",
@ -71,6 +73,17 @@ const useStyles = makeStyles(
        },
        "& .ce-toolbar__plus": {
          left: -9,
+          color: theme.palette.text.primary,
+          ...hover,
+        },
+        "& .ce-popover": {
+          backgroundColor: theme.palette.background.paper,
+        },
+        "& .ce-popover__item": {
+          ...hover,
+        },
+        "& .ce-popover__item-icon": {
+          color: theme.palette.saleor.generic.verydark,
        },
        "& .ce-toolbox.ce-toolbox--opened": {
          left: 16,
@ -83,13 +96,19 @@ const useStyles = makeStyles(
          color: theme.palette.primary.light,
        },
        "&:not($rootDisabled):hover": {
-          borderColor: theme.palette.primary.main,
+          borderColor: isDarkMode
+            ? theme.palette.saleor.main[2]
+            : theme.palette.saleor.main[4],
+          boxShadow: `0 0 0 3px ${
+            isDarkMode
+              ? theme.palette.saleor.main[4]
+              : theme.palette.saleor.main[6]
+          }`,
        },
      },
      root: {
-        border: `1px solid ${fade(theme.palette.text.secondary, 0.4)}`,
+        border: `1px solid ${theme.palette.saleor.main[4]}`,
        borderRadius: 4,
-        boxShadow: `inset 0 0 0 0 ${theme.palette.primary.main}`,
        fontSize: theme.typography.body1.fontSize,
        minHeight: 56,
        padding: theme.spacing(3, 2),
@ -99,7 +118,7 @@ const useStyles = makeStyles(
        transition: theme.transitions.duration.short + "ms",
      },
      rootActive: {
-        boxShadow: `inset 0px 0px 0 2px ${theme.palette.primary.main}`,
+        borderColor: theme.palette.saleor.main[1],
      },
      rootDisabled: {
        ...theme.overrides.MuiOutlinedInput.root["&$disabled"]["& fieldset"],
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
@ -1,5 +1,6 @@
 import {
  InputBase,
+  OutlinedInputProps,
  Popper,
  PopperPlacementType,
  TextField,
@ -226,10 +227,10 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
                  // Downshift doesn't seem to be fully compatible with MUI
                  // https://github.com/downshift-js/downshift/issues/718
                  inputProps={{
-                    ...getInputProps({
+                    ...(getInputProps({
                      placeholder,
                      onClick: handleToggleMenu,
-                    }),
+                    }) as OutlinedInputProps["inputProps"]),
                  }}
                  error={error}
                  disabled={disabled}
--- a/src/components/Tab/Tab.tsx
+++ b/src/components/Tab/Tab.tsx
@ -1,5 +1,5 @@
 import { Typography } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
@ -21,7 +21,7 @@ const useStyles = makeStyles(
        color: theme.palette.primary.main,
      },
      borderBottom: "1px solid transparent",
-      color: fade(theme.palette.text.secondary, 0.6),
+      color: alpha(theme.palette.text.secondary, 0.6),
      cursor: "pointer",
      display: "inline-block",
      fontWeight: theme.typography.fontWeightRegular,
--- a/src/components/TableFilter/FilterTab.tsx
+++ b/src/components/TableFilter/FilterTab.tsx
@ -16,7 +16,7 @@ const useStyles = makeStyles(
      },
      color: theme.typography.caption.color,
      fontSize: theme.typography.body1.fontSize,
-      fontWeight: 400,
+      fontWeight: 500,
    },
    tabRoot: {
      minWidth: "80px",
--- a/src/components/TablePagination/TablePaginationActions.tsx
+++ b/src/components/TablePagination/TablePaginationActions.tsx
@ -1,4 +1,4 @@
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import ArrowLeft from "@material-ui/icons/ArrowLeft";
 import ArrowRight from "@material-ui/icons/ArrowRight";
 import { IconButton, makeStyles, useTheme } from "@saleor/macaw-ui";
@ -14,12 +14,12 @@ const useStyles = makeStyles(
      },
      "&$disabled": {
        "& svg": {
-          color: fade(theme.palette.primary.main, 0.2),
+          color: alpha(theme.palette.primary.main, 0.2),
        },
      },
      "&:focus, &:hover": {
        "& > span:first-of-type": {
-          backgroundColor: fade(theme.palette.primary.main, 0.2),
+          backgroundColor: alpha(theme.palette.primary.main, 0.2),
        },
      },
    },
@ -36,7 +36,7 @@ const useStyles = makeStyles(
      },
      "&:focus, &:hover": {
        "& > span:first-of-type": {
-          backgroundColor: fade(theme.palette.primary.main, 0.2),
+          backgroundColor: alpha(theme.palette.primary.main, 0.2),
        },
        backgroundColor: "transparent",
      },
--- a/src/components/Timeline/Timeline.tsx
+++ b/src/components/Timeline/Timeline.tsx
@ -18,13 +18,16 @@ const useStyles = makeStyles(
    },
    button: {
      zIndex: 2,
+      padding: `7px`,
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
    },
    cardActionsExpanded: {
      maxHeight: theme.spacing(6),
    },
    input: {
      "& > div": {
-        padding: "0 14px",
+        padding: "0 0 0 14px",
      },
      "& textarea": {
        "&::placeholder": {
--- a/src/components/Timeline/TimelineEvent.tsx
+++ b/src/components/Timeline/TimelineEvent.tsx
@ -1,11 +1,10 @@
+import { Typography } from "@material-ui/core";
 import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
-  Typography,
-} from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import { makeStyles } from "@saleor/macaw-ui";
+  makeStyles,
+} from "@saleor/macaw-ui";
 import React from "react";

 import TimelineEventHeader, { TitleElement } from "./TimelineEventHeader";
@ -15,11 +14,11 @@ const useStyles = makeStyles(
    dot: {
      backgroundColor: theme.palette.primary.main,
      borderRadius: "100%",
-      height: 8,
-      left: -29,
+      height: 7,
+      left: -28,
      position: "absolute",
      top: 6,
-      width: 8,
+      width: 7,
    },
    panel: {
      "& .MuiAccordionDetails-root": {
@ -94,10 +93,7 @@ export const TimelineEvent: React.FC<TimelineEventProps> = props => {
      <span className={classes.dot} />
      {children ? (
        <Accordion className={classes.panel} elevation={0}>
-          <AccordionSummary
-            className={classes.panelExpander}
-            expandIcon={<ExpandMoreIcon />}
-          >
+          <AccordionSummary className={classes.panelExpander}>
            <TimelineEventHeader
              title={title}
              date={date}
--- a/src/components/UserChip/UserChip.tsx
+++ b/src/components/UserChip/UserChip.tsx
@ -1,25 +1,12 @@
 import { FormControlLabel, Switch } from "@material-ui/core";
 import { UserFragment } from "@saleor/graphql";
-import { makeStyles, UserChipMenu, UserChipMenuItem } from "@saleor/macaw-ui";
+import { UserChipMenu, UserChipMenuItem } from "@saleor/macaw-ui";
 import { getUserInitials, getUserName } from "@saleor/misc";
 import { staffMemberDetailsUrl } from "@saleor/staff/urls";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";

-const useStyles = makeStyles(
-  () => ({
-    switch: {
-      "&&:hover": {
-        background: "transparent",
-      },
-    },
-  }),
-  {
-    name: "UserChip",
-  },
-);
-
 export interface UserChipProps {
  isDarkThemeEnabled: boolean;
  user: UserFragment;
@ -33,7 +20,6 @@ const UserChip: React.FC<UserChipProps> = ({
  onLogout,
  onThemeToggle,
 }) => {
-  const classes = useStyles({});
  const intl = useIntl();

  return (
@ -64,16 +50,7 @@ const UserChip: React.FC<UserChipProps> = ({
        data-test-is-dark={isDarkThemeEnabled}
      >
        <FormControlLabel
-          control={
-            <Switch
-              classes={{
-                switchBase: classes.switch,
-              }}
-              checked={isDarkThemeEnabled}
-              color="primary"
-              disableRipple
-            />
-          }
+          control={<Switch checked={isDarkThemeEnabled} disableRipple />}
          label={intl.formatMessage({
            id: "2r4cTE",
            defaultMessage: "Enable Dark Mode",
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@ -31,6 +31,7 @@ const useStyles = makeStyles(
      gridTemplateColumns: "1fr 3fr",
      padding: theme.spacing(4, 0),
    },
+
    configurationItem: {
      [theme.breakpoints.down("md")]: {
        gridTemplateColumns: "1fr",
@ -42,9 +43,7 @@ const useStyles = makeStyles(
    configurationLabel: {
      paddingBottom: 20,
    },
-    header: {
-      margin: 0,
-    },
+
    link: {
      display: "contents",
      marginBottom: theme.spacing(4),
@ -92,10 +91,7 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
  return (
    <Container>
      {!isSmUp && renderVersionInfo}
-      <PageHeader
-        className={classes.header}
-        title={intl.formatMessage(sectionNames.configuration)}
-      >
+      <PageHeader title={intl.formatMessage(sectionNames.configuration)}>
        {isSmUp && renderVersionInfo}
      </PageHeader>
      {menus
--- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
+++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@ -112,7 +112,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
              title={getUserName(customer, true)}
              cardMenu={
                extensionMenuItems.length > 0 && (
-                  <CardMenu outlined menuItems={extensionMenuItems} />
+                  <CardMenu menuItems={extensionMenuItems} />
                )
              }
            />
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@ -7413,7 +7413,7 @@ export type TaxClassFragment = { __typename: 'TaxClass', id: string, name: strin

 export type TimePeriodFragment = { __typename: 'TimePeriod', amount: number, type: TimePeriodTypeEnum };

-export type AttributeValueTranslatableFragment = { __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string }, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null };
+export type AttributeValueTranslatableFragment = { __typename: 'AttributeValueTranslatableContent', id: string, name: string, plainText: string | null, richText: any | null, attributeValue: { __typename: 'AttributeValue', id: string } | null, attribute: { __typename: 'AttributeTranslatableContent', id: string, name: string } | null, translation: { __typename: 'AttributeValueTranslation', id: string, name: string, plainText: string | null, richText: any | null, language: { __typename: 'LanguageDisplay', code: LanguageCodeEnum, language: string } } | null };

 export type CategoryTranslationFragment = { __typename: 'CategoryTranslatableContent', translation: { __typename: 'CategoryTranslation', id: string, description: any | null, name: string | null, seoDescription: string | null, seoTitle: string | null, language: { __typename: 'LanguageDisplay', language: string } } | null, category: { __typename: 'Category', id: string, name: string, description: any | null, seoDescription: string | null, seoTitle: string | null } | null };

--- a/src/icons/ChevronDown.tsx
+++ b/src/icons/ChevronDown.tsx
@ -1,26 +1,6 @@
-import { useTheme } from "@saleor/macaw-ui";
+import { ChevronIcon } from "@saleor/macaw-ui";
 import React from "react";

-const ChevronDown: React.FC = () => {
-  const { themeType } = useTheme();
-
-  return (
-    <svg
-      data-test-id="expand-icon"
-      width="10"
-      height="7"
-      viewBox="0 0 10 7"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1 1L5 5L9 1"
-        stroke={themeType === "dark" ? "#FAFAFA" : "#28234A"}
-        strokeOpacity="0.4"
-        strokeWidth="2"
-      />
-    </svg>
-  );
-};
+const ChevronDown: React.FC = () => <ChevronIcon />;

 export default ChevronDown;
--- a/src/icons/ChevronUp.tsx
+++ b/src/icons/ChevronUp.tsx
@ -1,16 +0,0 @@
-import { createSvgIcon } from "@material-ui/core/utils";
-import React from "react";
-
-const ChevronUp = createSvgIcon(
-  <svg width="10" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M9 6L5 2L1 6"
-      stroke="#28234A"
-      stroke-opacity="0.4"
-      stroke-width="2"
-    />
-  </svg>,
-  "ChevronUp",
-);
-
-export default ChevronUp;
--- a/src/navigation/components/MenuItems/MenuItems.tsx
+++ b/src/navigation/components/MenuItems/MenuItems.tsx
@ -64,6 +64,10 @@ const useStyles = makeStyles(
      cursor: "pointer",
      marginLeft: theme.spacing(7),
    },
+    nodeActions: {
+      display: "flex",
+      gap: theme.spacing(1),
+    },
    root: {
      "& .rst__collapseButton": {
        display: "none",
@ -183,6 +187,7 @@ const Node: React.FC<NodeRendererProps<TreeItemProps>> = props => {
          {node.title}
        </Typography>
        <div className={classes.spacer} />
+        <div className={classes.nodeActions}>
          <Button onClick={node.onClick}>
            <FormattedMessage {...buttonMessages.show} />
          </Button>
@ -203,6 +208,7 @@ const Node: React.FC<NodeRendererProps<TreeItemProps>> = props => {
          >
            <DeleteIcon />
          </IconButton>
+        </div>
      </Paper>
    </div>,
  );
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@ -212,7 +212,6 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
              title={<Title order={order} />}
              cardMenu={
                <CardMenu
-                  outlined
                  menuItems={[...selectCardMenuItems, ...extensionMenuItems]}
                />
              }
--- a/src/orders/components/OrderDraftList/OrderDraftList.tsx
+++ b/src/orders/components/OrderDraftList/OrderDraftList.tsx
@ -107,7 +107,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
          onClick={() => onSort(OrderDraftListUrlSortField.number)}
          className={classes.colNumber}
        >
-          <FormattedMessage id="ps0WUQ" defaultMessage="No. of Order" />
+          <FormattedMessage id="kFkPWB" defaultMessage="Number" />
        </TableCellHeader>
        <TableCellHeader
          direction={
--- a/src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
+++ b/src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
@ -166,14 +166,14 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
      <TableCell className={classes.colWarehouse}>
        <IconButton
          onClick={onWarehouseChange}
-          className={classes.warehouseButton}
+          className={classNames(
+            classes.warehouseButton,
+            "MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd",
+          )}
          data-test-id="select-warehouse-button"
        >
          <div className={classes.warehouseButtonContent}>
-            <Typography
-              color={lineFormWarehouse ? "textPrimary" : "textSecondary"}
-              className={classes.warehouseButtonContentText}
-            >
+            <Typography className={classes.warehouseButtonContentText}>
              {lineFormWarehouse?.name ??
                intl.formatMessage(messages.selectWarehouse)}
            </Typography>
--- a/src/orders/components/OrderFulfillLine/styles.ts
+++ b/src/orders/components/OrderFulfillLine/styles.ts
@ -50,7 +50,11 @@ export const useStyles = makeStyles(
      padding: theme.spacing(1.5),
      width: "100%",
      justifyContent: "right",
-      border: `1px solid ${theme.palette.divider}`,
+      cursor: "pointer",
+      border: `1px solid ${theme.palette.primary.dark}`,
+      "&:hover": {
+        borderColor: "transparent",
+      },
    },
    warehouseButtonContent: {
      display: "flex",
--- a/src/orders/components/OrderList/OrderList.tsx
+++ b/src/orders/components/OrderList/OrderList.tsx
@ -110,7 +110,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
            onClick={() => onSort(OrderListUrlSortField.number)}
            className={classes.colNumber}
          >
-            <FormattedMessage id="ps0WUQ" defaultMessage="No. of Order" />
+            <FormattedMessage id="kFkPWB" defaultMessage="Number" />
          </TableCellHeader>
          <TableCellHeader
            direction={
--- a/src/orders/components/OrderPayment/styles.ts
+++ b/src/orders/components/OrderPayment/styles.ts
@ -26,6 +26,7 @@ export const useStyles = makeStyles(
    },
    titleContainer: {
      display: "flex",
+      alignItems: "center",
    },
    supportText: {
      color: theme.palette.saleor.main[3],
--- a/src/orders/components/OrderUnfulfilledProductsCard/styles.ts
+++ b/src/orders/components/OrderUnfulfilledProductsCard/styles.ts
@ -6,6 +6,7 @@ export const useStyles = makeStyles(
      flexDirection: "row-reverse",
      paddingTop: theme.spacing(2),
      paddingBottom: theme.spacing(2),
+      gap: theme.spacing(1),
    },
    table: {
      "& td, & th": {
--- a/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
+++ b/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
@ -1,4 +1,4 @@
-import { Card, TableCell, Tooltip } from "@material-ui/core";
+import { Card, TableCell } from "@material-ui/core";
 import HelpOutline from "@material-ui/icons/HelpOutline";
 import { attributeUrl } from "@saleor/attributes/urls";
 import { Button } from "@saleor/components/Button";
@ -14,7 +14,7 @@ import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableB
 import TableHead from "@saleor/components/TableHead";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { ProductAttributeType, ProductTypeDetailsQuery } from "@saleor/graphql";
-import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton, makeStyles, Tooltip } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ReorderAction } from "@saleor/types";
 import capitalize from "lodash/capitalize";
@ -22,7 +22,7 @@ import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";

 const useStyles = makeStyles(
-  {
+  theme => ({
    colAction: {
      "&:last-child": {
        paddingRight: 0,
@ -46,7 +46,7 @@ const useStyles = makeStyles(
      alignItems: "center",
    },
    colVariantDisabled: {
-      fill: "#28234A",
+      fill: theme.palette.alert.icon.info,
      fillOpacity: 0.6,
      "&:hover": {
        fillOpacity: 1,
@ -58,7 +58,7 @@ const useStyles = makeStyles(
    textLeft: {
      textAlign: "left",
    },
-  },
+  }),
  { name: "ProductTypeAttributes" },
 );

@ -274,8 +274,9 @@ const ProductTypeVariantAttributes: React.FC<ProductTypeVariantAttributesProps>
                      <IconButton
                        data-test-id="delete-icon"
                        onClick={() => onAttributeUnassign(attribute.id)}
+                        variant="primary"
                      >
-                        <DeleteIcon color="primary" />
+                        <DeleteIcon />
                      </IconButton>
                    </TableButtonWrapper>
                  </TableCell>
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@ -230,6 +230,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
          onQueryChange={onColumnQueryChange}
          onFetchMore={onFetchMore}
          onSave={handleSave}
+          IconButtonProps={{ variant: "secondary" }}
        />
        <ButtonWithSelect
          options={extensionCreateButtonItems}
--- a/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/ChannelsList.tsx
+++ b/src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/ChannelsList.tsx
@ -1,10 +1,6 @@
-import {
-  Accordion,
-  AccordionSummary,
-  CardContent,
-  Typography,
-} from "@material-ui/core";
+import { CardContent, Typography } from "@material-ui/core";
 import IconChevronDown from "@saleor/icons/ChevronDown";
+import { Accordion, AccordionSummary } from "@saleor/macaw-ui";
 import React from "react";

 import {
@ -30,7 +26,7 @@ export const ChannelsList: React.FC<ChannelListProps> = ({
      <CardContent className={classes.summaryContent}>
        <AccordionSummary
          expandIcon={<IconChevronDown />}
-          classes={summaryClasses}
+          className={summaryClasses.root}
          data-test-id="channels-variant-availability-summary"
        >
          <Typography variant="caption">{summary}</Typography>
--- a/src/products/components/ProductVariantNavigation/styles.ts
+++ b/src/products/components/ProductVariantNavigation/styles.ts
@ -1,4 +1,4 @@
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles";
 import { makeStyles } from "@saleor/macaw-ui";

 export const useStyles = makeStyles(
@ -10,7 +10,7 @@ export const useStyles = makeStyles(
      paddingLeft: 0,
    },
    defaultVariant: {
-      color: fade(theme.palette.text.secondary, 0.6),
+      color: alpha(theme.palette.text.secondary, 0.6),
      display: "block",
    },
    firstVariant: {
--- a/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx
+++ b/src/shipping/components/ShippingRateInfo/ShippingRateInfo.tsx
@ -40,7 +40,7 @@ const useStyles = makeStyles(
  theme => ({
    deliveryTimeFields: {
      display: "grid",
-      gridColumnGap: theme.spacing(2),
+      gridColumnGap: theme.spacing(1),
      gridRowGap: theme.spacing(1),
      gridTemplateColumns: "1fr 1fr 1fr",
      [theme.breakpoints.down("md")]: {
--- a/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
+++ b/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
@ -225,6 +225,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
                    <IconButton
                      disabled={disabled}
                      color="primary"
+                      variant="secondary"
                      onClick={() => onPostalCodeDelete(postalCodeRange)}
                      data-test-id={"delete-postal-code-" + postalCodeRange?.id}
                    >
--- a/src/staff/components/StaffProperties/StaffProperties.tsx
+++ b/src/staff/components/StaffProperties/StaffProperties.tsx
@ -43,7 +43,7 @@ const useStyles = makeStyles(
    },
    avatarDefault: {
      "& div": {
-        color: "#fff",
+        color: theme.palette.primary.contrastText,
        fontSize: 35,
        fontWeight: "bold",
        lineHeight: "120px",
--- a/src/storybook/snapshots/Stories.test.ts.snap
+++ b/src/storybook/snapshots/Stories.test.ts.snap
--- a/src/themeOverrides.ts
+++ b/src/themeOverrides.ts
@ -7,19 +7,6 @@ const breakpoints = ({

 const themeOverrides: Partial<Theme> = {
  breakpoints,
-  overrides: {
-    MuiTableCell: {
-      body: {
-        paddingBottom: 8,
-        paddingTop: 8,
-      },
-      root: {
-        height: 56,
-        paddingBottom: 4,
-        paddingTop: 4,
-      },
-    },
-  },
 };

 export default themeOverrides;
--- a/src/warehouses/components/WarehouseList/WarehouseList.tsx
+++ b/src/warehouses/components/WarehouseList/WarehouseList.tsx
@ -43,6 +43,7 @@ const useStyles = makeStyles(
      justifyContent: "flex-end",
      position: "relative",
      right: theme.spacing(-1.5),
+      gap: theme.spacing(1),
    },
    colActions: {
      textAlign: "right",