[Update] Config Page: Device Tab. Adjust designs.

locales/en.json

@@ -141,11 +141,10 @@
             "auth_key_success": "Auth key update completed.",
             "auth_key_error": "Auth Key is incorrect or Usage limit reached."
         },
-        "mic_host": {
-            "label": "Mic Host/Driver"
-        },
-        "mic_device": {
-            "label": "Mic Device"
+        "mic_host_device": {
+            "label": "Mic Device",
+            "label_host": "Host/Driver",
+            "label_device": "Device"
         },
         "mic_dynamic_energy_threshold": {
             "label_for_automatic": "Mic Energy Threshold (Current Setting: Automatic)",

locales/ja.json

@@ -136,11 +136,10 @@
             "auth_key_success": "認証キーの更新が完了しました。",
             "auth_key_error": "認証キーが間違っているか、API使用制限が上限に達しています。"
         },
-        "mic_host": {
-            "label": "マイク（ホスト/ドライバー）"
-        },
-        "mic_device": {
-            "label": "マイク （デバイス）"
+        "mic_host_device": {
+            "label": "マイク （デバイス）",
+            "label_host": "ホスト/ドライバー",
+            "label_device": "デバイス"
         },
         "mic_dynamic_energy_threshold": {
             "label_for_automatic": "マイク入力感度の調整 (現在の設定: 自動)",

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss

@@ -8,7 +8,7 @@
     position: relative;
     background-color: var(--dark_950_color);
     min-width: 20rem;
-    padding: 0.6rem 1rem;
+    padding: 0.8rem 1.4rem;
     cursor: pointer;
     border-radius: 0.4rem;
     &:hover {

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss

@@ -24,8 +24,6 @@
     justify-content: space-between;
     align-items: center;
     gap: 2rem;
-    padding: 2rem;
-    border-bottom: solid 0.1rem var(--dark_800_color);
 }
 
 .threshold_switch_section {

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -1,18 +1,13 @@
 import { useTranslation } from "react-i18next";
 import styles from "./Device.module.scss";
 import {
-    DropdownMenuContainer,
     ThresholdContainer,
 } from "../components/useSettingBox";
 export const Device = () => {
-
     return (
         <>
-            <DropdownMenuContainer_MicHost />
-            {/* <DropdownMenuContainer_MicDevice /> */}
-            <ThresholdContainer_Mic />
-            <DropdownMenuContainer_SpeakerDevice />
-            <ThresholdContainer_Speaker />
+            <Mic_Container />
+            <Speaker_Container />
         </>
     );
 };
@@ -26,7 +21,7 @@ import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
 import { LabelComponent } from "../components/label_component/LabelComponent";
 import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu";
 
-const DropdownMenuContainer_MicHost = () => {
+const Mic_Container = () => {
     const { t } = useTranslation();
     const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
     const { currentMicHostList, getMicHostList } = useMicHostList();
@@ -44,68 +39,52 @@ const DropdownMenuContainer_MicHost = () => {
 
 
     return (
-        <div className={styles.device_container}>
-            <LabelComponent label={t("config_page.mic_host.label")} />
+        <div className={styles.mic_container}>
+            <div className={styles.device_container}>
+                <LabelComponent label={t("config_page.mic_host_device.label")} />
+                <div className={styles.device_contents}>
+                    <div className={styles.device_dropdown_wrapper}>
+                        <p className={styles.device_dropdown_label}>{t("config_page.mic_host_device.label_host")}</p>
+                        <DropdownMenu
+                            dropdown_id="mic_host"
+                            selected_id={currentSelectedMicHost.data}
+                            list={currentMicHostList.data}
+                            selectFunction={selectFunction_host}
+                            openListFunction={getMicHostList}
+                            state={currentSelectedMicHost.state}
+                            style={{ maxWidth: "20rem", minWidth: "10rem" }}
+                        />
+                    </div>
 
-            <div className={styles.device_contents}>
-                <div className={styles.device_dropdown_wrapper}>
-                    <p className={styles.device_dropdown_label}>Host/Driver</p>
-                    <DropdownMenu
-                        dropdown_id="mic_host"
-                        selected_id={currentSelectedMicHost.data}
-                        list={currentMicHostList.data}
-                        selectFunction={selectFunction_host}
-                        openListFunction={getMicHostList}
-                        state={currentSelectedMicHost.state}
-                        style={{ maxWidth: "20rem", minWidth: "10rem" }}
-                    />
-                </div>
-
-                <div className={styles.device_dropdown_wrapper}>
-                    <p className={styles.device_dropdown_label}>Device</p>
-                    <DropdownMenu
-                        dropdown_id="mic_device"
-                        label={t("config_page.mic_device.label")}
-                        selected_id={currentSelectedMicDevice.data}
-                        list={currentMicDeviceList.data}
-                        selectFunction={selectFunction_device}
-                        openListFunction={getMicDeviceList}
-                        state={currentSelectedMicDevice.state}
-                    />
+                    <div className={styles.device_dropdown_wrapper}>
+                        <p className={styles.device_dropdown_label}>{t("config_page.mic_host_device.label_device")}</p>
+                        <DropdownMenu
+                            dropdown_id="mic_device"
+                            selected_id={currentSelectedMicDevice.data}
+                            list={currentMicDeviceList.data}
+                            selectFunction={selectFunction_device}
+                            openListFunction={getMicDeviceList}
+                            state={currentSelectedMicDevice.state}
+                        />
+                    </div>
                 </div>
             </div>
+            <div className={styles.threshold_container}>
+                <ThresholdContainer
+                    label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
+                    desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
+                    id="mic_threshold"
+                    min="0"
+                    max="2000"
+                />
+            </div>
         </div>
     );
 };
 
-// import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
-// import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
-// const DropdownMenuContainer_MicDevice = () => {
-//     const { t } = useTranslation();
-//     const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
-//     const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
-
-//     const selectFunction = (selected_data) => {
-//         setSelectedMicDevice(selected_data.selected_id);
-//     };
-
-
-//     return (
-//         <DropdownMenuContainer
-//             dropdown_id="mic_device"
-//             label={t("config_page.mic_device.label")}
-//             selected_id={currentSelectedMicDevice.data}
-//             list={currentMicDeviceList.data}
-//             selectFunction={selectFunction}
-//             openListFunction={getMicDeviceList}
-//             state={currentSelectedMicDevice.state}
-//         />
-//     );
-// };
-
 import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
 import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
-const DropdownMenuContainer_SpeakerDevice = () => {
+const Speaker_Container = () => {
     const { t } = useTranslation();
     const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
@@ -116,42 +95,32 @@ const DropdownMenuContainer_SpeakerDevice = () => {
 
 
     return (
-        <DropdownMenuContainer
-            dropdown_id="speaker_device"
-            label={t("config_page.speaker_device.label")}
-            selected_id={currentSelectedSpeakerDevice.data}
-            list={currentSpeakerDeviceList.data}
-            selectFunction={selectFunction}
-            openListFunction={getSpeakerDeviceList}
-            state={currentSelectedSpeakerDevice.state}
-        />
-    );
-};
-
-const ThresholdContainer_Mic = () => {
-    const { t } = useTranslation();
-
-    return (
-        <ThresholdContainer
-            label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
-            desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
-            id="mic_threshold"
-            min="0"
-            max="2000"
-        />
-    );
-};
-
-const ThresholdContainer_Speaker = () => {
-    const { t } = useTranslation();
-
-    return (
-        <ThresholdContainer
-            label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
-            desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
-            id="speaker_threshold"
-            min="0"
-            max="4000"
-        />
+        <div className={styles.speaker_container}>
+            <div className={styles.device_container}>
+                <LabelComponent label={t("config_page.speaker_device.label")} />
+                <div className={styles.device_contents}>
+                    <div className={styles.device_dropdown_wrapper}>
+                        <DropdownMenu
+                            dropdown_id="speaker_device"
+                            label={t("config_page.speaker_device.label")}
+                            selected_id={currentSelectedSpeakerDevice.data}
+                            list={currentSpeakerDeviceList.data}
+                            selectFunction={selectFunction}
+                            openListFunction={getSpeakerDeviceList}
+                            state={currentSelectedSpeakerDevice.state}
+                        />
+                    </div>
+                </div>
+            </div>
+            <div className={styles.threshold_container}>
+                <ThresholdContainer
+                    label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
+                    desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
+                    id="speaker_threshold"
+                    min="0"
+                    max="4000"
+                />
+            </div>
+        </div>
     );
 };

src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss

@@ -1,11 +1,30 @@
+.mic_container {
+    display: flex;
+    flex-direction: column;
+    border-bottom: solid 0.1rem var(--dark_800_color);
+    padding-bottom: 2rem;
+}
+
+.speaker_container {
+    padding-top: 2rem;
+}
+
 .device_container {
     display: flex;
     width: 100%;
     justify-content: space-between;
     align-items: center;
     padding: 2rem;
-    justify-content: space-between;
-    align-items: center;
+    margin-bottom: 0rem;
+}
+
+.threshold_container {
+    padding: 2rem;
+}
+
+.device_label {
+    font-size: 1.8rem;
+    color: var(--dark_basic_text_color);
 }
 
 .device_contents {
@@ -16,9 +35,11 @@
 .device_dropdown_wrapper {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.6rem;
 }
 
 .device_dropdown_label {
+    padding-left: 0.2rem;
     font-size: 1.4rem;
+    color: var(--dark_500_color);
 }