From 791309031cdf90a28052f1932f1a06f8df9347ba Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 29 Nov 2022 17:00:33 -0800
Subject: [PATCH] Extract search styling to .css

---
 src/components/UI/Search.tsx | 46 +++++-------------------------------
 src/pages/_app.tsx           |  3 +++
 src/theme/search.css         | 35 +++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 40 deletions(-)
 create mode 100644 src/theme/search.css

diff --git a/src/components/UI/Search.tsx b/src/components/UI/Search.tsx
index 8b126ae8e9..0eb58ec8e6 100644
--- a/src/components/UI/Search.tsx
+++ b/src/components/UI/Search.tsx
@@ -1,45 +1,11 @@
-import { Flex, FlexProps } from '@chakra-ui/react'
 import { DocSearch } from '@docsearch/react';
 
 import '@docsearch/css';
 
-export const Search: React.FC<FlexProps> = (props) => (
-  <Flex
-    css={`
-      svg.DocSearch-Search-Icon path {
-        color: var(--chakra-colors-primary);
-      }
-      .DocSearch-Button {
-        border-radius: 0;
-        height: 100%;
-        background: none;
-        margin: 0;
-        padding: 1rem;
-        width: 200px;
-      }
-      .DocSearch-Button:hover {
-        background: none;
-      }
-      .DocSearch-Button-Container {
-        flex-direction: row-reverse;
-      }
-      .DocSearch-Button-Keys {
-        display: none;
-      }
-      .DocSearch-Button-Placeholder {
-        text-transform: lowercase;
-        font-style: italic;
-        color: var(--chakra-colors-primary);
-        font-weight: 400;
-        width: 100%;
-        flex: 1;
-      }
-    `}
-    {...props}
-  >
-    <DocSearch
-      appId="R2IYF7ETH7"
-      apiKey="599cec31baffa4868cae4e79f180729b"
-      indexName="docsearch" />
-  </Flex>
+export const Search: React.FC = () => (
+  <DocSearch
+    appId="R2IYF7ETH7"
+    apiKey="599cec31baffa4868cae4e79f180729b"
+    indexName="docsearch"
+  />
 )
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5d1f2b46dd..21666c7385 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -10,6 +10,9 @@ import theme from '../theme';
 import { MDXProvider } from '@mdx-js/react';
 import MDXComponents from '../components/';
 
+// Algolia search css styling
+import '../theme/search.css';
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider theme={theme}>
diff --git a/src/theme/search.css b/src/theme/search.css
new file mode 100644
index 0000000000..b81a202509
--- /dev/null
+++ b/src/theme/search.css
@@ -0,0 +1,35 @@
+/* Search field on desktop nav bar */
+.DocSearch-Button {
+  border-radius: 0;
+  height: 100%;
+  background: none;
+  margin: 0;
+  padding: 1rem;
+  width: 200px;
+  gap: 1rem;
+}
+.DocSearch-Button:hover {
+  background: none;
+}
+.DocSearch-Button-Container {
+  flex: 1;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+.DocSearch-Button-Keys kbd {
+  background: none;
+  border: 1px solid var(--chakra-colors-primary);
+  color: var(--chakra-colors-primary);
+  box-shadow: none;
+  padding: 0.125rem;
+}
+.DocSearch-Button-Placeholder {
+  text-align: start;
+  text-transform: lowercase;
+  font-style: italic;
+  color: var(--chakra-colors-primary);
+  font-weight: 400;
+  width: 100%;
+  flex: 1;
+}
+