From f46891991e0f1ebd78aa8e6fc199d148a180f447 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Mon, 7 Jun 2021 00:48:44 -0300 Subject: [PATCH] General UI Improvements --- .../CartSidebarView.module.css | 12 ++--- .../CheckoutSidebarView.module.css | 4 ++ .../CheckoutSidebarView.tsx | 5 +- .../SidebarLayout/SidebarLayout.module.css | 22 ++++---- .../common/SidebarLayout/SidebarLayout.tsx | 7 +-- components/common/UserNav/UserNav.tsx | 54 +++++++++---------- components/ui/Modal/Modal.tsx | 15 ++++-- components/ui/Sidebar/Sidebar.module.css | 4 +- components/ui/Sidebar/Sidebar.tsx | 10 ++-- package.json | 2 +- yarn.lock | 8 +-- 11 files changed, 79 insertions(+), 64 deletions(-) diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css index 2b36d283d..c9ffbed50 100644 --- a/components/cart/CartSidebarView/CartSidebarView.module.css +++ b/components/cart/CartSidebarView/CartSidebarView.module.css @@ -1,15 +1,11 @@ +.root { + min-height: 100vh; +} + .root.empty { @apply bg-secondary text-secondary; } -.root.success { - @apply bg-green text-white; -} - -.root.error { - @apply bg-red text-white; -} - .lineItemsList { @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2; } diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css index 36bd4eb49..34c1b487c 100644 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css @@ -1,3 +1,7 @@ +.root { + min-height: calc(100vh - 322px); +} + .lineItemsList { @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2; } diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx index f9dac54f9..fb562e7af 100644 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx @@ -29,7 +29,10 @@ const CheckoutSidebarView: FC = () => { ) return ( - setSidebarView('CART_VIEW')}> + setSidebarView('CART_VIEW')} + >
Checkout diff --git a/components/common/SidebarLayout/SidebarLayout.module.css b/components/common/SidebarLayout/SidebarLayout.module.css index 235d6a6b2..3bab284fb 100644 --- a/components/common/SidebarLayout/SidebarLayout.module.css +++ b/components/common/SidebarLayout/SidebarLayout.module.css @@ -1,16 +1,20 @@ .root { - @apply relative h-full flex flex-col w-full; - min-height: 100vh; + @apply relative h-full flex flex-col min-h-full w-full; } .header { - @apply sticky top-0 pl-4 pr-6 pt-4 pb-4 lg:pt-5 - flex items-center justify-between space-x-3 - bg-accent-0 border-b border-accent-2 z-50; - margin-top: 1px; + @apply sticky top-0 pl-4 py-4 pr-6 + flex items-center justify-between + bg-accent-0 box-border w-full; + min-height: 66px; } -.container, -.container > *:first-child { - min-height: calc(100vh - 70px); +@screen lg { + .header { + min-height: 74px; + } +} + +.container { + @apply flex flex-col flex-1 box-border; } diff --git a/components/common/SidebarLayout/SidebarLayout.tsx b/components/common/SidebarLayout/SidebarLayout.tsx index c643f53a6..1122cad4e 100644 --- a/components/common/SidebarLayout/SidebarLayout.tsx +++ b/components/common/SidebarLayout/SidebarLayout.tsx @@ -28,7 +28,6 @@ const SidebarLayout: FC = ({ Close )} - {handleBack && ( )} - + + +
{children}
diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx index 83422a8cf..80e007b16 100644 --- a/components/common/UserNav/UserNav.tsx +++ b/components/common/UserNav/UserNav.tsx @@ -24,36 +24,34 @@ const UserNav: FC = ({ className }) => { return ( ) } diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx index e594bf180..bb42b3d1b 100644 --- a/components/ui/Modal/Modal.tsx +++ b/components/ui/Modal/Modal.tsx @@ -2,7 +2,11 @@ import { FC, useRef, useEffect, useCallback } from 'react' import s from './Modal.module.css' import FocusTrap from '@lib/focus-trap' import { Cross } from '@components/icons' -import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock' +import { + disableBodyScroll, + clearAllBodyScrollLocks, + enableBodyScroll, +} from 'body-scroll-lock' interface ModalProps { className?: string children?: any @@ -24,14 +28,17 @@ const Modal: FC = ({ children, onClose }) => { useEffect(() => { if (ref.current) { - disableBodyScroll(ref.current) + disableBodyScroll(ref.current, { reserveScrollBarGap: true }) window.addEventListener('keydown', handleKey) } return () => { - window.removeEventListener('keydown', handleKey) + if (ref && ref.current) { + enableBodyScroll(ref.current) + } clearAllBodyScrollLocks() + window.removeEventListener('keydown', handleKey) } - }, [open, handleKey]) + }, [handleKey]) return (
diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css index 73648220e..76ebb4d97 100644 --- a/components/ui/Sidebar/Sidebar.module.css +++ b/components/ui/Sidebar/Sidebar.module.css @@ -1,10 +1,10 @@ .root { - @apply fixed inset-0 overflow-hidden h-full z-50; + @apply fixed inset-0 overflow-hidden h-full z-50 box-border; } .sidebar { @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto; - min-width: 335px; + right: 0; } .backdrop { diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index 222294a8e..11130a0f4 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -16,11 +16,13 @@ const Sidebar: FC = ({ children, onClose }) => { const ref = useRef() as React.MutableRefObject useEffect(() => { - console.log('Sidebar', ref) if (ref.current) { - disableBodyScroll(ref.current) + disableBodyScroll(ref.current, { reserveScrollBarGap: true }) } return () => { + if (ref && ref.current) { + enableBodyScroll(ref.current) + } clearAllBodyScrollLocks() } }, []) @@ -29,8 +31,8 @@ const Sidebar: FC = ({ children, onClose }) => {
-
-
+
+
{children}
diff --git a/package.json b/package.json index 735ff8074..23c47ca0a 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@react-spring/web": "^9.2.1", "@vercel/fetch": "^6.1.0", "autoprefixer": "^10.2.6", - "body-scroll-lock": "^3.1.5", + "body-scroll-lock": "2.6.3", "bowser": "^2.11.0", "classnames": "^2.3.1", "cookie": "^0.4.1", diff --git a/yarn.lock b/yarn.lock index e065a3292..947bb4569 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1612,10 +1612,10 @@ bn.js@^5.0.0, bn.js@^5.1.1: resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b" integrity sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ== -body-scroll-lock@^3.1.5: - version "3.1.5" - resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec" - integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg== +body-scroll-lock@2.6.3: + version "2.6.3" + resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.3.tgz#2b9311ef3120696d8ad5c30503f684803ade1606" + integrity sha512-yQ2VWJasZSWMawwi4bLJ9akbMRTpnS2tZWDEFuOiihwCdl+qNovuUwisnBKIdMk+99wG9FlqW6uZ9+GjKn8ARA== bowser@^2.11.0: version "2.11.0"