From 109d9054d6e64b3ad0f5843a33d9cfe0dca79d6b Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Mon, 23 Oct 2023 21:06:31 +0200
Subject: [PATCH] caption settings reorganize

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
---
 src/components/player/atoms/Settings.tsx      |  2 +-
 .../atoms/settings/CaptionSettingsView.tsx    | 35 ++++++++++---------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/player/atoms/Settings.tsx b/src/components/player/atoms/Settings.tsx
index cc02ee4e..68e36b83 100644
--- a/src/components/player/atoms/Settings.tsx
+++ b/src/components/player/atoms/Settings.tsx
@@ -51,7 +51,7 @@ function SettingsOverlay({ id }: { id: string }) {
             <CaptionsView id={id} />
           </Menu.CardWithScrollable>
         </OverlayPage>
-        <OverlayPage id={id} path="/captions/settings" width={343} height={430}>
+        <OverlayPage id={id} path="/captions/settings" width={343} height={450}>
           <Menu.Card>
             <CaptionSettingsView id={id} />
           </Menu.Card>
diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 30a202f7..3189da7f 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@@ -236,14 +236,16 @@ export function CaptionSettingsView({ id }: { id: string }) {
           decimalsAllowed={1}
           controlButtons
         />
-        <CaptionSetting
-          label="Text size"
-          max={200}
-          min={1}
-          textTransformer={(s) => `${s}%`}
-          onChange={(v) => updateStyling({ size: v / 100 })}
-          value={styling.size * 100}
-        />
+        <div className="flex justify-between items-center">
+          <Menu.FieldTitle>Fix capitalization</Menu.FieldTitle>
+          <div className="flex justify-center items-center">
+            <Toggle
+              enabled={overrideCasing}
+              onClick={() => setOverrideCasing(!overrideCasing)}
+            />
+          </div>
+        </div>
+        <Menu.Divider />
         <CaptionSetting
           label="Background opacity"
           max={100}
@@ -252,6 +254,14 @@ export function CaptionSettingsView({ id }: { id: string }) {
           value={styling.backgroundOpacity * 100}
           textTransformer={(s) => `${s}%`}
         />
+        <CaptionSetting
+          label="Text size"
+          max={200}
+          min={1}
+          textTransformer={(s) => `${s}%`}
+          onChange={(v) => updateStyling({ size: v / 100 })}
+          value={styling.size * 100}
+        />
         <div className="flex justify-between items-center">
           <Menu.FieldTitle>Color</Menu.FieldTitle>
           <div className="flex justify-center items-center">
@@ -264,15 +274,6 @@ export function CaptionSettingsView({ id }: { id: string }) {
             ))}
           </div>
         </div>
-        <div className="flex justify-between items-center">
-          <Menu.FieldTitle>Fix capitalization</Menu.FieldTitle>
-          <div className="flex justify-center items-center">
-            <Toggle
-              enabled={overrideCasing}
-              onClick={() => setOverrideCasing(!overrideCasing)}
-            />
-          </div>
-        </div>
       </Menu.Section>
     </>
   );