@shopgate/engage 7.31.6 → 7.32.0-beta.10

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

@@ -2,21 +2,18 @@ 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 { Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 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()({
-  button: {
-    fontSize: '14px !important',
-    padding: '0px !important'
-  },
+const useStyles = makeStyles()(theme => ({
   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 +25,7 @@ const useStyles = makeStyles()({
     textWrapMode: 'nowrap',
     alignContent: 'center',
     verticalAlign: 'middle',
-    fontWeight: '500'
+    fontWeight: theme.typography.fontWeightMedium
   },
   makeMyStore: {
     textWrapMode: 'nowrap',
@@ -44,7 +41,7 @@ const useStyles = makeStyles()({
     textAlign: 'start'
   },
   cellContainer: {
-    padding: '8px',
+    padding: 6,
     textAlign: 'end'
   },
   cell: {
@@ -52,11 +49,11 @@ const useStyles = makeStyles()({
   },
   buttonContainer: {
     display: 'flex',
-    gap: '4px 16px',
+    gap: '0 16px',
     flexWrap: 'wrap',
     justifyContent: 'flex-end'
   }
-});
+}));
 
 /**
 * Shows a location in a row
@@ -122,33 +119,42 @@ const StoresNearbyListItem = ({
           children: [/*#__PURE__*/_jsxs("div", {
             className: classes.makeMyStore,
             children: [!isComingSoon && /*#__PURE__*/_jsx(Button, {
-              className: classes.button,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               onClick: () => selectLocation(location, true),
-              role: "button",
-              type: "primary",
-              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",
-              type: "primary",
-              flat: true,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               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,
             children: /*#__PURE__*/_jsx(Button, {
-              className: classes.button,
-              role: "button",
-              type: "primary",
-              flat: true,
+              variant: "link",
+              color: "secondary",
+              size: "small",
               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/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

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo } from 'react';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { StoreContext } from "./Store.context";
 import { i18n } from "../../../core/helpers";
@@ -8,14 +8,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   selectLocationButtonWrapper: {
     padding: theme.spacing(0, 2, 1, 2)
-  },
-  selectLocationButton: {
-    width: '100%',
-    fontSize: '.875rem !important',
-    ':not(:disabled)': {
-      background: 'var(--color-primary)!important',
-      color: 'var(--color-primary-contrast)!important'
-    }
   }
 }));
 
@@ -41,9 +33,11 @@ export const StoreFinderSelectLocationButton = () => {
   const isSelected = useMemo(() => selectedLocation?.code === store?.code, [selectedLocation, store]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.selectLocationButtonWrapper,
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      size: "small",
+      fullWidth: true,
       onClick: handleClick,
-      className: classes.selectLocationButton,
       disabled: isLoading || store?.isComingSoon || isSelected,
       children: i18n.text(store?.isComingSoon ? 'location.comingSoon' : 'locations.select_location')
     })

package/locations/components/StoreFinder/StoreFinderStoreInfoButton.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { historyPush } from '@shopgate/engage/core';
 import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
@@ -10,14 +10,6 @@ import { StoreFinderContext } from "../../locations.context";
 import { STORE_DETAILS_PATH } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
-  showStoreInfoButton: {
-    width: '100%',
-    fontSize: '.875rem !important',
-    ':not(:disabled)': {
-      background: 'var(--color-primary)!important',
-      color: 'var(--color-primary-contrast)!important'
-    }
-  },
   showStoreInfoButtonWrapper: {
     padding: theme.spacing(0, 2, 1, 2)
   }
@@ -54,9 +46,11 @@ const StoreFinderStoreInfoButton = ({
   }, [openStoreDetail, store]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.showStoreInfoButtonWrapper,
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      color: "primary",
+      size: "small",
+      fullWidth: true,
       onClick: handleClick,
-      className: classes.showStoreInfoButton,
       disabled: isLoading,
       children: i18n.text('locations.store_info')
     })

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: {

package/locations/components/StoreList/StoreAddressShort.js

@@ -2,20 +2,16 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { i18n, generateGoogleMapsDirectionsUrl } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
-import { LocationIcon, Link, Ellipsis, I18n } from '@shopgate/engage/components';
+import { LocationIcon, Link, Ellipsis, Typography } from '@shopgate/engage/components';
 import { StoreDetailsLine } from "./StoreDetailsLine";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   detailsPrimary: {
     margin: 0,
-    color: 'var(--color-primary)',
+    color: theme.palette.primary.main,
     lineHeight: '1.375rem'
-  },
-  detailsSecondary: {
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: '0.75rem'
   }
-});
+}));
 
 /**
  * Renders the pickup location's address information.
@@ -62,10 +58,12 @@ export function StoreAddressShort({
         rows: 1,
         className: classes.detailsPrimary,
         children: i18n.text('locations.address', address)
-      }), /*#__PURE__*/_jsx(I18n.Text, {
-        string: "locations.map_open",
-        className: classes.detailsSecondary,
-        "aria-label": `: ${i18n.text('locations.map_open')}`
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "span",
+        color: "textSecondary",
+        "aria-label": `: ${i18n.text('locations.map_open')}`,
+        children: i18n.text('locations.map_open')
       })]
     })
   });

