From e7a39b6fa8f64940fa8c3c6e3e922bfbaa573dd2 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 19 Sep 2024 07:31:18 +0900
Subject: [PATCH 1/2] [Chore] Main Page: Add padding to language selector open
 button. Add localization function to the title Language Settings.

---
 .../sidebar_section/language_settings/LanguageSettings.jsx     | 3 ++-
 .../LanguageSelectorOpenButton.module.scss                     | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
index 46459770..ea236fae 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
@@ -7,12 +7,13 @@ import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 
 export const LanguageSettings = () => {
+    const { t } = useTranslation();
     const { updateIsOpenedTranslatorSelector } = useStore_IsOpenedTranslatorSelector();
     const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
 
     return (
         <div className={styles.container} onMouseLeave={closeTranslatorSelector}>
-            <p className={styles.title}>Language Settings</p>
+            <p className={styles.title}>{t("main_page.language_settings")}</p>
             <PresetTabSelector />
             <PresetContainer />
         </div>
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
index 3bce23ac..25e087f2 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
@@ -39,7 +39,7 @@
     position: relative;
     background-color: var(--dark_888_color);
     width: 100%;
-    padding: 0.2rem 0;
+    padding: 0.4rem 0;
     display: flex;
     flex-direction: column;
     justify-content: center;

From a288b8730e51a48a4819ca1fec59bd18b61b0613 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 19 Sep 2024 07:52:51 +0900
Subject: [PATCH 2/2] [Update] Config Page: Appearance Tab. UI Language. Show
 localization language and 'UI Language' when it's not en to desc section. Add
 padding more between label and desc.

---
 locales/ja.json                                     |  2 +-
 locales/ko.json                                     |  2 +-
 .../setting_box/appearance/Appearance.jsx           | 13 ++++++++++++-
 .../setting_box/appearance/Appearance.module.scss   |  9 +++++++--
 .../label_component/LabelComponent.module.scss      |  2 +-
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/locales/ja.json b/locales/ja.json
index 085a7f30..c1c362b5 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -113,7 +113,7 @@
             "label": "使用フォント"
         },
         "ui_language": {
-            "label": "UIの言語 / UI Language"
+            "label": "UIの言語"
         },
         "to_restore_main_page_geometry": {
             "label": "メイン画面の位置を記憶する",
diff --git a/locales/ko.json b/locales/ko.json
index 76b1ee0b..2d370661 100644
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -98,7 +98,7 @@
             "label": "폰트"
         },
         "ui_language": {
-            "label": "UI 언어 / UI Language"
+            "label": "UI 언어"
         },
         "to_restore_main_page_geometry": {
             "label": "메인 화면 위치 기억",
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 913c8d04..8e3368cd 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -86,9 +86,20 @@ const UiLanguageContainer = () => {
         "zh-Hant": "繁體中文",
     };
 
+
+    const is_not_en_lang = currentUiLanguage.data !== "en" && currentUiLanguage.data !== undefined;
     return (
         <div className={styles.ui_language_container}>
-            <LabelComponent label={t("config_page.ui_language.label")} />
+            <div className={styles.ui_language_label_wrapper}>
+                {is_not_en_lang
+                ?
+                    <>
+                        <LabelComponent label="UI Language" desc={t("config_page.ui_language.label")}/>
+                    </>
+                :
+                    <LabelComponent label={t("config_page.ui_language.label")}/>
+                }
+            </div>
             <div className={styles.ui_language_selector_container}>
                 {currentUiLanguage.state === "loading" && <span className={styles.loader}></span>}
                 {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss
index f2d8ab50..14c10eb7 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss
@@ -14,8 +14,13 @@
     gap: 1rem;
     position: relative;
 }
-
-
+.ui_language_label_wrapper {
+    display: flex;
+    align-items: center;
+}
+.ui_language_secondly_label {
+    font-size: 1.2rem;
+}
 
 .radio_button_wrapper {
     display: flex;
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss
index f9ea7d93..8a423561 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss
@@ -1,7 +1,7 @@
 .label_component {
     display: flex;
     flex-direction: column;
-    gap: 0.2rem;
+    gap: 0.4rem;
     flex-shrink: 0;
 }