remove modal transition (custom modal implementation)

PostHog · Nov 15, 2023 · a73329e · a73329e
1 parent bd310a1
commit a73329e
Showing 1 changed file with 25 additions and 4 deletions.
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -8,22 +8,43 @@ 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)
     const { hideCommandBar } = useActions(commandBarLogic)
 
     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>
     )
 }