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

package/cart/components/CartItem/CartItemProduct.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { CART_PATH } from '@shopgate/pwa-common-commerce/cart/constants';
 import CardListItem from '@shopgate/pwa-ui-shared/CardList/components/Item';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { MessageBar, ResponsiveContainer } from '@shopgate/engage/components';
 import { getPageSettings } from '@shopgate/engage/core/config';
 import { CartItemProductLayout } from "./CartItemProductLayout";
@@ -10,16 +9,13 @@ import { CartItemProductLayoutWide } from "./CartItemProductLayoutWide";
 import { useCartItemProduct } from "./CartItem.hooks";
 import CartItemSubstitution from "./CartItemSubstitution";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   noGap: {
     marginBottom: 0,
     background: 'none'
   },
   messagesContainerCard: {
-    background: colors.light,
+    background: theme.palette.background.surface,
     padding: theme.spacing(0, 0, 2, 0)
   },
   messagesCard: {
@@ -27,7 +23,7 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(1, 1.75)
   },
   messagesContainerLine: {
-    background: colors.light,
+    background: theme.palette.background.surface,
     padding: theme.spacing(2, 2, 0)
   },
   messagesLine: {

package/cart/components/CartItem/CartItemProductLayout.js

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { Grid, Link, ProductProperties, SurroundPortals, ConditionalWrapper, I18n } from '@shopgate/engage/components';
 import { CART_ITEM_IMAGE, CART_ITEM_LINK, CART_ITEM_PROPERTIES, CART_ITEM_QUANTITY_PICKER } from '@shopgate/engage/cart';
 import { showTaxDisclaimer } from '@shopgate/engage/market';
@@ -15,9 +14,6 @@ import CartItemProductOrderDetails from "./CartItemProductOrderDetails";
 import CartItemProductPriceList from "./CartItemProductPriceList";
 import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const leftColumnWidth = 72;
 const useStyles = makeStyles()((theme, _params, classes) => ({
   item: {
@@ -29,7 +25,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     width: leftColumnWidth
   },
   image: {
-    background: colors.placeholder,
+    background: theme.palette.background.emphasized,
     marginBottom: theme.spacing(1.25),
     height: leftColumnWidth,
     width: leftColumnWidth
@@ -40,7 +36,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     paddingLeft: theme.spacing(2)
   },
   info: {
-    fontSize: '0.875rem',
+    fontSize: theme.typography.body2.fontSize,
     marginTop: theme.spacing(1.75),
     marginBottom: theme.spacing(0.25),
     flexGrow: 1,
@@ -69,8 +65,8 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   properties: {
     wordBreak: 'break-word',
     alignSelf: 'flex-start',
-    fontSize: '0.875rem',
-    color: 'var(--color-text-medium-emphasis)',
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.secondary,
     lineHeight: 1.3,
     '&:not(:empty)': {
       [`+ .${classes.price}`]: {

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { TextLink, ProductProperties, QuantityLabel, ConditionalWrapper, MessageBar, SurroundPortals } from '@shopgate/engage/components';
+import { TextLink, ProductProperties, QuantityLabel, ConditionalWrapper, MessageBar, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { ProductImage, CartUnitQuantityPicker, PriceInfo, ProductName, ITEM_PATH } from '@shopgate/engage/product';
 import { CART_ITEM_NAME, CART_ITEM_QUANTITY_PICKER } from '@shopgate/pwa-common-commerce/cart';
 import { bin2hex } from '@shopgate/engage/core';
@@ -64,16 +64,16 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     }
   },
   productName: {
-    fontSize: '1.25rem',
+    fontSize: theme.typography.h3.fontSize,
     lineHeight: '1.5rem',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     wordBreak: ['keep-all', 'break-word'],
     hyphens: 'auto'
   },
   productProperties: {
     paddingTop: theme.spacing(1),
     color: theme.palette.text.secondary,
-    fontSize: '1rem'
+    fontSize: theme.typography.body1.fontSize
   },
   quantityPicker: {
     width: 140
@@ -81,11 +81,13 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   quantityPickerDisabled: {
     padding: theme.spacing(0, 1),
     textAlign: 'center',
-    fontSize: '1.25rem',
-    lineHeight: '1.625rem',
+    fontSize: theme.typography.h3.fontSize,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     height: 28,
     width: '100%',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     color: theme.palette.text.primary,
     whiteSpace: 'nowrap'
   },
@@ -99,7 +101,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
     }
   },
   price: {
-    fontSize: '1.25rem !important',
+    fontSize: `${theme.typography.h3.fontSize} !important`,
     lineHeight: '1.625rem  !important'
   },
   priceListEntry: {
@@ -111,9 +113,7 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   },
   priceInfo: {
     wordBreak: 'break-word',
-    fontSize: '0.75rem',
     lineHeight: '0.875rem',
-    color: theme.palette.text.secondary,
     padding: theme.spacing(0.5, 0)
   },
   contextMenu: {
@@ -195,10 +195,15 @@ const CartItemProductLayoutWide = () => {
             entry: classes.priceListEntry,
             promo: classes.priceListPromo
           }
-        }), /*#__PURE__*/_jsx(PriceInfo, {
-          product: product,
-          currency: currency,
-          className: classes.priceInfo
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
+          color: "textSecondary",
+          children: /*#__PURE__*/_jsx(PriceInfo, {
+            product: product,
+            currency: currency,
+            className: classes.priceInfo
+          })
         }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {})]
       }), isOrderDetails && /*#__PURE__*/_jsx(CartItemProductLayoutWideOrderDetails, {}), /*#__PURE__*/_jsxs("div", {
         className: classes.column,

package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { BOPIS, ROPIS } from '@shopgate/engage/locations';
 import { i18n } from '@shopgate/engage/core/helpers';
@@ -6,8 +7,6 @@ import { useCartItemProduct } from "./CartItem.hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   label: {
-    color: 'var(--color-secondary)',
-    fontSize: '0.875rem',
     marginTop: 'auto'
   }
 });
@@ -29,7 +28,10 @@ const CartItemProductLayoutWideFulfillmentLabel = () => {
   } else if (fulfillmentMethod === ROPIS) {
     suffix = 'ropis';
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body2",
+    component: "div",
+    color: "secondary",
     className: classes.label,
     children: i18n.text(`locations.method.${suffix}`)
   });

