From 7c56d2e66a1e0b23d9ac68d49733bf2369837ead Mon Sep 17 00:00:00 2001
From: Kavehhn174 <Kavehhn174@gmail.com>
Date: Sun, 30 Aug 2026 11:09:24 +0330
Subject: [PATCH] fix(dashboard): resolve dark mode styling and text contrast
 for quick action buttons

---
 .../dashboard/QuickActionsWidget.vue          | 162 ++++++++++++++++--
 1 file changed, 148 insertions(+), 14 deletions(-)

diff --git a/src/components/dashboard/QuickActionsWidget.vue b/src/components/dashboard/QuickActionsWidget.vue
index 5eae393..80290b8 100644
--- a/src/components/dashboard/QuickActionsWidget.vue
+++ b/src/components/dashboard/QuickActionsWidget.vue
@@ -8,32 +8,28 @@ const actions = [
         title: 'ثبت ملک جدید',
         description: 'افزودن زمین، ساختمان یا آپارتمان',
         icon: 'pi pi-file-plus',
-        color: 'bg-blue-500 text-white',
-        bgSoft: 'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800',
+        colorClass: 'icon-blue',
         route: '/property/create-property'
     },
     {
         title: 'ثبت تراکنش انبار',
         description: 'ثبت ورود یا خروج مصالح و اقلام',
         icon: 'pi pi-plus-circle',
-        color: 'bg-emerald-500 text-white',
-        bgSoft: 'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800',
+        colorClass: 'icon-emerald',
         route: '/warehouse-items/create-transaction'
     },
     {
         title: 'فهرست املاک',
         description: 'جستجو، فیلتر و مدیریت اسناد',
         icon: 'pi pi-list',
-        color: 'bg-purple-500 text-white',
-        bgSoft: 'bg-purple-50 dark:bg-purple-950/30 border-purple-200 dark:border-purple-800',
+        colorClass: 'icon-purple',
         route: '/property/list-properties'
     },
     {
         title: 'اقلام و موجودی انبار',
         description: 'مشاهده کاردکس و موجودی انبارها',
         icon: 'pi pi-box',
-        color: 'bg-amber-500 text-white',
-        bgSoft: 'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800',
+        colorClass: 'icon-amber',
         route: '/warehouse-items/list'
     }
 ];
@@ -58,25 +54,163 @@ function navigate(route) {
             </div>
         </div>
 
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
             <div
                 v-for="item in actions"
                 :key="item.title"
                 @click="navigate(item.route)"
-                class="p-4 rounded-xl border transition-all duration-200 cursor-pointer hover:shadow-md flex items-center gap-3.5 group bg-surface-0 dark:bg-surface-850 hover:border-primary-400 dark:hover:border-primary-600"
+                class="quick-action-card group"
             >
-                <div :class="['w-11 h-11 rounded-xl flex items-center justify-center shrink-0 shadow-sm transition-transform group-hover:scale-110', item.color]">
+                <div :class="['action-icon-box', item.colorClass]">
                     <i :class="[item.icon, 'text-lg']"></i>
                 </div>
-                <div class="truncate">
-                    <h4 class="font-semibold text-sm text-surface-900 dark:text-surface-100 group-hover:text-primary transition-colors">
+                <div class="action-text-wrap truncate">
+                    <h4 class="action-title">
                         {{ item.title }}
                     </h4>
-                    <p class="text-[11px] text-muted-color truncate mt-0.5">
+                    <p class="action-desc">
                         {{ item.description }}
                     </p>
                 </div>
+                <div class="action-arrow">
+                    <i class="pi pi-arrow-left text-xs"></i>
+                </div>
             </div>
         </div>
     </div>
 </template>
+
+<style scoped>
+.quick-action-card {
+    position: relative;
+    padding: 0.95rem 1rem;
+    border-radius: 14px;
+    border: 1px solid #e2e8f0;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    cursor: pointer;
+    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+    font-family: 'Estedad', sans-serif !important;
+}
+
+.quick-action-card:hover {
+    transform: translateY(-2px);
+    border-color: #6366f1;
+    background: #f8fafc;
+    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.12);
+}
+
+.action-icon-box {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.quick-action-card:hover .action-icon-box {
+    transform: scale(1.08);
+}
+
+.action-text-wrap {
+    flex: 1;
+    min-width: 0;
+}
+
+.action-title {
+    font-size: 13.5px;
+    font-weight: 700;
+    color: #0f172a;
+    margin: 0;
+    line-height: 1.4;
+    transition: color 0.2s ease;
+}
+
+.quick-action-card:hover .action-title {
+    color: #4f46e5;
+}
+
+.action-desc {
+    font-size: 11px;
+    color: #64748b;
+    margin-top: 2px;
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.action-arrow {
+    opacity: 0;
+    transform: translateX(4px);
+    color: #94a3b8;
+    transition: all 0.2s ease;
+}
+
+.quick-action-card:hover .action-arrow {
+    opacity: 1;
+    transform: translateX(0);
+    color: #4f46e5;
+}
+
+/* ── Gradient Icon Box Styles ── */
+.icon-blue {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    color: #ffffff;
+}
+
+.icon-emerald {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: #ffffff;
+}
+
+.icon-purple {
+    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+    color: #ffffff;
+}
+
+.icon-amber {
+    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+    color: #ffffff;
+}
+
+/* ── Dark Mode Styles (via .app-dark selector) ── */
+:global(.app-dark) .quick-action-card {
+    background: #18181b;
+    border-color: #27272a;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
+:global(.app-dark) .quick-action-card:hover {
+    background: #27272a;
+    border-color: #6366f1;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.3);
+}
+
+:global(.app-dark) .action-title {
+    color: #f8fafc;
+}
+
+:global(.app-dark) .quick-action-card:hover .action-title {
+    color: #a5b4fc;
+}
+
+:global(.app-dark) .action-desc {
+    color: #94a3b8;
+}
+
+:global(.app-dark) .action-arrow {
+    color: #64748b;
+}
+
+:global(.app-dark) .quick-action-card:hover .action-arrow {
+    color: #a5b4fc;
+}
+</style>