From e11c9d450d7c0073c58d0ee10f07a19cbf5b6820 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 16 Jul 2023 15:34:59 +0800
Subject: [PATCH] refactor: utilize `backdrop-glass` shortcut to achieve
 frosted glass

---
 src/components/Select.vue                        | 4 ++--
 src/components/Topbar/TopbarChannelsPop.vue      | 2 +-
 src/components/Topbar/TopbarFavoritesPop.vue     | 2 +-
 src/components/Topbar/TopbarHistoryPop.vue       | 2 +-
 src/components/Topbar/TopbarMomentsPop.vue       | 2 +-
 src/contentScripts/views/App.vue                 | 2 +-
 src/contentScripts/views/Favorites/Favorites.vue | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 2699753c..4208ad02 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -85,8 +85,8 @@ function onMouseEnter() {
       <div
         v-if="showOptions"
         pos="absolute"
-        bg="$bew-content-1"
-        style="backdrop-filter: var(--bew-filter-glass); box-shadow: var(--bew-shadow-2);"
+        bg="$bew-elevated-2"
+        backdrop-glass shadow="$bew-shadow-2"
         p="2"
         m="t-2"
         rounded="$bew-radius"
diff --git a/src/components/Topbar/TopbarChannelsPop.vue b/src/components/Topbar/TopbarChannelsPop.vue
index 8773023d..6c7b2383 100644
--- a/src/components/Topbar/TopbarChannelsPop.vue
+++ b/src/components/Topbar/TopbarChannelsPop.vue
@@ -42,7 +42,7 @@ const genres = [
 
 <template>
   <div
-    style="backdrop-filter: var(--bew-filter-glass); box-shadow: var(--bew-shadow-3);"
+    backdrop-glass shadow="$bew-shadow-3"
     flex="~"
     p="4"
     bg="$bew-content-1"
diff --git a/src/components/Topbar/TopbarFavoritesPop.vue b/src/components/Topbar/TopbarFavoritesPop.vue
index 2dc0b090..c75a77ff 100644
--- a/src/components/Topbar/TopbarFavoritesPop.vue
+++ b/src/components/Topbar/TopbarFavoritesPop.vue
@@ -168,7 +168,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       bg="$bew-content-1"
       z="2"
       un-border="!rounded-t-$bew-radius"
-      style="backdrop-filter: var(--bew-filter-glass)"
+      backdrop-glass
     >
       <h3 cursor="pointer" font-600 @click="scrollToTop(favoriteVideosWrap, 300)">
         {{ activatedFavoriteTitle }}
diff --git a/src/components/Topbar/TopbarHistoryPop.vue b/src/components/Topbar/TopbarHistoryPop.vue
index e5e739cb..7ec7693f 100644
--- a/src/components/Topbar/TopbarHistoryPop.vue
+++ b/src/components/Topbar/TopbarHistoryPop.vue
@@ -199,7 +199,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       bg="$bew-content-1"
       z="2"
       border="!rounded-t-$bew-radius"
-      style="backdrop-filter: var(--bew-filter-glass)"
+      backdrop-glass
     >
       <div flex="~">
         <div
diff --git a/src/components/Topbar/TopbarMomentsPop.vue b/src/components/Topbar/TopbarMomentsPop.vue
index 06923447..faf7a8ac 100644
--- a/src/components/Topbar/TopbarMomentsPop.vue
+++ b/src/components/Topbar/TopbarMomentsPop.vue
@@ -284,7 +284,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       bg="$bew-content-1"
       z="1"
       border="!rounded-t-$bew-radius"
-      style="backdrop-filter: var(--bew-filter-glass)"
+      backdrop-glass
     >
       <div flex="~">
         <div
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 5b98807f..0f35f313 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -202,7 +202,7 @@ function setAppAppearance() {
             p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
             rounded="$bew-radius" border="1px $bew-fill-1"
             shadow="$bew-shadow-2"
-            style="backdrop-filter: var(--bew-filter-glass)"
+            backdrop-glass
           >
             <Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
               <button
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 1f10b262..f37c11d4 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -168,7 +168,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       bg="$bew-content-1"
       z="2"
       un-border="!rounded-t-$bew-radius"
-      style="backdrop-filter: var(--bew-filter-glass)"
+      backdrop-glass
     >
       <h3 cursor="pointer" font-600 @click="scrollToTop(favoriteVideosWrap, 300)">
         {{ activatedFavoriteTitle }}