@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.1

package/checkout/components/Checkout/CheckoutAddress.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.string.replace.js";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { Link } from '@shopgate/engage/components';
+import { Link, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProfileContext } from "../../../account/components/Profile/Profile.provider";
 import Section from "./CheckoutSection";
@@ -21,14 +21,10 @@ const useStyles = makeStyles()(theme => ({
   card: {
     display: 'flex',
     flexDirection: 'column',
-    fontSize: 15,
     margin: '8px 0'
   },
   link: {
-    fontSize: '0.875rem',
-    color: 'var(--color-primary)',
-    textTransform: 'uppercase',
-    textAlign: 'center'
+    textTransform: 'uppercase'
   }
 }));
 
@@ -97,23 +93,31 @@ const CheckoutAddress = ({
       editLink: editLink,
       editLabel: editLabel,
       children: address ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("span", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          component: "span",
           children: address.middleName?.length ? `${address.firstName} ${address.middleName} ${address.lastName}` : `${address.firstName} ${address.lastName}`
         }), type === ADDRESS_TYPE_BILLING && isGuestCheckout && orderReserveOnly && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("span", {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            component: "span",
             children: address.emailAddress
-          }), /*#__PURE__*/_jsx("span", {
+          }), /*#__PURE__*/_jsx(Typography, {
+            component: "span",
             children: address.mobile
           })]
-        }), /*#__PURE__*/_jsx("span", {
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "span",
           children: address.address1
-        }), address.address2?.length ? /*#__PURE__*/_jsx("span", {
+        }), address.address2?.length ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
           children: address.address2
-        }) : null, address.address3?.length ? /*#__PURE__*/_jsx("span", {
+        }) : null, address.address3?.length ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
           children: address.address3
-        }) : null, address.address4?.length ? /*#__PURE__*/_jsx("span", {
+        }) : null, address.address4?.length ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
           children: address.address4
-        }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx("span", {
+        }) : null, address.postalCode || address.region || address.city || address.country ? /*#__PURE__*/_jsx(Typography, {
+          component: "span",
           children: i18n.text(`checkout.${type}.address`, {
             postalCode: address.postalCode || '',
             region: iso3166?.[address.country]?.divisions?.[address.region] || address.region || '',
@@ -124,7 +128,13 @@ const CheckoutAddress = ({
       }) : /*#__PURE__*/_jsx(Link, {
         href: selectAddressLink,
         className: classes.link,
-        children: i18n.text(`checkout.${type}.select_address`)
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          color: "primary",
+          component: "div",
+          align: "center",
+          children: i18n.text(`checkout.${type}.select_address`)
+        })
       })
     })
   });

package/checkout/components/Checkout/CheckoutHeader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ResponsiveContainer } from '@shopgate/engage/components';
+import { ResponsiveContainer, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from "../../../core/helpers/i18n";
 import { ResponsiveBackButton } from "../ResponsiveBackButton";
@@ -13,18 +13,11 @@ const useStyles = makeStyles()({
     alignItems: 'flex-end'
   },
   headline: {
-    fontSize: '2.125rem',
-    fontWeight: 'normal',
-    margin: 0,
-    lineHeight: '2.25rem'
+    margin: 0
   },
   step: {
-    fontSize: '1rem',
-    lineHeight: 1,
-    color: 'var(--color-secondary)',
     paddingLeft: 16,
     margin: 0,
-    fontWeight: '400',
     paddingBottom: 2
   }
 });
