structure updates

resources/themes/backend/views/components/desktop-user-menu.blade.php

@@ -1,39 +1,66 @@
-<flux:dropdown position="bottom" align="start">
-    <flux:sidebar.profile
-        :name="auth()->user()->name"
-        :initials="auth()->user()->initials()"
-        icon:trailing="chevrons-up-down"
-        data-test="sidebar-menu-button"
-    />
+@php
+    $user = auth()->user();
+@endphp
 
-    <flux:menu>
-        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
-            <flux:avatar
-                :name="auth()->user()->name"
-                :initials="auth()->user()->initials()"
-            />
-            <div class="grid flex-1 text-start text-sm leading-tight">
-                <flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
-                <flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
+<details class="hd-account-menu hd-account-menu--legacy">
+    <summary class="hd-account-button" data-test="sidebar-menu-button">
+        <span class="hd-user-avatar hd-user-avatar--gravatar">
+            <span class="hd-user-avatar-fallback">{{ $user->initials() }}</span>
+            <img
+                src="{{ $user->gravatarUrl(160) }}"
+                alt="{{ $user->name }}"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                onerror="this.style.display='none'"
+            >
+        </span>
+
+        <span class="hd-account-copy">
+            <strong>{{ $user->name }}</strong>
+            <small>{{ $user->email }}</small>
+        </span>
+
+        <i class="fa-solid fa-chevron-down hd-account-chevron"></i>
+    </summary>
+
+    <div class="hd-account-dropdown" role="menu">
+        <div class="hd-account-dropdown-user">
+            <span class="hd-user-avatar hd-user-avatar--gravatar hd-user-avatar--large">
+                <span class="hd-user-avatar-fallback">{{ $user->initials() }}</span>
+                <img
+                    src="{{ $user->gravatarUrl(160) }}"
+                    alt="{{ $user->name }}"
+                    loading="lazy"
+                    referrerpolicy="no-referrer"
+                    onerror="this.style.display='none'"
+                >
+            </span>
+
+            <div class="hd-account-dropdown-copy">
+                <strong>{{ $user->name }}</strong>
+                <span>{{ $user->email }}</span>
             </div>
         </div>
-        <flux:menu.separator />
-        <flux:menu.radio.group>
-            <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
-                {{ __('Settings') }}
-            </flux:menu.item>
-            <form method="POST" action="{{ route('logout') }}" class="w-full">
-                @csrf
-                <flux:menu.item
-                    as="button"
-                    type="submit"
-                    icon="arrow-right-start-on-rectangle"
-                    class="w-full cursor-pointer"
-                    data-test="logout-button"
-                >
-                    {{ __('Log out') }}
-                </flux:menu.item>
-            </form>
-        </flux:menu.radio.group>
-    </flux:menu>
-</flux:dropdown>
+
+        <div class="hd-account-dropdown-divider"></div>
+
+        <nav class="hd-account-dropdown-nav" aria-label="Account">
+            @if(Route::has('profile.edit'))
+                <a href="{{ route('profile.edit') }}" wire:navigate role="menuitem">
+                    <i class="fa-solid fa-gear"></i>
+                    <span>Settings</span>
+                </a>
+            @endif
+        </nav>
+
+        <div class="hd-account-dropdown-divider"></div>
+
+        <form method="POST" action="{{ route('logout') }}">
+            @csrf
+            <button class="hd-account-logout" type="submit" data-test="logout-button" role="menuitem">
+                <i class="fa-solid fa-arrow-right-from-bracket"></i>
+                <span>Log out</span>
+            </button>
+        </form>
+    </div>
+</details>

resources/themes/backend/views/components/helpdesk/colour-select.blade.php

@@ -11,64 +11,57 @@
     $currentLabel = \Modules\Helpdesk\Support\Color::label($currentValue);
 @endphp
 
-<div {{ $attributes->class('rounded-xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50') }}>
-    <div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
-        <div class="min-w-0 space-y-2">
-            <label class="block text-xs font-bold uppercase tracking-wide text-zinc-600 dark:text-zinc-300">
-                {{ $label }}
-            </label>
+<div {{ $attributes->class('hd-colour-control') }}>
+    <div class="hd-colour-control__label">{{ $label }}</div>
 
