From 71442c75958f2a489d97b2138e5a62a46b417db5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Mon, 9 Oct 2023 17:58:26 +0200
Subject: [PATCH] style container

---
 frontend/src/lib/components/CommandBar/CommandBar.tsx | 10 ++++++----
 frontend/src/styles/utilities.scss                    |  4 ++++
 frontend/src/styles/vars.scss                         |  1 +
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
index 25dc9c0662c4e..1fd7e554feb52 100644
--- 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
index 24664fb521a6b..403827c2fc233 100644
--- 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
index debb7a19f8e74..098432189b50a 100644
--- 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;