@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherDefault.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -8,29 +9,20 @@ const useStyles = makeStyles()(theme => ({
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
-    fontSize: '0.875rem',
     padding: theme.spacing(0, 2),
     flexShrink: 0
   },
-  heading: {
-    color: 'var(--color-text-medium-emphasis)'
-  },
   name: {
-    fontWeight: 500,
     color: theme.palette.text.primary
   },
   button: {
-    fontSize: '0.625rem !important',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
+    textTransform: 'none',
+    marginLeft: theme.spacing(1)
   }
 }));
 
 /**
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const GlobalLocationSwitcherDefault = ({
   locationName,
@@ -42,19 +34,26 @@ const GlobalLocationSwitcherDefault = ({
   } = useStyles();
   return /*#__PURE__*/_jsxs("div", {
     className: classes.wrapper,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: classes.heading,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
+      color: "textSecondary",
       children: i18n.text('locations.your_current_location.heading')
     }), /*#__PURE__*/_jsxs("div", {
-      className: classes.name,
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        component: "span",
+        fontWeight: "medium",
+        className: classes.name,
         children: locationName
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "link",
+        color: "primary",
+        size: "small",
+        dense: true,
         onClick: handleChange,
-        type: "secondary",
         className: classes.button,
         disabled: !editable,
-        flat: true,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "locations.your_current_location.change"
         })

package/locations/components/ReservationResponses/ReservationError.js

@@ -1,16 +1,15 @@
 import React from 'react';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from "../../../core/helpers/i18n";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    background: theme.palette.background.default,
+    background: theme.palette.background.surface,
     padding: theme.spacing(2, 1.5, 16),
     boxShadow: 'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'
   },
   heading: {
-    fontSize: '1.125rem',
-    fontWeight: 'bold',
     margin: theme.spacing(1, 0, 2.5)
   },
   body: {
@@ -22,7 +21,7 @@ const useStyles = makeStyles()(theme => ({
 
 /**
  * Renders the reservation error screen.
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 export function ReservationError() {
   const {
@@ -30,10 +29,14 @@ export function ReservationError() {
   } = useStyles();
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [/*#__PURE__*/_jsx("h2", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h4",
+      component: "h2",
+      fontWeight: "bold",
       className: classes.heading,
       children: i18n.text('locations.error_title')
-    }), /*#__PURE__*/_jsx("p", {
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "p",
       className: classes.body,
       children: i18n.text('locations.error_copy')
     })]

package/locations/components/ReservationResponses/ReservationSuccess.js

@@ -1,17 +1,16 @@
 import React, { useContext } from 'react';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from "../../../core/helpers/i18n";
 import { FulfillmentContext } from "../../locations.context";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    background: theme.palette.background.default,
+    background: theme.palette.background.surface,
     padding: theme.spacing(2, 1.5, 16),
     boxShadow: 'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'
   },
   heading: {
-    fontSize: '1.125rem',
-    fontWeight: 'bold',
     margin: theme.spacing(1, 0, 2.5)
   },
   body: {
@@ -21,8 +20,6 @@ const useStyles = makeStyles()(theme => ({
   },
   orderNum: {
     padding: 0,
-    fontSize: '1.1875rem',
-    fontWeight: 'bold',
     margin: theme.spacing(0, 0, 2),
     border: 0
   }
@@ -41,16 +38,24 @@ export function ReservationSuccess() {
   } = useContext(FulfillmentContext);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [/*#__PURE__*/_jsx("h2", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h4",
+      component: "h2",
+      fontWeight: "bold",
       className: classes.heading,
       children: i18n.text('locations.success_title')
-    }), /*#__PURE__*/_jsx("p", {
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "p",
       className: classes.body,
       children: i18n.text('locations.success_copy')
-    }), /*#__PURE__*/_jsx("p", {
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "p",
       className: classes.body,
       children: i18n.text('locations.success_order_num')
-    }), orderNumbers !== null && /*#__PURE__*/_jsx("p", {
+    }), orderNumbers !== null && /*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "p",
+      fontWeight: "bold",
       className: classes.orderNum,
       children: orderNumbers[0]
     })]

package/locations/components/ReserveForm/ReserveForm.js

@@ -1,7 +1,8 @@
 import 'react-phone-number-input/style.css';
 import React, { useState, useContext, useMemo, useRef, useLayoutEffect, useCallback } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { TextField, RippleButton, RadioGroup, RadioGroupItem, ProgressBar } from '@shopgate/engage/components';
+import { TextField, RadioGroup, RadioGroupItem, ProgressBar, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { useFormState } from "../../../core/hooks/useFormState";
 import { FulfillmentContext } from "../../locations.context";
@@ -10,13 +11,11 @@ import { constraints } from "./ReserveForm.constraints";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   form: {
-    background: theme.palette.background.default,
+    background: theme.palette.background.surface,
     padding: theme.spacing(1.5, 1.5, 2),
     boxShadow: 'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'
   },
   formHeading: {
-    fontSize: '1.125rem',
-    fontWeight: 'bold',
     margin: theme.spacing(0, 0, 1)
   },
   fieldset: {
@@ -37,9 +36,6 @@ const useStyles = makeStyles()(theme => ({
       paddingRight: 0
     }
   },
-  button: {
-    width: '100%'
-  },
   progressBar: {
     height: '4px',
     position: 'relative'
@@ -187,7 +183,10 @@ function ReserveFormUnwrapped() {
           className: classes.formField,
           errorText: i18n.text(validationErrors.email)
         })]
-      }), /*#__PURE__*/_jsx("p", {
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "h4",
+        component: "p",
+        fontWeight: "bold",
         className: classes.formHeading,
         children: i18n.text('locations.who_will_pickup')
       }), /*#__PURE__*/_jsx("div", {
@@ -238,10 +237,11 @@ function ReserveFormUnwrapped() {
           className: classes.formField,
           errorText: i18n.text(validationErrors.email2)
         })]
-      }), /*#__PURE__*/_jsx(RippleButton, {
-        type: "secondary",
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "submit",
+        color: "primary",
+        fullWidth: true,
         disabled: changed || valid === false || isSubmitting,
-        className: classes.button,
         children: i18n.text('locations.place_reservation')
       })]
     })]

