🧹 Formatting in connection confirmation panels

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)}
-                {JSON.stringify(settings.user.permissions, undefined, 2)}
-              </pre>
             </dt>
           </dl>
         </p>

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 className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
-            <pre> {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}</pre>
+            {JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
-          </p>
+          </pre>
         </div>
       </>
     );

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