feat: improve dark mode support and enhance job display in UI components

Author: yaroslav8765

custom/JobInfoPopup.vue

@@ -1,9 +1,9 @@
 <template> 
     <div class="flex flex-col w-full min-w-96">
       <div class="flex items-center mb-1">
-        <h2 class="text-lg font-semibold">{{ job.name }}</h2>
-        <p class="ml-2 text-xs text-gray-600 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
-        <p class="ml-auto text-gray-800 h-full"> {{  t('Progress:')  }} <span class="font-semibold" >{{ job.progress }}%</span></p>
+        <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
+        <p class="ml-2 text-xs text-gray-600 dark:text-gray-200 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
+        <p class="ml-auto text-gray-800 dark:text-white h-full"> {{  t('Progress:')  }} <span class="font-semibold" >{{ job.progress }}%</span></p>
         <StateToIcon :job="job" />
       </div>
       <div class="flex items-center gap-4 w-full">

custom/JobsList.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
+  <div class="w-1vw md:w-64 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-600 rounded-md">
     <Modal 
       v-for="job in props.jobs" :key="job.id" 
       :beforeCloseFunction="onBeforeOpen" 
       :beforeOpenFunction="onBeforeClose"
       removeFromDomOnClose
     >
       <template #trigger>
-        <div class="flex items-center w-full px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
+        <div class="flex items-center w-full px-4 py-3 bg-white dark:bg-gray-700 dark:border-gray-600 border-b border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
           <div class="flex flex-col w-full max-w-48">
             <p class="flex gap-2 items-end justify-between text-nowrap">
-              <span class="text-sm h-full text truncate">{{ job.name }}</span> 
-              <span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span> 
+              <span class="text-sm h-full text truncate dark:text-white">{{ job.name }}</span> 
+              <span class="text-xs dark:text-gray-200 text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span> 
             </p>
             <ProgressBar 
               class="mt-1"

custom/NavbarJobs.vue

@@ -1,17 +1,25 @@
 <template>
   <div ref="dropdownRef">
     <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
-      <div v-if="isAlLeastOneJobRunning" class="relative">
-        <div class="loader "></div>
-        <div class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"> {{ jobsCount }}</div>
-      </div>
-      <div class="flex items-center justify-center" v-else-if="jobs.length > 0">
+      <div class="relative flex items-center justify-center" v-if="jobs.length > 0">
         <Tooltip>
-          <IconCheckCircleOutline class="w-8 h-8 text-green-500" />
+          <IconBriefcaseSolid class="w-7 h-7 text-gray-600 hover:text-gray-700" />
           <template #tooltip>
             {{ t('All jobs completed') }}
           </template>
         </Tooltip>
+        <div
+          v-if="isAlLeastOneJobRunning" 
+          class="ping-animation absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
+        >
+          {{ jobsCount }}
+        </div>
+        <div 
+          v-if="isAlLeastOneJobRunning" 
+          class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
+        >
+          {{ jobsCount }}
+        </div>
       </div>
     </div>
     <Transition
@@ -40,7 +48,7 @@
 <script setup lang="ts">
   import type { AdminUser } from 'adminforth';
   import { onMounted, onUnmounted, ref, computed } from 'vue';
-  import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
+  import { IconCheckCircleOutline, IconBriefcaseSolid } from '@iconify-prerendered/vue-flowbite';
   import { Tooltip } from '@/afcl';
   import { useI18n } from 'vue-i18n';
   import JobsList from './JobsList.vue';
@@ -119,36 +127,14 @@
 
 
 <style scoped lang="scss">
-  .loader {
-    width: 28px;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    --spinner-color: #1a56db;
-
-    background:
-      conic-gradient(
-        from 120deg,
-        var(--spinner-color) 0deg 40deg,
-        transparent 40deg
-      ),
-
-      conic-gradient(#ccc 0deg 360deg);
-
-    -webkit-mask: radial-gradient(
-      farthest-side,
-      transparent calc(100% - 6px),
-      #000 calc(100% - 5px)
-    );
-    mask: radial-gradient(
-      farthest-side,
-      transparent calc(100% - 6px),
-      #000 calc(100% - 5px)
-    );
-
-    animation: stepRotate 2s infinite;
-  }
-
-  @keyframes stepRotate {
-    to { transform: rotate(1turn); }
+.ping-animation {
+  animation: ping 1s cubic-bezier(0, 0, 1, 1) infinite;
+}
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
   }
+}
 </style>