[Update] Config Window: DeeplAuthKey. put edit and save button and move open webpage button to label section.

src-ui/windows/config_window/setting_section/SettingSection.module.scss

@@ -1,10 +1,9 @@
 .scroll_container {
     width: 100%;
-    margin-left: 4rem;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
 .container {
-    margin: 4rem;
+    margin: 6rem 4rem 16rem 3.2rem;
 }

src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx

@@ -1,6 +1,9 @@
+import { useTranslation } from "react-i18next";
+
 import { useSettingBox } from "../components/useSettingBox";
 import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
 export const Appearance = () => {
+    const { t } = useTranslation();
     const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
     const { currentMicDeviceListStatus } = useMicDeviceListStatus();
     const {
@@ -40,7 +43,7 @@ export const Appearance = () => {
 
             <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
 
-            <DeeplAuthKeyContainer label="Transparent" desc="description"/>
+            <DeeplAuthKeyContainer label={t(`config_window.deepl_auth_key.label`)} desc={t(`config_window.deepl_auth_key.desc`)}/>
         </>
     );
 };

src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx

@@ -1,18 +1,52 @@
 import styles from "./DeeplAuthKey.module.scss";
+import { useTranslation } from "react-i18next";
 
 import clsx from "clsx";
 import ExternalLink from "@images/external_link.svg?react";
 import { _Entry } from "../_atoms/_Entry";
+import { useState } from "react";
 
 export const DeeplAuthKey = () => {
+    const { t } = useTranslation();
+    const [is_editable, seIsEditable] = useState(false);
+    const [input_value, seInputValue] = useState("");
+
+    const revealEditAuthKey = () => {
+        seIsEditable(true);
+    };
+
+
+    const onchangeEntryAuthKey = (e) => {
+        seInputValue(e.target.value);
+    };
+    const saveAuthKey = () => {
+        console.log(input_value);
+    };
 
     return (
         <div className={styles.container}>
-            <_Entry width="34rem"/>
-            <div className={styles.open_webpage_button}>
-                <p className={styles.open_webpage_text}>Open DeepL Account Webpage</p>
-                <ExternalLink className={styles.external_link_svg} />
+            <div className={styles.entry_section_wrapper}>
+                <_Entry width="32rem" onChange={onchangeEntryAuthKey}/>
+                <button className={styles.save_button} onClick={saveAuthKey}>Save</button>
+                {is_editable
+                ? null
+                :
+                    <div className={styles.entry_edit_cover} onClick={revealEditAuthKey}>
+                        <button className={styles.edit_button}>Edit</button>
+                    </div>
+                }
             </div>
         </div>
     );
+};
+
+export const OpenWebpage_DeeplAuthKey = () => {
+    return (
+        <div className={styles.open_webpage_button_wrapper}>
+            <a className={styles.open_webpage_button} href="https://translate.google.com/?hl=ja&tab=TT&sl=en&tl=ja&op=translate" target="_blank" rel="noreferrer" >
+                <p className={styles.open_webpage_text}>Open DeepL Account Webpage</p>
+                <ExternalLink className={styles.external_link_svg} />
+            </a>
+        </div>
+    );
 };

src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss

@@ -6,8 +6,63 @@
     gap: 1rem;
 }
 
+.entry_section_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    position: relative;
+}
+
+.entry_edit_cover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 0.4rem;
+    background-color:  (#00000044);
+    backdrop-filter: blur(4rem);
+    border: solid 0.1rem var(--dark_700_color);
+    &:hover {
+        background-color:  (#00000088);
+    }
+    &:active {
+        backdrop-filter: blur(1.4rem);
+    }
+}
+
+.edit_button {
+    padding: 0.8rem 1.2rem;
+    color: var(--dark_basic_text_color);
+    height: 100%;
+    width: 100%;
+    font-size: 1.4rem;
+    text-align: center;
+}
+
+.save_button {
+    padding: 0.8rem 1.2rem;
+    background-color: var(--primary_600_color);
+    color: var(--dark_basic_text_color);
+    font-size: 1.4rem;
+    border-radius: 0.4rem;
+    &:hover {
+        background-color: var(--primary_500_color);
+    }
+    &:active {
+        background-color: var(--primary_700_color);
+    }
+}
+
+.open_webpage_button_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .open_webpage_button {
-    padding: 0.6rem 1.2rem;
+    padding: 0.6rem 3.2rem;
     display: flex;
     gap: 1rem;
     justify-content: center;
@@ -23,11 +78,11 @@
 }
 
 .open_webpage_text {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     color: var(--dark_basic_text_color);
 }
 
 .external_link_svg {
     color: var(--dark_500_color);
-    width: 1.8rem;
+    width: 1.6rem;
 }

src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx

@@ -9,7 +9,7 @@ import { Switchbox } from "./switchbox/Switchbox";
 import { Entry } from "./entry/Entry";
 import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 import { RadioButton } from "./radio_button/RadioButton";
-import { DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
+import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
 
 export const useSettingBox = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -89,7 +89,10 @@ export const useSettingBox = () => {
     const DeeplAuthKeyContainer = (props) => {
         return (
             <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
+                <div className={styles.deepl_auth_key_label_section}>
+                    <LabelComponent label={props.label} desc={props.desc} />
+                    <OpenWebpage_DeeplAuthKey />
+                </div>
                 <DeeplAuthKey {...props}/>
             </div>
         );

src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss

@@ -5,6 +5,9 @@
     align-items: center;
     background-color: var(--dark_888_color);
     padding: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .threshold_container {
@@ -27,4 +30,13 @@
 
 .threshold_section {
     width: 100%;
+}
+
+.deepl_auth_key_label_section {
+    max-width: 34rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1.4rem;
 }