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

---
 src/components/Settings/Settings.vue                   | 10 +++++-----
 .../Settings/components/SettingsItemGroup.vue          |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 5f0b7fbe..6c4164fc 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -156,7 +156,8 @@ function setCurrentTitle() {
 
       <div
         class="settings-content"
-        relative overflow="x-hidde" w-full h-full bg="$bew-elevated-solid-1"
+        style="backdrop-filter: blur(60px) 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>
@@ -165,13 +166,12 @@ function setCurrentTitle() {
             pos="sticky top-0 left-0" p="x-12"
             z-1 rounded="t-$bew-radius"
             style="
-            background: linear-gradient(var(--bew-elevated-solid-1), transparent);
-            text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
-          "
+              text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
+            "
           >
             <!-- Mask -->
             <div
-              pos="absolute top-0 left-0" w-inherit h-inherit backdrop="blur-6px" pointer-events-none
+              pos="absolute top-0 left-0" w-inherit h-inherit pointer-events-none
               style="mask-image: linear-gradient(to bottom,  black 70%, transparent);"
               z--1 rounded-inherit
             />
diff --git a/src/components/Settings/components/SettingsItemGroup.vue b/src/components/Settings/components/SettingsItemGroup.vue
index e693d1f9..5949a697 100644
--- a/src/components/Settings/components/SettingsItemGroup.vue
+++ b/src/components/Settings/components/SettingsItemGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  title: string
+  title?: string
   desc?: string
 }>()
 </script>
@@ -16,7 +16,7 @@ defineProps<{
 
     <main
       border="1 solid $bew-border-color" mt-2 px-4 mx--4 rounded="$bew-radius"
-      bg="dark:$bew-fill-1"
+      bg="$bew-fill-1"
     >
       <slot />
     </main>