From 439c48bcaab18b9f1ac1483d98fb53c353c63a98 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:20:59 -0700
Subject: [PATCH] make settings page look nicer

2 columns for preferences
make section spacing smaller
---
 src/pages/Settings.tsx                       |   8 +-
 src/pages/parts/settings/PreferencesPart.tsx | 162 ++++++++++---------
 2 files changed, 90 insertions(+), 80 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index c26277b0..b08c44d8 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -303,7 +303,7 @@ export function SettingsPage() {
         <div className="mt-10">
           <AdminPanelPart />
         </div>
-        <div id="settings-preferences" className="mt-48">
+        <div id="settings-preferences" className="mt-28">
           <PreferencesPart
             language={state.appLanguage.state}
             setLanguage={state.appLanguage.set}
@@ -315,20 +315,20 @@ export function SettingsPage() {
             setSourceOrder={state.sourceOrder.set}
           />
         </div>
-        <div id="settings-appearance" className="mt-48">
+        <div id="settings-appearance" className="mt-28">
           <ThemePart
             active={previewTheme ?? "default"}
             inUse={activeTheme ?? "default"}
             setTheme={setThemeWithPreview}
           />
         </div>
-        <div id="settings-captions" className="mt-48">
+        <div id="settings-captions" className="mt-28">
           <CaptionsPart
             styling={state.subtitleStyling.state}
             setStyling={state.subtitleStyling.set}
           />
         </div>
-        <div id="settings-connection" className="mt-48">
+        <div id="settings-connection" className="mt-28">
           <ConnectionsPart
             backendUrl={state.backendUrl.state}
             setBackendUrl={state.backendUrl.set}
diff --git a/src/pages/parts/settings/PreferencesPart.tsx b/src/pages/parts/settings/PreferencesPart.tsx
index a734d784..cfe0b9bf 100644
--- a/src/pages/parts/settings/PreferencesPart.tsx
+++ b/src/pages/parts/settings/PreferencesPart.tsx
@@ -54,86 +54,96 @@ export function PreferencesPart(props: {
   return (
     <div className="space-y-12">
       <Heading1 border>{t("settings.preferences.title")}</Heading1>
-      <div>
-        <p className="text-white font-bold mb-3">
-          {t("settings.preferences.language")}
-        </p>
-        <p className="max-w-[20rem] font-medium">
-          {t("settings.preferences.languageDescription")}
-        </p>
-        <Dropdown
-          options={options}
-          selectedItem={selected || options[0]}
-          setSelectedItem={(opt) => props.setLanguage(opt.id)}
-        />
-      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Column */}
+        <div className="space-y-8">
+          {/* Language Preference */}
+          <div>
+            <p className="text-white font-bold mb-3">
+              {t("settings.preferences.language")}
+            </p>
+            <p className="max-w-[20rem] font-medium">
+              {t("settings.preferences.languageDescription")}
+            </p>
+            <Dropdown
+              options={options}
+              selectedItem={selected || options[0]}
+              setSelectedItem={(opt) => props.setLanguage(opt.id)}
+            />
+          </div>
 
-      <div>
-        <p className="text-white font-bold mb-3">
-          {t("settings.preferences.thumbnail")}
-        </p>
-        <p className="max-w-[25rem] font-medium">
-          {t("settings.preferences.thumbnailDescription")}
-        </p>
-        <div
-          onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}
-          className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
-        >
-          <Toggle enabled={props.enableThumbnails} />
-          <p className="flex-1 text-white font-bold">
-            {t("settings.preferences.thumbnailLabel")}
-          </p>
+          {/* Thumbnail Preference */}
+          <div>
+            <p className="text-white font-bold mb-3">
+              {t("settings.preferences.thumbnail")}
+            </p>
+            <p className="max-w-[25rem] font-medium">
+              {t("settings.preferences.thumbnailDescription")}
+            </p>
+            <div
+              onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}
+              className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
+            >
+              <Toggle enabled={props.enableThumbnails} />
+              <p className="flex-1 text-white font-bold">
+                {t("settings.preferences.thumbnailLabel")}
+              </p>
+            </div>
+          </div>
+
+          {/* Autoplay Preference */}
+          <div>
+            <p className="text-white font-bold mb-3">
+              {t("settings.preferences.autoplay")}
+            </p>
+            <p className="max-w-[25rem] font-medium">
+              {t("settings.preferences.autoplayDescription")}
+            </p>
+            <div
+              onClick={() =>
+                allowAutoplay
+                  ? props.setEnableAutoplay(!props.enableAutoplay)
+                  : null
+              }
+              className={classNames(
+                "bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg",
+                allowAutoplay
+                  ? "cursor-pointer opacity-100 pointer-events-auto"
+                  : "cursor-not-allowed opacity-50 pointer-events-none",
+              )}
+            >
+              <Toggle enabled={props.enableAutoplay && allowAutoplay} />
+              <p className="flex-1 text-white font-bold">
+                {t("settings.preferences.autoplayLabel")}
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-      <div>
-        <p className="text-white font-bold mb-3">
-          {t("settings.preferences.autoplay")}
-        </p>
-        <p className="max-w-[25rem] font-medium">
-          {t("settings.preferences.autoplayDescription")}
-        </p>
-        <div
-          onClick={() =>
-            allowAutoplay
-              ? props.setEnableAutoplay(!props.enableAutoplay)
-              : null
-          }
-          className={classNames(
-            "bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg",
-            allowAutoplay
-              ? "cursor-pointer opacity-100 pointer-events-auto"
-              : "cursor-not-allowed opacity-50 pointer-events-none",
-          )}
-        >
-          <Toggle enabled={props.enableAutoplay && allowAutoplay} />
-          <p className="flex-1 text-white font-bold">
-            {t("settings.preferences.autoplayLabel")}
-          </p>
-        </div>
-      </div>
 
-      <div id="source-order" className="mt-4">
-        <div className="flex flex-col gap-3">
-          <p className="text-white font-bold">
-            {t("settings.preferences.sourceOrder")}
-          </p>
-          <p className="max-w-[25rem] font-medium">
-            {t("settings.preferences.sourceOrderDescription")}
-          </p>
+        {/* Column */}
+        <div id="source-order" className="space-y-8">
+          <div className="flex flex-col gap-3">
+            <p className="text-white font-bold">
+              {t("settings.preferences.sourceOrder")}
+            </p>
+            <p className="max-w-[25rem] font-medium">
+              {t("settings.preferences.sourceOrderDescription")}
+            </p>
 
-          <SortableList
-            items={sourceItems}
-            setItems={(items) =>
-              props.setSourceOrder(items.map((item) => item.id))
-            }
-          />
-          <Button
-            className="max-w-[25rem]"
-            theme="secondary"
-            onClick={() => props.setSourceOrder(allSources.map((s) => s.id))}
-          >
-            {t("settings.reset")}
-          </Button>
+            <SortableList
+              items={sourceItems}
+              setItems={(items) =>
+                props.setSourceOrder(items.map((item) => item.id))
+              }
+            />
+            <Button
+              className="max-w-[25rem]"
+              theme="secondary"
+              onClick={() => props.setSourceOrder(allSources.map((s) => s.id))}
+            >
+              {t("settings.reset")}
+            </Button>
+          </div>
         </div>
       </div>
     </div>