@@ -46,10 +39,15 @@ const CheckoutTitle = ({
     breakpoint: ">xs",
     children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsxs("div", {
       className: classes.title,
-      children: [/*#__PURE__*/_jsx("h1", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h1",
+        component: "h1",
+        fontWeight: "regular",
         className: classes.headline,
         children: i18n.text(headline)
-      }), stepFrom !== null ? /*#__PURE__*/_jsx("h2", {
+      }), stepFrom !== null ? /*#__PURE__*/_jsx(Typography, {
+        component: "h2",
+        color: "secondary",
         className: classes.step,
         children: i18n.text('checkout.steps', {
           from: stepFrom,

package/checkout/components/Checkout/CheckoutPickupContactForm.js

@@ -24,13 +24,13 @@ const useStyles = makeStyles()(theme => ({
     },
     ' .pickupFormPickupPerson .label span': {
       color: theme.palette.text.primary,
-      fontWeight: 'bold'
+      fontWeight: theme.typography.fontWeightBold
     },
     ' .pickupFormPickupPerson .radioGroup': {
       marginTop: theme.spacing(1),
       flexDirection: 'row',
       ' .uncheckedIcon': {
-        color: 'var(--color-text-medium-emphasis)'
+        color: theme.palette.text.secondary
       }
     },
     ...StylePresets.getOutlinedFormFields(theme)

package/checkout/components/Checkout/CheckoutSection.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Card, Link } from '@shopgate/engage/components';
+import { Card, Link, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import CheckoutSectionInfo from "./CheckoutSectionInfo";
 import CheckoutSectionMessages from "./CheckoutSectionMessages";
@@ -8,27 +8,24 @@ import { i18n } from "../../../core/helpers/i18n";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   headline: {
-    fontSize: '1.25rem',
-    fontWeight: 'normal',
     margin: theme.spacing(0, 0, 1, 0),
-    color: theme.palette.text.primary,
     textTransform: 'none'
   },
   card: {
     display: 'flex',
     flexDirection: 'row',
-    fontSize: 15,
+    fontSize: theme.typography.body1.fontSize,
     width: '100%',
     overflow: 'inherit !important',
     marginBottom: theme.spacing(2),
     boxShadow: 'none',
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     padding: theme.spacing(1, 2),
     margin: 0
   },
   cardWithForm: {
     background: 'inherit !important',
-    boxShadow: 'none  !important',
+    boxShadow: 'none !important',
     padding: '0px !important'
   },
   table: {
@@ -45,8 +42,8 @@ const useStyles = makeStyles()(theme => ({
     },
     ' tr:last-of-type td': {
       paddingTop: 8,
-      borderTop: '1px solid #979797',
-      fontWeight: '600'
+      borderTop: `1px solid ${theme.components.border.medium}`,
+      fontWeight: theme.typography.fontWeightBold
     }
   },
   actionsContainer: {
@@ -55,8 +52,6 @@ const useStyles = makeStyles()(theme => ({
     width: '100%'
   },
   link: {
-    fontSize: '0.875rem',
-    color: 'var(--color-primary)',
     textTransform: 'uppercase'
   },
   actions: {
@@ -86,7 +81,10 @@ const CheckoutSection = ({
     cx
   } = useStyles();
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [title && /*#__PURE__*/_jsx("h3", {
+    children: [title && /*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      color: "textPrimary",
+      fontWeight: "regular",
       className: classes.headline,
       id: id,
       children: i18n.text(title)
@@ -116,7 +114,8 @@ const CheckoutSection = ({
               return /*#__PURE__*/_jsxs(Fragment, {
                 children: [/*#__PURE__*/_jsxs("tr", {
                   children: [/*#__PURE__*/_jsxs("td", {
-                    children: [/*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(Typography, {
+                      component: "span",
                       className: cx({
                         [classes.labelWithInfoIcon]: !!info
                       }),
@@ -125,7 +124,10 @@ const CheckoutSection = ({
                       text: info
                     })]
                   }), /*#__PURE__*/_jsx("td", {
-                    children: text
+                    children: typeof text === 'string' ? /*#__PURE__*/_jsx(Typography, {
+                      component: "span",
+                      children: text
+                    }) : text
                   })]
                 }), hasMessages && /*#__PURE__*/_jsx("tr", {
                   children: /*#__PURE__*/_jsxs("td", {
@@ -152,7 +154,12 @@ const CheckoutSection = ({
           tag: "a",
           className: classes.link,
           href: editLink,
-          children: i18n.text(editLabel)
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "span",
+            color: "primary",
+            children: i18n.text(editLabel)
+          })
         })
       }) : null]
     })]

package/checkout/components/Checkout/CheckoutSectionInfo.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { InfoIcon } from '@shopgate/engage/components';
+import { InfoIcon, Typography } from '@shopgate/engage/components';
 import { nl2br, showModal as showModalAction } from '@shopgate/engage/core';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,20 +10,18 @@ const mapDispatchToProps = {
 };
 const useStyles = makeStyles()(theme => ({
   textWrapper: {
-    paddingTop: theme.spacing(0.5),
-    fontSize: '0.75rem',
-    color: theme.palette.error.main
+    paddingTop: theme.spacing(0.5)
   },
   iconWrapper: {
     cursor: 'pointer',
-    color: 'var(--color-primary)',
-    fontSize: '1.5rem',
+    color: theme.palette.primary.main,
+    fontSize: theme.components.icon.medium,
     display: 'inline-flex',
     verticalAlign: 'bottom',
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
-      fontSize: '1.375rem'
+      fontSize: theme.components.icon.medium
     }
   }
 }));
@@ -52,16 +50,15 @@ const CheckoutSectionInfo = ({
     return null;
   }
   if (!renderIcon) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-danger
-      _jsx("div", {
-        className: classes.textWrapper,
-        dangerouslySetInnerHTML: {
-          __html: nl2br(text)
-        }
-      })
-    );
+    return /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      component: "div",
+      color: "error",
+      className: classes.textWrapper,
+      dangerouslySetInnerHTML: {
+        __html: nl2br(text)
+      }
+    });
   }
   return /*#__PURE__*/_jsx("span", {
     onClick: showPopup,

package/checkout/components/Checkout/CheckoutSectionMessages.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { errorBehavior } from '@shopgate/engage/core';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   wrapper: {
     paddingTop: theme.spacing(0.5)
   },
-  message: {
-    fontSize: ' 0.75rem'
-  },
+  message: {},
   error: {
     color: theme.palette.error.main
   },
@@ -41,7 +40,9 @@ const CheckoutSectionMessages = ({
       message,
       additionalParams,
       type
-    }) => /*#__PURE__*/_jsx("li", {
+    }) => /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      component: "li",
       className: cx(classes.message, {
         [classes.error]: type === 'error',
         [classes.warning]: type === 'warning',

package/checkout/components/CheckoutConfirmation/CheckoutConfirmation.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ResponsiveContainer, RippleButton } from '@shopgate/engage/components';
+import { ResponsiveContainer, RippleButton, Typography } from '@shopgate/engage/components';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { CartItems } from '@shopgate/engage/cart';
 import { useRoute } from '@shopgate/engage/core';
@@ -57,25 +57,17 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   heading: {
-    fontSize: '2.125rem',
-    fontWeight: 'normal',
     margin: 0,
-    lineHeight: '2.25rem',
     paddingBottom: theme.spacing(4)
   },
   instructions: {
     marginBottom: theme.spacing(4)
   },
   body: {
-    border: 0,
-    fontSize: '0.875rem',
-    lineHeight: '1.25rem'
+    border: 0
   },
   orderNum: {
     padding: 0,
-    fontSize: '1.25rem',
-    fontWeight: 500,
-    lineHeight: '1.5rem',
     margin: theme.spacing(0, 0, 2),
     border: 0
   },
@@ -166,10 +158,15 @@ const CheckoutConfirmation = ({
         })
       }), /*#__PURE__*/_jsxs("div", {
         className: classes.container,
-        children: [/*#__PURE__*/_jsx("h2", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h1",
+          component: "h2",
+          fontWeight: "regular",
           className: classes.heading,
           children: i18n.text('checkout.success.title')
-        }), /*#__PURE__*/_jsxs("p", {
+        }), /*#__PURE__*/_jsxs(Typography, {
+          variant: "h3",
+          component: "p",
           className: classes.orderNum,
           children: [i18n.text('checkout.success.order_date', {
             date: i18n.date(new Date(date).getTime(), 'short')
@@ -178,10 +175,14 @@ const CheckoutConfirmation = ({
           })]
         }), /*#__PURE__*/_jsxs("div", {
           className: classes.instructions,
-          children: [/*#__PURE__*/_jsx("p", {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "p",
             className: classes.body,
             children: i18n.text('checkout.success.instructions_1')
-          }), /*#__PURE__*/_jsx("p", {
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "p",
             className: classes.body,
             children: i18n.text('checkout.success.instructions_2')
           })]

package/checkout/components/CheckoutConfirmation/CheckoutConfirmationSection.js

@@ -1,76 +1,42 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Card, TextLink } from '@shopgate/engage/components';
+import { Card, TextLink, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { isIOSTheme } from '@shopgate/engage/core';
 import { i18n } from "../../../core/helpers/i18n";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
     padding: theme.spacing(2.5, 2, 0, 2)
   },
   headline: {
-    color: colors.shade3,
-    fontSize: '1rem',
-    fontWeight: 'normal',
+    color: theme.palette.grey.medium,
     textTransform: 'uppercase',
     paddingBottom: theme.spacing(1),
-    margin: 0,
-    ...(!isIOSTheme() ? {
-      fontSize: '1.25rem',
-      lineHeight: '1.5rem',
-      fontWeight: 500,
-      color: theme.palette.text.primary,
-      textTransform: 'none'
-    } : {})
+    margin: 0
   },
   link: {
-    color: 'var(--color-primary) !important'
+    color: `${theme.palette.primary.main} !important`
   },
   card: {
-    fontSize: '0.875rem',
     lineHeight: '1.25rem',
     margin: 0,
     padding: theme.spacing(2),
-    color: 'var(--color-text-medium-emphasis)',
-    flex: '1 0 auto',
-    ...(!isIOSTheme() ? {
-      background: 'var(--color-background-accent)',
-      boxShadow: 'none'
-    } : {})
-  },
-  cardWithForm: {
-    ...(!isIOSTheme() ? {
-      background: 'inherit',
-      boxShadow: 'none',
-      padding: 0
-    } : {})
+    flex: '1 0 auto'
   },
   list: {
     margin: 0
   },
   listTitle: {
-    fontSize: '0.625rem',
-    lineHeight: '1rem',
-    fontWeight: 'bold',
     letterSpacing: '1.5px',
     textTransform: 'uppercase',
-    color: theme.palette.text.primary,
     ':not(:first-of-type)': {
       paddingTop: theme.spacing(1.5)
     }
   },
   listEntry: {
-    fontSize: '0.875rem',
-    lineHeight: '1.5rem',
     marginLeft: 0,
     whiteSpace: 'pre-line',
-    wordBreak: 'break-all',
-    color: 'var(--color-text-medium-emphasis)'
+    wordBreak: 'break-all'
   },
   table: {
     color: theme.palette.text.primary,
@@ -86,10 +52,9 @@ const useStyles = makeStyles()(theme => ({
       paddingBottom: 8
     },
     ' tr:last-of-type td': {
-      fontSize: '1rem',
       paddingTop: 8,
-      borderTop: '1px solid #979797',
-      fontWeight: 'bold'
+      borderTop: `1px solid ${theme.components.border.medium}`,
+      fontWeight: theme.typography.fontWeightBold
     }
   }
 }));
@@ -102,7 +67,6 @@ const CheckoutConfirmationSegment = ({
   title,
   content,
   children,
-  hasForm,
   isSummary,
   className
 }) => {
@@ -118,14 +82,16 @@ const CheckoutConfirmationSegment = ({
   /* eslint-disable react/no-danger */
   return /*#__PURE__*/_jsxs("div", {
     className: cx(classes.wrapper, className),
-    children: [/*#__PURE__*/_jsx("h3", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
       className: classes.headline,
       children: i18n.text(title)
     }), /*#__PURE__*/_jsxs(Card, {
-      className: cx(classes.card, {
-        [classes.cardWithForm]: hasForm
-      }),
-      children: [isString && /*#__PURE__*/_jsx("span", {
+      className: classes.card,
+      children: [isString && /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
+        color: "textSecondary",
         children: content
       }), !isString && !isSummary && /*#__PURE__*/_jsx("dl", {
         className: classes.list,
@@ -134,10 +100,17 @@ const CheckoutConfirmationSegment = ({
           text,
           link
         }) => /*#__PURE__*/_jsxs(Fragment, {
-          children: [label && /*#__PURE__*/_jsx("dt", {
+          children: [label && /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            component: "dt",
+            color: "textPrimary",
+            fontWeight: "bold",
             className: classes.listTitle,
             children: i18n.text(label)
-          }), link ? /*#__PURE__*/_jsx("dd", {
+          }), link ? /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "dd",
+            color: "textSecondary",
             className: classes.listEntry,
             children: /*#__PURE__*/_jsx(TextLink, {
               href: link,
@@ -148,7 +121,10 @@ const CheckoutConfirmationSegment = ({
                 }
               })
             })
-          }) : /*#__PURE__*/_jsx("dd", {
+          }) : /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "dd",
+            color: "textSecondary",
             className: classes.listEntry,
             dangerouslySetInnerHTML: {
               __html: text
@@ -161,15 +137,22 @@ const CheckoutConfirmationSegment = ({
           children: content.map(({
             label,
             text
-          }) => /*#__PURE__*/_jsxs("tr", {
-            children: [label && /*#__PURE__*/_jsx("td", {
-              children: i18n.text(label)
-            }), /*#__PURE__*/_jsx("td", {
-              dangerouslySetInnerHTML: {
-                __html: text
-              }
-            })]
-          }, label || text))
+          }, index) => {
+            const isLastRow = index === content.length - 1;
+            return /*#__PURE__*/_jsxs("tr", {
+              children: [label && /*#__PURE__*/_jsx(Typography, {
+                variant: isLastRow ? 'body1' : 'body2',
+                component: "td",
+                children: i18n.text(label)
+              }), /*#__PURE__*/_jsx(Typography, {
+                variant: isLastRow ? 'body1' : 'body2',
+                component: "td",
+                dangerouslySetInnerHTML: {
+                  __html: text
+                }
+              })]
+            }, label || text);
+          })
         })
       })]
     })]
@@ -181,7 +164,6 @@ const CheckoutConfirmationSegment = ({
 CheckoutConfirmationSegment.defaultProps = {
   children: null,
   content: null,
-  hasForm: false,
   isSummary: false,
   className: null
 };

package/checkout/components/GuestCheckout/GuestCheckoutPickup.js

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { GUEST_CHECKOUT_PATTERN } from "../../constants/routes";
 import Section from "../Checkout/CheckoutSection";
@@ -15,7 +16,6 @@ const useStyles = makeStyles()(theme => ({
   card: {
     display: 'flex',
     flexDirection: 'column',
-    fontSize: 15,
     margin: '8px 0 12px 0'
   }
 }));
@@ -42,11 +42,14 @@ const GuestCheckoutPickup = () => {
       className: classes.card,
       title: headline,
       editLink: `${GUEST_CHECKOUT_PATTERN}?edit=${ADDRESS_TYPE_PICKUP}`,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        component: "span",
         children: pickupAddress.middleName?.length ? `${pickupAddress.firstName} ${pickupAddress.middleName} ${pickupAddress.lastName}` : `${pickupAddress.firstName} ${pickupAddress.lastName}`
-      }), /*#__PURE__*/_jsx("span", {
+      }), /*#__PURE__*/_jsx(Typography, {
+        component: "span",
         children: pickupAddress.emailAddress
-      }), /*#__PURE__*/_jsx("span", {
+      }), /*#__PURE__*/_jsx(Typography, {
+        component: "span",
         children: pickupAddress.mobile
       })]
     })

package/checkout/components/PaymentMethodButton/PaymentMethodButton.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useCheckoutContext } from "../../hooks/common";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     outline: 'none',
     border: '1px solid rgba(0, 0, 0, 0.12)',
     borderRadius: 4,
-    background: '#fff',
+    background: theme.palette.common.white,
     height: 52,
     width: 160,
     display: 'flex',
@@ -37,7 +37,7 @@ const useStyles = makeStyles()({
       background: 'rgba(0, 0, 0, 0.12)'
     }
   }
-});
+}));
 
 /**
  * Payment Button

package/checkout/components/ResponsiveBackButton/ResponsiveBackButton.js

@@ -10,7 +10,7 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(4, 2, 2, 2)
   },
   button: {
-    fontSize: '0.875rem !important',
+    fontSize: `${theme.typography.body2.fontSize} !important`,
     padding: '0 !important',
     ' > div ': {
       padding: 0,
@@ -19,7 +19,7 @@ const useStyles = makeStyles()(theme => ({
   },
   buttonIcon: {
     display: 'inline-block',
-    fontSize: '1.375rem !important',
+    fontSize: `${theme.components.icon.medium} !important`,
     alignSelf: 'center',
     marginRight: theme.spacing(0.5),
     marginLeft: -3,