From 4f289434c81db7ce10526310987c5a22e16dcb15 Mon Sep 17 00:00:00 2001
From: Sakibul Islam <sakibulislam25800@gmail.com>
Date: Tue, 17 Sep 2024 17:59:03 +0100
Subject: [PATCH] Fix scroll fade theme detection

---
 plugins/airtable/src/globals.css              | 20 +++++++++++++++++++
 plugins/airtable/src/pages/MapTableFields.tsx |  4 +---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/plugins/airtable/src/globals.css b/plugins/airtable/src/globals.css
index 016e138f..450f6707 100644
--- a/plugins/airtable/src/globals.css
+++ b/plugins/airtable/src/globals.css
@@ -38,6 +38,26 @@
         flex-direction: column;
         gap: 15px;
     }
+
+    .scroll-fade {
+        flex-shrink: 0;
+        height: 45px;
+        width: 100%;
+        display: block;
+        overflow: visible;
+        z-index: 10;
+        position: absolute;
+        left: 0;
+        bottom: 63px;
+    }
+
+    [data-framer-theme="light"] .scroll-fade {
+        background: linear-gradient(to bottom, transparent, white);
+    }
+
+    [data-framer-theme="dark"] .scroll-fade {
+        background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgb(17, 17, 17) 97.8%);
+    }
 }
 
 #root {
diff --git a/plugins/airtable/src/pages/MapTableFields.tsx b/plugins/airtable/src/pages/MapTableFields.tsx
index 7bc25cf8..b72bcaa8 100644
--- a/plugins/airtable/src/pages/MapTableFields.tsx
+++ b/plugins/airtable/src/pages/MapTableFields.tsx
@@ -237,9 +237,7 @@ export function MapTableFieldsPage({ baseId, tableId, pluginContext, onSubmit, i
                         </Fragment>
                     )
                 })}
-                {fieldConfig.length > 6 && !isAtBottom && (
-                    <div className="flex-shrink-0 h-[45px] w-full block bg-gradient-to-b from-transparent to-white overflow-visible z-10 absolute left-0 bottom-[63px] dark:bg-[linear-gradient(180deg,rgba(18,18,18,0)_0%,rgb(17,17,17)_97.8%)]"></div>
-                )}
+                {fieldConfig.length > 6 && !isAtBottom && <div className="scroll-fade"></div>}
                 <div ref={scrollRef} className="h-0 w-0"></div>
             </div>
             <div className="sticky left-0 bottom-0 flex justify-between bg-primary py-4 border-t border-divider border-opacity-20 items-center max-w-full">