From b81fbbd25d46fc73acaab0c260a1e5122c821c4f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 10 Mar 2024 01:53:32 -0300
Subject: [PATCH] feat(Settings): redesign settings panel

---
 src/components/Settings/Settings.vue                 | 12 +++++++-----
 .../Settings/components/SettingsItemGroup.vue        |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 6c4164fc..955726e3 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -117,14 +117,16 @@ function setCurrentTitle() {
       flex justify-between items-center
     >
       <aside
-        class="group" shrink-0 p="x-4" pos="absolute left--42px" z-2
+        class="group"
         :style="{
           pointerEvents: preventCloseSettings ? 'none' : 'unset',
         }"
+        shrink-0 p="x-4" pos="absolute left--84px" z-2
       >
         <ul
-          flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-2" p-2 shadow="$bew-shadow-3"
+          flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-1 hover:$bew-elevated-2" p-2 shadow="$bew-shadow-3"
           scale="group-hover:105" duration-300 overflow-hidden antialiased
+          border="1 $bew-border-color"
           backdrop-glass
         >
           <!-- mask -->
@@ -156,14 +158,14 @@ function setCurrentTitle() {
 
       <div
         class="settings-content"
-        style="backdrop-filter: blur(60px) saturate(180%);"
+        style="backdrop-filter: blur(40px) saturate(180%);"
         relative overflow="x-hidde" w-full h-full bg="$bew-elevated-1"
         shadow="$bew-shadow-4" rounded="$bew-radius"
       >
         <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer>
           <header
             flex justify-between items-center w-full h-80px
-            pos="sticky top-0 left-0" p="x-12"
+            pos="sticky top-0 left-0" p="x-11"
             z-1 rounded="t-$bew-radius"
             style="
               text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
@@ -188,7 +190,7 @@ function setCurrentTitle() {
             </div>
           </header>
 
-          <main pos="absolute top-80px left-0" w-full min-h="[calc(100%-80px)]" p="x-13 b-8">
+          <main pos="absolute top-80px left-0" w-full min-h="[calc(100%-80px)]" p="x-12 b-8">
             <!-- <div h-80px mt--8 /> -->
 
             <Transition name="page-fade">
diff --git a/src/components/Settings/components/SettingsItemGroup.vue b/src/components/Settings/components/SettingsItemGroup.vue
index 5949a697..eda41960 100644
--- a/src/components/Settings/components/SettingsItemGroup.vue
+++ b/src/components/Settings/components/SettingsItemGroup.vue
@@ -15,7 +15,7 @@ defineProps<{
     </p>
 
     <main
-      border="1 solid $bew-border-color" mt-2 px-4 mx--4 rounded="$bew-radius"
+      mt-2 px-4 mx--4 rounded="$bew-radius"
       bg="$bew-fill-1"
     >
       <slot />