fix: theme fixes and tiny css fixes (#589)

* fix: theme fixes and tiny css fixes

* chore: footer on search

* Update src/generators/web/ui/hooks/useTheme.mjs

Co-authored-by: Aviv Keller <me@aviv.sh>

* Update src/generators/web/template.html

Co-authored-by: Aviv Keller <me@aviv.sh>

---------

Co-authored-by: Aviv Keller <me@aviv.sh>

Author: ovflowd

src/generators/web/template.html

@@ -19,7 +19,7 @@
     href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800" />
 
   <!-- Apply theme before paint to avoid Flash of Unstyled Content -->
-  <script>document.documentElement.setAttribute("data-theme",localStorage.getItem("theme")||(matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"));</script>
+  <script>document.documentElement.setAttribute("data-theme", document.documentElement.style.colorScheme = localStorage.getItem("theme") || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"));</script>
   <script type="importmap">{{importMap}}</script>
   <script type="speculationrules">{{speculationRules}}</script>
 </head>

src/generators/web/ui/components/SearchBox/index.jsx

@@ -1,18 +1,52 @@
+import {
+  ArrowDownIcon,
+  ArrowTurnDownLeftIcon,
+  ArrowUpIcon,
+} from '@heroicons/react/24/solid';
 import SearchModal from '@node-core/ui-components/Common/Search/Modal';
 import SearchResults from '@node-core/ui-components/Common/Search/Results';
 import SearchHit from '@node-core/ui-components/Common/Search/Results/Hit';
 
+import styles from './index.module.css';
 import useOrama from '../../hooks/useOrama.mjs';
 
 const SearchBox = () => {
   const client = useOrama();
 
   return (
-    <SearchModal client={client} placeholder={'Start typing...'}>
-      <SearchResults
-        noResultsTitle={'No results found for'}
-        onHit={hit => <SearchHit document={hit.document} />}
-      />
+    <SearchModal client={client} placeholder="Start typing...">
+      <div className={styles.searchResultsContainer}>
+        <SearchResults
+          noResultsTitle="No results found for"
+          onHit={hit => <SearchHit document={hit.document} />}
+        />
+      </div>
+
+      <div className={styles.footer}>
+        <div className={styles.shortcutWrapper}>
+          <div className={styles.shortcutItem}>
+            <kbd className={styles.shortcutKey}>
+              <ArrowTurnDownLeftIcon />
+            </kbd>
+            <span className={styles.shortcutLabel}>to select</span>
+          </div>
+
+          <div className={styles.shortcutItem}>
+            <kbd className={styles.shortcutKey}>
+              <ArrowDownIcon />
+            </kbd>
+            <kbd className={styles.shortcutKey}>
+              <ArrowUpIcon />
+            </kbd>
+            <span className={styles.shortcutLabel}>to navigate</span>
+          </div>
+
+          <div className={styles.shortcutItem}>
+            <kbd className={styles.shortcutKey}>esc</kbd>
+            <span className={styles.shortcutLabel}>to close</span>
+          </div>
+        </div>
+      </div>
     </SearchModal>
   );
 };

src/generators/web/ui/components/SearchBox/index.module.css

@@ -0,0 +1,76 @@
+.searchResultsContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  padding: 1rem;
+  border-top: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-100);
+}
+
+:where([data-theme='dark'], [data-theme='dark'] *) .footer {
+  border-top-color: var(--color-neutral-900);
+  background-color: var(--color-neutral-950);
+}
+
+@media (min-width: 1024px) {
+  .footer {
+    justify-content: space-between;
+    border-radius: 0 0 0.75rem 0.75rem;
+  }
+}
+
+.shortcutWrapper {
+  display: none;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media (min-width: 1024px) {
+  .shortcutWrapper {
+    display: flex;
+  }
+}
+
+.shortcutItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--color-neutral-800);
+}
+
+:where([data-theme='dark'], [data-theme='dark'] *) .shortcutItem {
+  color: var(--color-neutral-600);
+}
+
+.shortcutKey {
+  font-family: var(--font-ibm-plex-mono);
+  border-radius: 0.375rem;
+  background-color: var(--color-neutral-200);
+  padding: 0.25rem;
+  font-size: 0.75rem;
+}
+
+:where([data-theme='dark'], [data-theme='dark'] *) .shortcutKey {
+  background-color: var(--color-neutral-900);
+}
+
+.shortcutKey svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.shortcutLabel {
+  color: var(--color-neutral-800);
+}
+
+:where([data-theme='dark'], [data-theme='dark'] *) .shortcutLabel {
+  color: var(--color-neutral-600);
+}

src/generators/web/ui/components/SideBar/index.module.css

@@ -1,3 +1,4 @@
 .select {
   width: 100%;
+  margin-bottom: -1rem;
 }

src/generators/web/ui/hooks/useTheme.mjs

@@ -8,6 +8,7 @@ import { useState, useEffect, useCallback } from 'react';
  */
 const applyTheme = theme => {
   document.documentElement.setAttribute('data-theme', theme);
+  document.documentElement.style.colorScheme = theme;
   localStorage.setItem('theme', theme);
 };
 

src/generators/web/ui/index.css

@@ -8,8 +8,6 @@
 }
 
 main {
-  overflow-x: scroll;
-
   /* Code should inherit its font size */
   code {
     font-size: inherit;