Merge branch 'ui' into for_webui

locales/ja.json

@@ -113,7 +113,7 @@
             "label": "使用フォント"
         },
         "ui_language": {
-            "label": "UIの言語 / UI Language"
+            "label": "UIの言語"
         },
         "to_restore_main_page_geometry": {
             "label": "メイン画面の位置を記憶する",

locales/ko.json

@@ -98,7 +98,7 @@
             "label": "폰트"
         },
         "ui_language": {
-            "label": "UI 언어 / UI Language"
+            "label": "UI 언어"
         },
         "to_restore_main_page_geometry": {
             "label": "메인 화면 위치 기억",

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]) => (

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;

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

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>

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;