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/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -35,19 +35,16 @@ export const AirDCPPHubsForm = (): ReactElement => {
    * Get the hubs list from an AirDCPP Socket
    */
   const { data: hubs } = useQuery({
-    queryKey: [],
+    queryKey: ["hubs"],
     queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
-    enabled: !!settings,
   });
   let hubList = {};
-  if (!isEmpty(hubs)) {
-    console.log("hs", hubs);
+  if (!isNil(hubs)) {
     hubList = hubs.map(({ hub_url, identity }) => ({
       value: hub_url,
       label: identity.name,
     }));
   }
-  console.log(hubList);
   const { mutate } = useMutation({
     mutationFn: async (values) =>
       await axios({

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx

@@ -3,29 +3,36 @@ import React, { ReactElement } from "react";
 export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
   const { settings } = settingsObject;
   return (
-    <div className="mt-4 is-clearfix">
-      <div className="card">
-        <div className="card-content">
-          <span className="tag is-pulled-right is-primary">Connected</span>
-          <div className="content is-size-7">
-            <dl>
-              <dt>{settings._id}</dt>
-              <dt>Client version: {settings.system_info.client_version}</dt>
-              <dt>Hostname: {settings.system_info.hostname}</dt>
-              <dt>Platform: {settings.system_info.platform}</dt>
+    <div>
+      <span className="flex items-center mt-10 mb-4">
+        <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
+          AirDC++ Client Information
+        </span>
+        <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
+      </span>
+      <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
+        <span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
+          <span className="h-5 w-6">
+            <i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
+          </span>
+          <p className="whitespace-nowrap text-sm">Connected</p>
+        </span>
+        <p className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
+          <dl>
+            <dt>{settings._id}</dt>
+            <dt>Client version: {settings.system_info.client_version}</dt>
+            <dt>Hostname: {settings.system_info.hostname}</dt>
+            <dt>Platform: {settings.system_info.platform}</dt>
 
-              <dt>Username: {settings.user.username}</dt>
+            <dt>Username: {settings.user.username}</dt>
 
-              <dt>Active Sessions: {settings.user.active_sessions}</dt>
-              <dt>
-                Permissions:{" "}
-                <pre>
-                  {JSON.stringify(settings.user.permissions, undefined, 2)}
-                </pre>
-              </dt>
-            </dl>
-          </div>
-        </div>
+            <dt>Active Sessions: {settings.user.active_sessions}</dt>
+            <dt>
+              Permissions:{" "}
+              {JSON.stringify(settings.user.permissions, undefined, 2)}
+            </dt>
+          </dl>
+        </p>
       </div>
     </div>
   );

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -71,7 +71,6 @@ export const AirDCPPSettingsForm = (): ReactElement => {
   const initFormData = !isUndefined(airDCPPClientConfiguration)
     ? airDCPPClientConfiguration
     : {};
-  console.log(airDCPPClientConfiguration);
   return (
     <>
       <ConnectionForm