@graphcommerce/magento-cart 3.8.18 → 3.8.22

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.8.22](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.8.21...@graphcommerce/magento-cart@3.8.22) (2021-12-21)
+
+
+### Bug Fixes
+
+* menuFab, cartFab shadows, darkTheme color and opacity bug ([6c7afa7](https://github.com/ho-nl/m2-pwa/commit/6c7afa7d3b584b455476aa26d95041c4cf6c1d0c))
+
+
+
+
+
 ## [3.8.17](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.8.16...@graphcommerce/magento-cart@3.8.17) (2021-12-20)
 
 

package/components/CartFab/CartFab.tsx

@@ -8,7 +8,7 @@ import {
   UseStyles,
 } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
-import { Fab, FabProps, makeStyles, NoSsr, Theme, useMediaQuery, useTheme } from '@material-ui/core'
+import { darken, Fab, FabProps, makeStyles, NoSsr, Theme } from '@material-ui/core'
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
 import React from 'react'
@@ -19,15 +19,22 @@ import { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     fab: {
+      color:
+        theme.palette.type === 'light'
+          ? theme.palette.text.primary
+          : darken(theme.palette.text.primary, 1),
       boxShadow: 'none',
-      [theme.breakpoints.down('sm')]: {
-        background: theme.palette.background.paper,
-        width: responsiveVal(42, 56),
-        height: responsiveVal(42, 56),
+      '&:hover, &:focus': {
+        boxShadow: 'none',
       },
+      width: responsiveVal(42, 56),
+      height: responsiveVal(42, 56),
     },
     fabWrapper: {
       position: 'relative',
+      [theme.breakpoints.down('sm')]: {
+        backgroundColor: '#fff !important',
+      },
     },
     shadow: {
       pointerEvents: 'none',
@@ -37,6 +44,9 @@ const useStyles = makeStyles(
       width: '100%',
       boxShadow: theme.shadows[6],
       top: 0,
+      [theme.breakpoints.down('sm')]: {
+        opacity: '1 !important',
+      },
     },
   }),
   {
@@ -55,19 +65,10 @@ function CartFabContent(props: CartFabContentProps) {
   const { total_quantity, icon, ...fabProps } = props
   const cartIcon = icon ?? <SvgImageSimple src={iconShoppingBag} loading='eager' size='large' />
   const { opacity, backgroundColor } = useFixedFabAnimation()
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const classes = useStyles(props)
 
   return (
-    <m.div
-      style={{
-        backgroundColor: isMobile ? undefined : backgroundColor,
-        width: 'inherit',
-        borderRadius: 'inherit',
-      }}
-      className={classes.fabWrapper}
-    >
+    <m.div className={classes.fabWrapper} style={{ backgroundColor, borderRadius: 'inherit' }}>
       <PageLink href='/cart' passHref>
         <Fab
           aria-label={t`Cart`}
@@ -85,12 +86,7 @@ function CartFabContent(props: CartFabContentProps) {
           )}
         </Fab>
       </PageLink>
-      <m.div
-        className={classes.shadow}
-        style={{
-          opacity: isMobile ? undefined : opacity,
-        }}
-       />
+      <m.div className={classes.shadow} style={{ opacity }} />
     </m.div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart",
-  "version": "3.8.18",
+  "version": "3.8.22",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -21,14 +21,14 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.6",
-    "@graphcommerce/framer-scroller": "^1.1.14",
-    "@graphcommerce/graphql": "^2.105.11",
-    "@graphcommerce/image": "^2.105.10",
-    "@graphcommerce/magento-customer": "^3.6.21",
-    "@graphcommerce/magento-graphql": "^2.104.11",
-    "@graphcommerce/magento-store": "^3.3.21",
-    "@graphcommerce/next-ui": "^3.21.4",
+    "@graphcommerce/framer-next-pages": "^2.108.8",
+    "@graphcommerce/framer-scroller": "^1.1.18",
+    "@graphcommerce/graphql": "^2.105.12",
+    "@graphcommerce/image": "^2.105.11",
+    "@graphcommerce/magento-customer": "^3.6.25",
+    "@graphcommerce/magento-graphql": "^2.104.12",
+    "@graphcommerce/magento-store": "^3.3.25",
+    "@graphcommerce/next-ui": "^3.21.8",
     "@graphcommerce/react-hook-form": "^2.104.6",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
@@ -39,5 +39,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "cac49a2bf6cdcbb6131dc7b64172e90aad257c6d"
+  "gitHead": "5ad26fe58ae85c8d776e3f571e96832f24811d5d"
 }