feat: add custom classes to UI components for consistent styling

Author: SerVitasik

adminforth/spa/src/afcl/Button.vue

@@ -2,7 +2,7 @@
   <button 
     v-bind="$attrs"
     type="submit" 
-    class="flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
+    class="afcl-button flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
       focus:ring-4 focus:outline-none focus:ring-lightPrimary focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkPrimary dark:focus:ring-opacity-50"
     :class="{
       'cursor-default': props.disabled,

adminforth/spa/src/afcl/Checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center h-5" :class="{'opacity-50' : props.disabled}">
+  <div class="afcl-checkbox flex items-center h-5" :class="{'opacity-50' : props.disabled}">
     <input :id="id" 
       ref="rememberInput"
       type="checkbox"

adminforth/spa/src/afcl/Link.vue

@@ -2,7 +2,7 @@
   <router-link 
     v-bind="$attrs"
     :to="to"
-    class="text-lightPrimary underline dark:text-darkPrimary hover:no-underline hover:brightness-110
+    class="afcl-link text-lightPrimary underline dark:text-darkPrimary hover:no-underline hover:brightness-110
       cursor-pointer"
   >
     <slot></slot>

adminforth/spa/src/afcl/LinkButton.vue

@@ -3,7 +3,7 @@
     v-bind="$attrs"
     :to="props.to"
     type="submit" 
-    class="flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
+    class="afcl-link-button flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
       focus:ring-4 focus:outline-none focus:ring-lightPrimary focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkPrimary dark:focus:ring-opacity-50"
     :class="{
       'cursor-default': props.disabled,

adminforth/spa/src/afcl/Select.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative inline-block afcl-select" ref="internalSelect" 
+  <div class="afcl-select relative inline-block" ref="internalSelect" 
     :class="{'opacity-50': readonly}"
   >
     <div class="relative">

adminforth/spa/src/afcl/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="triggerEl" class="inline-flex items-center">
+  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center">
       <slot></slot>
   </div>
   <div