feat(app): massive ui updates all over the place

src/components/SearchInput/SearchInput.css

@@ -1,4 +1,5 @@
 .search-bar {
+  position: relative;
   display: flex;
   flex: 2;
   align-items: center;
@@ -11,7 +12,7 @@
 
 .search-bar:focus-within {
   outline: none;
-  color: black !important;
+  color: var(--moss) !important;
   background-color: white !important;
 }
 
@@ -37,7 +38,7 @@
 
 .search-bar input:focus {
   outline: none;
-  color: black;
+  color: var(--moss);
 }
 
 .search-bar input::placeholder {
@@ -53,6 +54,9 @@
 }
 
 .keys {
+  position: absolute;
+  top: 16px;
+  right: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;

src/components/SearchInput/SearchInput.tsx

@@ -8,7 +8,12 @@ import {
 import { useRecoilState } from "recoil";
 import { useDebounce } from "react-use";
 import { useHotkeys } from "react-hotkeys-hook";
-import { Command, MagnifyingGlass, X, HourglassHigh } from "@phosphor-icons/react";
+import {
+  Command,
+  MagnifyingGlass,
+  X,
+  HourglassHigh,
+} from "@phosphor-icons/react";
 import ReactGA from "react-ga4";
 
 import { searchQueryAtom } from "@/state";