fix: enhance Button and ProgressBar components with new styles and variants; refactor AcceptModal to use Button component

Author: NoOne7135

adminforth/spa/src/afcl/Button.vue

@@ -2,15 +2,16 @@
   <button 
     v-bind="$attrs"
     type="submit" 
-    class="afcl-button flex items-center justify-center gap-1 text-lightButtonsText bg-lightButtonsBackground border border-lightButtonsBorder dark:bg-darkButtonsBackground hover:bg-lightButtonsHover hover:border-lightButtonsBorderHover
-      focus:ring-4 focus:outline-none focus:ring-lightButtonFocusRing focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover"
+    class="afcl-button flex items-center justify-center gap-1 border focus:ring-4 focus:outline-none focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
     :class="{
+      'text-lightButtonsText bg-lightButtonsBackground border-lightButtonsBorder dark:bg-darkButtonsBackground hover:bg-lightButtonsHover hover:border-lightButtonsBorderHover focus:ring-lightButtonFocusRing dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover': currentVariant === 'primary',
       'cursor-default opacity-50 pointer-events-none': props.disabled,
       'active brightness-200 hover:brightness-150'  : props.active,
       'text-lightSecondaryContrast/70 bg-lightSecondary border-lightSecondaryContrast/30 dark:bg-darkSecondary hover:bg-lightSecondary/60 hover:border-lightSecondaryContrast/60 focus:ring-lightSecondary dark:focus:ring-darkSecondary/40 dark:text-darkSecondaryContrast dark:border-darkSecondaryContrast/40 dark:hover:bg-darkSecondary/60 dark:hover:border-white/60': currentVariant === 'secondary',
+      'text-lightAcceptModalConfirmButtonText dark:text-darkAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground dark:bg-darkAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover focus:ring-lightAcceptModalConfirmButtonFocus dark:focus:ring-darkAcceptModalConfirmButtonFocus border-transparent hover:border-transparent': currentVariant === 'danger',
     }"
   >
-    <Spinner v-if="props.loader" class="w-4 h-4 text-lightButtonsText dark:text-darkButtonsText fill-lightButtonsBackground dark:fill-darkPrimary" />
+    <Spinner v-if="props.loader" class="w-4 h-4 text-lightButtonsText dark:text-darkButtonsText fill-lightPrimary dark:fill-darkPrimary" />
     <slot></slot>
   </button>
 </template>
@@ -23,9 +24,9 @@ const props = withDefaults(defineProps<{
   loader?: boolean;
   disabled?: boolean;
   active?: boolean;
-  variant?: 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary' | 'danger';
   /** @deprecated use variant instead of mode */
-  mode?: 'primary' | 'secondary';
+  mode?: 'primary' | 'secondary' | 'danger';
 }>(), {
   loader: false,
   disabled: false,
@@ -35,4 +36,4 @@ const props = withDefaults(defineProps<{
 // mode is deprecated, but we still want to support it for backward compatibility,
 // so we check both variant and mode props
 const currentVariant = computed(() => props.variant ?? props.mode ?? 'primary');
-</script>
+</script>

adminforth/spa/src/afcl/ProgressBar.vue

@@ -3,7 +3,7 @@
     <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ leftLabel }}</span>
     <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ rightLabel }}</span>
     <div 
-      class="bg-lightProgressBarFilledColor dark:bg-darkProgressBarFilledColor h-2.5 rounded-full transition-all duration-300 ease-in-out"
+      class="bg-lightPrimary dark:bg-darkPrimary h-2.5 rounded-full transition-all duration-300 ease-in-out"
       :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"  
       :style="{ width: `${percentage}%` }"
     ></div>
@@ -88,4 +88,4 @@ const formatValue = (value: number): string => {
     transform: translateX(100%);
   }
 }
-</style>
+</style>

adminforth/spa/src/components/AcceptModal.vue

@@ -39,20 +39,17 @@
           <hr class="border-t-2 border-gray-300 dark:border-gray-500 my-6">
 
           <div class="flex justify-center gap-4 w-full">
-            <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="flex-1 py-2.5 px-4 text-sm font-medium text-gray-700 bg-white rounded-default border border-gray-200 hover:bg-gray-50 focus:ring-4 focus:ring-gray-100 transition-all dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+            <Button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" variant="secondary" class="flex-1">
                 {{ modalStore?.modalContent?.cancelText }}
-            </button>
+            </Button>
 
-            <button
+            <Button
               @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}"
               type="button"
-              class="flex-1 flex items-center justify-center py-2.5 px-4 text-sm font-medium transition-all focus:outline-none
-                    border-none rounded-default shadow-sm focus:z-10 focus:ring-4 gap-1"
-              :class="modalStore.modalContent.dangerous
-                ? 'text-lightAcceptModalConfirmButtonText dark:text-darkAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground dark:bg-darkAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover focus:ring-lightAcceptModalConfirmButtonFocus dark:focus:ring-darkAcceptModalConfirmButtonFocus'
-                : 'text-lightButtonsText dark:text-darkButtonsText bg-lightButtonsBackground dark:bg-darkButtonsBackground hover:bg-lightButtonsHover dark:hover:bg-darkButtonsHover focus:ring-lightButtonFocusRing dark:focus:ring-darkButtonFocusRing'">
+              class="flex-1"
+              :variant="modalStore.modalContent.dangerous ? 'danger' : 'primary'">
                 {{ modalStore?.modalContent?.acceptText }}
-            </button>
+            </Button>
           </div>
 
           <div v-if="modalStore?.modalContent?.guardMessage" class="flex items-center justify-center mt-6 text-xs text-gray-400 gap-1.5 font-medium">
@@ -69,7 +66,7 @@
 <script setup lang="ts">
 import { watch, ref } from 'vue';
 import { useModalStore } from '@/stores/modal';
-import { Modal } from '@/afcl';
+import { Button, Modal } from '@/afcl';
 import { IconClipboardDocumentSolid, IconShieldCheck } from '@iconify-prerendered/vue-heroicons';
 
 
@@ -95,4 +92,4 @@ function close() {
   modalRef.value.close();
 }
 
-</script>
+</script>