ui updates for ticket layout

Modules/Helpdesk/Resources/views/index.blade.php

@@ -180,15 +180,7 @@
             </div>
         </div>
 
-        <div class="rounded-2xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+
-            <div class="flex flex-wrap gap-2">
-                <a href="{{ route('helpdesk.index') }}" wire:navigate class="hd-btn hd-btn-blue">Dashboard</a>
-                <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="hd-btn hd-btn-blue">Tickets</a>
-                <a href="{{ route('helpdesk.tickets.create') }}" wire:navigate class="hd-btn hd-btn-green">+ New Ticket</a>
-                <a href="{{ route('helpdesk.kanban') }}" wire:navigate class="hd-btn hd-btn-amber">Kanban</a>
-                <a href="{{ route('helpdesk.settings') }}" wire:navigate class="hd-btn hd-btn-violet">Settings</a>
-            </div>
-        </div>
 
         <livewire:helpdesk.dashboard-widget />
     </div>

Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php

@@ -166,9 +166,66 @@
 
     .hd-helpdesk-surface [data-helpdesk-attachment-shell] {
         border-radius: 18px !important;
-        border: 1px dashed rgba(37, 99, 235, 0.85) !important;
+        border: 1px solid rgba(59, 130, 246, 0.28) !important;
-        padding: 16px !important;
+        padding: 18px !important;
-        background: rgba(15, 23, 42, 0.38) !important;
+        background: linear-gradient(135deg, rgba(15, 23, 42, 0.74), rgba(24, 24, 27, 0.92)) !important;
+    }
+
+    .hd-helpdesk-surface [data-helpdesk-attachment-picker-row] {
+        display: flex !important;
+        min-height: 74px !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        gap: 18px !important;
+    }
+
+    .hd-helpdesk-surface [data-helpdesk-file-button] {
+        display: inline-flex !important;
+        width: auto !important;
+        min-width: 144px !important;
+        height: 42px !important;
+        align-items: center !important;
+        justify-content: center !important;
+        align-self: center !important;
+        gap: 9px !important;
+        border-radius: 12px !important;
+        border: 1px solid rgba(34, 197, 94, 0.55) !important;
+        background: linear-gradient(135deg, #16a34a, #22c55e) !important;
+        color: #ffffff !important;
+        box-shadow: 0 10px 22px rgba(22, 163, 74, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
+        font-size: 0.88rem !important;
+        font-weight: 800 !important;
+        line-height: 1 !important;
+        letter-spacing: 0.005em !important;
+        padding: 0 16px !important;
+        white-space: nowrap !important;
+        vertical-align: middle !important;
+        transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
+    }
+
+    .hd-helpdesk-surface [data-helpdesk-file-button]:hover {
+        transform: translateY(-1px) !important;
+        border-color: rgba(134, 239, 172, 0.85) !important;
+        background: linear-gradient(135deg, #15803d, #16a34a) !important;
+        color: #ffffff !important;
+        box-shadow: 0 12px 26px rgba(22, 163, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
+    }
+
+    .hd-helpdesk-surface [data-helpdesk-file-button] i,
+    .hd-helpdesk-surface [data-helpdesk-file-button] span {
+        display: inline-flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        line-height: 1 !important;
+    }
+
+    .hd-helpdesk-surface [data-helpdesk-file-button] i {
+        height: 18px !important;
+        width: 18px !important;
+        border-radius: 6px !important;
+        background: rgba(255, 255, 255, 0.16) !important;
+        color: #ffffff !important;
+        font-size: 0.74rem !important;
     }
 
     .hd-helpdesk-surface .hd-select {
@@ -467,7 +524,7 @@
 
                     <div class="border-t border-zinc-200 px-5 py-5 text-sm dark:border-zinc-800">
                         <div class="rounded-2xl border border-zinc-200 bg-white/70 p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-950/45">
-                            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                            <div data-helpdesk-attachment-picker-row>
                                 <div class="flex min-w-0 items-center gap-3">
                                     <span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/70 dark:bg-blue-950/55 dark:text-blue-300">
                                         <i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
@@ -480,12 +537,11 @@
                                 </div>
 
                                 <label
-                                    class="inline-flex h-11 min-w-[10rem] cursor-pointer select-none items-center justify-center gap-2.5 rounded-full border border-blue-400/70 bg-gradient-to-r from-blue-600 to-blue-500 px-5 text-sm font-extrabold leading-none text-white shadow-sm shadow-blue-950/30 transition hover:from-blue-500 hover:to-blue-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-300/80 dark:border-blue-300/40 dark:shadow-black/30"
+                                    data-helpdesk-file-button
+                                    class="cursor-pointer"
                                 >
-                                    <span class="inline-flex h-5 w-5 items-center justify-center leading-none">
+                                    <i class="fa-solid fa-paperclip" aria-hidden="true"></i>
-                                        <i class="fa-solid fa-paperclip text-[0.8rem] leading-none" aria-hidden="true"></i>
+                                    <span>Attach files</span>
-                                    </span>
-                                    <span class="leading-none">Choose files</span>
                                     <input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
                                 </label>
                             </div>

Modules/Helpdesk/changelog.yaml

@@ -323,3 +323,13 @@ versions:
     - Refined the reply attachment Choose files button with a centred rounded action style.
     - Centred the upload icon and label vertically and horizontally to improve the professional attachment picker layout.
     - Kept module.json version in sync with changelog.yaml.
+
+- version: 1.0.31
+  date: 2026-06-17
+  changes:
+    - Refined the Helpdesk attachment picker button into a compact, centred, professional blue action control.
+
+- version: 1.9.18
+  date: 2026-06-17
+  changes:
+    - Centred the attachment chooser content vertically and changed the attachment action to a professional green button treatment.

Modules/Helpdesk/module.json

@@ -22,5 +22,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.0.41"
+    "version": "1.9.18"
 }