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

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

@@ -6,12 +6,11 @@ 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,7 +38,6 @@ const GetDirectionsButton = ({
     }));
   };
   return /*#__PURE__*/_jsx("div", {
-    className: classes.container,
     children: /*#__PURE__*/_jsx(Button, {
       onClick: handleClick,
       role: "button",

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

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react';
-import { LocationIcon, Button, Link, ConditionalWrapper } from '@shopgate/engage/components';
+import { LocationIcon, Button, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { getWeekDaysOrder } from '@shopgate/engage/core';
 import { i18n } from '@shopgate/engage/core/helpers';
@@ -7,24 +7,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,29 +40,21 @@ 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)'
+    color: theme.palette.primary.main
   },
   comingSoon: {
     fontStyle: 'italic'
@@ -78,7 +66,7 @@ const useStyles = makeStyles()({
     flexWrap: 'wrap',
     margin: '8px 0'
   }
-});
+}));
 
 /**
  * Store details component.
@@ -123,12 +111,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", {
@@ -162,8 +156,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 +175,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", {

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

@@ -2,21 +2,20 @@ import React, { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Button } from '@shopgate/engage/components';
+import { Button, Typography } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { historyPush } from '@shopgate/engage/core';
 import formatDistance from "../../../helpers/formatDistance";
 import { STORE_DETAILS_PATH } 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 => ({
   button: {
-    fontSize: '14px !important',
     padding: '0px !important'
   },
   locationRow: {
-    borderBottom: '1px solid #e8e8e8',
-    borderTop: '1px solid #e8e8e8',
+    borderBottom: `1px solid ${theme.components.border.light}`,
+    borderTop: `1px solid ${theme.components.border.light}`,
     '> td:first-of-type > div': {
       paddingLeft: 0
     },
@@ -28,7 +27,7 @@ const useStyles = makeStyles()({
     textWrapMode: 'nowrap',
     alignContent: 'center',
     verticalAlign: 'middle',
-    fontWeight: '500'
+    fontWeight: theme.typography.fontWeightMedium
   },
   makeMyStore: {
     textWrapMode: 'nowrap',
@@ -56,7 +55,7 @@ const useStyles = makeStyles()({
     flexWrap: 'wrap',
     justifyContent: 'flex-end'
   }
-});
+}));
 
 /**
 * Shows a location in a row
@@ -129,7 +128,12 @@ const StoresNearbyListItem = ({
               flat: true,
               disabled: isPreferredLocation,
               wrapContent: false,
-              children: `${i18n.text('location.makeMyStore')}`
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                component: "span",
+                fontWeight: "bold",
+                children: `${i18n.text('location.makeMyStore')}`
+              })
             }), isComingSoon && /*#__PURE__*/_jsx(Button, {
               className: classes.button,
               role: "button",
@@ -137,7 +141,12 @@ const StoresNearbyListItem = ({
               flat: true,
               disabled: true,
               wrapContent: false,
-              children: i18n.text('location.comingSoon')
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                component: "span",
+                fontWeight: "bold",
+                children: i18n.text('location.comingSoon')
+              })
             })]
           }), /*#__PURE__*/_jsx("div", {
             className: classes.storeInfo,
@@ -148,7 +157,12 @@ const StoresNearbyListItem = ({
               flat: true,
               onClick: () => openStoreDetails(code),
               wrapContent: false,
-              children: i18n.text('locations.details')
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                component: "span",
+                fontWeight: "bold",
+                children: i18n.text('locations.details')
+              })
             })
           })]
         })

package/locations/components/StoreFinder/StoreFinder.js

