General UI Improvements

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;
 }

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;
 }

components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -29,7 +29,10 @@ const CheckoutSidebarView: FC = () => {
   )
 
   return (
-    <SidebarLayout handleBack={() => setSidebarView('CART_VIEW')}>
+    <SidebarLayout
+      className={s.root}
+      handleBack={() => setSidebarView('CART_VIEW')}
+    >
       <div className="px-4 sm:px-6 flex-1">
         <Link href="/cart">
           <Text variant="sectionHeading">Checkout</Text>

components/common/SidebarLayout/SidebarLayout.module.css

@@ -1,16 +1,20 @@
 .root {
-  @apply relative h-full flex flex-col w-full;
+  @apply relative h-full flex flex-col min-h-full w-full;
-  min-height: 100vh;
 }
 
 .header {
-  @apply sticky top-0 pl-4 pr-6 pt-4 pb-4 lg:pt-5
+  @apply sticky top-0 pl-4 py-4 pr-6
-  flex items-center justify-between space-x-3
+  flex items-center justify-between 
-  bg-accent-0 border-b border-accent-2 z-50;
+  bg-accent-0 box-border w-full;
-  margin-top: 1px;
+  min-height: 66px;
 }
 
-.container,
+@screen lg {
-.container > *:first-child {
+  .header {
-  min-height: calc(100vh - 70px);
+    min-height: 74px;
+  }
+}
+
+.container {
+  @apply flex flex-col flex-1 box-border;
 }

components/common/SidebarLayout/SidebarLayout.tsx

@@ -28,7 +28,6 @@ const SidebarLayout: FC<ComponentProps> = ({
             <span className="ml-2 text-accent-7 text-sm ">Close</span>
           </button>
         )}
-
         {handleBack && (
           <button
             onClick={handleBack}
@@ -36,10 +35,12 @@ const SidebarLayout: FC<ComponentProps> = ({
             className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
           >
             <ChevronLeft className="h-6 w-6 hover:text-accent-3" />
-            <span className="ml-2 text-accent-7 text-xs ">Back</span>
+            <span className="ml-2 text-accent-7 text-xs">Back</span>
           </button>
         )}
+        <span className={s.nav}>
           <UserNav />
+        </span>
       </header>
       <div className={s.container}>{children}</div>
     </div>

components/common/UserNav/UserNav.tsx

@@ -24,7 +24,6 @@ const UserNav: FC<Props> = ({ className }) => {
 
   return (
     <nav className={cn(s.root, className)}>
-      <div className={s.mainContainer}>
       <ul className={s.list}>
         <li className={s.item} onClick={toggleSidebar}>
           <Bag />
@@ -53,7 +52,6 @@ const UserNav: FC<Props> = ({ className }) => {
           )}
         </li>
       </ul>
-      </div>
     </nav>
   )
 }

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<ModalProps> = ({ 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) {
-      clearAllBodyScrollLocks()
+        enableBodyScroll(ref.current)
       }
-  }, [open, handleKey])
+      clearAllBodyScrollLocks()
+      window.removeEventListener('keydown', handleKey)
+    }
+  }, [handleKey])
 
   return (
     <div className={s.root}>

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 {

components/ui/Sidebar/Sidebar.tsx

@@ -16,11 +16,13 @@ const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
   const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
   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<SidebarProps> = ({ children, onClose }) => {
     <div className={cn(s.root)} ref={ref}>
       <div className="absolute inset-0 overflow-hidden">
         <div className={s.backdrop} onClick={onClose} />
-        <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
+        <section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
-          <div className="h-full md:w-screen md:max-w-md">
+          <div className="h-full w-full md:w-screen md:max-w-md">
             <div className={s.sidebar}>{children}</div>
           </div>
         </section>

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",

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:
+body-scroll-lock@2.6.3:
-  version "3.1.5"
+  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.3.tgz#2b9311ef3120696d8ad5c30503f684803ade1606"
-  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
+  integrity sha512-yQ2VWJasZSWMawwi4bLJ9akbMRTpnS2tZWDEFuOiihwCdl+qNovuUwisnBKIdMk+99wG9FlqW6uZ9+GjKn8ARA==
 
 bowser@^2.11.0:
   version "2.11.0"