From 1180a2b42c65ad35efb701730f8af7bb9b3735e6 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Sat, 16 Dec 2023 22:39:29 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Formatting=20in=20connection=20c?=
 =?UTF-8?q?onfirmation=20panels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AirDCPPSettings/AirDCPPSettingsConfirmation.tsx   |  4 +---
 .../QbittorrentSettings/QbittorrentConnectionForm.tsx | 11 ++++++-----
 src/client/components/Settings/Settings.tsx           |  7 +++++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
index c522d0e..7a31743 100644
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx
@@ -29,9 +29,7 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
             <dt>Active Sessions: {settings.user.active_sessions}</dt>
             <dt>
               Permissions:{" "}
-              <pre>
-                {JSON.stringify(settings.user.permissions, undefined, 2)}
-              </pre>
+              {JSON.stringify(settings.user.permissions, undefined, 2)}
             </dt>
           </dl>
         </p>
diff --git a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
index f75da4e..92fc9a4 100644
--- a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
+++ b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
@@ -37,7 +37,6 @@ export const QbittorrentConnectionForm = (): ReactElement => {
       }),
     enabled: !!connectionDetails,
   });
-  console.log(qbittorrentClientInfo);
   // Update action using a mutation
   const { mutate } = useMutation({
     mutationFn: async (values) =>
@@ -47,7 +46,9 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         data: { settingsPayload: values, settingsKey: "bittorrent" },
       }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["settings"] });
+      queryClient.invalidateQueries({
+        queryKey: ["settings", "qbittorrentClientInfo"],
+      });
     },
   });
 
@@ -80,9 +81,9 @@ export const QbittorrentConnectionForm = (): ReactElement => {
             </span>
             <p className="whitespace-nowrap text-sm">Connected</p>
           </span>
-          <p className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
-            <pre> {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}</pre>
-          </p>
+          <pre className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
+            {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
+          </pre>
         </div>
       </>
     );
diff --git a/src/client/components/Settings/Settings.tsx b/src/client/components/Settings/Settings.tsx
index f901d69..2d001e8 100644
--- a/src/client/components/Settings/Settings.tsx
+++ b/src/client/components/Settings/Settings.tsx
@@ -71,7 +71,10 @@ export const Settings = (props: ISettingsProps): ReactElement => {
           <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
             {map(settingsObject, (settingObject, idx) => {
               return (
-                <div className="w-64 py-2 text-slate" key={idx}>
+                <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>
@@ -93,7 +96,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
                             </a>
                             {/* Second level children */}
                             {!isUndefined(item.children) ? (
-                              <ul className="pl-4">
+                              <ul className="pl-4 mt-2">
                                 {map(item.children, (item, idx) => (
                                   <li key={item.id} className="mb-2">
                                     <a