feat: migrate macaw ui to new spacing scale

package.json

@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.81",
+    "@saleor/macaw-ui": "0.8.0-pre.86",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

src/apps/components/AllAppList/AllAppList.tsx

@@ -27,7 +27,7 @@ const AllAppList: React.FC<AllAppListProps> = ({
   }
 
   return (
-    <Box display="flex" flexDirection="column" gap={8} marginTop={8}>
+    <Box display="flex" flexDirection="column" gap="s5" marginTop="s5">
       {appsPairs.map(appPair => (
         <AppListRow
           key={appPair[0].name.en}

src/apps/components/AppAvatar/AppAvatar.tsx

@@ -2,7 +2,7 @@ import { AppLogo } from "@dashboard/apps/types";
 import { Box, GenericAppIcon } from "@saleor/macaw-ui/next";
 import React from "react";
 
-const avatarSize = 11;
+const avatarSize = "s8";
 
 export const AppAvatar: React.FC<{
   logo?: AppLogo | undefined;
@@ -11,7 +11,7 @@ export const AppAvatar: React.FC<{
     return (
       <Box
         __backgroundColor={logo?.color}
-        padding={3}
+        padding="s1"
         width={avatarSize}
         height={avatarSize}
         borderRadius={2}
@@ -26,7 +26,7 @@ export const AppAvatar: React.FC<{
       <Box
         __backgroundColor={logo?.color}
         backgroundColor="surfaceNeutralSubdued"
-        padding={3}
+        padding="s1"
         width={avatarSize}
         height={avatarSize}
         display="flex"

src/apps/components/AppDetailsPage/HeaderOptions.tsx

@@ -31,15 +31,15 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
 
   if (!data) {
     return (
-      <Box marginX={10}>
+      <Box marginX="s7">
         <Skeleton />
         <div className={classes.hr} />
       </Box>
     );
   }
 
   return (
-    <Box marginX={10}>
+    <Box marginX="s7">
       <div className={classes.appHeaderLinks}>
         <ExternalLink
           className={classes.headerLinkContainer}

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -45,7 +45,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
   return (
     <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
       <DetailPageLayout.Content>
-        <Box paddingY={9}>
+        <Box paddingY="s6">
           <CardSpacer />
           <Card>
             <CardTitle
@@ -127,7 +127,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
             </CardContent>
           </Card>
           <CardSpacer />
-          <Box display="flex" justifyContent="space-between" padding={9}>
+          <Box display="flex" justifyContent="space-between" padding="s6">
             <Button variant="secondary" onClick={navigateToAppsList}>
               <FormattedMessage {...buttonMessages.cancel} />
             </Button>

src/apps/components/AppListPage/AppListPage.tsx

@@ -80,15 +80,15 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
         display="flex"
         flexDirection="column"
         alignItems="center"
-        marginY={8}
+        marginY="s5"
       >
-        <Box className={classes.appContent} marginY={8}>
+        <Box className={classes.appContent} marginY="s5">
           {nothingInstalled && (
-            <Box paddingY={6}>
+            <Box paddingY="s3">
               <Text as="h3" variant="heading" color="textNeutralSubdued">
                 {intl.formatMessage(messages.installedApps)}
               </Text>
-              <Box marginTop={6}>
+              <Box marginTop="s3">
                 <Text variant="caption">
                   {intl.formatMessage(messages.nothingInstalledPlaceholder)}
                 </Text>
@@ -97,7 +97,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
           )}
           {sectionsAvailability.installed && (
             <>
-              <Box paddingX={8} paddingY={6}>
+              <Box paddingX="s5" paddingY="s3">
                 <Text as="h3" variant="heading" color="textNeutralSubdued">
                   {intl.formatMessage(messages.installedApps)}
                 </Text>
@@ -113,7 +113,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
           )}
           <MarketplaceAlert error={marketplaceError} />
           {sectionsAvailability.all && !marketplaceError && (
-            <Box marginTop={10}>
+            <Box marginTop="s7">
               <Text
                 as="h3"
                 variant="heading"
@@ -131,7 +131,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
             </Box>
           )}
           {sectionsAvailability.comingSoon && !marketplaceError && (
-            <Box marginTop={10}>
+            <Box marginTop="s7">
               <Text
                 as="h3"
                 variant="heading"

src/apps/components/AppListRow/AppListCardActions.tsx

@@ -45,14 +45,14 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
     <Box
       display="flex"
       justifyContent="flex-end"
-      gap={6}
+      gap="s3"
       borderStyle="solid"
       borderWidth={1}
       borderBottomLeftRadius={3}
       borderBottomRightRadius={3}
       borderColor="neutralPlain"
       borderTopStyle="none"
-      padding={8}
+      padding="s5"
     >
       {githubForkHandler && (
         <Button

src/apps/components/AppListRow/AppListCardDescription.tsx

@@ -18,14 +18,14 @@ const AppListCardDescription: React.FC<AppListCardDescriptionProps> = ({
     borderTopRightRadius={3}
     borderColor="neutralPlain"
     borderBottomStyle="none"
-    padding={8}
+    padding="s5"
   >
     <Box
       display="flex"
       flexDirection="row"
       alignItems="center"
-      marginBottom={8}
-      gap={6}
+      marginBottom="s5"
+      gap="s3"
     >
       <AppLogo backgroundColor={app.logo.color}>
         {app.logo.source ? (

src/apps/components/AppListRow/AppListCardIntegrations.tsx

@@ -22,22 +22,22 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
       display="flex"
       flexDirection="row"
       flexWrap="wrap"
-      gap={8}
-      margin={0}
+      gap="s5"
+      margin="s0"
       borderColor="neutralPlain"
       borderLeftStyle="solid"
       borderRightStyle="solid"
       borderWidth={1}
-      paddingY={5}
-      paddingX={8}
+      paddingY="s2"
+      paddingX="s5"
       alignItems="start"
     >
       {integrations.map(integration => (
         <Box
           as="li"
           display="flex"
           alignItems="center"
-          gap={4}
+          gap="s1.5"
           key={integration.name}
         >
           <Box
@@ -47,7 +47,7 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
             borderStyle="solid"
             borderColor="neutralPlain"
             borderWidth={1}
-            padding={3}
+            padding="s1"
             display="flex"
             placeItems="center"
           >

src/apps/components/AppListRow/AppListCardLinks.tsx

@@ -18,13 +18,13 @@ const AppListCardLinks: React.FC<AppListCardLinksProps> = ({ links }) => {
       display="flex"
       flexDirection="row"
       flexWrap="wrap"
-      gap={7}
+      gap="s4"
       borderLeftStyle="solid"
       borderRightStyle="solid"
       borderWidth={1}
       borderColor="neutralPlain"
-      paddingY={6}
-      paddingX={8}
+      paddingY="s3"
+      paddingX="s5"
     >
       {links?.map(link => (
         <Box as="span" key={link.name}>

src/apps/components/AppListRow/AppListRow.tsx

@@ -62,8 +62,8 @@ const AppListRow: React.FC<AppListRowProps> = ({
       gridTemplateColumns={2}
       __gridTemplateRows="repeat(4, auto)"
       gridAutoFlow={isSingleApp ? "column" : "row"}
-      columnGap={8}
-      padding={8}
+      columnGap="s5"
+      padding="s5"
     >
       {appPair.map(app => (
         <AppListCardDescription key={app.name.en + "description"} app={app} />

src/apps/components/AppListRow/AppLogo.tsx

@@ -10,8 +10,8 @@ export const AppLogo: React.FC<AppLogoProps> = ({
   children,
 }) => (
   <Box
-    width={13}
-    height={13}
+    width="s10"
+    height="s10"
     display="flex"
     placeItems="center"
     borderRadius={3}

src/apps/components/AppPage/AppPageNav.tsx

@@ -39,9 +39,9 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
         justifyContent="space-between"
         width="100%"
       >
-        <Box display="flex" gap={7} alignItems="center">
+        <Box display="flex" gap="s4" alignItems="center">
           <TopNavLink to={goBackLink} variant="tertiary" />
-          <Box display="flex" gap={5} alignItems="center">
+          <Box display="flex" gap="s2" alignItems="center">
             <AppAvatar />
             <Box display="flex" flexDirection="column">
               <Text variant="heading">{name}</Text>
@@ -62,7 +62,7 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
           </Box>
         </Box>
       </Box>
-      <Box display="flex" gap={4}>
+      <Box display="flex" gap="s1.5">
         <Button
           whiteSpace="nowrap"
           variant="secondary"

src/apps/components/InstalledAppListRow/AppManifestUrl.tsx

@@ -17,7 +17,7 @@ export const AppManifestUrl: React.FC<AppManifestUrlProps> = ({
   return (
     <Box
       display="flex"
-      gap={4}
+      gap="s1.5"
       onClick={e => {
         try {
           e.preventDefault();

src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx

@@ -28,7 +28,7 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
       disabled={!app.isActive}
     >
       <List.Item
-        padding={7}
+        padding="s4"
         borderTopStyle="solid"
         borderWidth={1}
         borderColor="neutralPlain"
@@ -43,19 +43,19 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
         cursor={app.isActive ? "pointer" : "not-allowed"}
       >
         <Box
-          gap={5}
+          gap="s2"
           alignItems="center"
           display="grid"
           __gridTemplateColumns="1fr auto"
         >
           <AppAvatar logo={logo} />
           <Box
             display="flex"
-            gap={3}
+            gap="s1"
             flexDirection="column"
             alignItems="flex-start"
           >
-            <Box display="flex" gap={5}>
+            <Box display="flex" gap="s2">
               <Text variant="bodyStrong">{app.name}</Text>
               <Text variant="body" color="textNeutralSubdued">
                 {`v${app.version}`}
@@ -84,12 +84,12 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
         </Box>
         <Box
           display="flex"
-          marginTop={{ mobile: 4, desktop: 0 }}
+          marginTop={{ mobile: "s1.5", desktop: "s0" }}
           flexDirection="row"
           justifyContent={{ mobile: "flex-end", desktop: "flex-start" }}
-          gap={6}
+          gap="s3"
         >
-          <Box marginLeft="auto" display="flex" alignItems="center" gap={8}>
+          <Box marginLeft="auto" display="flex" alignItems="center" gap="s5">
             {!app.isActive && (
               <Text variant="caption" color="textNeutralSubdued">
                 <FormattedMessage {...messages.appDisabled} />

src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx

@@ -32,7 +32,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
 
   return (
     <List.Item
-      padding={7}
+      padding="s4"
       borderTopStyle="solid"
       borderWidth={1}
       borderColor="neutralPlain"
@@ -42,7 +42,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
     >
       <Box
         display="flex"
-        gap={5}
+        gap="s2"
         alignItems="center"
         justifyContent={{ mobile: "space-between", desktop: "flex-start" }}
       >
@@ -75,7 +75,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
           <>
             <Tooltip>
               <Tooltip.Trigger>
-                <Box display="flex" placeItems="center" gap={3} marginX={3}>
+                <Box display="flex" placeItems="center" gap="s1" marginX="s1">
                   <WarningIcon size="small" color="iconCriticalSubdued" />
                   <Text
                     variant="caption"

src/channels/components/ChannelForm/ChannelForm.tsx

@@ -226,7 +226,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             onChange={onDefaultCountryChange}
           />
           <FormSpacer />
-          <Box display="flex" gap={4} alignItems="center">
+          <Box display="flex" gap="s1.5" alignItems="center">
             <ControlledSwitch
               data-test-id="order-settings-mark-as-paid"
               disabled={disabled}