feat: IconButton new states and new spinner component

* Replace CircleSpinner to FidgetSpinner

app/assets/styles/_base.scss

@@ -68,7 +68,8 @@
 
   // Buttons
   --button-color-text: ghostwhite;
-
+  --button-color-disabled: #ccc;
+  --button-color-disabled-text: #666;
   // Inputs
   --input-height: 3rem;
   --input-spacing-horizontal: 1rem;
@@ -81,6 +82,7 @@
   --input-color-placeholder: #8c8c8c;
   --input-color-background: ghostwhite;
 
+
   // Secondary inputs
   --input-secondary-color-main: ghostwhite;
   --input-secondary-color-text: #287892;

app/components/FidgetSpinner.vue

@@ -0,0 +1,22 @@
+<template>
+  <Icon
+    name="tabler:fidget-spinner"
+    :class="$style.component"
+  />
+</template>
+
+<style module>
+  @keyframes spin {
+    0% {
+      rotate: 0;
+    }
+
+    100% {
+      rotate: 360deg;
+    }
+  }
+
+  .component {
+    animation: spin 1s linear infinite;
+  }
+</style>

app/components/IconButton.vue

@@ -1,26 +1,41 @@
 <template>
-  <button :class="[$style.button, {
-    [size]: true,
-    secondary
-  }]">
+  <button
+    :class="[$style.button, {
+      [size]: true,
+      secondary
+    }]"
+    :disabled="isButtonDisabled"
+  >
+    <FidgetSpinner v-if="loading" />
+
     <Icon
-      class="icon"
+      v-else
       :name="iconName"
       size="1em"
     />
   </button>
 </template>
 
 <script lang="ts" setup>
-   interface Props {
+  import FidgetSpinner from './FidgetSpinner.vue';
+
+  interface Props {
     readonly iconName: string;
+    readonly loading?: boolean;
+    readonly disabled?: boolean;
     readonly secondary?: boolean;
     readonly size?: 'm' | 's' | 'xs';
   }
 
   const {
-    size = 'm'
-  } = defineProps<Props>();
+    size = 'm',
+    loading = false,
+    disabled = false
+  } = defineProps<Props>()
+
+  const isButtonDisabled = computed(() => {
+    return disabled || loading
+  });
 </script>
 
 <style module>
@@ -74,5 +89,11 @@
         background-color: var(--input-secondary-color-active);
       }
     }
+
+    &:disabled {
+      background-color: var(--button-color-disabled);
+      color: var(--button-color-disabled-text);
+      cursor: not-allowed;
+    }
   }
 </style>

app/components/PerdSearch/PerdSearch.vue

@@ -23,7 +23,12 @@
       {{ label }}
     </label>
 
-    <CircleSpinner :class="[$style.spinner, { visible: searching }]" />
+    <FidgetSpinner
+      :class="[$style.spinner, {
+        visible: searching
+      }]"
+      size="1.5em"
+    />
 
     <div
       :class="[$style.dropdown, {
@@ -61,7 +66,7 @@
 <script lang="ts" setup generic="Option">
   import type { InputHTMLAttributes } from 'vue';
   import { watchDebounced, onClickOutside } from '@vueuse/core';
-  import CircleSpinner from '~/components/CircleSpinner.vue';
+  import FidgetSpinner from '~/components/FidgetSpinner.vue';
   import SearchOption from './SearchOption.vue';
   import EmptyOption from './EmptyOption.vue';
   import DefaultOption from './DefaultOption.vue';

app/components/dialogs/CreateChecklistDialog.vue

@@ -33,15 +33,15 @@
     </form>
 
     <div :class="[$style.loader, { visible: loading }]">
-      <CircleSpinner />
+      <FidgetSpinner size="36px" />
     </div>
   </ModalDialog>
 </template>
 
 <script lang="ts" setup>
   import { limits } from '~~/constants';
   import PerdButton from '~/components/PerdButton.vue'
-  import CircleSpinner from '~/components/CircleSpinner.vue'
+  import FidgetSpinner from '~/components/FidgetSpinner.vue'
   import ModalDialog from './ModalDialog.vue'
 
   interface Props {
@@ -114,7 +114,7 @@
     inset: 0;
     justify-content: center;
     align-items: center;
-    background-color: rgb(0 0 0 / 25%);
+    background-color: rgb(0 0 0 / 35%);
     border-radius: var(--border-radius-24);
     transition:
       opacity 0.3s ease-out,

app/pages/auth/twitch.vue

@@ -9,8 +9,9 @@
           💀
         </div>
 
-        <CircleSpinner
+        <FidgetSpinner
           v-else
+          size="32px"
         />
       </div>
 
@@ -34,7 +35,7 @@
 
 <script lang="ts" setup>
   import { startPagePath } from '~~/constants'
-  import CircleSpinner from '~/components/CircleSpinner.vue'
+  import FidgetSpinner from '~/components/FidgetSpinner.vue'
   import PerdLink from '~/components/PerdLink.vue';
 
   definePageMeta({