package/locations/components/StoreList/StoreDetails.js

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { Accordion } from "../../../components";
 import { StoreContext } from "./Store.context";
 import { StoreOpeningHours } from "./StoreOpeningHours";
@@ -11,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   storeDetailsBody: {
     padding: theme.spacing(1, 2),
-    borderTop: `1px solid ${themeColors.shade7}`
+    borderTop: `1px solid ${theme.components.border.light}`
   },
   storeDetailsAccordion: {
     justifyContent: 'space-between'

package/locations/components/StoreList/StoreDetailsLine.js

@@ -8,12 +8,12 @@ const useStyles = makeStyles()(theme => ({
     marginTop: theme.spacing(1.5)
   },
   detailsIcon: {
-    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)
   },
   detailsIconLinked: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   },
   details: {
     paddingTop: theme.spacing(0.5)

package/locations/components/StoreList/StoreDistance.js

@@ -1,19 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import formatDistance from "../../helpers/formatDistance";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  storeDistance: {
-    whiteSpace: 'nowrap',
-    color: 'var(--color-text-medium-emphasis)',
-    [responsiveMediaQuery('>sm', {
-      webOnly: true
-    })]: {
-      fontSize: '0.875rem'
-    }
-  }
-});
 export const UNIT_SYSTEM_METRIC = 'metric';
 export const UNIT_SYSTEM_IMPERIAL = 'imperial';
 
@@ -28,14 +17,14 @@ export function StoreDistance({
   distance = null,
   unitSystem = UNIT_SYSTEM_METRIC
 }) {
-  const {
-    classes
-  } = useStyles();
   if (distance === null) {
     return null;
   }
-  return /*#__PURE__*/_jsx("span", {
-    className: classes.storeDistance,
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body2",
+    component: "span",
+    color: "textSecondary",
+    noWrap: true,
     children: formatDistance(distance, unitSystem === UNIT_SYSTEM_IMPERIAL)
   });
 }

