New Release (#371)

* Custom Checkout Progress * Updates to Checkout * Custom Checkout Progress * Adding tabs * Adding Collapse * Adding Collapse * Improving Sidebar Scroll * Modif footer * Changes * More design updates * sidebar cart * More design updates * More design updates * More design updates * More design updates * Types * Types * Design Updates * More changes * More changes * More changes * Changes * Changes * Changes * New tailwind required changes * Sidebar Styling issues with Mobile * Latest changes - Normalizing cart * Styling Fixes * New changes * Changes * latest * Refactor and Renaming some UI Props * Adding Quantity Component * Adding Rating Component * Rating Component * More updates * User Select disabled, plus hidding horizontal scroll bars * Changes * Adding ProductOptions Component and more helpers * Styling updates * Styling updates * Fix for slim tags * Missmatch with RightArrow * Footer updates and some styles * Latest Updates * Latest Updates * Latest Updates * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Sam backdrop filter * General UI Improvements * General UI Improvements * Search now with Geist Colors * Now with Geist Colors * Changes * Scroll for Mobile on IOs devises * LoadingDots Working (: * Changes * More Changes * Perf changes * More perf changes * Fade to the Nametags in the ProductCard * changes * Search issue ui * Search issue ui * Make sure to only refresh navbar and modals when required * Index revalidate * Fixed image issue * hide album scroll on windows * Fix scrollbar * Changing * Adding 404 with Layout * Removing Toast * Adding Assets * Adding Assets * Progress with LocalProvider * New productTag * Only images for the drop * changes * Empty SWRhooks * Adding Local Provider * Working local * Working view of a LocalProvider * More updates * Changes * Removed react-ticker * default to local if no env available * default to local if no env available * add missing `@` to css import * rewrite search rewrites to multiple pages * allow requests in getStaticProps to execute in parallel * make type import explicit * add a tsconfig.js file * use local provider in tsconfig.js * avoid a circular dependency * Saleor was not in the providers list * avoid circular dependency in bigcommerce * Adding more to the Local Provider (#366) * Adding more data * Adding more data * optimize assets (#370) * Optimize assets (#372) * optimize assets * remove assets * remove assets * cart enabled * Adding saleor * Changes with Webpack * Changes Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com> Co-authored-by: Shu Ding <g@shud.in>
2025-07-22 20:26:49 +00:00 · 2021-06-15 20:23:17 -03:00
parent 3c9b90f453
commit 78cc378a72
202 changed files with 15406 additions and 2201 deletions
--- a/components/ui/Modal/Modal.module.css
+++ b/components/ui/Modal/Modal.module.css
@@ -1,12 +1,17 @@
 .root {
-  @apply fixed bg-primary text-primary flex items-center inset-0 z-50 justify-center;
-  background-color: rgba(0, 0, 0, 0.35);
+  @apply fixed bg-black bg-opacity-40 flex items-center inset-0 z-50 justify-center;
+  backdrop-filter: blur(0.8px);
+  -webkit-backdrop-filter: blur(0.8px);
 }

 .modal {
-  @apply bg-primary p-12 border border-accents-2 relative;
+  @apply bg-primary p-12 border border-accent-2 relative;
 }

 .modal:focus {
  @apply outline-none;
 }
+
+.close {
+  @apply hover:text-accent-5 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6;
+}
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -1,22 +1,20 @@
 import { FC, useRef, useEffect, useCallback } from 'react'
-import Portal from '@reach/portal'
 import s from './Modal.module.css'
+import FocusTrap from '@lib/focus-trap'
 import { Cross } from '@components/icons'
 import {
  disableBodyScroll,
-  enableBodyScroll,
  clearAllBodyScrollLocks,
+  enableBodyScroll,
 } from 'body-scroll-lock'
-import FocusTrap from '@lib/focus-trap'
-interface Props {
+interface ModalProps {
  className?: string
  children?: any
-  open?: boolean
  onClose: () => void
  onEnter?: () => void | null
 }

-const Modal: FC<Props> = ({ children, open, onClose, onEnter = null }) => {
+const Modal: FC<ModalProps> = ({ children, onClose }) => {
  const ref = useRef() as React.MutableRefObject<HTMLDivElement>

  const handleKey = useCallback(
@@ -30,36 +28,31 @@ const Modal: FC<Props> = ({ children, open, onClose, onEnter = null }) => {

  useEffect(() => {
    if (ref.current) {
-      if (open) {
-        disableBodyScroll(ref.current)
-        window.addEventListener('keydown', handleKey)
-      } else {
-        enableBodyScroll(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 (
-    <Portal>
-      {open ? (
-        <div className={s.root}>
-          <div className={s.modal} role="dialog" ref={ref}>
-            <button
-              onClick={() => onClose()}
-              aria-label="Close panel"
-              className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6"
-            >
-              <Cross className="h-6 w-6" />
-            </button>
-            <FocusTrap focusFirst>{children}</FocusTrap>
-          </div>
-        </div>
-      ) : null}
-    </Portal>
+    <div className={s.root}>
+      <div className={s.modal} role="dialog" ref={ref}>
+        <button
+          onClick={() => onClose()}
+          aria-label="Close panel"
+          className={s.close}
+        >
+          <Cross className="h-6 w-6" />
+        </button>
+        <FocusTrap focusFirst>{children}</FocusTrap>
+      </div>
+    </div>
  )
 }