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] [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;
 }