brand the command palette

pluralsh · May 31, 2023 · d05fef3 · d05fef3
1 parent bcb843e
commit d05fef3
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 41 deletions.
diff --git a/assets/src/App.jsx b/assets/src/App.jsx
@@ -30,7 +30,6 @@ const router = createBrowserRouter(createRoutesFromElements(rootRoutes))
 
 export default function App() {
   const mergedStyledTheme = mergeDeep(DEFAULT_THEME, styledTheme)
-
   return (
     <ApolloProvider client={client}>
       <IntercomProvider appId={INTERCOM_APP_ID}>

diff --git a/assets/src/components/CommandPalette.jsx b/assets/src/components/CommandPalette.jsx
@@ -25,35 +25,7 @@ import {
 } from '@pluralsh/design-system'
 import { useNavigate } from 'react-router-dom'
 import { Flex, Span } from 'honorable'
-
-const animatorStyle = {
-  maxWidth: '600px',
-  width: '100%',
-  background: 'rgb(28 28 29)',
-  color: 'rgba(252 252 252 / 0.9)',
-  borderRadius: '8px',
-  overflow: 'hidden',
-  zIndex: 10000,
-  boxShadow: 'rgb(0 0 0 / 50%) 0px 16px 70px',
-}
-
-const searchStyle = {
-  padding: '12px 16px',
-  fontSize: '16px',
-  width: '100%',
-  boxSizing: 'border-box',
-  outline: 'none',
-  border: 'none',
-  background: 'rgb(28 28 29)',
-  color: 'rgba(252 252 252 / 0.9)',
-}
-
-const groupNameStyle = {
-  padding: '8px 16px',
-  fontSize: '10px',
-  textTransform: 'uppercase',
-  opacity: 0.5,
-}
+import { createGlobalStyle, useTheme } from 'styled-components'
 
 function buildActions(applications, nav) {
   return applications
@@ -156,9 +128,11 @@ const ResultItem = forwardRef(
       <Flex
         ref={ref}
         alignItems="center"
-        padding="12px 16px"
+        padding="xsmall"
         background={active ? 'fill-one-hover' : 'transparent'}
-        borderLeft={active ? 'border-primary' : 'transparent'}
+        borderLeftColor={active ? 'border-primary' : 'transparent'}
+        borderLeftWidth={'3px'}
+        borderLeftStyle={'solid'}
         justifyContent="space-between"
         cursor="pointer"
       >
@@ -222,7 +196,7 @@ function RenderResults() {
       items={results}
       onRender={({ item, active }) =>
         typeof item === 'string' ? (
-          <div style={groupNameStyle}>{item}</div>
+          <div className="group-name">{item}</div>
         ) : (
           <ResultItem
             action={item}
@@ -247,15 +221,52 @@ function useAppActions() {
 
 function Palette() {
   useAppActions()
+  const Provider = createGlobalStyle(({ theme }) => ({
+    '.cmdbar': {
+      maxWidth: '600px',
+      width: '100%',
+      overflow: 'hidden',
+      zIndex: 10000,
+      background: theme.colors['fill-one'],
+      border: theme.borders['fill-one'],
+      boxShadow: theme.boxShadows.modal,
+      borderRadius: theme.borderRadiuses.medium,
+      ...theme.partials.text.body1,
+      '.group-name': {
+        padding: `${theme.spacing.small}px`,
+        textTransform: 'uppercase',
+        opacity: 0.5,
+        ...theme.partials.text.overline,
+      },
+      '.search': {
+        ...theme.partials.text.body2,
+        padding: `${theme.spacing['medium']}px ${theme.spacing['small']}px`,
+        fontSize: '16px',
+        width: '100%',
+        background: theme.colors['fill-one'],
+        color: theme.colors['text-xlight'],
+        border: 'none',
+        borderBottom: theme.borders['fill-two'],
+        outlineOffset: '-1px',
+      },
+      '.search:focus-visible': {
+        color: theme.colors.text,
+        ...theme.partials.focus.outline,
+      },
+    },
+  }))
   return (
-    <KBarPortal style={{ zIndex: 10000 }}>
-      <KBarPositioner style={{ zIndex: 10000 }}>
-        <KBarAnimator style={animatorStyle}>
-          <KBarSearch style={searchStyle} />
-          <RenderResults />
-        </KBarAnimator>
-      </KBarPositioner>
-    </KBarPortal>
+    <>
+      <Provider />
+      <KBarPortal style={{ zIndex: 10000 }}>
+        <KBarPositioner style={{ zIndex: 10000 }}>
+          <KBarAnimator className="cmdbar">
+            <KBarSearch className="search" />
+            <RenderResults />
+          </KBarAnimator>
+        </KBarPositioner>
+      </KBarPortal>
+    </>
   )
 }