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

src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx

@@ -1,9 +1,10 @@
 import React, { ReactElement } from "react";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useQuery, useMutation } from "@tanstack/react-query";
+import { useQuery, useMutation, QueryClient } from "@tanstack/react-query";
 import axios from "axios";
 
 export const QbittorrentConnectionForm = (): ReactElement => {
+  const queryClient = new QueryClient();
   // fetch settings
   const { data, isLoading, isError } = useQuery({
     queryKey: ["settings"],
@@ -13,7 +14,8 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         method: "GET",
       }),
   });
-  const hostDetails = data?.data.bittorrent.client.host;
+  console.log(data);
+  const hostDetails = data?.data?.bittorrent?.client?.host;
   // connect to qbittorrent client
   const { data: connectionDetails } = useQuery({
     queryKey: [],
@@ -35,7 +37,6 @@ export const QbittorrentConnectionForm = (): ReactElement => {
       }),
     enabled: !!connectionDetails,
   });
-  console.log(qbittorrentClientInfo?.data);
   // Update action using a mutation
   const { mutate } = useMutation({
     mutationFn: async (values) =>
@@ -44,6 +45,11 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         method: "POST",
         data: { settingsPayload: values, settingsKey: "bittorrent" },
       }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["settings", "qbittorrentClientInfo"],
+      });
+    },
   });
 
   if (isError)
@@ -61,9 +67,24 @@ export const QbittorrentConnectionForm = (): ReactElement => {
           submitHandler={mutate}
         />
 
-        <pre className="mt-5">
-          {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
-        </pre>
+        <span className="flex items-center mt-10 mb-4">
+          <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
+            qBittorrent 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>
+          <pre className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
+            {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
+          </pre>
+        </div>
       </>
     );
   }

src/client/components/Settings/Settings.tsx

@@ -50,24 +50,45 @@ export const Settings = (props: ISettingsProps): ReactElement => {
     },
   ];
   return (
-    <section className="container">
-      <div className="columns">
-        <div className="section column is-one-quarter">
-          <h1 className="title">Settings</h1>
-          <aside className="menu">
+    <div>
+      <section>
+        <header className="bg-slate-200 dark:bg-slate-500">
+          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Settings
+                </h1>
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Import comics into the ThreeTwo library.
+                </p>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div className="flex flex-cols max-w-screen-xl mx-auto">
+          <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
             {map(settingsObject, (settingObject, idx) => {
               return (
-                <div key={idx}>
-                  <p className="menu-label">{settingObject.category}</p>
+                <div
+                  className="w-64 py-2 text-slate-700 dark:text-slate-400"
+                  key={idx}
+                >
+                  <h3 className="text-l pb-2">
+                    {settingObject.category.toUpperCase()}
+                  </h3>
                   {/* First level children */}
                   {!isUndefined(settingObject.children) ? (
-                    <ul className="menu-list" key={settingObject.id}>
+                    <ul key={settingObject.id}>
                       {map(settingObject.children, (item, idx) => {
                         return (
-                          <li key={idx}>
+                          <li key={idx} className="mb-2">
                             <a
                               className={
-                                item.id.toString() === active ? "is-active" : ""
+                                item.id.toString() === active
+                                  ? "is-active flex items-center"
+                                  : "flex items-center"
                               }
                               onClick={() => setActive(item.id.toString())}
                             >
@@ -75,14 +96,14 @@ export const Settings = (props: ISettingsProps): ReactElement => {
                             </a>
                             {/* Second level children */}
                             {!isUndefined(item.children) ? (
-                              <ul>
+                              <ul className="pl-4 mt-2">
                                 {map(item.children, (item, idx) => (
-                                  <li key={item.id}>
+                                  <li key={item.id} className="mb-2">
                                     <a
                                       className={
                                         item.id.toString() === active
-                                          ? "is-active"
-                                          : ""
+                                          ? "is-active flex items-center"
+                                          : "flex items-center"
                                       }
                                       onClick={() =>
                                         setActive(item.id.toString())
@@ -103,18 +124,18 @@ export const Settings = (props: ISettingsProps): ReactElement => {
               );
             })}
           </aside>
-        </div>
 
-        {/* content for settings */}
-        <div className="section column is-half mt-6">
-          <div className="content">
-            {map(settingsContent, ({ id, content }) =>
-              active === id ? content : null,
-            )}
+          {/* content for settings */}
+          <div className="max-w-screen-xl">
+            <div className="content">
+              {map(settingsContent, ({ id, content }) =>
+                active === id ? content : null,
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </div>
   );
 };