@graphcommerce/next-ui 3.21.7 → 3.21.8

package/AppShell/FixedFab.tsx

@@ -9,7 +9,6 @@ const useStyles = makeStyles(
       bottom: 20,
       right: 20,
       zIndex: 100,
-      boxShadow: theme.shadows[4],
       borderRadius: 99,
       maxWidth: 56,
       [theme.breakpoints.up('md')]: {
@@ -17,7 +16,6 @@ const useStyles = makeStyles(
         top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
         left: `calc((100vw - (100vw - 100%)) - ${theme.page.horizontal} - 56px)`,
         bottom: 'unset',
-        boxShadow: 'unset',
       },
     },
   }),

package/AppShell/Logo.tsx

@@ -8,7 +8,7 @@ import { UseStyles } from '../Styles'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     logo: {},
-    link: {
+    parent: {
       height: '100%',
       width: 'max-content',
       display: 'flex',
@@ -33,12 +33,12 @@ export default function Logo(props: LogoProps) {
   const classes = useStyles(props)
 
   return router.asPath === '/' ? (
-    <div className={classes.logo}>
+    <div className={classes.parent}>
       <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
     </div>
   ) : (
     <PageLink href={href ?? '/'} passHref>
-      <a className={classes.link} aria-label='Logo'>
+      <a className={classes.parent} aria-label='Logo'>
         <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
       </a>
     </PageLink>

package/AppShell/MenuFab.tsx

@@ -37,15 +37,27 @@ const useStyles = makeStyles(
       },
     },
     menuFab: {
+      boxShadow: 'none',
+      '&:hover, &:focus': {
+        boxShadow: 'none',
+        background: theme.palette.text.primary,
+      },
       background: theme.palette.text.primary,
       width: responsiveVal(42, 56),
       height: responsiveVal(42, 56),
       pointerEvents: 'all',
-      '&:hover, &:focus': {
-        background: theme.palette.text.primary,
-      },
-      '& svg': {
-        color: theme.palette.background.paper,
+      color: theme.palette.background.paper,
+    },
+    shadow: {
+      pointerEvents: 'none',
+      borderRadius: '99em',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      boxShadow: theme.shadows[6],
+      top: 0,
+      [theme.breakpoints.down('sm')]: {
+        opacity: '1 !important',
       },
     },
     menu: {
@@ -80,7 +92,7 @@ export default function MenuFab(props: MenuFabProps) {
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
-  const { filter, opacity, scale } = useFabAnimation()
+  const { opacity, scale, shadowOpacity } = useFabAnimation()
 
   useEffect(() => {
     const clear = () => setOpenEl(null)
@@ -89,9 +101,9 @@ export default function MenuFab(props: MenuFabProps) {
   }, [router])
 
   return (
-    <m.div className={classes.menuWrapper} style={{ opacity, scale, filter }}>
+    <m.div className={classes.menuWrapper} style={{ scale, opacity }}>
       <Fab
-        color='primary'
+        color='inherit'
         aria-label='Open Menu'
         size='medium'
         onClick={(event) => setOpenEl(event.currentTarget)}
@@ -104,6 +116,7 @@ export default function MenuFab(props: MenuFabProps) {
           <SvgImageSimple src={iconMenu} inverted style={{ display: openEl ? 'none' : 'block' }} />
         )}
       </Fab>
+      <m.div className={classes.shadow} style={{ opacity: shadowOpacity }} />
 
       <Menu
         anchorEl={openEl}

package/AppShell/useFabAnimation.ts

@@ -1,20 +1,11 @@
-import { useMediaQuery, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useTransform } from 'framer-motion'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export function useFabAnimation() {
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const scrollY = useScrollY()
-  const scrollTo = isMobile ? 0 : 130
 
-  const scale = useTransform(scrollY, [50, scrollTo], [0.4, 1])
-  const opacity = useTransform(scrollY, [50, scrollTo], [0, 1])
-  const opacity1 = useTransform(scrollY, [0, scrollTo], [0, 0.08])
-  const opacity2 = useTransform(scrollY, [0, scrollTo], [0, 0.1])
-  const filter = useMotionTemplate`
-    drop-shadow(0 1px 4px rgba(0,0,0,${opacity1}))
-    drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
-
-  return { filter, opacity, scale }
+  const scale = useTransform(scrollY, [50, 130], [0.4, 1])
+  const opacity = useTransform(scrollY, [50, 130], [0, 1])
+  const shadowOpacity = useTransform(scrollY, [131, 140], [0, 1])
+  return { opacity, scale, shadowOpacity }
 }

package/AppShell/useFixedFabAnimation.ts

@@ -1,16 +1,15 @@
 import { alpha, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useTransform } from 'framer-motion'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export function useFixedFabAnimation() {
   const theme = useTheme()
   const scrollY = useScrollY()
   const opacity = useTransform(scrollY, [50, 60], [0, 1])
-  const opacity1 = useTransform(
+  const backgroundColor = useTransform(
     scrollY,
     [0, 10],
     [alpha(theme.palette.background.paper, 0), alpha(theme.palette.background.paper, 1)],
   )
-  const backgroundColor = useMotionTemplate`${opacity1}`
   return { backgroundColor, opacity }
 }

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.21.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.7...@graphcommerce/next-ui@3.21.8) (2021-12-21)
+
+
+### Bug Fixes
+
+* logo invert darkmode and consistent logo spacing ([2a80603](https://github.com/ho-nl/m2-pwa/commit/2a80603fd3255544f78d9da28aad17fb3fca0c9c))
+* menuFab, cartFab shadows, darkTheme color and opacity bug ([6c7afa7](https://github.com/ho-nl/m2-pwa/commit/6c7afa7d3b584b455476aa26d95041c4cf6c1d0c))
+
+
+
+
+
 ## [3.21.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.4...@graphcommerce/next-ui@3.21.5) (2021-12-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.21.7",
+  "version": "3.21.8",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.5.6",
     "@graphcommerce/framer-next-pages": "^2.108.8",
-    "@graphcommerce/framer-scroller": "^1.1.17",
+    "@graphcommerce/framer-scroller": "^1.1.18",
     "@graphcommerce/framer-utils": "^2.103.20",
     "@graphcommerce/graphql": "^2.105.12",
     "@graphcommerce/image": "^2.105.11",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "09aca3fbe0a5dc006b33fc8dee349c81bcbe0cb8"
+  "gitHead": "5ad26fe58ae85c8d776e3f571e96832f24811d5d"
 }