-            <div class="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
-                <select
-                    wire:model.live="{{ $model }}"
-                    class="h-9 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm font-semibold text-zinc-900 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
+    <div class="hd-colour-control__row">
+        <select
+            wire:model.live="{{ $model }}"
+            class="hd-colour-control__select"
+            aria-label="{{ $label }}"
+        >
+            @foreach ($options as $key => $option)
+                <option value="{{ $key }}" style="color: {{ $option['hex'] }};">
+                    ● {{ $option['name'] }} — {{ $option['hex'] }}
+                </option>
+            @endforeach
+        </select>
+
+        <span
+            class="hd-colour-control__badge"
+            style="background-color: {{ $currentHex }}; color: {{ $currentText }};"
+        >
+            {{ $currentLabel }}
+        </span>
+
+        <div class="hd-colour-control__swatches" aria-label="Available Helpdesk colours">
+            @foreach ($options as $key => $option)
+                <button
+                    type="button"
+                    wire:click="$set('{{ $model }}', '{{ $key }}')"
+                    title="{{ $option['name'] }} {{ $option['hex'] }}"
+                    class="hd-colour-control__swatch"
+                    style="background-color: {{ $option['hex'] }}"
                 >
-                    @foreach ($options as $key => $option)
-                        <option value="{{ $key }}" style="color: {{ $option['hex'] }};">
-                            ● {{ $option['name'] }} — {{ $option['hex'] }}
-                        </option>
-                    @endforeach
-                </select>
-
-                <span
-                    class="inline-flex h-9 min-w-28 items-center justify-center rounded-lg px-3 text-xs font-bold shadow-sm ring-1 ring-zinc-900/10 dark:ring-white/10"
-                    style="background-color: {{ $currentHex }}; color: {{ $currentText }};"
-                >
-                    {{ $currentLabel }}
-                </span>
-            </div>
-
-            <div class="flex flex-wrap items-center gap-1.5" aria-label="Available Helpdesk colours">
-                @foreach ($options as $key => $option)
-                    <button
-                        type="button"
-                        wire:click="$set('{{ $model }}', '{{ $key }}')"
-                        title="{{ $option['name'] }} {{ $option['hex'] }}"
-                        class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-white/80 shadow-sm ring-1 ring-zinc-900/10 transition hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500/40 dark:ring-white/15"
-                        style="background-color: {{ $option['hex'] }}"
-                    >
-                        <span class="sr-only">Use {{ $option['name'] }}</span>
-                    </button>
-                @endforeach
-            </div>
+                    <span class="sr-only">Use {{ $option['name'] }}</span>
+                </button>
+            @endforeach
         </div>
 
-        <div class="grid grid-cols-[2.75rem_minmax(0,11rem)] items-center gap-2 lg:justify-end">
-            <input
-                type="color"
-                value="{{ $currentHex }}"
-                wire:change="$set('{{ $model }}', $event.target.value)"
-                class="h-9 w-11 cursor-pointer rounded-lg border border-zinc-300 bg-white p-1 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
-                aria-label="Choose a custom hex colour"
-            />
+        <input
+            type="color"
+            value="{{ $currentHex }}"
+            wire:change="$set('{{ $model }}', $event.target.value)"
+            class="hd-colour-control__picker"
+            aria-label="Choose a custom hex colour"
+        />
 
-            <input
-                type="text"
-                wire:model.live.debounce.500ms="{{ $model }}"
-                class="h-9 w-full rounded-lg border border-zinc-300 bg-white px-3 text-xs font-semibold text-zinc-900 placeholder:text-zinc-400 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500"
-                placeholder="#ffffff"
-                aria-label="Custom hex colour"
-            />
-        </div>
+        <input
+            type="text"
+            wire:model.live.debounce.500ms="{{ $model }}"
+            class="hd-colour-control__value"
+            placeholder="#ffffff"
+            aria-label="Custom hex colour"
+        />
     </div>
 </div>

resources/themes/backend/views/components/settings/layout.blade.php

@@ -1,4 +1,4 @@
-<div class="flex items-start max-md:flex-col">
+<div class="hd-account-settings flex items-start max-md:flex-col">
     <div class="me-10 w-full pb-4 md:w-[220px]">
         <flux:navlist aria-label="{{ __('Settings') }}">
             <flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>