Fix fonts for safari & order settings page (#3316)

locale/defaultMessages.json

@@ -1920,10 +1920,6 @@
     "context": "refund type",
     "string": "Refund Products"
   },
-  "CLYlsu": {
-    "context": "section header",
-    "string": "Settings"
-  },
   "CLeDae": {
     "context": "section header",
     "string": "Preferences"
@@ -2226,6 +2222,10 @@
     "context": "button label",
     "string": "Assign references"
   },
+  "EewziG": {
+    "context": "checkbox gift cards label description",
+    "string": "When activated non-shippable gift cards will be automatically set as fulfilled and sent to customer"
+  },
   "Egyh2T": {
     "context": "section header",
     "string": "Plugin Settings"
@@ -3488,10 +3488,6 @@
     "context": "content section name",
     "string": "Content"
   },
-  "Nfh9QM": {
-    "context": "checkbox gift cards label description",
-    "string": "when activated non-shippable gift cards will be automatically set as fulfilled and sent to customer"
-  },
   "NgCb99": {
     "context": "order line discount updated title",
     "string": "{productName} discount was updated by"
@@ -6633,6 +6629,10 @@
     "context": "replacement created order history message draft number",
     "string": "Draft #{orderNumber}"
   },
+  "kn7jjd": {
+    "context": "section header",
+    "string": "General settings"
+  },
   "kp2IYP": {
     "context": "option",
     "string": "Gift card product type"
@@ -8472,9 +8472,6 @@
     "context": "channel publication status",
     "string": "Published"
   },
