From 3e88604fd782fbe1937a02d698698f0a9d478cdd Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 16 Oct 2024 23:03:59 +0900
Subject: [PATCH] [bugfix] Config Page: Appearance tab. Fix the deign where Ui
 language section that was not putted selected mark by adding name attribute
 to radio element.

---
 .../_components/radio_button/RadioButton.jsx           |  6 ++++--
 .../_components/radio_button/RadioButton.module.scss   |  8 ++++----
 .../setting_box/appearance/Appearance.jsx              |  4 +++-
 .../setting_box/appearance/Appearance.module.scss      | 10 +++++-----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
index d37b97c2..1c83847c 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
@@ -9,16 +9,18 @@ export const RadioButton = (props) => {
                         ? <>
                             { props.checked_variable.state === "pending" && <span className={styles.loader}></span> }
                             <input
+                                className={styles.radio_button_input}
                                 type="radio"
-                                name="radio"
+                                name={props.name}
                                 value={option.radio_button_id}
                                 onChange={() => props.selectFunction(option.radio_button_id)}
                                 checked
                             />
                         </>
                         : <input
+                            className={styles.radio_button_input}
                             type="radio"
-                            name="radio"
+                            name={props.name}
                             value={option.radio_button_id}
                             onChange={() => props.selectFunction(option.radio_button_id)}
                         />
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
index b8e82e23..04532aa3 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
@@ -23,12 +23,12 @@
     }
 }
 
-input[type="radio"] {
+.radio_button_input {
     appearance: none;
     margin: 0;
-    width: 2.4rem;
-    height: 2.4rem;
-    border: 0.3rem solid var(--dark_600_color);
+    width: 2rem;
+    height: 2rem;
+    border: 0.2rem solid var(--dark_600_color);
     border-radius: 50%;
     transition: border-color .1s ease, border-width .1s ease;
     cursor: inherit;
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 c838bc81..635253b9 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
@@ -63,8 +63,9 @@ const UiLanguageContainer = () => {
                 {Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
                     <label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
                         <input
+                            className={styles.radio_button_input}
                             type="radio"
-                            name="radio"
+                            name="ui_language"
                             value={key}
                             onChange={() => setUiLanguage(key)}
                             checked={currentUiLanguage.data === key}
@@ -168,6 +169,7 @@ const SendMessageButtonTypeContainer = () => {
         <RadioButtonContainer
             label={t("config_page.send_message_button_type.label")}
             selectFunction={setSendMessageButtonType}
+            name="send_message_button_type"
             options={[
                 { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
                 { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
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 14c10eb7..0075aab5 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
@@ -41,18 +41,18 @@
     }
 }
 
-input[type="radio"] {
+.radio_button_input {
     appearance: none;
     margin: 0;
-    width: 1.6rem;
-    height: 1.6rem;
-    border: 0.2rem solid var(--dark_600_color);
+    width: 2rem;
+    height: 2rem;
+    border: 0.3rem solid var(--dark_600_color);
     border-radius: 50%;
     transition: border-color .1s ease, border-width .1s ease;
     cursor: inherit;
     &:checked {
         border-color: var(--primary_400_color);
-        border-width: 0.4rem;
+        border-width: 0.6rem;
     }
 }