ui fix in devtel

Signed-off-by: RAWx18 <rawx18.dev@gmail.com>

Author: RAWx18

frontend/src/integrations/github/components/github-connect.vue

@@ -43,7 +43,7 @@ const connect = () => {
     verticalConfirmButtonClass: 'h-10 bg-orange-600 hover:bg-orange-500 text-black font-mono text-xs font-bold uppercase w-full mb-3 tracking-wider border-none rounded-none',
     
     cancelButtonText: 'INVITE AN ADMIN',
-    verticalCancelButtonClass: 'h-10 bg-black border border-zinc-700 hover:border-zinc-500 text-zinc-400 hover:text-white font-mono text-xs font-bold uppercase w-full tracking-wider transition-colors rounded-none',
+    verticalCancelButtonClass: 'h-10 bg-black hover:bg-black border border-zinc-700 hover:border-zinc-500 text-zinc-400 hover:text-white font-mono text-xs font-bold uppercase w-full tracking-wider transition-colors rounded-none',
     
     vertical: true,
     distinguishCancelAndClose: true,

frontend/src/modules/dashboard/pages/dashboard-page.vue

@@ -20,9 +20,13 @@
             >
               {{ currentTenant?.name }} team overview
             </h4>
-            <div class="text-sm flex items-center gap-2 mt-8">
-              <i class="text-orange-500 ri-time-line text-base" />
-              <span class="text-zinc-400 font-mono text-xs">Data on this page is refreshed every 15 min.</span>
+            <div class="relative mt-8 group flex items-center">
+              <div
+              class="absolute right-6 top-1/2 -translate-y-1/2 bg-zinc-800 text-zinc-400 font-mono text-xs px-3 py-1 rounded shadow-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 whitespace-nowrap z-30"
+              >
+              Data on this page is refreshed every 15 min
+              </div>
+              <i class="text-orange-500 ri-time-line text-base cursor-pointer" />
             </div>
           </div>
 

frontend/src/modules/report/components/report-create-dialog.vue

@@ -33,7 +33,7 @@
         </div>
       </el-form>
       <div
-        class="bg-gray-50 rounded-b-md flex items-center justify-end py-4 px-6"
+        class="bg-zinc-800 rounded-b-md flex items-center justify-end py-4 px-6"
       >
         <el-button
           class="btn btn--bordered btn--md mr-3"

frontend/src/modules/report/components/report-form.vue

@@ -62,7 +62,7 @@ export default {
   &-title {
     @apply h-16 mb-6;
     .el-input__wrapper {
-      @apply rounded-none border-0 border-b border-gray-200 py-6 text-lg font-semibold bg-transparent w-full px-0 shadow-none ring-0;
+      @apply rounded-none border-0 border-b border-zinc-700 py-6 text-lg font-semibold bg-transparent w-full px-0 shadow-none ring-0;
       transition: all 0.2s ease;
 
       &:hover {

frontend/src/modules/report/components/report-share-button.vue

@@ -34,7 +34,7 @@
         <div class="mt-6 relative">
           <div
             v-if="!model"
-            class="absolute inset-0 bg-gray-50 opacity-60 z-10 -m-4"
+            class="absolute inset-0 bg-zinc-800 opacity-60 z-10 -m-4"
           />
           <div
             class="font-medium text-gray-200 text-sm mb-1"

frontend/src/modules/report/pages/report-view-page-public.vue

@@ -32,9 +32,13 @@
                     : report.name
                 }}
               </h1>
-              <div class=" text-sm flex items-center gap-2">
-                <i class="text-zinc-200 ri-time-line text-base" />
-                <span class="text-zinc-200">Data on this page is refreshed every 15 min.</span>
+              <div class="relative mt-8 group flex items-center">
+                <div
+                class="absolute right-6 top-1/2 -translate-y-1/2 bg-zinc-800 text-zinc-400 font-mono text-xs px-3 py-1 rounded shadow-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 whitespace-nowrap z-30"
+                >
+                Data on this page is refreshed every 15 min
+                </div>
+                <i class="text-orange-500 ri-time-line text-base cursor-pointer" />
               </div>
             </div>
           </div>

frontend/src/modules/report/pages/report-view-page.vue

@@ -7,7 +7,7 @@
     />
     <div v-else-if="!error">
       <div
-        class="mb-4 h-24 flex items-center flex-shrink-0 sticky top-0 z-30 bg-black
+        class="mb-4 h-24 flex items-center flex-shrink-0 sticky top-0 z-30 bg-zinc-900
         border-b border-zinc-700 transition-all ease-in-out duration-300 justify-center"
       >
         <div class="max-w-5xl mx-5 w-full">

frontend/src/modules/report/pages/templates/report-template-page.vue

@@ -7,7 +7,7 @@
   <div v-else-if="!error" class="absolute left-0 right-0">
     <div
       ref="header"
-      class="w-full bg-gray-50 border-gray-200 pt-4 sticky top-[-20px] z-10"
+      class="w-full bg-zinc-900 border-zinc-700 pt-4 sticky top-[-20px] z-10"
       :class="{
         'border-b': !isHeaderOnTop,
         shadow: isHeaderOnTop,
@@ -29,9 +29,13 @@
             {{ currentTemplate.name }}
           </h1>
           <div class="flex items-center gap-9">
-            <div class=" text-sm flex items-center gap-2">
-              <i class="text-gray-500 ri-time-line text-base" />
-              <span class="text-gray-500">Data on this page is refreshed every 15 min.</span>
+            <div class="relative mt-8 group flex items-center">
+              <div
+              class="absolute right-6 top-1/2 -translate-y-1/2 bg-zinc-800 text-zinc-400 font-mono text-xs px-3 py-1 rounded shadow-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 whitespace-nowrap z-30"
+              >
+              Data on this page is refreshed every 15 min
+              </div>
+              <i class="text-orange-500 ri-time-line text-base cursor-pointer" />
             </div>
             <div
               v-if="report.public"