General UI Improvements

2025-05-18 07:26:59 +00:00 · 2021-06-07 00:48:44 -03:00 · 2021-06-07 00:48:44 -03:00 · f46891991e
commit f46891991e
parent fee79b47cf
11 changed files with 79 additions and 64 deletions
--- 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;
 }
--- 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;
 }
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
+++ b/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>
--- 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;
 }
--- a/components/common/SidebarLayout/SidebarLayout.tsx
+++ b/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>
        )}
-        <UserNav />
+        <span className={s.nav}>
+          <UserNav />
+        </span>
      </header>
      <div className={s.container}>{children}</div>
    </div>
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@ -24,36 +24,34 @@ 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 />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
-          </li>
-          {process.env.COMMERCE_WISHLIST_ENABLED && (
-            <li className={s.item}>
-              <Link href="/wishlist">
-                <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
-                  <Heart />
-                </a>
-              </Link>
-            </li>
-          )}
+      <ul className={s.list}>
+        <li className={s.item} onClick={toggleSidebar}>
+          <Bag />
+          {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+        </li>
+        {process.env.COMMERCE_WISHLIST_ENABLED && (
          <li className={s.item}>
-            {customer ? (
-              <DropdownMenu />
-            ) : (
-              <button
-                className={s.avatarButton}
-                aria-label="Menu"
-                onClick={() => openModal()}
-              >
-                <Avatar />
-              </button>
-            )}
+            <Link href="/wishlist">
+              <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
+                <Heart />
+              </a>
+            </Link>
          </li>
-        </ul>
-      </div>
+        )}
+        <li className={s.item}>
+          {customer ? (
+            <DropdownMenu />
+          ) : (
+            <button
+              className={s.avatarButton}
+              aria-label="Menu"
+              onClick={() => openModal()}
+            >
+              <Avatar />
+            </button>
+          )}
+        </li>
+      </ul>
    </nav>
  )
 }
--- 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<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) {
+        enableBodyScroll(ref.current)
+      }
      clearAllBodyScrollLocks()
+      window.removeEventListener('keydown', handleKey)
    }
-  }, [open, handleKey])
+  }, [handleKey])

  return (
    <div className={s.root}>
--- 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 {
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/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">
-          <div className="h-full md:w-screen md:max-w-md">
+        <section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
+          <div className="h-full w-full md:w-screen md:max-w-md">
            <div className={s.sidebar}>{children}</div>
          </div>
        </section>
--- 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",
--- 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"