package/cart/components/CartItem/CartItemProductLayoutWideOrderDetails.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { QuantityLabel } from '@shopgate/engage/components';
+import { QuantityLabel, Typography } from '@shopgate/engage/components';
 import { getTranslatedLineItemStatus } from '@shopgate/engage/orders';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useCartItem, useCartItemProduct } from "./CartItem.hooks";
@@ -28,9 +28,7 @@ const useStyles = makeStyles()(theme => ({
     ':last-child': {
       paddingRight: 0
     },
-    fontSize: '1.25rem',
-    lineHeight: '1.625rem',
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   statusColumn: {
     display: 'flex',
@@ -42,18 +40,18 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(0, 1),
     ':last-child': {
       paddingRight: 0
-    },
-    fontSize: '1.25rem',
-    lineHeight: '1.625rem'
+    }
   },
   quantityPickerDisabled: {
     padding: theme.spacing(0, 1),
     textAlign: 'center',
-    fontSize: '1.25rem',
-    lineHeight: '1.625rem',
+    fontSize: theme.typography.h3.fontSize,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     height: 28,
     width: '100%',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     color: theme.palette.text.primary,
     whiteSpace: 'nowrap'
   }
@@ -78,10 +76,18 @@ const CartItemProductLayoutWideOrderDetails = () => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [!cartIsDirectShipOnly ? /*#__PURE__*/_jsx("div", {
       className: classes.locationColumn,
-      children: location?.name
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        component: "span",
+        children: location?.name
+      })
     }) : null, /*#__PURE__*/_jsx("div", {
       className: classes.statusColumn,
-      children: getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        component: "span",
+        children: getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)
+      })
     }), /*#__PURE__*/_jsx("div", {
       className: classes.column,
       children: /*#__PURE__*/_jsx(QuantityLabel, {

package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.js

@@ -5,7 +5,7 @@ import { useCartItemProduct } from "./CartItem.hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   button: {
-    fontSize: '0.875rem !important',
+    fontSize: `${theme.typography.body2.fontSize} !important`,
     letterSpacing: '0.05em',
     padding: `${theme.spacing(2, 0)} !important`,
     ' *': {

package/cart/components/CartItem/CartItemProductOrderDetails.js

@@ -20,9 +20,9 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   labelValue: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     display: 'inline',
-    color: 'var(--color-text-medium-emphasis)'
+    color: theme.palette.text.secondary
   },
   fulfillmentLabel: {
     fontSize: 'inherit',

package/cart/components/CartItem/CartItemProductPriceCaption.js

@@ -1,17 +1,15 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { Typography, I18n } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { ROPIS
 //  BOPIS,
 } from '@shopgate/engage/locations';
-import { I18n } from '@shopgate/engage/components';
 import { useCartItemProduct } from "./CartItem.hooks";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   caption: {
-    fontSize: '0.75rem',
     lineHeight: '0.875rem',
-    color: theme.palette.text.secondary,
     paddingTop: theme.spacing(0.5)
   }
 }));
@@ -40,7 +38,10 @@ const CartItemProductPriceCaption = ({
   if (!label) {
     return null;
   }
-  return /*#__PURE__*/_jsxs("span", {
+  return /*#__PURE__*/_jsxs(Typography, {
+    variant: "caption",
+    component: "span",
+    color: "textSecondary",
     className: cx(classes.caption, className),
     children: ["(", /*#__PURE__*/_jsx(I18n.Text, {
       string: label

package/cart/components/CartItem/CartItemProductPriceList.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import Price from '@shopgate/pwa-ui-shared/Price';
 import PriceStriked from '@shopgate/pwa-ui-shared/PriceStriked';
@@ -9,12 +10,9 @@ import CartItemProductPriceListPromotion from "./CartItemProductPriceListPromoti
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   price: {
-    fontSize: '1rem',
-    fontWeight: 500,
     marginLeft: 'auto'
   },
   priceStriked: {
-    fontSize: '.875rem',
     marginLeft: 'auto'
   },
   priceListEntry: {
@@ -71,17 +69,25 @@ const CartItemProductPriceList = ({
           isCoupon: isCoupon,
           isPromo: isPromo,
           className: customClasses?.promo
-        }), !isLast ? /*#__PURE__*/_jsx(PriceStriked, {
+        }), !isLast ? /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
           className: cx(classes.priceStriked, customClasses?.priceStriked),
-          value: price,
-          currency: currency
-        }) : /*#__PURE__*/_jsx(Price, {
+          children: /*#__PURE__*/_jsx(PriceStriked, {
+            value: price,
+            currency: currency
+          })
+        }) : /*#__PURE__*/_jsx(Typography, {
+          fontWeight: "medium",
+          component: "span",
           className: cx(classes.price, customClasses?.price),
-          unitPrice: price,
-          currency: currency,
-          discounted: prices.length > 1 || price === 0,
-          taxDisclaimer: true,
-          allowFree: true
+          children: /*#__PURE__*/_jsx(Price, {
+            unitPrice: price,
+            currency: currency,
+            discounted: prices.length > 1 || price === 0,
+            taxDisclaimer: true,
+            allowFree: true
+          })
         })]
       }, `total_${index}`)
       /* eslint-enable react/no-array-index-key */;

package/cart/components/CartItem/CartItemProductPriceListPromotion.js

@@ -11,17 +11,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
     flex: '0 1 auto',
-    color: 'var(--color-secondary)',
+    color: theme.palette.secondary.main,
     paddingRight: 8
   },
   deleteIcon: {
-    backgroundColor: '#898989',
-    color: '#fff',
+    backgroundColor: theme.palette.grey.dark,
+    color: theme.contrastColor(theme.palette.grey.dark),
     borderRadius: 32,
     padding: 4,
     marginRight: theme.spacing(1),
     cursor: 'pointer',
-    fontSize: '0.75rem',
+    fontSize: theme.components.icon.xsmall,
     display: 'inline-flex',
     [responsiveMediaQuery('<=xs', {
       appAlways: true
@@ -31,8 +31,8 @@ const useStyles = makeStyles()(theme => ({
   },
   infoIconWrapper: {
     cursor: 'pointer',
-    color: 'var(--color-primary)',
-    fontSize: '1.5rem',
+    color: theme.palette.primary.main,
+    fontSize: theme.components.icon.medium,
     display: 'inline-flex',
     verticalAlign: 'bottom',
     paddingBottom: 1,
@@ -40,7 +40,7 @@ const useStyles = makeStyles()(theme => ({
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
-      fontSize: '1.375rem',
+      fontSize: theme.components.icon.medium,
       paddingBottom: 0
     }
   },

package/cart/components/CartItem/CartItemProductProvider.connector.js

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { isAndroid } from '@shopgate/pwa-common/selectors/client';
 import deleteProductsFromCart from '@shopgate/pwa-common-commerce/cart/actions/deleteProductsFromCart';
 import updateProductsInCart from '@shopgate/pwa-common-commerce/cart/actions/updateProductsInCart';
 import { getCurrency } from '@shopgate/pwa-common-commerce/cart/selectors';
@@ -15,7 +14,6 @@ import { getCurrency } from '@shopgate/pwa-common-commerce/cart/selectors';
  * @returns {StateProps} The extended component props.
  */
 const mapStateToProps = state => ({
-  isAndroid: isAndroid(state),
   currency: getCurrency(state)
 });
 

package/cart/components/CartItem/CartItemProductProvider.js

@@ -1,17 +1,10 @@
 import "core-js/modules/es.regexp.flags.js";
 import React, { useMemo, useCallback, useState, useRef } from 'react';
-import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CART_ITEM_TYPE_PRODUCT } from '@shopgate/pwa-common-commerce/cart/constants';
 import PropTypes from 'prop-types';
-import { CART_INPUT_AUTO_SCROLL_DELAY } from "../../cart.constants";
 import Context from "./CartItemProductProvider.context";
 import connect from "./CartItemProductProvider.connector";
 import CartItemProductProviderLegacy from "./CartItemProductProviderLegacy";
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 
 /**
  * @typedef {import('./CartItemProductProvider.types').OwnProps} OwnProps
@@ -28,6 +21,7 @@ const {
  * @param {Props} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartItemProductProvider = ({
   currency,
   deleteProduct,
@@ -36,7 +30,6 @@ const CartItemProductProvider = ({
   cartItem,
   isEditable,
   children,
-  isAndroid,
   currencyOverride
 }) => {
   const {
@@ -66,25 +59,6 @@ const CartItemProductProvider = ({
     updateProduct(id, updatedQuantity);
   }, [id, updateProduct]);
   const toggleEditMode = useCallback(isEnabled => {
-    if (isAndroid && isEnabled) {
-      /**
-       * When the user focuses the quantity input, the keyboard will pop up an overlap the input.
-       * Therefor the input has to be scrolled into the viewport again. Since between the focus and
-       * the keyboard appearance some time ticks away, the execution of the scroll code is delayed.
-       *
-       * This should not happen on iOS devices, since their web views behave different.
-       */
-      setTimeout(() => {
-        const yOffset = -(window.innerHeight / 2) + getAbsoluteHeight(cartItemRef.current) + variables.paymentBar.height;
-        if (cartItemRef.current) {
-          cartItemRef.current.scrollIntoView({
-            behavior: 'smooth',
-            yOffset
-          });
-        }
-      }, CART_INPUT_AUTO_SCROLL_DELAY);
-    }
-
     // Give the keyboard some time to slide out after blur, before further actions are taken.
     setTimeout(() => {
       if (onFocus) {
@@ -92,7 +66,7 @@ const CartItemProductProvider = ({
       }
     }, isEnabled ? 300 : 0);
     setEditMode(isEnabled);
-  }, [isAndroid, onFocus]);
+  }, [onFocus]);
   const value = useMemo(() => {
     const isLinkable = flags?.disableLink !== true;
     const allowQuantityChange = flags?.disableQuantityField !== true;
@@ -140,7 +114,6 @@ CartItemProductProvider.defaultProps = {
   isEditable: true,
   onFocus: () => {},
   currencyOverride: null,
-  currency: null,
-  isAndroid: false
+  currency: null
 };
 export default connect(CartItemProductProvider);

package/cart/components/CartItem/CartItemProductProvider.types.js

@@ -25,7 +25,6 @@
 
 /**
  * @typedef {Object} StateProps
- * @property {boolean} [isAndroid]
  * @property {string} [currency]
  */
 

package/cart/components/CartItem/CartItemProductTitle.js

@@ -11,8 +11,7 @@ import { ConditionalWrapper } from "../../../components";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   title: {
-    fontWeight: 500,
-    lineHeight: 1.125,
+    fontWeight: theme.typography.fontWeightMedium,
     wordBreak: ['keep-all', 'break-word'],
     hyphens: 'auto'
   },
@@ -26,7 +25,7 @@ const useStyles = makeStyles()(theme => ({
   menuToggleButton: {
     height: theme.spacing(4),
     width: theme.spacing(4),
-    fontSize: theme.spacing(3),
+    fontSize: theme.components.icon.medium,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end'

package/cart/components/CartItem/CartItemQuantityPicker.js

@@ -2,19 +2,14 @@ import React, { useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import QuantityInput from '@shopgate/engage/components/QuantityInput';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   inputStyle: {
     border: 'none',
-    background: colors.placeholder,
+    background: theme.palette.background.emphasized,
     display: 'block',
-    fontSize: '0.75rem',
-    lineHeight: 1,
+    fontSize: theme.typography.caption.fontSize,
     textAlign: 'center',
     padding: theme.spacing(0.75, 1),
     outline: 0,

package/cart/components/CartItem/CartItemSubstitution.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { BOPIS, ROPIS } from '@shopgate/engage/locations';
 import connect from "./CartItemSubstitution.connector";
 import { useCartItem } from "./CartItem.hooks";
@@ -12,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     padding: theme.spacing(2),
-    borderTop: `1px solid ${themeColors.shade7}`
+    borderTop: `1px solid ${theme.components.border.light}`
   }
 }));
 

package/cart/components/CartItems/CartItemCard.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import CartItemCardReservation from "./CartItemCardReservation";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   withBorder: {
-    borderBottom: `1px solid ${themeColors.shade7}`
+    borderBottom: `1px solid ${theme.components.border.light}`
   }
-});
+}));
 
 /**
  * Renders the cart items.

package/cart/components/CartItems/CartItemCardReservationAccordion.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Accordion } from '@shopgate/engage/components';
+import { Accordion, Typography } from '@shopgate/engage/components';
 import { StoreAddress, StoreOpeningHours } from '@shopgate/engage/locations';
 import { makeStyles } from '@shopgate/engage/styles';
 import { CartItemCardReservationLabel } from "./CartItemCardReservationLabel";
@@ -12,13 +12,8 @@ const useStyles = makeStyles()(theme => ({
   accordionToggle: {
     padding: theme.spacing(2.5, 2)
   },
-  locationAddress: {
-    fontSize: '0.85rem',
-    color: theme.palette.text.secondary
-  },
   locationHours: {
-    paddingTop: theme.spacing(2),
-    fontSize: '0.85rem'
+    paddingTop: theme.spacing(2)
   }
 }));
 // eslint-disable-next-line max-len
@@ -46,13 +41,17 @@ const CartItemCardReservationAccordion = ({
     }),
     children: /*#__PURE__*/_jsxs("div", {
       className: classes.accordionContent,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: classes.locationAddress,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "div",
+        color: "textSecondary",
         children: /*#__PURE__*/_jsx(StoreAddress, {
           address: location.address,
           pure: true
         })
-      }), operationHours && /*#__PURE__*/_jsx("div", {
+      }), operationHours && /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "div",
         className: classes.locationHours,
         children: /*#__PURE__*/_jsx(StoreOpeningHours, {
           hours: operationHours,