Fix scroll fade theme detection

framer · Sep 17, 2024 · 4f28943 · 4f28943
1 parent 1a9cfd0
commit 4f28943
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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">