merge: Merge pull request #105 from ArunaStorage/refactor/layout

Update global design layout

Author: das-Abroxas

app.vue

@@ -7,7 +7,7 @@ import {parseJwt} from "~/composables/utils";
 
 import {h} from 'vue';
 import Toaster from '@/components/ui/toast/Toaster.vue'
-import RegistrationDialog from "@/components/custom-ui/RegistrationDialog.vue";
+import RegistrationDialog from "~/components/custom-ui/dialog/RegistrationDialog.vue";
 import {useToast} from '@/components/ui/toast/use-toast'
 
 const {toast} = useToast()
@@ -79,8 +79,10 @@ async function updateUser() {
               description: h('div',
                   {class: 'flex space-x-2 items-center justify-center'},
                   [
-                    h(IconPlant, {class: 'flex-shrink-0 size-5 text-gray-700'}),
-                    h('span', {class: 'text-aruna-800'}, ['Please wait until your account gets activated by an administrator.'])
+                    h(IconPlant, {class: 'flex-shrink-0 size-5 text-green-400'}),
+                    h('span',
+                        {class: 'text-fuchsia-50'},
+                        ['Please wait until your account gets activated by an administrator.'])
                   ]),
               duration: 10000
             })
@@ -139,7 +141,7 @@ onBeforeMount(() => updateUser())
   </div>
 
   <div v-else
-       class="flex flex-col flex-grow md:min-h-screen px-6 py-2 bg-gradient-to-b from-aruna-800/[.30] via-transparent to-aruna-800/[.10]">
+       class="flex flex-col flex-grow md:min-h-screen bg-[url('/_nuxt/assets/imgs/global-bg.webp')] bg-cover bg-fixed bg-center bg-no-repeat">
     <ToastInfo v-if="useRuntimeConfig().public.infoBanner.active" modalId="info-toast" infoMsg="Hello"/>
     <NuxtLoadingIndicator/>
     <NuxtPage/>

assets/imgs/global-bg.webp

@@ -3,40 +3,11 @@
 @tailwind utilities;
 
 @layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
-
-        --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
-
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
-
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
-
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
-
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
-
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
-
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
-
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 210 40% 98%;
-
-        --ring: 222.2 84% 4.9%;
-
-        --radius: 0.5rem;
+    html {
+        scroll-behavior: smooth;
     }
 
-    .dark {
+    :root {
         --background: 222.2 84% 4.9%;
         --foreground: 210 40% 98%;
 
@@ -65,6 +36,20 @@
         --destructive-foreground: 210 40% 98%;
 
         --ring: 212.7 26.8% 83.9%;
+
+        --radius: 0.5rem;
+
+        --vis-tooltip-background-color: none !important;
+        --vis-tooltip-border-color: none !important;
+        --vis-tooltip-text-color: none !important;
+        --vis-tooltip-shadow-color: none !important;
+        --vis-tooltip-backdrop-filter: none !important;
+        --vis-tooltip-padding: none !important;
+
+        --vis-primary-color: var(--primary);
+        /* change to any hsl value you want */
+        --vis-secondary-color: 160 81% 40%;
+        --vis-text-color: var(--muted-foreground);
     }
 }
 

assets/styles/main.css

@@ -21,21 +21,21 @@ function getLabels(): v2KeyValue[] | undefined {
   <div class="-m-1.5 overflow-x-auto">
     <div class="p-1.5 min-w-full inline-block align-middle">
       <div class="overflow-hidden">
-        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <table class="min-w-full divide-y divide-gray-500">
           <thead>
             <tr>
-              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Key</th>
-              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Value</th>
-              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Static
+              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-400 uppercase">Key</th>
+              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-400 uppercase">Value</th>
+              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-400 uppercase">Static
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-            <tr v-for="label in getLabels()" class="hover:bg-gray-100 dark:hover:bg-gray-700">
-              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
+          <tbody class="divide-y divide-gray-500">
+            <tr v-for="label in getLabels()" class="hover:bg-gray-700">
+              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">
                  {{ label.key }}
               </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                 <div v-html="prettyDisplayJson(label.value)" />
               </td>
               <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">