From 8d7f8174cf7c615d5beff1698e954db1458e223c Mon Sep 17 00:00:00 2001
From: hakadao <a578457889743@gmail.com>
Date: Fri, 14 Jun 2024 01:02:25 +0800
Subject: [PATCH] feat: add inner glow effect in some components

---
 src/components/BackToTopOrRefreshButton.vue | 7 ++++---
 src/components/Dock/Dock.vue                | 6 +++---
 src/components/SearchBar/SearchBar.vue      | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/BackToTopOrRefreshButton.vue b/src/components/BackToTopOrRefreshButton.vue
index d37feb92..600cf731 100644
--- a/src/components/BackToTopOrRefreshButton.vue
+++ b/src/components/BackToTopOrRefreshButton.vue
@@ -16,15 +16,16 @@ const { reachTop } = useBewlyApp()
     <Button
       size="small"
       center
+      round
       style="
         --b-button-width: 45px;
         --b-button-height: 45px;
         --b-button-border-width: 1px;
         --b-button-color: var(--bew-elevated-1);
         --b-button-color-hover: var(--bew-elevated-1-hover);
-        --b-button-shadow: var(--bew-shadow-1);
-        --b-button-shadow-hover: var(--bew-shadow-2);
-        --b-button-shadow-active: var(--bew-shadow-1);
+        --b-button-shadow: var(--bew-shadow-1), var(--bew-shadow-edge-glow-1);
+        --b-button-shadow-hover: var(--bew-shadow-2), var(--bew-shadow-edge-glow-1);
+        --b-button-shadow-active: var(--bew-shadow-1), var(--bew-shadow-edge-glow-1);
         backdrop-filter: var(--bew-filter-glass-1);
       "
       transform-gpu
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 07720a7f..5bc3d42c 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -258,8 +258,8 @@ function handleBackToTopOrRefresh() {
     --uno: "duration-300 ease-in-out transform-gpu";
     --uno: "p-2 m-2 bg-$bew-content-2 dark:bg-$bew-elevated-1";
     --uno: "flex flex-col gap-2 shrink-0";
-    --uno: "rounded-full border-$bew-border-color";
-    --uno: "shadow-$bew-shadow-2";
+    --uno: "rounded-full border-1 border-$bew-border-color";
+    box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
     backdrop-filter: var(--bew-filter-glass-1);
   }
 
@@ -274,7 +274,7 @@ function handleBackToTopOrRefresh() {
     --uno: "grid place-items-center";
     --uno: "filter-$bew-filter-glass-1";
     --uno: "bg-$bew-elevated-1 hover:bg-$bew-content-1-hover";
-    --uno: "rounded-full shadow-$bew-shadow-2";
+    --uno: "rounded-full shadow-$bew-shadow-2 border-1 border-$bew-border-color";
 
     backdrop-filter: var(--bew-filter-glass-1);
     transition:
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 65eb0752..b26e035c 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -348,7 +348,7 @@ async function handleClearSearchHistory() {
   --b-search-bar-color-focus: var(--b-search-bar-color);
 
   @mixin card-content {
-    --uno: "text-base outline-none w-full bg-$b-search-bar-color transform-gpu";
+    --uno: "text-base outline-none w-full bg-$b-search-bar-color transform-gpu border-1 border-$bew-border-color";
     backdrop-filter: var(--bew-filter-glass-1);
     box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
   }