From 14e033b2e97b5f3639b1e6f4972520034a25bd4e Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 30 Jul 2024 08:36:06 +0900
Subject: [PATCH] [Update] Config Window: Setting Box: DropdownMenu: Adjust
 design. add arrow icon that can toggle and border-radius. Also change the
 open dropdown menu function to the toggle function.

---
 .../components/dropdown_menu/DropdownMenu.jsx   | 17 ++++++++++++-----
 .../dropdown_menu/DropdownMenu.module.scss      | 16 +++++++++++++++-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
index 24ac8769..6cc32ff7 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
@@ -1,14 +1,18 @@
 import styles from "./DropdownMenu.module.scss";
 
 import clsx from "clsx";
-
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const DropdownMenu = (props) => {
 
     const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
-    const openDropdownMenu = () => {
-        updateIsOpenedDropdownMenu(props.dropdown_id);
+    const toggleDropdownMenu = () => {
+        if (currentIsOpenedDropdownMenu === props.dropdown_id) {
+            updateIsOpenedDropdownMenu("");
+        } else {
+            updateIsOpenedDropdownMenu(props.dropdown_id);
+        }
     };
 
     const selectValue = (key) => {
@@ -27,17 +31,20 @@ export const DropdownMenu = (props) => {
         [styles["is_loading"]]: (props.state === "loading") ? true : false
     });
 
+    const arrow_class_names = clsx(styles["arrow_left_svg"], {
+        [styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
+    });
 
     return (
         <div className={styles.container}>
-            <div className={dropdown_toggle_button_class_name} onClick={openDropdownMenu}>
+            <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu}>
                 {(props.state === "loading")
                     ? <p className={styles.dropdown_selected_text}>Loading...</p>
                     : <p className={styles.dropdown_selected_text}>{props.list[props.selected_id]}</p>
                 }
                 {(props.state === "loading")
                     ? <span className={styles.loader}></span>
-                    : null
+                    : <ArrowLeftSvg className={arrow_class_names} />
                 }
             </div>
             <div className={dropdown_content_wrapper_class_name}>
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
index 98fd69d0..eb0f96cd 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
@@ -8,7 +8,9 @@
     position: relative;
     background-color: var(--dark_925_color);
     min-width: 20rem;
-    padding: 0.6rem 0.8rem;
+    padding: 0.6rem 1rem;
+    cursor: pointer;
+    border-radius: 0.4rem;
     &:hover {
         background-color: var(--dark_850_color);
     }
@@ -47,6 +49,7 @@
 .value_button {
     background-color: var(--dark_875_color);
     padding: 0.8rem;
+    cursor: pointer;
     &:hover {
         background-color: var(--dark_800_color);
     }
@@ -61,4 +64,15 @@
 
 .loader {
     @include loader(2rem, 0.2rem, right, 0);
+}
+
+.arrow_left_svg {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(-50%, -50%) rotate(-90deg);
+    width: 1.4rem;
+    &.is_opened {
+        transform: translate(-50%, -50%) rotate(90deg);
+    }
 }
\ No newline at end of file