UI: Facelift for v3

resources/scripts/admin/views/dashboard/DashboardChart.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="dashboardStore.isDashboardDataLoaded"
-      class="grid grid-cols-10 mt-8 bg-white rounded shadow"
+      class="grid grid-cols-10 mt-8 bg-white rounded-xl shadow-sm border border-gray-100"
     >
       <!-- Chart -->
       <div

resources/scripts/admin/views/dashboard/DashboardStatsItem.vue

@@ -5,22 +5,24 @@
       relative
       flex
       justify-between
-      p-3
+      p-5
       bg-white
-      rounded
-      shadow
-      hover:bg-gray-50
-      xl:p-4
+      rounded-xl
+      shadow-sm
+      border border-gray-100
+      hover:shadow-md
+      transition-shadow
+      xl:p-6
       lg:col-span-2
     "
     :class="{ 'lg:!col-span-3': large }"
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
+      <span class="text-2xl font-bold leading-tight text-gray-900 xl:text-3xl">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
+      <span class="block mt-1 text-sm font-medium leading-tight text-gray-500 xl:text-base">
         {{ label }}
       </span>
     </div>

resources/scripts/admin/views/dashboard/DashboardTable.vue

@@ -7,7 +7,7 @@
         class="due-invoices"
       >
         <div class="relative z-10 flex items-center justify-between mb-3">
-          <h6 class="mb-0 text-xl font-semibold leading-normal">
+          <h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
             {{ $t('dashboard.recent_invoices_card.title') }}
           </h6>
 
@@ -57,7 +57,7 @@
         class="recent-estimates"
       >
         <div class="relative z-10 flex items-center justify-between mb-3">
-          <h6 class="mb-0 text-xl font-semibold leading-normal">
+          <h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
             {{ $t('dashboard.recent_estimate_card.title') }}
           </h6>