From a73329e7333304ca62d21fcf4e18dc80a874a874 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Wed, 15 Nov 2023 14:23:19 +0100
Subject: [PATCH] remove modal transition (custom modal implementation)

---
 .../lib/components/CommandBar/CommandBar.tsx  | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
index d293518e140bc..7259066f9f7a7 100644
--- a/frontend/src/lib/components/CommandBar/CommandBar.tsx
+++ b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -8,9 +8,23 @@ import { BarStatus } from './types'
 
 import './index.scss'
 import SearchBar from './SearchBar'
-import { LemonModal } from '@posthog/lemon-ui'
 import ActionBar from './ActionBar'
 
+const CommandBarOverlay = ({ children }: { children?: React.ReactNode }): JSX.Element => (
+    <div
+        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)',
+            // background: 'color-mix(in srgb, var(--bg-light) 75%, transparent)',
+            backgroundColor: 'var(--modal-backdrop-color)',
+            backdropFilter: 'blur(var(--modal-backdrop-blur))',
+        }}
+    >
+        {children}
+    </div>
+)
+
 function CommandBar(): JSX.Element | null {
     const containerRef = useRef<HTMLDivElement | null>(null)
     const { barStatus } = useValues(commandBarLogic)
@@ -18,12 +32,19 @@ function CommandBar(): JSX.Element | null {
 
     useOutsideClickHandler(containerRef, hideCommandBar, [])
 
+    if (barStatus === BarStatus.HIDDEN) {
+        return null
+    }
+
     return (
-        <LemonModal isOpen={barStatus !== BarStatus.HIDDEN} simple closable={false} width={800}>
-            <div className="w-full h-160 max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col" ref={containerRef}>
+        <CommandBarOverlay>
+            <div
+                className="w-full h-160 max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col border shadow"
+                ref={containerRef}
+            >
                 {barStatus === BarStatus.SHOW_SEARCH ? <SearchBar /> : <ActionBar />}
             </div>
-        </LemonModal>
+        </CommandBarOverlay>
     )
 }