From 9382066f6c59850ab6313c50c286250cd684fc69 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 9 Nov 2023 15:50:58 +0200
Subject: [PATCH 1/3] feature: new settings design

---
 src/routes/Settings/Settings.js | 48 ++++++++++++++++++++++++++-------
 src/routes/Settings/styles.less | 24 ++++++++++++++++-
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index cc42afc6b..2d29c9f33 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -327,6 +327,10 @@ const Settings = () => {
                     </div>
                     <div ref={playerSectionRef} className={styles['section-container']}>
                         <div className={styles['section-title']}>{ t('SETTINGS_NAV_PLAYER') }</div>
+                        <div className={styles['section-subtitle-wrapper']}>
+                            <Icon className={styles['icon']} name={'subtitles'} />
+                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_SUBTITLES')}</div>
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>{ t('SETTINGS_SUBTITLES_LANGUAGE') }</div>
@@ -386,6 +390,12 @@ const Settings = () => {
                                 {...subtitlesOutlineColorInput}
                             />
                         </div>
+                    </div>
+                    <div className={styles['section-container']}>
+                        <div className={styles['section-subtitle-wrapper']}>
+                            <Icon className={styles['icon']} name={'volume-medium'} />
+                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_AUDIO')}</div>
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>{ t('SETTINGS_DEFAULT_AUDIO_TRACK') }</div>
@@ -395,6 +405,12 @@ const Settings = () => {
                                 {...audioLanguageSelect}
                             />
                         </div>
+                    </div>
+                    <div className={styles['section-container']}>
+                        <div className={styles['section-subtitle-wrapper']}>
+                            <Icon className={styles['icon']} name={'remote'} />
+                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_CONTROLS')}</div>
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>{ t('SETTINGS_SEEK_KEY') }</div>
@@ -413,6 +429,23 @@ const Settings = () => {
                                 {...seekShortTimeDurationSelect}
                             />
                         </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>{ t('SETTINGS_PLAY_IN_BACKGROUND') }</div>
+                            </div>
+                            <Checkbox
+                                className={classnames(styles['option-input-container'], styles['checkbox-container'])}
+                                disabled={true}
+                                tabIndex={-1}
+                                {...playInBackgroundCheckbox}
+                            />
+                        </div>
+                    </div>
+                    <div className={styles['section-container']}>
+                        <div className={styles['section-subtitle-wrapper']}>
+                            <Icon className={styles['icon']} name={'play'} />
+                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_AUTO_PLAY')}</div>
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>{ t('AUTO_PLAY') }</div>
@@ -432,16 +465,11 @@ const Settings = () => {
                                 {...nextVideoPopupDurationSelect}
                             />
                         </div>
-                        <div className={styles['option-container']}>
-                            <div className={styles['option-name-container']}>
-                                <div className={styles['label']}>{ t('SETTINGS_PLAY_IN_BACKGROUND') }</div>
-                            </div>
-                            <Checkbox
-                                className={classnames(styles['option-input-container'], styles['checkbox-container'])}
-                                disabled={true}
-                                tabIndex={-1}
-                                {...playInBackgroundCheckbox}
-                            />
+                    </div>
+                    <div className={styles['section-container']}>
+                        <div className={styles['section-subtitle-wrapper']}>
+                            <Icon className={styles['icon']} name={'glasses'} />
+                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_ADVANCED')}</div>
                         </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index ab2886ba8..41b7a6af0 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -95,10 +95,32 @@
                     align-self: stretch;
                     font-size: 1.8rem;
                     line-height: 3.4rem;
-                    margin-bottom: 1rem;
+                    margin-bottom: 3rem;
                     color: var(--primary-foreground-color);
                 }
 
+                .section-subtitle-wrapper {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    gap: 0 1em;
+                    margin-bottom: 1.5rem;
+                    line-height: 2.4rem;
+
+                    .section-subtitle {
+                        flex: none;
+                        font-size: 1.1rem;
+                        color: var(--primary-foreground-color);
+                    }
+
+                    .icon {
+                        flex: none;
+                        width: 2rem;
+                        height: 2rem;
+                        color: var(--primary-foreground-color);
+                    }
+                }
+
                 .option-container {
                     flex: none;
                     align-self: stretch;

From 1ef59fcd80b40ab43dd73da149cbf759885c69eb Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 9 Nov 2023 16:51:43 +0200
Subject: [PATCH 2/3] refactor: changed the name of the subtitle wrapper

---
 src/routes/Settings/Settings.js | 10 +++++-----
 src/routes/Settings/styles.less |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index 2d29c9f33..a73e292d1 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -327,7 +327,7 @@ const Settings = () => {
                     </div>
                     <div ref={playerSectionRef} className={styles['section-container']}>
                         <div className={styles['section-title']}>{ t('SETTINGS_NAV_PLAYER') }</div>
-                        <div className={styles['section-subtitle-wrapper']}>
+                        <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'subtitles'} />
                             <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_SUBTITLES')}</div>
                         </div>
@@ -392,7 +392,7 @@ const Settings = () => {
                         </div>
                     </div>
                     <div className={styles['section-container']}>
-                        <div className={styles['section-subtitle-wrapper']}>
+                        <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'volume-medium'} />
                             <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_AUDIO')}</div>
                         </div>
@@ -407,7 +407,7 @@ const Settings = () => {
                         </div>
                     </div>
                     <div className={styles['section-container']}>
-                        <div className={styles['section-subtitle-wrapper']}>
+                        <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'remote'} />
                             <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_CONTROLS')}</div>
                         </div>
@@ -442,7 +442,7 @@ const Settings = () => {
                         </div>
                     </div>
                     <div className={styles['section-container']}>
-                        <div className={styles['section-subtitle-wrapper']}>
+                        <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'play'} />
                             <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_AUTO_PLAY')}</div>
                         </div>
@@ -467,7 +467,7 @@ const Settings = () => {
                         </div>
                     </div>
                     <div className={styles['section-container']}>
-                        <div className={styles['section-subtitle-wrapper']}>
+                        <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'glasses'} />
                             <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_ADVANCED')}</div>
                         </div>
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index 41b7a6af0..fe2f1b689 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -99,7 +99,7 @@
                     color: var(--primary-foreground-color);
                 }
 
-                .section-subtitle-wrapper {
+                .section-category-container {
                     display: flex;
                     flex-direction: row;
                     align-items: center;

From f6b7004d0ac8f6bef7b9dcfb9b90a46850fbdff0 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 9 Nov 2023 16:55:19 +0200
Subject: [PATCH 3/3] refactor: name changed to match the overall naming
 sollution

---
 src/routes/Settings/Settings.js | 10 +++++-----
 src/routes/Settings/styles.less |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index a73e292d1..1baeb5511 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -329,7 +329,7 @@ const Settings = () => {
                         <div className={styles['section-title']}>{ t('SETTINGS_NAV_PLAYER') }</div>
                         <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'subtitles'} />
-                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_SUBTITLES')}</div>
+                            <div className={styles['label']}>{t('SETTINGS_SECTION_SUBTITLES')}</div>
                         </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
@@ -394,7 +394,7 @@ const Settings = () => {
                     <div className={styles['section-container']}>
                         <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'volume-medium'} />
-                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_AUDIO')}</div>
+                            <div className={styles['label']}>{t('SETTINGS_SECTION_AUDIO')}</div>
                         </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
@@ -409,7 +409,7 @@ const Settings = () => {
                     <div className={styles['section-container']}>
                         <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'remote'} />
-                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_CONTROLS')}</div>
+                            <div className={styles['label']}>{t('SETTINGS_SECTION_CONTROLS')}</div>
                         </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
@@ -444,7 +444,7 @@ const Settings = () => {
                     <div className={styles['section-container']}>
                         <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'play'} />
-                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_AUTO_PLAY')}</div>
+                            <div className={styles['label']}>{t('SETTINGS_SECTION_AUTO_PLAY')}</div>
                         </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
@@ -469,7 +469,7 @@ const Settings = () => {
                     <div className={styles['section-container']}>
                         <div className={styles['section-category-container']}>
                             <Icon className={styles['icon']} name={'glasses'} />
-                            <div className={styles['section-subtitle']}>{t('SETTINGS_SECTION_ADVANCED')}</div>
+                            <div className={styles['label']}>{t('SETTINGS_SECTION_ADVANCED')}</div>
                         </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index fe2f1b689..7c9444509 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -107,7 +107,7 @@
                     margin-bottom: 1.5rem;
                     line-height: 2.4rem;
 
-                    .section-subtitle {
+                    .label {
                         flex: none;
                         font-size: 1.1rem;
                         color: var(--primary-foreground-color);