style container

PostHog · Oct 9, 2023 · 71442c7 · 71442c7
1 parent 2e07cfc
commit 71442c7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -6,13 +6,15 @@ import { useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
 
 import { commandBarLogic } from './commandBarLogic'
 import { BarStatus } from './types'
-import '../CommandPalette/index.scss'
 
 const CommandBarOverlay = ({ children }: { children?: React.ReactNode }): JSX.Element => (
     <div
-        className="fixed top-0 left-0 w-full h-full flex flex-col items-center"
+        className="fixed top-0 left-0 w-full h-full flex flex-col items-center justify-center"
         // eslint-disable-next-line react/forbid-dom-props
-        style={{ zIndex: 'var(--z-command-palette)' }}
+        style={{
+            zIndex: 'var(--z-command-palette)',
+            background: 'color-mix(in srgb, var(--bg-light) 75%, transparent)',
+        }}
     >
         {children}
     </div>
@@ -23,7 +25,7 @@ const CommandBarContainer = forwardRef<HTMLDivElement, { children?: React.ReactN
     ref
 ): JSX.Element {
     return (
-        <div className="bg-white p-4" ref={ref}>
+        <div className="w-full h-160 max-w-lg bg-bg-light rounded overflow-hidden shadow-xl flex flex-col" ref={ref}>
             {children}
         </div>
     )

diff --git a/frontend/src/styles/utilities.scss b/frontend/src/styles/utilities.scss
@@ -1035,6 +1035,10 @@ $decorations: underline, overline, line-through, no-underline;
     box-shadow: var(--shadow-elevation);
 }
 
+.shadow-xl {
+    box-shadow: var(--shadow);
+}
+
 @each $fitOption in ('contain', 'cover', 'fill', 'none', 'scale-down') {
     .object-#{$fitOption} {
         object-fit: string.unquote($fitOption);

diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
@@ -182,6 +182,7 @@ $_lifecycle_dormant: $_danger;
 
     // Non-color vars
     --radius: 4px;
+    --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     --shadow-elevation: 0px 16px 16px -16px rgba(0, 0, 0, 0.35);
     --opacity-disabled: 0.6;
     --font-medium: 500;