From e9d4ce2012649dea34caeb91a5d2a1753a50cb46 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 2 Sep 2024 07:51:24 +0900
Subject: [PATCH] [Update] Config Page: Adjust Go back button to be a bit
 smaller and expand clickable range.

---
 .../SettingSection.module.scss                |  2 +-
 src-ui/app/config_page/topbar/Topbar.jsx      |  3 +-
 .../app/config_page/topbar/Topbar.module.scss | 44 +++++++++++--------
 src-ui/utils/variables.css                    |  2 +-
 4 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/SettingSection.module.scss b/src-ui/app/config_page/setting_section/SettingSection.module.scss
index 5b4c76e3..ac4abae7 100644
--- a/src-ui/app/config_page/setting_section/SettingSection.module.scss
+++ b/src-ui/app/config_page/setting_section/SettingSection.module.scss
@@ -5,5 +5,5 @@
 }
 
 .container {
-    margin: 6rem 4rem 16rem 3.2rem;
+    margin: 0rem 4rem 16rem 3.2rem;
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/Topbar.jsx b/src-ui/app/config_page/topbar/Topbar.jsx
index b70f559b..716ba49d 100644
--- a/src-ui/app/config_page/topbar/Topbar.jsx
+++ b/src-ui/app/config_page/topbar/Topbar.jsx
@@ -11,7 +11,6 @@ import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 export const Topbar = () => {
     const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
     const closeConfigPage = () => {
-        console.log("close");
         updateIsOpenedConfigPage(false);
 
     };
@@ -24,6 +23,8 @@ export const Topbar = () => {
             <div className={styles.wrapper} onClick={() => closeConfigPage()}>
                 <div className={styles.go_back_button}>
                     <ArrowLeftSvg className={styles.arrow_left_svg} />
+                </div>
+                <div className={styles.go_back_text_wrapper}>
                     <p className={styles.go_back_text}>Go Back</p>
                 </div>
 
diff --git a/src-ui/app/config_page/topbar/Topbar.module.scss b/src-ui/app/config_page/topbar/Topbar.module.scss
index c2c196cc..c34633e0 100644
--- a/src-ui/app/config_page/topbar/Topbar.module.scss
+++ b/src-ui/app/config_page/topbar/Topbar.module.scss
@@ -23,18 +23,19 @@
 
     &:hover {
         height: 2rem;
-    }
-
-    &:hover .go_back_button {
-        top: -11rem;
-        transform: rotate(35deg);
-    }
-    &:hover .arrow_left_svg {
-        color: var(--dark_400_color);
-    }
-    &:hover .go_back_text {
-        color: var(--dark_400_color);
-        transform: rotate(-20deg);
+        .go_back_button {
+            top: -12rem;
+            transform: rotate(35deg);
+        }
+        .arrow_left_svg {
+            color: var(--dark_400_color);
+        }
+        .go_back_text {
+            color: var(--dark_400_color);
+        }
+        .go_back_text_wrapper {
+            padding-top: 8.2rem;
+        }
     }
 
 }
@@ -45,14 +46,14 @@
     border-radius: 1.2rem;
     background-color: var(--dark_850_color);
     position: absolute;
-    top: -12rem;
+    top: -13.2rem;
     right: 10rem;
     transform: rotate(30deg);
     transition: all 0.3s ease;
 }
 
 .arrow_left_svg {
-    height: 3.2rem;
+    height: 2.8rem;
     position: absolute;
     right: 1rem;
     bottom: 0.4rem;
@@ -60,12 +61,19 @@
     transform: rotate(-100deg);
 }
 
+.go_back_text_wrapper {
+    position: absolute;
+    top: -4.6rem;
+    right: 0rem;
+    padding-top: 7.2rem;
+    padding-bottom: 1rem;
+    width: 15.2rem;
+    transition: all 0.3s ease;
+}
+
 .go_back_text {
     color: var(--dark_650_color);
     font-size: 1.6rem;
-    position: absolute;
-    bottom: 4.6rem;
-    right: -7rem;
-    transform: rotate(-30deg);
+    padding-left: 4rem;
     transition: all 0.3s ease;
 }
\ No newline at end of file
diff --git a/src-ui/utils/variables.css b/src-ui/utils/variables.css
index 34273744..46dd0299 100644
--- a/src-ui/utils/variables.css
+++ b/src-ui/utils/variables.css
@@ -47,5 +47,5 @@
 
     --main_page_topbar_height: 4.8rem;
     --config_page_sidebar_width: 22rem;
-    --config_page_topbar_height: 5.2rem;
+    --config_page_topbar_height: 8rem;
 }
\ No newline at end of file