package/locations/components/ReserveForm/ReserveFormPhone.js

@@ -1,7 +1,6 @@
 import React, { useMemo, useContext, memo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { parsePhoneNumber } from 'react-phone-number-input';
 import PhoneInput from 'react-phone-number-input/mobile';
@@ -12,14 +11,12 @@ import es from 'react-phone-number-input/locale/es.json';
 import fr from 'react-phone-number-input/locale/fr.json';
 import pt from 'react-phone-number-input/locale/pt.json';
 import flags from 'react-phone-number-input/flags';
+import { Typography } from '@shopgate/engage/components';
 import TextField from '@shopgate/pwa-ui-shared/TextField';
 import { useCountriesNames } from '@shopgate/engage/i18n';
 import { FulfillmentContext } from "../../locations.context";
 import connect from "./ReserveFormPhone.connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   formField: {
     width: '100%',
@@ -33,11 +30,11 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: theme.spacing(1),
     ' input.PhoneInputInput': {
       outline: 'none',
-      fontSize: '1rem',
+      fontSize: theme.typography.body1.fontSize,
       lineHeight: '1.1875rem',
       borderRadius: 0,
       paddingBottom: theme.spacing(0.75),
-      borderBottom: `1px solid ${colors.shade12}`,
+      borderBottom: `1px solid ${theme.components.border.dark}`,
       '&:focus': {
         borderBottom: `2px solid ${theme.palette.primary.main}`,
         paddingBottom: theme.spacing(0.75) - 1
@@ -54,9 +51,7 @@ const useStyles = makeStyles()(theme => ({
     position: 'absolute',
     width: '100%',
     bottom: 2,
-    fontSize: '0.75rem',
     lineHeight: 0.875,
-    color: theme.palette.error.main,
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis'
@@ -177,7 +172,10 @@ const ReserveFormPhoneUnwrapped = /*#__PURE__*/memo(props => {
       placeholder: label,
       countries: countries,
       labels: labels
-    }), !!errorText && /*#__PURE__*/_jsx("div", {
+    }), !!errorText && /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      component: "div",
+      color: "error",
       className: classes.phoneFieldErrorText,
       children: errorText
     })]

package/locations/components/StockInfo/StockInfo.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import defaultsDeep from 'lodash/defaultsDeep';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { makeGetLocationInventory } from "../../selectors";
 import { getThemeSettings } from "../../../core";
@@ -16,7 +17,6 @@ const useStyles = makeStyles()((theme, {
 }) => ({
   defaultClassName: {
     color: availabilityTextColor,
-    fontSize: '0.75rem',
     margin: 0,
     ':not(:empty) ~ *': {
       marginLeft: 14
@@ -73,7 +73,9 @@ const StockInfoUnwrapped = ({
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_LOCATION_STOCK_INFO,
     portalProps: portalProps,
-    children: /*#__PURE__*/_jsx("span", {
+    children: /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      component: "span",
       className: cx(classes.defaultClassName, className),
       children: /*#__PURE__*/_jsx(StockInfoInventory, {
         availabilityText: availabilityText,

package/locations/components/StockInfoLists/index.js

@@ -4,7 +4,7 @@ import PlaceholderLabel from '@shopgate/pwa-ui-shared/PlaceholderLabel';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getPreferredLocation, makeGetLocationInventory } from "../../selectors";
-import { I18n, SurroundPortals } from "../../../components";
+import { I18n, SurroundPortals, Typography } from "../../../components";
 import { StockInfo } from "../StockInfo";
 import { PRODUCT_LOCATION_STOCK_INFO_LIST } from "../../constants/Portals";
 import { showInventoryInLists } from "../../helpers/showInventoryInLists";
@@ -26,8 +26,7 @@ const makeMapStateToProps = () => {
 const useStyles = makeStyles()({
   wrapper: {
     flexDirection: 'row',
-    alignItems: 'flex-end',
-    fontSize: '0.65rem'
+    alignItems: 'flex-end'
   },
   text: {
     margin: '0 !important'
@@ -59,13 +58,13 @@ const StockInfoLists = ({
     location: preferredLocation,
     product
   };
-  /* eslint-disable jsx-a11y/aria-role */
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_LOCATION_STOCK_INFO_LIST,
     portalProps: portalProps,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      component: "div",
       className: classes.wrapper,
-      role: "text",
       children: /*#__PURE__*/_jsxs(PlaceholderLabel, {
         ready: !!inventory,
         children: [/*#__PURE__*/_jsx(StockInfo, {
@@ -84,7 +83,6 @@ const StockInfoLists = ({
       })
     })
   });
-  /* eslint-enable jsx-a11y/aria-role */
 };
 StockInfoLists.defaultProps = {
   inventory: null,

package/locations/components/StoreDetails/components/FindMoreStores.js

@@ -1,18 +1,14 @@
 import React from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { MagnifierIcon, LocatorIcon, Link } from '@shopgate/engage/components';
+import { MagnifierIcon, LocatorIcon, Link, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { STORE_FINDER_PATTERN } from "../../../constants";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     margin: '16px 0px'
   },
   title: {
-    fontSize: '20px',
-    fontWeight: '500',
-    color: 'var(--color-primary)',
     marginBottom: '8px'
   },
   inputCell: {
@@ -20,8 +16,8 @@ const useStyles = makeStyles()({
   },
   inputContainer: {
     position: 'relative',
-    background: themeColors.light,
-    border: `1px solid ${themeColors.shade7}`,
+    border: `1px solid ${theme.components.border.light}`,
+    background: theme.components.input.background,
     borderRadius: 4,
     display: 'flex',
     alignItems: 'center',
@@ -30,8 +26,8 @@ const useStyles = makeStyles()({
   inputIcon: {
     padding: 0,
     margin: '0 8px',
-    color: themeColors.shade9,
-    fontSize: '1.23rem',
+    color: theme.palette.grey.dark,
+    fontSize: theme.components.icon.small,
     flexShrink: 0,
     outline: 0
   },
@@ -48,7 +44,7 @@ const useStyles = makeStyles()({
     height: '100%',
     width: '100%'
   }
-});
+}));
 
 /**
  * Find more stores component.
@@ -60,7 +56,10 @@ const FindMoreStores = () => {
   } = useStyles();
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "div",
+      color: "primary",
       className: classes.title,
       "aria-hidden": true,
       children: i18n.text('location.findMoreStores')

package/locations/components/StoreDetails/components/GetDirectionsButton.js

@@ -1,17 +1,16 @@
 import React, { useMemo } from 'react';
 import { historyPush } from '@shopgate/pwa-common/actions/router';
 import PropTypes from 'prop-types';
-import { Button } from '@shopgate/engage/components';
+import { ButtonBase } from '@shopgate/engage/components/v2';
 import { generateGoogleMapsDirectionsUrl, i18n } from '@shopgate/engage/core';
 import { useDispatch } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  container: {},
+const useStyles = makeStyles()(theme => ({
   buttonText: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   }
-});
+}));
 
 /**
  * @param {Object} props The component props
@@ -39,11 +38,8 @@ const GetDirectionsButton = ({
     }));
   };
   return /*#__PURE__*/_jsx("div", {
-    className: classes.container,
-    children: /*#__PURE__*/_jsx(Button, {
+    children: /*#__PURE__*/_jsx(ButtonBase, {
       onClick: handleClick,
-      role: "button",
-      type: "plain",
       children: /*#__PURE__*/_jsx("span", {
         className: classes.buttonText,
         children: i18n.text('location.getDirections')

package/locations/components/StoreDetails/components/StoreDetails.js

@@ -1,5 +1,6 @@
 import React, { useContext, useMemo } from 'react';
-import { LocationIcon, Button, Link, ConditionalWrapper } from '@shopgate/engage/components';
+import { LocationIcon, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Button, ButtonBase } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getWeekDaysOrder } from '@shopgate/engage/core';
 import { i18n } from '@shopgate/engage/core/helpers';
@@ -7,24 +8,20 @@ import moment from 'moment';
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
 import GetDirectionsButton from "./GetDirectionsButton";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   headerWrapper: {
     display: 'flex'
   },
   headerIcon: {
-    color: 'var(--color-primary)',
-    fontSize: 20,
+    color: theme.palette.primary.main,
+    fontSize: theme.components.icon.small,
     alignContent: 'center',
     marginRight: 4
   },
   header: {
-    color: 'var(--color-primary)',
-    fontWeight: '600',
-    fontSize: 20
+    color: theme.palette.primary.main
   },
   locationName: {
-    fontSize: 20,
-    fontWeight: '600',
     marginBottom: 8
   },
   locationRow: {
@@ -44,30 +41,19 @@ const useStyles = makeStyles()({
     minWidth: '250px',
     maxWidth: '455px'
   },
-  storeHours: {
-    fontSize: 17,
-    fontWeight: '600'
-  },
   storeHoursLine: {},
   storeHoursWeekday: {
     textAlign: 'left'
   },
   bold: {
-    fontWeight: '600'
+    fontWeight: theme.typography.fontWeightBold
   },
   storeHoursOpeningTime: {
     textAlign: 'right'
   },
-  phone: {
-    fontSize: 17,
-    fontWeight: '600'
-  },
   phoneNumber: {
     textDecoration: 'underline'
   },
-  makeMyStoreButton: {
-    color: 'var(--color-primary)'
-  },
   comingSoon: {
     fontStyle: 'italic'
   },
@@ -78,7 +64,7 @@ const useStyles = makeStyles()({
     flexWrap: 'wrap',
     margin: '8px 0'
   }
-});
+}));
 
 /**
  * Store details component.
@@ -109,10 +95,8 @@ const StoreDetails = () => {
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(ConditionalWrapper, {
       condition: !isRouteLocationPreferred,
-      wrapper: children => /*#__PURE__*/_jsx(Button, {
+      wrapper: children => /*#__PURE__*/_jsx(ButtonBase, {
         onClick: () => selectLocation(routeLocation, true),
-        role: "button",
-        type: "plain",
         children: children
       }),
       children: /*#__PURE__*/_jsxs("div", {
@@ -123,12 +107,18 @@ const StoreDetails = () => {
             className: classes.icon,
             size: 20
           })
-        }), /*#__PURE__*/_jsx("div", {
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          component: "div",
+          fontWeight: "bold",
           className: classes.header,
           children: isRouteLocationPreferred ? i18n.text('location.myStore') : i18n.text('location.makeMyStore')
         })]
       })
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "div",
+      fontWeight: "bold",
       className: classes.locationName,
       children: routeLocation.name
     }), /*#__PURE__*/_jsxs("div", {
@@ -150,10 +140,9 @@ const StoreDetails = () => {
           children: [/*#__PURE__*/_jsx(GetDirectionsButton, {
             address: address
           }), !isComingSoon && !isRouteLocationPreferred && /*#__PURE__*/_jsx(Button, {
+            variant: "text",
+            color: "primary",
             onClick: () => selectLocation(routeLocation, true),
-            role: "button",
-            type: "plain",
-            className: classes.makeMyStoreButton,
             children: /*#__PURE__*/_jsx("span", {
               children: i18n.text('location.makeMyStore')
             })
@@ -162,8 +151,10 @@ const StoreDetails = () => {
             children: i18n.text('location.comingSoon')
           })]
         }), address?.phoneNumber && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("div", {
-            className: classes.phone,
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "h4",
+            component: "div",
+            fontWeight: "bold",
             children: `${i18n.text('location.phone')}: `
           }), /*#__PURE__*/_jsx("div", {
             className: classes.phoneNumber,
@@ -179,8 +170,10 @@ const StoreDetails = () => {
         })]
       }), hasOpeningHours && /*#__PURE__*/_jsxs("div", {
         className: classes.storeHoursColumn,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.storeHours,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h4",
+          component: "div",
+          fontWeight: "bold",
           children: `${i18n.text('location.storeHours')}:`
         }), /*#__PURE__*/_jsx("table", {
           children: /*#__PURE__*/_jsx("tbody", {

package/locations/components/StoreDetails/components/StoreFinderMap.js

@@ -12,7 +12,7 @@ import { historyPush } from '@shopgate/engage/core';
 import { MAP_RADIUS_KM } from "../../../constants";
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     height: '100%',
     width: '100%'
@@ -21,11 +21,11 @@ const useStyles = makeStyles()({
     ' svg': {
       height: 40,
       width: 40,
-      fontSize: '1.5rem',
-      color: 'var(--color-primary)'
+      fontSize: theme.components.icon.medium,
+      color: theme.palette.primary.main
     }
   }
-});
+}));
 Leaflet.Map.addInitHook('addHandler', 'gestureHandling', GestureHandling);
 
 /**

package/locations/components/StoreDetails/components/StoresNearby.js

@@ -1,13 +1,12 @@
 import React, { useContext } from 'react';
 import { i18n } from '@shopgate/engage/core/helpers';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import StoresNearbyListItem from "./StoresNearbyListItem";
 import { StoreDetailsContext } from "../../../providers/StoreDetailsContext";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   title: {
-    fontSize: 20,
-    fontWeight: '600',
     marginBottom: 12
   },
   table: {
@@ -27,7 +26,10 @@ const StoresNearby = () => {
     nearbyLocations
   } = useContext(StoreDetailsContext);
   return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "div",
+      fontWeight: "bold",
       className: classes.title,
       children: i18n.text('location.storesNearby')
     }), nearbyLocations.length > 0 && /*#__PURE__*/_jsx("table", {