package/locations/components/StoreList/StoreHeader.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Grid, ResponsiveContainer } from '@shopgate/engage/components';
+import { Grid, ResponsiveContainer, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { isProductAvailable } from "../../helpers";
 import { FulfillmentContext } from "../../locations.context";
@@ -14,10 +14,6 @@ const useStyles = makeStyles()(theme => ({
     cursor: 'pointer',
     padding: theme.spacing(1, 2, 0.5)
   },
-  storeName: {
-    fontSize: '1rem',
-    fontWeight: 500
-  },
   disabled: {
     cursor: 'not-allowed'
   }
@@ -49,8 +45,12 @@ export function StoreHeader() {
     children: [/*#__PURE__*/_jsxs(Grid, {
       children: [/*#__PURE__*/_jsxs(Grid.Item, {
         grow: 1,
-        className: classes.storeName,
-        children: [name, /*#__PURE__*/_jsx(ResponsiveContainer, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          component: "div",
+          fontWeight: "medium",
+          children: name
+        }), /*#__PURE__*/_jsx(ResponsiveContainer, {
           breakpoint: ">=sm",
           webOnly: true,
           children: /*#__PURE__*/_jsx("ul", {

package/locations/components/StoreList/StoreHoursToday.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { i18n } from "../../../core";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   storeHoursToday: {
-    color: 'var(--color-text-medium-emphasis)'
+    color: theme.palette.text.secondary
   }
-});
+}));
 const weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 
 /**

package/locations/components/StoreList/StoreListLocations.js

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
-import { CardList, SurroundPortals } from '@shopgate/engage/components';
+import { CardList, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import PlaceholderLabel from '@shopgate/pwa-ui-shared/PlaceholderLabel';
 import { FulfillmentContext } from "../../locations.context";
 import { StoreContext } from "./Store.context";
@@ -10,18 +9,17 @@ import { FULFILLMENT_SHEET_STORE_LIST } from "../../constants/Portals";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   stores: {
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     padding: theme.spacing(1.5, 1.5, 2),
-    fontSize: '0.875rem',
     boxShadow: 'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'
   },
   storeCard: {
-    background: themeColors.light,
+    background: theme.palette.background.surface,
     marginBottom: theme.spacing(1.5),
     ':last-of-type': {
       marginBottom: 0
     },
-    border: `1px solid ${themeColors.shade7}`,
+    border: `1px solid ${theme.components.border.light}`,
     boxSizing: 'border-box',
     boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
     borderRadius: '0px 0px 3px 3px'
@@ -53,18 +51,22 @@ function StoreListLocations() {
     portalProps: {
       locations
     },
-    children: /*#__PURE__*/_jsx(CardList, {
-      className: classes.stores,
-      children: /*#__PURE__*/_jsx(PlaceholderLabel, {
-        className: classes.storeCardPlaceholder,
-        ready: !showPlaceholder,
-        children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
-          className: classes.storeCard,
-          children: /*#__PURE__*/_jsx(StoreContext.Provider, {
-            value: location,
-            children: /*#__PURE__*/_jsx(StoreCard, {})
-          })
-        }, location.code))
+    children: /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
+      children: /*#__PURE__*/_jsx(CardList, {
+        className: classes.stores,
+        children: /*#__PURE__*/_jsx(PlaceholderLabel, {
+          className: classes.storeCardPlaceholder,
+          ready: !showPlaceholder,
+          children: locations.map(location => /*#__PURE__*/_jsx(CardList.Item, {
+            className: classes.storeCard,
+            children: /*#__PURE__*/_jsx(StoreContext.Provider, {
+              value: location,
+              children: /*#__PURE__*/_jsx(StoreCard, {})
+            })
+          }, location.code))
+        })
       })
     })
   });

package/locations/components/StoreList/StoreListProduct.js

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { ProductImage } from "../../../product";
 import { FulfillmentContext } from "../../locations.context";
 import StoreListProductName from "./StoreListProductName";
@@ -11,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   productContainer: {
     padding: theme.spacing(2.5, 2.5, 1),
-    boxShadow: `inset 0 1px 0 ${themeColors.shade7}`
+    boxShadow: `inset 0 1px 0 ${theme.palette.grey.light}`
   },
   productContainerInner: {
     display: 'flex',
@@ -19,10 +18,9 @@ const useStyles = makeStyles()(theme => ({
   },
   productImage: {
     flex: '0 0 auto',
-    width: '2.5rem',
-    height: '2.5rem',
-    background: themeColors.placeholder,
-    marginRight: theme.spacing(2.5)
+    width: 70,
+    background: theme.palette.background.emphasized,
+    marginRight: theme.spacing(2)
   },
   productContent: {
     flexGrow: 1,