Merge pull request #652 from dubinc/revert-sheet

Revert "turn link modal into sheet"
dubinc · Mar 5, 2024 · 62d8a48 · 62d8a48
2 parents 307fa1d + 8776e6a
commit 62d8a48
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 17 deletions.
diff --git a/apps/web/ui/modals/add-edit-link-modal/index.tsx b/apps/web/ui/modals/add-edit-link-modal/index.tsx
@@ -299,7 +299,7 @@ function AddEditLinkModal({
       showModal={showAddEditLinkModal}
       setShowModal={setShowAddEditLinkModal}
       className="max-w-screen-lg"
-      sheet
+      preventDefaultClose={homepageDemo ? false : true}
       onClose={() => {
         if (welcomeFlow) {
           router.back();
@@ -310,7 +310,7 @@ function AddEditLinkModal({
         }
       }}
     >
-      <div className="scrollbar-hide grid max-h-[100vh] w-full divide-x divide-gray-100 overflow-auto md:grid-cols-2 md:overflow-hidden">
+      <div className="scrollbar-hide grid max-h-[95vh] w-full divide-x divide-gray-100 overflow-auto md:grid-cols-2 md:overflow-hidden">
         {!welcomeFlow && !homepageDemo && (
           <button
             onClick={() => {
@@ -328,7 +328,7 @@ function AddEditLinkModal({
         )}
 
         <div
-          className="scrollbar-hide rounded-l-2xl md:max-h-[100vh] md:overflow-auto"
+          className="scrollbar-hide rounded-l-2xl md:max-h-[95vh] md:overflow-auto"
           onScroll={handleScroll}
         >
           <div className="z-10 flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 pb-8 pt-8 transition-all md:sticky md:top-0 md:px-16">
@@ -614,7 +614,7 @@ function AddEditLinkModal({
             </div>
           </form>
         </div>
-        <div className="scrollbar-hide rounded-r-2xl md:max-h-[100vh] md:overflow-auto">
+        <div className="scrollbar-hide rounded-r-2xl md:max-h-[95vh] md:overflow-auto">
           <Preview data={data} generatingMetatags={generatingMetatags} />
         </div>
       </div>

diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
@@ -30,8 +30,6 @@ const config: Config = {
         // Modal
         "scale-in": "scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
         "fade-in": "fade-in 0.2s ease-out forwards",
-        // Sheet
-        "slide-in-right": "slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1)",
         // Popover, Tooltip
         "slide-up-fade": "slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
         "slide-right-fade":
@@ -65,11 +63,6 @@ const config: Config = {
           "0%": { opacity: "0" },
           "100%": { opacity: "1" },
         },
-        // Sheet
-        "slide-in-right": {
-          "0%": { transform: "translateX(250px)" },
-          "100%": { transform: "translateX(0)" },
-        },
         // Popover, Tooltip
         "slide-up-fade": {
           "0%": { opacity: "0", transform: "translateY(2px)" },

diff --git a/packages/ui/src/modal.tsx b/packages/ui/src/modal.tsx
@@ -14,7 +14,6 @@ export function Modal({
   setShowModal,
   onClose,
   desktopOnly,
-  sheet,
   preventDefaultClose,
 }: {
   children: React.ReactNode;
@@ -23,7 +22,6 @@ export function Modal({
   setShowModal?: Dispatch<SetStateAction<boolean>>;
   onClose?: () => void;
   desktopOnly?: boolean;
-  sheet?: boolean;
   preventDefaultClose?: boolean;
 }) {
   const router = useRouter();
@@ -93,10 +91,7 @@ export function Modal({
           onOpenAutoFocus={(e) => e.preventDefault()}
           onCloseAutoFocus={(e) => e.preventDefault()}
           className={cn(
-            "fixed z-40 m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-xl sm:rounded-2xl",
-            sheet
-              ? "animate-enter-from-right inset-y-0 right-0 border-y-0 border-r-0 sm:rounded-r-none"
-              : "animate-scale-in inset-0",
+            "animate-scale-in fixed inset-0 z-40 m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-xl sm:rounded-2xl",
             className,
           )}
         >