Merge pull request #2132 from action-simon/fix/magento-compare-button…

…-hover Fix/magento compare button hover
graphcommerce-org · Jan 5, 2024 · f8164a2 · f8164a2 · vercel · Jan 5, 2024
2 parents 5070932 + e090dcb
commit f8164a2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/friendly-rings-roll.md b/.changeset/friendly-rings-roll.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-compare': patch
+---
+
+Fix compare button hover state on product page
diff --git a/packages/magento-compare/components/CompareProductToggle.tsx b/packages/magento-compare/components/CompareProductToggle.tsx
@@ -20,7 +20,7 @@ type CompareProductToggleProps = {
 function CompareProductToggleBase(
   props: CompareProductToggleProps & { inCompareList: boolean; id: string },
 ) {
-  const { id, sx, inCompareList, product, color = 'inherit' } = props
+  const { id, sx, inCompareList, product } = props
   const create = useCompareListUidCreate()
   const compareList = useCompareSummary()
 
@@ -103,9 +103,11 @@ function CompareProductToggleBase(
           onMouseDown={preventAnimationBubble}
           onTouchStart={preventAnimationBubble}
           size='responsive'
-          color={color}
+          color='inherit'
           sx={[
             (theme) => ({
+              backgroundColor:
+                theme.palette.mode === 'light' ? theme.palette.background.paper : 'transparent',
               flex: `0 0 auto`,
               '& svg': {
                 stroke: strokeColorPlp,

diff --git a/packages/magento-compare/plugins/AddCompareToProductPage.tsx b/packages/magento-compare/plugins/AddCompareToProductPage.tsx
@@ -29,7 +29,7 @@ function AddCompareToProductPage(props: PluginProps<ProductPageAddToCartRowProps
     return (
       <Prev {...rest}>
         {children}
-        <CompareProductToggle product={product} color='default' />
+        <CompareProductToggle product={product} sx={(theme) => ({ boxShadow: theme.shadows[6] })} />
       </Prev>
     )
 }