refactor: refactor button attribute implementation

* refactor: refactor button usage attribute on page utilizing the button
* feat: add more animation effects for `BackToTopAndRefreshButton`

src/components/BackToTopAndRefreshButtons.vue

@@ -7,23 +7,26 @@ const emit = defineEmits(['refresh', 'back-to-top'])
   <div
     pos="fixed right-24 bottom-4" z-4
   >
-    <!-- refresh button -->
     <Button
-      v-if="showRefreshButton"
       size="small"
-      frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px
-      @click="emit('refresh')"
+      frosted-glass
+      center
+      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-2);
+        --b-button-shadow: var(--bew-shadow-1);
+        --b-button-shadow-hover: var(--bew-shadow-2);
+        --b-button-shadow-active: var(--bew-shadow-1);
+      "
+      @click="showRefreshButton ? emit('refresh') : emit('back-to-top')"
     >
-      <tabler:refresh text-lg shrink-0 />
-    </Button>
-    <!-- back to top button -->
-    <Button
-      v-else
-      size="small"
-      frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px mt-2
-      @click="emit('back-to-top')"
-    >
-      <tabler:arrow-big-up text-lg shrink-0 />
+      <Transition name="fade">
+        <line-md:rotate-270 v-if="showRefreshButton" text-lg shrink-0 rotate-90 absolute />
+        <line-md:arrow-small-up v-else text-lg shrink-0 absolute />
+      </Transition>
     </Button>
   </div>
 </template>

src/components/Button.vue

@@ -62,13 +62,20 @@ function handleClick(evt: MouseEvent) {
   --b-button-padding: 14px;
   --b-button-font-size: 14px;
   --b-button-icon-size: 15px;
-  --b-button-height: 35px;
   --b-button-width: fit-content;
+  --b-button-height: 35px;
+  --b-button-border-width: 0px;
+  --b-button-border-color: var(--bew-border-color);
+  --b-button-shadow: none;
+  --b-button-shadow-hover: var(--b-button-shadow);
+  --b-button-shadow-active: var(--b-button-shadow);
 
-  --at-apply: bg-$b-button-color hover:bg-$b-button-color-hover
+  --at-apply: bg-$b-button-color hover:bg-$b-button-color-hover box-border
     rounded-$b-button-radius p-x-$b-button-padding transform-gpu active:scale-95
     duration-300 flex items-center gap-2 text-size-$b-button-font-size
-    text-$b-button-text-color lh-$b-button-height h-$b-button-height;
+    text-$b-button-text-color lh-$b-button-height h-$b-button-height
+    border-solid border-width-$b-button-border-width border-$b-button-border-color
+    shadow-$b-button-shadow hover:shadow-$b-button-shadow-hover active:shadow-$b-button-shadow-active;
 
     & svg {
       --at-apply: text-size-$b-button-icon-size
@@ -102,9 +109,9 @@ function handleClick(evt: MouseEvent) {
   }
 
   &--size-small {
-    --b-button-padding: 6px;
-    --b-button-font-size: 14px;
-    --b-button-icon-size: 14px;
+    --b-button-padding: 12px;
+    --b-button-font-size: 12px;
+    --b-button-icon-size: 13px;
     --b-button-height: 30px;
   }
 

src/contentScripts/views/Anime/Anime.vue

@@ -115,7 +115,9 @@ function getPopularAnimeList() {
           </h3>
           <Button
             size="small"
-            shadow="$bew-shadow-1"
+            style="
+              --b-button-shadow: var(--bew-shadow-1);
+            "
             @click="openLinkToNewTab(`https://space.bilibili.com/${getUserID() ?? 0}/bangumi`)"
           >
             {{ $t('common.view_all') }}
@@ -164,7 +166,9 @@ function getPopularAnimeList() {
           </h3>
           <Button
             size="small"
-            shadow="$bew-shadow-1"
+            style="
+              --b-button-shadow: var(--bew-shadow-1);
+            "
             @click="openLinkToNewTab(`https://www.bilibili.com/v/popular/rank/bangumi`)"
           >
             {{ $t('common.view_all') }}

src/contentScripts/views/History/History.vue

@@ -495,7 +495,13 @@ function jumpToLoginPage() {
           w-full
           @keyup.enter="handleSearch"
         >
-        <Button shadow="$bew-shadow-1" block @click="handleClearAllWatchHistory">
+        <Button
+          block
+          style="
+            --b-button-shadow: var(--bew-shadow-1);
+          "
+          @click="handleClearAllWatchHistory"
+        >
           <template #left>
             <tabler:trash />
           </template>
@@ -503,8 +509,10 @@ function jumpToLoginPage() {
         </Button>
         <Button
           v-if="!historyStatus"
-          shadow="$bew-shadow-1"
           block
+          style="
+            --b-button-shadow: var(--bew-shadow-1);
+          "
           @click="handlePauseWatchHistory"
         >
           <template #left>
@@ -512,7 +520,14 @@ function jumpToLoginPage() {
           </template>
           {{ $t('history.pause_watch_history') }}
         </Button>
-        <Button v-else shadow="$bew-shadow-1" block @click="handleTurnOnWatchHistory">
+        <Button
+          v-else
+          block
+          style="
+            --b-button-shadow: var(--bew-shadow-1);
+          "
+          @click="handleTurnOnWatchHistory"
+        >
           <template #left>
             <ph:play-circle-bold />
           </template>