refactor: refactor button attribute implementation

* refactor: refactor button usage attribute on page utilizing the button

src/components/BackToTopAndRefreshButtons.vue

@@ -9,7 +9,7 @@ const emit = defineEmits(['refresh', 'back-to-top'])
   >
     <Button
       size="small"
-      frosted-glass
+      backdrop-glass
       center
       style="
         --b-button-width: 45px;

src/components/Button.vue

@@ -8,8 +8,6 @@ interface Props {
   | 'warning'
   | 'error'
   size?: 'small' | 'medium' | 'large'
-  /** @description enable frosted glass effect */
-  frostedGlass?: boolean
   color?: string
   textColor?: string
   strong?: boolean
@@ -18,8 +16,7 @@ interface Props {
   center?: boolean
 }
 
-// const props = withDefaults(defineProps<Props>(), {})
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits(['click'])
 
@@ -31,13 +28,12 @@ function handleClick(evt: MouseEvent) {
 <template>
   <button
     class="b-button"
-    :class="`
-      b-button--type-${type ?? 'default'}
-      b-button--size-${size ?? 'medium'}
-      ${frostedGlass ? 'frosted-glass' : ''}
-      ${strong ? 'b-button--strong' : ''}
-      ${color || textColor ? 'b-button--custom-color' : ''}
-    `"
+    :class="[
+      `b-button--type-${type ?? 'default'}`,
+      `b-button--size-${size ?? 'medium'}`,
+      `${strong ? 'b-button--strong' : ''}`,
+      `${color || textColor ? 'b-button--custom-color' : ''}`,
+    ]"
     :style="{
       'backgroundColor': color,
       'color': textColor,
@@ -81,12 +77,6 @@ function handleClick(evt: MouseEvent) {
       --at-apply: text-size-$b-button-icon-size
     }
 
-    &.frosted-glass {
-      --b-button-color: var(--bew-content-1);
-      --b-button-color-hover: var(--bew-content-1-hover);
-      backdrop-filter: var(--bew-filter-glass);
-    }
-
   &--type-default {
   }
 
@@ -129,6 +119,5 @@ function handleClick(evt: MouseEvent) {
   &--strong {
     --at-apply: fw-800;
   }
-
 }
 </style>

src/components/RightSideButtons.vue

@@ -22,16 +22,29 @@ function toggleDark() {
   <div pos="fixed top-0 right-6px" h-full flex items-center z-1 pointer-events-none>
     <div flex="~ gap-2 col" pointer-events-auto>
       <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
-        <Button size="small" round shadow="$bew-shadow-1" w-45px important-h-45px @click="toggleDark()">
+        <Button class="ctrl-btn" center size="small" round backdrop-glass @click="toggleDark()">
           <line-md:sunny-outline-to-moon-transition v-if="currentAppColorScheme === 'dark'" text-xl shrink-0 lh-0 />
           <line-md:moon-to-sunny-outline-transition v-else text-xl shrink-0 lh-0 />
         </Button>
       </Tooltip>
       <Tooltip :content="$t('dock.settings')" placement="left">
-        <Button size="small" round shadow="$bew-shadow-1" w-45px important-h-45px @click="emit('settings-visibility-change')">
+        <Button class="ctrl-btn" center size="small" round backdrop-glass @click="emit('settings-visibility-change')">
           <mingcute:settings-3-line text-xl shrink-0 lh-0 />
         </Button>
       </Tooltip>
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.ctrl-btn {
+  --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);
+}
+</style>