Dark mode refactor (#98)

* 🏗️ Acquisition Panel refactor WIP

* 🔧 Formatted the search query box

* 🔧 Implementing download method

* 🏗️ Refactored the AirDC++ download panel

* 🌜 Initial Dark Mode support

* 🌜 Trying dark mode on the react-select

* Update App.scss

* 🏗️ Migrating Navbar to TailwindCSS

* 🖼️ Added solar icons

* 🔧 Added solar icons

* 🔧 Added code for dark mode toggle

* 🏗️ Wiring up the dark mode toggle

* 🌜 Added Dark mode to the body

* 🏗️ Building out the import page

* 🪑 Cleaning up the table styles

* 🏗️ Cleaned up past imports table

* 🏗️ Refactored Import socket events

* 🏗️ Refactored the card grid on dashboard

* 🏗️ Building variants for Cards

* 🏗️ Added a horizontal medium variant

* 🏗️ Cleaning up forms and cards

* 🔧 Styling form inputs

* 🏗️ Form refactor

* 🔠 Added a monospace font

* 🪑 Refactoring the table

* 🧹 Formatting in connection confirmation panels

* 🏗️ Refactoring table for library

* 🏗️ Added icons and details to metadata

* 🏗️ Cleaned the table further

* 🏗️ Fixed fonts, and comic detail page first draft

* ❌ Removing yarn.lockfile

src/client/components/Library/SearchBar.tsx

@@ -25,36 +25,42 @@ export const SearchBar = (): ReactElement => {
     // );
   }, []);
   return (
-    <div className="box">
-      <Form
-        onSubmit={handleSubmit}
-        initialValues={{}}
-        render={({ handleSubmit, form, submitting, pristine, values }) => (
-          <form onSubmit={handleSubmit}>
-            <div className="field is-grouped">
-              <div className="control search is-expanded">
-                <Field name="search">
-                  {({ input, meta }) => {
-                    return (
-                      <input
-                        {...input}
-                        className="input main-search-bar is-medium"
-                        placeholder="Type an issue/volume name"
-                      />
-                    );
-                  }}
-                </Field>
-              </div>
-              <div className="control">
-                <button className="button is-medium" type="submit">
-                  Search
-                </button>
-              </div>
-            </div>
-          </form>
-        )}
-      />
-    </div>
+    <Form
+      onSubmit={handleSubmit}
+      initialValues={{}}
+      render={({ handleSubmit, form, submitting, pristine, values }) => (
+        <form onSubmit={handleSubmit}>
+          <Field name="search">
+            {({ input, meta }) => {
+              return (
+                <div className="flex flex-row w-full">
+                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
+                    <div className="w-10 text-gray-400">
+                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
+                    </div>
+
+                    <input
+                      {...input}
+                      className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
+                      type="text"
+                      id="search"
+                      placeholder="Type an issue/volume name"
+                    />
+                  </div>
+
+                  <button
+                    className="sm:mt-0 rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                    type="submit"
+                  >
+                    Search
+                  </button>
+                </div>
+              );
+            }}
+          </Field>
+        </form>
+      )}
+    />
   );
 };