@@ -16,7 +16,7 @@ const useStyles = makeStyles()(theme => ({
     gridArea: 'search',
     padding: theme.spacing(2, 0.5, 0, 0.5),
     ' select': {
-      color: 'var(--color-text-medium-emphasis)'
+      color: theme.palette.text.secondary
     }
   },
   storeList: {

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js

@@ -5,15 +5,15 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { RippleButton } from '@shopgate/engage/components';
 import connect from "./StoreFinderGetDirectionsButton.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {},
   button: {
     width: '100%',
-    background: 'var(--color-primary)!important',
-    color: 'var(--color-primary-contrast)!important',
-    fontSize: '0.875rem !important'
+    background: `${theme.palette.primary.main} !important`,
+    color: `${theme.palette.primary.contrastText} !important`,
+    fontSize: `${theme.typography.body2.fontSize} !important`
   }
-});
+}));
 
 /**
  * @param {Object} props The component props

package/locations/components/StoreFinder/StoreFinderLocationDetails.js

@@ -1,27 +1,26 @@
 import _isEmpty from "lodash/isEmpty";
 import _every from "lodash/every";
 import React, { useContext } from 'react';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { StoreContext } from "./Store.context";
 import { StoreOpeningHours } from "../StoreList/StoreOpeningHours";
 import { Accordion, I18n } from "../../../components";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   accordionHeader: {
-    borderTop: `1px solid ${themeColors.shade7}`,
+    borderTop: `1px solid ${theme.components.border.light}`,
     cursor: 'pointer',
     ' svg': {
       display: 'inline'
     }
   },
   accordionContent: {
-    fontSize: '0.875rem',
     ' > div': {
       padding: 0
     }
   }
-});
+}));
 
 /**
  * @returns {JSX}
@@ -41,7 +40,9 @@ const StoreFinderLocationDetails = () => {
     renderLabel: () => /*#__PURE__*/_jsx(I18n.Text, {
       string: "locations.details"
     }),
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
       className: classes.accordionContent,
       children: /*#__PURE__*/_jsx(StoreOpeningHours, {
         hours: operationHours,

package/locations/components/StoreFinder/StoreFinderLocationHeader.js

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react';
-import { Grid, LocationIcon } from '@shopgate/engage/components';
+import { Grid, LocationIcon, Typography } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
@@ -14,7 +14,6 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2),
     display: 'flex',
     flexDirection: 'column',
-    color: theme.palette.text.secondary,
     ' > *': {
       margin: 0
     },
@@ -25,11 +24,9 @@ const useStyles = makeStyles()(theme => ({
       paddingTop: 0
     },
     ' a': {
-      color: 'var(--color-primary)',
+      color: theme.palette.primary.main,
       textDecoration: 'underline'
     },
-    fontSize: '0.875rem',
-    lineHeight: '1.5rem',
     ' > *:not(:last-child)': {
       paddingBottom: theme.spacing(0.5),
       paddingTop: 0
@@ -45,23 +42,13 @@ const useStyles = makeStyles()(theme => ({
       paddingTop: 0
     }
   },
-  storeName: {
-    fontSize: '1rem',
-    fontWeight: 500,
-    color: theme.palette.text.primary
-  },
   myStoreWrapper: {
     display: 'flex',
     alignItems: 'center'
   },
-  myStore: {
-    color: 'var(--color-primary)',
-    fontSize: '1rem',
-    fontWeight: 500
-  },
   myStoreIcon: {
     ' svg': {
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     },
     marginRight: '4px'
   },
@@ -100,7 +87,10 @@ const StoreFinderLocationHeader = () => {
     selectedLocation
   } = useContext(StoreFinderContext);
   const isSelectedLocation = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Typography, {
+    variant: "body2",
+    component: "div",
+    color: "textSecondary",
     className: classes.container,
     children: [/*#__PURE__*/_jsxs("div", {
       className: classes.clickable,
@@ -109,8 +99,11 @@ const StoreFinderLocationHeader = () => {
           grow: 1,
           children: /*#__PURE__*/_jsxs("div", {
             className: classes.storeNameWrapper,
-            children: [/*#__PURE__*/_jsx("div", {
-              className: classes.storeName,
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              component: "div",
+              color: "textPrimary",
+              fontWeight: "medium",
               children: name
             }), isSelectedLocation && /*#__PURE__*/_jsxs("div", {
               className: classes.myStoreWrapper,
@@ -119,8 +112,11 @@ const StoreFinderLocationHeader = () => {
                 children: /*#__PURE__*/_jsx(LocationIcon, {
                   size: 20
                 })
-              }), /*#__PURE__*/_jsx("div", {
-                className: classes.myStore,
+              }), /*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                component: "div",
+                color: "primary",
+                fontWeight: "medium",
                 children: i18n.text('location.myStore')
               })]
             })]

package/locations/components/StoreFinder/StoreFinderLocations.js

@@ -1,14 +1,10 @@
 import React, { useContext, forwardRef } from 'react';
 import { CardList } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { StoreFinderContext } from "../../locations.context";
 import { StoreContext } from "./Store.context";
 import StoreFinderLocation from "./StoreFinderLocation";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     paddingTop: 2,
@@ -20,8 +16,8 @@ const useStyles = makeStyles()(theme => ({
     paddingTop: 0
   },
   card: {
-    background: colors.light,
-    border: `1px solid ${colors.shade7}`,
+    background: theme.palette.background.surface,
+    border: `1px solid ${theme.components.border.light}`,
     boxSizing: 'border-box',
     boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
     borderRadius: 3,

package/locations/components/StoreFinder/StoreFinderSelectLocationButton.js

@@ -11,10 +11,10 @@ const useStyles = makeStyles()(theme => ({
   },
   selectLocationButton: {
     width: '100%',
-    fontSize: '.875rem !important',
+    fontSize: `${theme.typography.body2.fontSize} !important`,
     ':not(:disabled)': {
-      background: 'var(--color-primary)!important',
-      color: 'var(--color-primary-contrast)!important'
+      background: `${theme.palette.primary.main} !important`,
+      color: `${theme.palette.primary.contrastText} !important`
     }
   }
 }));

package/locations/components/StoreFinder/StoreFinderStoreInfoButton.js

@@ -12,10 +12,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   showStoreInfoButton: {
     width: '100%',
-    fontSize: '.875rem !important',
+    fontSize: `${theme.typography.body2.fontSize} !important`,
     ':not(:disabled)': {
-      background: 'var(--color-primary)!important',
-      color: 'var(--color-primary-contrast)!important'
+      background: `${theme.palette.primary.main} !important`,
+      color: `${theme.palette.primary.contrastText} !important`
     }
   },
   showStoreInfoButtonWrapper: {

package/locations/components/StoreList/StoreAddress.js

@@ -11,12 +11,12 @@ const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
     flexFlow: 'row nowrap',
-    color: 'var(--color-text-medium-emphasis)',
+    color: theme.palette.text.secondary,
     marginBottom: 4
   },
   addressIcon: {
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: '1.4rem',
+    color: theme.palette.text.secondary,
+    fontSize: theme.components.icon.medium,
     padding: theme.spacing(0.5, 2, 0, 0)
   },
   stockInfoContainer: {