style(3000): Improve popover prominence (#19006)

PostHog · Dec 4, 2023 · 798fca4 · 798fca4
1 parent 782bd8e
commit 798fca4
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -26,7 +26,7 @@
         font-family: var(--font-sans);
     }
 
-    > span {
+    .LemonButton__chrome {
         display: flex;
         flex: 1;
         gap: 0.5rem;

diff --git a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
@@ -91,6 +91,10 @@
         height: 100%;
         overflow: hidden;
     }
+
+    .posthog-3000 & {
+        border-color: var(--secondary-3000-button-border);
+    }
 }
 
 .LemonModal__header {

diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -94,13 +94,11 @@
         width: max-content;
     }
 
-    .posthog-3000 & {
+    .posthog-3000 &,
+    .posthog-3000 .Popover--actionable & {
         padding: 0.25rem;
         background: var(--bg-light);
-    }
-
-    .posthog-3000 .Popover--actionable & {
-        border-color: var(--border);
+        border-color: var(--secondary-3000-button-border);
     }
 }
 

diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -439,7 +439,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
     return (
         <BindLogic logic={dataTableLogic} props={dataTableLogicProps}>
             <BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
-                <div className="relative w-full flex flex-col gap-4 flex-1 overflow-hidden">
+                <div className="relative w-full flex flex-col gap-4 flex-1">
                     {showHogQLEditor && isHogQLQuery(query.source) && !isReadOnly ? (
                         <HogQLQueryEditor query={query.source} setQuery={setQuerySource} embedded={embedded} />
                     ) : null}

diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
@@ -145,8 +145,8 @@ $colors: (
     'secondary-3000-button-border-light': #ccc,
     'secondary-3000-button-border-hover-light': #aaa,
 
-    'shadow-elevation-3000-light': 0 2px 0 var(--border-3000-light),
-    'shadow-elevation-3000-dark': 0 2px 0 var(--border-3000-dark),
+    'shadow-elevation-3000-light': 0 3px 0 var(--border-3000-light),
+    'shadow-elevation-3000-dark': 0 3px 0 var(--border-3000-dark),
     'text-3000-dark': #fff,
     'text-secondary-3000-dark': rgba(#fff, 0.7),
     'muted-3000-dark': rgba(#fff, 0.5),