diff --git a/src-ui/assets/folder_open.svg b/src-ui/assets/folder_open.svg
new file mode 100644
index 00000000..d1917059
--- /dev/null
+++ b/src-ui/assets/folder_open.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
index 0e5d4f84..8913d80c 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
@@ -1,4 +1,5 @@
import { useTranslation } from "react-i18next";
+import FolderOpenSvg from "@images/folder_open.svg?react";
import { useSettingBox } from "../components/useSettingBox";
import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
@@ -16,6 +17,7 @@ export const Appearance = () => {
RadioButtonContainer,
DeeplAuthKeyContainer,
MessageFormatContainer,
+ ActionButtonContainer,
} = useSettingBox();
const selectFunction = (selected_data) => {
@@ -56,6 +58,8 @@ export const Appearance = () => {
+ {}}/>
+
>
);
};
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.jsx
new file mode 100644
index 00000000..09aab899
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.jsx
@@ -0,0 +1,11 @@
+import styles from "./ActionButton.module.scss";
+
+export const ActionButton = ({IconComponent, OnclickFunction}) => {
+ return (
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.module.scss
new file mode 100644
index 00000000..0685922d
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/action_button/ActionButton.module.scss
@@ -0,0 +1,14 @@
+.button_wrapper {
+ padding: 1.6rem;
+ border-radius: 0.4rem;
+ &:hover {
+ background-color: var(--dark_825_color);
+ }
+ &:active {
+ background-color: var(--dark_900_color);
+ }
+}
+
+.button_svg {
+ width: 2.4rem;
+}
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
index 6f78efcd..c6b4e409 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
@@ -12,6 +12,7 @@ import { ThresholdComponent } from "./threshold_component/ThresholdComponent";
import { RadioButton } from "./radio_button/RadioButton";
import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
import { MessageFormat } from "./message_format/MessageFormat";
+import { ActionButton } from "./action_button/ActionButton";
export const useSettingBox = () => {
const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
@@ -114,6 +115,17 @@ export const useSettingBox = () => {
);
};
+
+ const ActionButtonContainer = (props) => {
+ return (
+
+ );
+ };
+
+
return {
DropdownMenuContainer,
SliderContainer,
@@ -124,5 +136,6 @@ export const useSettingBox = () => {
RadioButtonContainer,
DeeplAuthKeyContainer,
MessageFormatContainer,
+ ActionButtonContainer,
};
};
\ No newline at end of file