[Refactor] Implement _OpenWebpageButton component and integrate it into DeeplAuthKeyContainer.

src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.jsx

@@ -0,0 +1,13 @@
+import styles from "./_OpenWebpageButton.module.scss";
+import ExternalLink from "@images/external_link.svg?react";
+
+export const _OpenWebpageButton = (props) => {
+    return (
+        <div className={styles.open_webpage_button_wrapper}>
+            <a className={styles.open_webpage_button} href={props.webpage_url} target="_blank" rel="noreferrer" >
+                <p className={styles.open_webpage_text}>{props.open_webpage_label}</p>
+                <ExternalLink className={styles.external_link_svg} />
+            </a>
+        </div>
+    );
+};

src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.module.scss

@@ -0,0 +1,32 @@
+.open_webpage_button_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.open_webpage_button {
+    padding: 0.6rem 2.8rem;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    flex-shrink: 0;
+    &:hover {
+        background-color: var(--dark_825_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.open_webpage_text {
+    font-size: 1.2rem;
+}
+
+.external_link_svg {
+    color: var(--dark_500_color);
+    width: 1.6rem;
+    flex-shrink: 0;
+}

src-ui/views/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx

@@ -2,7 +2,6 @@ import styles from "./DeeplAuthKey.module.scss";
 import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import CircularProgress from "@mui/material/CircularProgress";
-import ExternalLink from "@images/external_link.svg?react";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState, useRef } from "react";
 import { useEffect } from "react";
@@ -56,16 +55,4 @@ export const DeeplAuthKey = (props) => {
             </div>
         </div>
     );
-};
-
-
-export const OpenWebpage_DeeplAuthKey = (props) => {
-    return (
-        <div className={styles.open_webpage_button_wrapper}>
-            <a className={styles.open_webpage_button} href={props.webpage_url} target="_blank" rel="noreferrer" >
-                <p className={styles.open_webpage_text}>{props.open_webpage_label}</p>
-                <ExternalLink className={styles.external_link_svg} />
-            </a>
-        </div>
-    );
 };

src-ui/views/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss

@@ -62,37 +62,4 @@
 
 .save_button_label {
     font-size: 1.4rem;
-}
-
-.open_webpage_button_wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.open_webpage_button {
-    padding: 0.6rem 2.8rem;
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    align-items: center;
-    border-radius: 0.4rem;
-    cursor: pointer;
-    flex-shrink: 0;
-    &:hover {
-        background-color: var(--dark_825_color);
-    }
-    &:active {
-        background-color: var(--dark_900_color);
-    }
-}
-
-.open_webpage_text {
-    font-size: 1.2rem;
-}
-
-.external_link_svg {
-    color: var(--dark_500_color);
-    width: 1.6rem;
-    flex-shrink: 0;
 }

src-ui/views/app/config_page/setting_section/setting_box/_components/index.js

@@ -1,6 +1,6 @@
 export { ActionButton } from "./action_button/ActionButton";
 export { ComputeDevice } from "./compute_device/ComputeDevice";
-export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
+export { DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
 export { DropdownMenu, MultiDropdownMenu } from "./dropdown_menu/DropdownMenu";
 export { Entry } from "./entry/Entry";
 export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";

src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -12,7 +12,6 @@ import {
     EntryWithSaveButton,
     HotkeysEntry,
     RadioButton,
-    OpenWebpage_DeeplAuthKey,
     DeeplAuthKey,
     ActionButton,
     ComputeDevice,
@@ -23,6 +22,8 @@ import {
 } from "../_components";
 import { Checkbox } from "@common_components";
 
+import { _OpenWebpageButton } from "../_components/_atoms/_open_webpage_button/_OpenWebpageButton";
+
 export const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
@@ -148,7 +149,7 @@ export const DeeplAuthKeyContainer = (props) => {
         <TemplatesContainerWrapper>
             <div className={styles.deepl_auth_key_label_section}>
                 <LabelComponent label={props.label} desc={props.desc} />
-                <OpenWebpage_DeeplAuthKey {...props} />
+                <_OpenWebpageButton {...props} />
             </div>
             <DeeplAuthKey {...props} />
         </TemplatesContainerWrapper>