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>

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"
   },

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

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: {

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),
     },
   }),

src/apps/styles.ts

@@ -45,6 +45,7 @@ export const useStyles = makeStyles(
       flexDirection: "row",
       justifyContent: "flex-end",
       textAlign: "right",
+      gap: theme.spacing(1),
     },
     colInstallAction: {
       "& > *": {

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

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}>

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

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} />
         ) : (

src/channels/components/AssignmentList/styles.ts

@@ -46,13 +46,6 @@ export const useHeaderStyles = makeStyles(
         minHeight: 0,
       },
     },
-    content: {
-      margin: 0,
-
-      "&$expanded": {
-        margin: 0,
-      },
-    },
   }),
   { name: "AssignmentListHeader" },
 );

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(

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,
               })}

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}

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 { Accordion, AccordionSummary, makeStyles } from "@saleor/macaw-ui";
-import { 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
+      <AccordionSummary className={summaryClasses.root}>
-        expandIcon={<IconChevronDown />}
-        classes={summaryClasses}
-      >
         <div className={classes.container}>
           <Typography>{name}</Typography>
           <Label text={messages.availableDateText} />

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

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)",

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}
         />
       }

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

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,

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,

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
+              <Tooltip title={localizeDate(date)}>
-                title={localizeDate(date)}
-                PopperProps={{
-                  className: classes.tooltip,
-                }}
-              >
                 <time dateTime={date}>
                   {getHumanized(date, locale, currentDate)}
                 </time>

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
+                  <Tooltip title={getTitle(date, locale, tz)}>
-                    title={getTitle(date, locale, tz)}
-                    PopperProps={{
-                      className: classes.tooltip,
-                    }}
-                  >
                     <ReactMoment from={currentDate} locale={locale} tz={tz}>
                       {date}
                     </ReactMoment>

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",
-  },
-);

src/components/Filter/Filter.tsx

@@ -1,12 +1,6 @@
-import {
+import { ClickAwayListener, Grow, Popper, Typography } from "@material-ui/core";
-  ButtonBase,
+import { alpha } from "@material-ui/core/styles";
-  ClickAwayListener,
+import { Button, makeStyles } from "@saleor/macaw-ui";
-  Grow,
-  Popper,
-  Typography,
-} from "@material-ui/core";
-import { fade } from "@material-ui/core/styles/colorManipulator";
-import { 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",
+      padding: theme.spacing(1, 2),
-      backgroundColor: fade(theme.palette.primary.main, 0.6),
+      marginRight: theme.spacing(2),
-      borderRadius: "4px",
-      display: "flex",
-      height: 40,
-      justifyContent: "space-around",
-      margin: theme.spacing(2, 1),
-      marginLeft: 0,
-      padding: theme.spacing(0, 2),
-      position: "relative",
     },
     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
+        <Button
-          className={classNames(classes.filterButton, classes.addFilterButton, {
+          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}

src/components/Filter/FilterContent/FilterContent.tsx

@@ -1,14 +1,8 @@
-import {
+import { makeStyles, Paper, Typography } from "@material-ui/core";
-  Accordion,
-  AccordionSummary,
-  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 />}
+                  className={summaryClasses.root}
-                  classes={summaryClasses}
                   onClick={() => handleFilterOpen(filter)}
                 >
                   {currentFilter && (

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}

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: {

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: {

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: {

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: {
         "&&": {

src/components/Money/Money.tsx

@@ -4,9 +4,12 @@ import React from "react";
 
 const useStyles = makeStyles(
   {
+    root: {
+      fontWeight: 500,
+    },
     currency: {
-      fontSize: "0.875em",
+      fontSize: "0.87em",
-      marginRight: "0.5rem",
+      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>
   );
 };
 

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

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 />}

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}

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}
         />

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"],

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}

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,

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

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",
       },

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": {

src/components/Timeline/TimelineEvent.tsx

@@ -1,11 +1,10 @@
+import { Typography } from "@material-ui/core";
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Typography,
+  makeStyles,
-} from "@material-ui/core";
+} from "@saleor/macaw-ui";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import { 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,
+      height: 7,
-      left: -29,
+      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
+          <AccordionSummary className={classes.panelExpander}>
-            className={classes.panelExpander}
-            expandIcon={<ExpandMoreIcon />}
-          >
             <TimelineEventHeader
               title={title}
               date={date}

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={
+          control={<Switch checked={isDarkThemeEnabled} disableRipple />}
-            <Switch
-              classes={{
-                switchBase: classes.switch,
-              }}
-              checked={isDarkThemeEnabled}
-              color="primary"
-              disableRipple
-            />
-          }
           label={intl.formatMessage({
             id: "2r4cTE",
             defaultMessage: "Enable Dark Mode",

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
+      <PageHeader title={intl.formatMessage(sectionNames.configuration)}>
-        className={classes.header}
-        title={intl.formatMessage(sectionNames.configuration)}
-      >
         {isSmUp && renderVersionInfo}
       </PageHeader>
       {menus

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} />
                 )
               }
             />

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

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 ChevronDown: React.FC = () => <ChevronIcon />;
-  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>
-  );
-};
 
 export default ChevronDown;

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;

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

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]}
                 />
               }

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={

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
+            <Typography className={classes.warehouseButtonContentText}>
-              color={lineFormWarehouse ? "textPrimary" : "textSecondary"}
-              className={classes.warehouseButtonContentText}
-            >
               {lineFormWarehouse?.name ??
                 intl.formatMessage(messages.selectWarehouse)}
             </Typography>

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

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={

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

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": {

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>

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}

src/products/components/ProductVariantChannels/ChannelsAvailabilityCard/ChannelsList.tsx

@@ -1,10 +1,6 @@
-import {
+import { CardContent, Typography } from "@material-ui/core";
-  Accordion,
-  AccordionSummary,
-  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>

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: {

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")]: {

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}
                     >

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

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;

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