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

package/filter/components/FilterPageContent/components/ResetButton/index.js

@@ -1,16 +1,18 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Button, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PORTAL_FILTER_RESET_BUTTON } from '@shopgate/engage/filter/constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   buttonContainer: {
-    marginTop: 4,
+    marginTop: theme.spacing(0.5),
+    marginRight: theme.spacing(2),
     marginBottom: 40,
     textAlign: 'right'
   }
-});
+}));
 
 /**
  * The filter reset button component.
@@ -35,8 +37,8 @@ const FilterResetButton = ({
     children: /*#__PURE__*/_jsx("div", {
       className: classes.buttonContainer,
       children: /*#__PURE__*/_jsx(Button, {
-        flat: true,
-        type: "primary",
+        variant: "link",
+        color: "secondary",
         onClick: onClick,
         disabled: disabled,
         testId: "clearAllButton",

package/filter/components/PriceSlider/index.js

@@ -28,7 +28,12 @@ const useStyles = makeStyles()(theme => ({
   },
   rangeSliderHandleInner: {
     background: theme.palette.common.white,
-    boxShadow: '0 0 8px rgba(0, 0, 0, .16)',
+    border: `1px solid ${theme.components.border.light}`,
+    boxShadow: theme.shadows[2],
+    ...theme.applyStyles('dark', {
+      boxShadow: 'none',
+      border: 'none'
+    }),
     borderRadius: '50%',
     width: theme.spacing(3),
     height: theme.spacing(3)

package/locations/components/ChangeLocationButton/ChangeLocationButton.js

@@ -1,20 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_FULFILLMENT_CHANGE_LOCATION } from "../../constants/Portals";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   button: {
-    fontSize: `${theme.typography.caption.fontSize} !important`,
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
-  },
-  ripple: {
-    padding: 0
+    fontSize: theme.typography.caption.fontSize,
+    padding: 0,
+    letterSpacing: '0.05em'
   }
 }));
 
@@ -38,13 +33,14 @@ export const ChangeLocationButtonUnwrapped = ({
       onClick,
       disabled
     },
-    children: /*#__PURE__*/_jsx(RippleButton, {
+    children: /*#__PURE__*/_jsx(Button, {
+      variant: "link",
+      color: "primary",
+      size: "small",
+      dense: true,
       onClick: onClick,
       className: classes.button,
       disabled: disabled,
-      rippleClassName: classes.ripple,
-      type: "secondary",
-      flat: true,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "locations.change_location"
       })

package/locations/components/FulfillmentSheet/FulfillmentSheetContent.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { FulfillmentContext } from "../../locations.context";
 import { STAGE_SELECT_STORE, STAGE_RESERVE_FORM, STAGE_RESPONSE_SUCCESS, STAGE_RESPONSE_ERROR, STAGE_FULFILLMENT_METHOD } from "../../constants";
 import SheetDrawer from "../../../components/SheetDrawer";
@@ -10,19 +9,16 @@ import { ReserveForm } from "../ReserveForm";
 import { ReservationSuccess, ReservationError } from "../ReservationResponses";
 import { FulfillmentPath } from "../FulfillmentPath";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   sheet: {
-    maxHeight: `calc(var(--vh-100, 100vh) - ${variables.navigator.height}px)`,
+    maxHeight: `calc(var(--vh-100, 100vh) - ${theme.components.navigator.height})`,
     [responsiveMediaQuery('>sm', {
       webOnly: true
     })]: {
-      maxHeight: `calc(var(--vh-80, 80vh) - ${variables.navigator.height}px)`
+      maxHeight: `calc(var(--vh-80, 80vh) - ${theme.components.navigator.height})`
     }
   }
-});
+}));
 
 /**
  * Renders the content of the fulfillment sheet.

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotDialog.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import groupBy from 'lodash/groupBy';
-import { SheetDrawer, Button, Typography } from '@shopgate/engage/components';
+import { SheetDrawer, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { getActiveFulfillmentSlot } from '@shopgate/engage/cart/cart.selectors';
 import { makeGetFulfillmentSlotsForLocation, getPreferredLocation } from "../../selectors";
@@ -105,11 +106,6 @@ const useStyles = makeStyles()(theme => ({
     background: theme.palette.background.surface,
     padding: 16,
     paddingBottom: 24
-  },
-  buttonSchedule: {
-    '&&': {
-      width: '100%'
-    }
   }
 }));
 
@@ -301,8 +297,8 @@ const FulfillmentSlotSheet = ({
       }, group.name)), /*#__PURE__*/_jsx("div", {
         className: classes.buttonScheduleContainer,
         children: /*#__PURE__*/_jsx(Button, {
-          className: classes.buttonSchedule,
-          type: "secondary",
+          color: "primary",
+          fullWidth: true,
           onClick: handleChange,
           disabled: !selectedDate || !selectedSlot,
           children: i18n.text('locations.your_current_timeslot.dialog.schedule')

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcher.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
       borderBottom: 0
     },
     ' > div': {
-      borderRadius: 5,
+      borderRadius: theme.shape.borderRadius,
       margin: -1,
       background: theme.palette.background.surface,
       border: `1px solid ${theme.components.border.light}`

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherBar.js

@@ -1,14 +1,11 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, Typography } 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 { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { getTimeSlotDisplayText } from "./time";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
     color: theme.palette.text.primary,
@@ -20,7 +17,7 @@ const useStyles = makeStyles()(theme => ({
     margin: theme.spacing(0, 2),
     borderBottom: `1px solid ${theme.components.border.light}`,
     alignItems: 'center',
-    height: variables.filterbar.height
+    height: theme.components.filterBar.height
   },
   innerStandalone: {
     borderBottom: 'none'
@@ -33,15 +30,8 @@ const useStyles = makeStyles()(theme => ({
   },
   button: {
     marginLeft: 'auto',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'initial',
-      padding: '0 !important',
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightMedium
-    }
+    textTransform: 'none',
+    padding: theme.spacing(0.375, 0)
   }
 }));
 
@@ -75,11 +65,12 @@ const FulfillmentSlotSwitcherBar = ({
         component: "span",
         fontWeight: "medium",
         children: displayTime
-      }), editable && /*#__PURE__*/_jsx(RippleButton, {
+      }), editable && /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "inherit",
+        size: "small",
         onClick: handleChange,
-        type: "secondary",
         className: classes.button,
-        flat: true,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "locations.your_current_location.change"
         })

package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherDefault.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, Typography } 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 { getTimeSlotDisplayText } from "./time";
@@ -13,12 +14,10 @@ const useStyles = makeStyles()(theme => ({
     flexShrink: 0
   },
   button: {
-    fontSize: `${theme.typography.caption.fontSize} !important`,
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
+    // Inline affordance that follows the location name, so it carries no button chrome and
+    // stays sentence case - matching the switcher bars that render the same action.
+    padding: theme.spacing(0.375, 0),
+    textTransform: 'none'
   }
 }));
 
@@ -48,12 +47,13 @@ const FulfillmentSlotSwitcherDefault = ({
         color: "textPrimary",
         fontWeight: "medium",
         children: displayTime
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "primary",
+        size: "small",
         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/GlobalLocationSwitcher/GlobalLocationSwitcherBar.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, Typography } 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 { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   wrapper: {
     color: theme.palette.text.primary,
@@ -19,7 +16,7 @@ const useStyles = makeStyles()(theme => ({
     margin: theme.spacing(0, 2),
     borderBottom: `1px solid ${theme.components.border.light}`,
     alignItems: 'center',
-    height: variables.filterbar.height
+    height: theme.components.filterBar.height
   },
   innerStandalone: {
     borderBottom: 'none'
@@ -28,16 +25,8 @@ const useStyles = makeStyles()(theme => ({
     paddingRight: theme.spacing(1)
   },
   button: {
-    marginLeft: 'auto',
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      fontSize: theme.typography.body2.fontSize,
-      textTransform: 'initial',
-      padding: '0 !important',
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightMedium
-    }
+    marginLeft: theme.spacing(2),
+    textTransform: 'none'
   }
 }));
 
@@ -72,12 +61,13 @@ const GlobalLocationSwitcherBar = ({
           fontWeight: "medium",
           children: locationName
         })]
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "link",
+        size: "small",
+        dense: true,
         onClick: handleChange,
-        type: "secondary",
         className: classes.button,
         "aria-haspopup": true,
-        flat: true,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "locations.your_current_location.change"
         })

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherDefault.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RippleButton, I18n, Typography } 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";
@@ -15,12 +16,8 @@ const useStyles = makeStyles()(theme => ({
     color: theme.palette.text.primary
   },
   button: {
-    fontSize: `${theme.typography.caption.fontSize} !important`,
-    letterSpacing: '0.05em',
-    padding: `${theme.spacing(0.375, 0)} !important`,
-    ' *': {
-      padding: '0 !important'
-    }
+    textTransform: 'none',
+    marginLeft: theme.spacing(1)
   }
 }));
 
@@ -49,12 +46,14 @@ const GlobalLocationSwitcherDefault = ({
         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/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, Typography } 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";
@@ -35,9 +36,6 @@ const useStyles = makeStyles()(theme => ({
       paddingRight: 0
     }
   },
-  button: {
-    width: '100%'
-  },
   progressBar: {
     height: '4px',
     position: 'relative'
@@ -239,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/StoreDetails/components/GetDirectionsButton.js

@@ -1,7 +1,7 @@
 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';
@@ -38,10 +38,8 @@ const GetDirectionsButton = ({
     }));
   };
   return /*#__PURE__*/_jsx("div", {
-    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, Typography } 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';
@@ -53,9 +54,6 @@ const useStyles = makeStyles()(theme => ({
   phoneNumber: {
     textDecoration: 'underline'
   },
-  makeMyStoreButton: {
-    color: theme.palette.primary.main
-  },
   comingSoon: {
     fontStyle: 'italic'
   },
@@ -97,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", {
@@ -144,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')
             })

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

@@ -2,7 +2,8 @@ import React, { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Button, Typography } 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";
@@ -10,9 +11,6 @@ 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()(theme => ({
-  button: {
-    padding: '0px !important'
-  },
   locationRow: {
     borderBottom: `1px solid ${theme.components.border.light}`,
     borderTop: `1px solid ${theme.components.border.light}`,
@@ -43,7 +41,7 @@ const useStyles = makeStyles()(theme => ({
     textAlign: 'start'
   },
   cellContainer: {
-    padding: '8px',
+    padding: 6,
     textAlign: 'end'
   },
   cell: {
@@ -51,7 +49,7 @@ const useStyles = makeStyles()(theme => ({
   },
   buttonContainer: {
     display: 'flex',
-    gap: '4px 16px',
+    gap: '0 16px',
     flexWrap: 'wrap',
     justifyContent: 'flex-end'
   }
@@ -121,13 +119,11 @@ 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: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",
@@ -135,12 +131,10 @@ const StoresNearbyListItem = ({
                 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: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",
@@ -151,12 +145,10 @@ const StoresNearbyListItem = ({
           }), /*#__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: /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
                 component: "span",

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: `${theme.typography.body2.fontSize} !important`,
-    ':not(:disabled)': {
-      background: `${theme.palette.primary.main} !important`,
-      color: `${theme.palette.primary.contrastText} !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: `${theme.typography.body2.fontSize} !important`,
-    ':not(:disabled)': {
-      background: `${theme.palette.primary.main} !important`,
-      color: `${theme.palette.primary.contrastText} !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/StoreListProduct.js

@@ -18,10 +18,9 @@ const useStyles = makeStyles()(theme => ({
   },
   productImage: {
     flex: '0 0 auto',
-    width: '2.5rem',
-    height: '2.5rem',
+    width: 70,
     background: theme.palette.background.emphasized,
-    marginRight: theme.spacing(2.5)
+    marginRight: theme.spacing(2)
   },
   productContent: {
     flexGrow: 1,

package/locations/components/StoreList/StoreListSearch.js

@@ -76,6 +76,7 @@ const useStyles = makeStyles()(theme => ({
   },
   input: {
     margin: '3px 0',
+    color: theme.palette.text.primary,
     width: '100%',
     lineHeight: '28px',
     outline: 'none',