-  "yuiyES": {
-    "string": "General Settings"
-  },
   "yzYXW/": {
     "context": "header, dialog",
     "string": "Create New Warehouse"

package.json

@@ -33,7 +33,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.34",
+    "@saleor/macaw-ui": "^0.8.0-pre.43",
     "@saleor/sdk": "^0.4.4",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

src/components/Datagrid/styles.ts

@@ -195,7 +195,7 @@ export function useDatagridTheme() {
       bgBubbleSelected: theme.palette.background.paper,
       textHeader: theme.palette.text.secondary,
       borderColor: theme.palette.divider,
-      fontFamily: themes.defaultLight.fontFamily.body,
+      fontFamily: "'Inter var', sans-serif",
       baseFontStyle: themes.defaultLight.fontSize.bodySmall,
       headerFontStyle: themes.defaultLight.fontSize.bodySmall,
       editorFontSize: themes.defaultLight.fontSize.bodySmall,

src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx

@@ -1,7 +1,8 @@
 import CardTitle from "@dashboard/components/CardTitle";
 import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
 import FormSpacer from "@dashboard/components/FormSpacer";
-import { Card, CardContent, Typography } from "@material-ui/core";
+import { Card, CardContent } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -33,20 +34,22 @@ const OrderFulfillmentSettings: React.FC<OrderFulfillmentSettingsProps> = ({
         <ControlledCheckbox
           name={"fulfillmentAutoApprove" as keyof OrderSettingsFormData}
           label={
-            <>
-              <FormattedMessage
-                id="05hqq6"
-                defaultMessage="Automatically approve all fulfillments"
-                description="checkbox label"
-              />
-              <Typography variant="caption">
+            <Box display="flex" flexDirection="column">
+              <Text>
+                <FormattedMessage
+                  id="05hqq6"
+                  defaultMessage="Automatically approve all fulfillments"
+                  description="checkbox label"
+                />
+              </Text>
+              <Text variant="caption" color="textNeutralSubdued">
                 <FormattedMessage
                   id="XwQQ1f"
                   defaultMessage="All fulfillments will be automatically approved"
                   description="checkbox label description"
                 />
-              </Typography>
-            </>
+              </Text>
+            </Box>
           }
           checked={data.fulfillmentAutoApprove}
           onChange={onChange}
@@ -57,20 +60,22 @@ const OrderFulfillmentSettings: React.FC<OrderFulfillmentSettingsProps> = ({
         <ControlledCheckbox
           name={"fulfillmentAllowUnpaid" as keyof OrderSettingsFormData}
           label={
-            <>
-              <FormattedMessage
-                id="2MKkgX"
-                defaultMessage="Allow fulfillment without payment"
-                description="checkbox label"
-              />
-              <Typography variant="caption">
+            <Box display="flex" flexDirection="column">
+              <Text>
+                <FormattedMessage
+                  id="2MKkgX"
+                  defaultMessage="Allow fulfillment without payment"
+                  description="checkbox label"
+                />
+              </Text>
+              <Text variant="caption" color="textNeutralSubdued">
                 <FormattedMessage
                   id="l9ETHu"
                   defaultMessage="You will be able to fulfill products without capturing payment for the order."
                   description="checkbox label description"
                 />
-              </Typography>
-            </>
+              </Text>
+            </Box>
           }
           checked={data.fulfillmentAllowUnpaid}
           onChange={onChange}

src/orders/components/OrderSettings/OrderSettings.tsx

@@ -1,7 +1,8 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
 import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
-import { Card, CardContent, Typography } from "@material-ui/core";
+import { Card, CardContent } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -24,8 +25,8 @@ const OrderSettings: React.FC<OrderSettingsProps> = ({
     <Card data-test-id="order-settings">
       <CardTitle
         title={intl.formatMessage({
-          id: "CLYlsu",
-          defaultMessage: "Settings",
+          id: "kn7jjd",
+          defaultMessage: "General settings",
           description: "section header",
         })}
       />
@@ -33,20 +34,22 @@ const OrderSettings: React.FC<OrderSettingsProps> = ({
         <ControlledCheckbox
           name="automaticallyConfirmAllNewOrders"
           label={
-            <>
-              <FormattedMessage
-                id="RLYfMF"
-                defaultMessage="Automatically confirm all orders"
-                description="checkbox label"
-              />
-              <Typography variant="caption">
+            <Box display="flex" flexDirection="column">
+              <Text>
+                <FormattedMessage
+                  id="RLYfMF"
+                  defaultMessage="Automatically confirm all orders"
+                  description="checkbox label"
+                />
+              </Text>
+              <Text variant="caption" color="textNeutralSubdued">
                 <FormattedMessage
                   id="wpAXKX"
                   defaultMessage="All orders will be automatically confirmed and all payments will be captured."
                   description="checkbox label description"
                 />
-              </Typography>
-            </>
+              </Text>
+            </Box>
           }
           checked={data.automaticallyConfirmAllNewOrders}
           onChange={onChange}
@@ -57,20 +60,22 @@ const OrderSettings: React.FC<OrderSettingsProps> = ({
         <ControlledCheckbox
           name="automaticallyFulfillNonShippableGiftCard"
           label={
-            <>
-              <FormattedMessage
-                id="7UG1Lx"
-                defaultMessage="Automatically fulfill non shippable gift cards"
-                description="checkbox gift cards label"
-              />
-              <Typography variant="caption">
+            <Box display="flex" flexDirection="column">
+              <Text>
                 <FormattedMessage
-                  id="Nfh9QM"
-                  defaultMessage="when activated non-shippable gift cards will be automatically set as fulfilled and sent to customer"
+                  id="7UG1Lx"
+                  defaultMessage="Automatically fulfill non shippable gift cards"
+                  description="checkbox gift cards label"
+                />
+              </Text>
+              <Text variant="caption" color="textNeutralSubdued">
+                <FormattedMessage
+                  id="EewziG"
+                  defaultMessage="When activated non-shippable gift cards will be automatically set as fulfilled and sent to customer"
                   description="checkbox gift cards label description"
                 />
-              </Typography>
-            </>
+              </Text>
+            </Box>
           }
           checked={data.automaticallyFulfillNonShippableGiftCard}
           onChange={onChange}

src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx

@@ -1,5 +1,4 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
-import Grid from "@dashboard/components/Grid";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import {
@@ -9,11 +8,10 @@ import {
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { orderListUrl } from "@dashboard/orders/urls";
-import { Typography } from "@material-ui/core";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import OrderFulfillmentSettings from "../OrderFulfillmentSettings";
 import OrderSettings from "../OrderSettings/OrderSettings";
@@ -41,7 +39,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
       disabled={disabled}
     >
       {({ data, submit, change, isSaveDisabled }) => (
-        <DetailPageLayout>
+        <DetailPageLayout gridTemplateColumns={1}>
           <TopNav
             href={orderListUrl()}
             title={intl.formatMessage({
@@ -51,28 +49,17 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
             })}
           />
           <DetailPageLayout.Content>
-            <Box padding={9} margin="auto" height="100vh">
-              <Grid variant="inverted">
-                <div>
-                  <Typography>
-                    <FormattedMessage
-                      id="yuiyES"
-                      defaultMessage="General Settings"
-                    />
-                  </Typography>
-                </div>
-                <OrderSettings
-                  data={data}
-                  disabled={disabled}
-                  onChange={change}
-                />
-                <div />
-                <OrderFulfillmentSettings
-                  data={data}
-                  disabled={disabled}
-                  onChange={change}
-                />
-              </Grid>
+            <Box margin="auto" height="100vh">
+              <OrderSettings
+                data={data}
+                disabled={disabled}
+                onChange={change}
+              />
+              <OrderFulfillmentSettings
+                data={data}
+                disabled={disabled}
+                onChange={change}
+              />
             </Box>
           </DetailPageLayout.Content>
           <Savebar