style: add semantic surface tints to Orders, Invoices, Quotes
Extend Brand Dashboard's semantic color language to list pages at micro scale: - cb-cell-id: Soft green tint on identifier cells (order#, invoice#, quote#) - cb-cell-money: Green text for non-zero monetary values - cb-cell-money-zero: Muted gray for zero values - cb-status-surface-new: Warm amber tint for new/pending states - cb-status-surface-active: Cool blue tint for in-progress states - cb-status-surface-complete: Neutral tint for completed states This creates visual continuity between dashboard tiles (macro) and list rows (micro) - same semantic language at different zoom levels.
This commit is contained in:
kelly
@@ -490,6 +490,60 @@ html[data-theme='dark'] .tooltip:before {
|
||||
@apply badge badge-sm badge-ghost;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Semantic Surface Tints (List Page Micro Scale)
|
||||
|
||||
Inherits Brand Dashboard's semantic tint language:
|
||||
- Primary/Success (green): Active, positive, money
|
||||
- Info (blue): In-progress, structure
|
||||
- Warning (amber): Attention needed
|
||||
- Neutral: Default, completed states
|
||||
|
||||
These are VERY subtle - "you only notice when it's gone"
|
||||
============================================ */
|
||||
|
||||
/* cb-cell-id: Identifier cell (order#, invoice#, quote#)
|
||||
Very soft green tint - indicates actionable/active item
|
||||
Usage: <td class="cb-cell-id">ORD-001</td> */
|
||||
.cb-cell-id {
|
||||
@apply bg-primary/[0.03];
|
||||
}
|
||||
|
||||
/* cb-cell-money: Monetary value cell
|
||||
Subtle success tint for non-zero values
|
||||
Usage: <td class="cb-cell-money">$1,234.00</td> */
|
||||
.cb-cell-money {
|
||||
@apply text-success/90;
|
||||
}
|
||||
|
||||
/* cb-cell-money-zero: Zero monetary value
|
||||
Muted, no tint
|
||||
Usage: <td class="cb-cell-money-zero">$0.00</td> */
|
||||
.cb-cell-money-zero {
|
||||
@apply text-base-content/40;
|
||||
}
|
||||
|
||||
/* Status surface hints - apply to the cell, not the badge
|
||||
These pair with the neutral badge to create semantic meaning */
|
||||
|
||||
/* cb-status-surface-active: In-progress states (processing, delivering)
|
||||
Cool blue tint matching dashboard info tiles */
|
||||
.cb-status-surface-active {
|
||||
@apply bg-info/[0.04];
|
||||
}
|
||||
|
||||
/* cb-status-surface-new: New/pending items awaiting action
|
||||
Warm neutral - slightly elevated from base */
|
||||
.cb-status-surface-new {
|
||||
@apply bg-warning/[0.03];
|
||||
}
|
||||
|
||||
/* cb-status-surface-complete: Completed/delivered states
|
||||
Neutral - no tint, clean finish */
|
||||
.cb-status-surface-complete {
|
||||
@apply bg-base-200/20;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
List Page Filter Bar (Canonical)
|
||||
Single row, consistent across all list pages
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
<tbody>
|
||||
@foreach($quotes as $quote)
|
||||
<tr class="hover:bg-base-200/30 transition-colors group">
|
||||
<td class="py-2.5 align-middle whitespace-nowrap">
|
||||
<td class="py-2.5 align-middle whitespace-nowrap cb-cell-id">
|
||||
<a href="{{ route('seller.business.crm.quotes.show', [$business, $quote]) }}"
|
||||
class="cb-link text-sm font-medium font-mono">
|
||||
{{ $quote->quote_number }}
|
||||
@@ -80,9 +80,21 @@
|
||||
<span class="text-sm text-base-content/60">{{ $quote->items_count }}</span>
|
||||
</td>
|
||||
<td class="py-2.5 align-middle text-right">
|
||||
<span class="text-sm font-medium">${{ number_format($quote->total, 2) }}</span>
|
||||
@if($quote->total > 0)
|
||||
<span class="text-sm font-medium cb-cell-money">${{ number_format($quote->total, 2) }}</span>
|
||||
@else
|
||||
<span class="text-sm cb-cell-money-zero">$0.00</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="py-2.5 align-middle">
|
||||
@php
|
||||
$statusSurface = match($quote->status) {
|
||||
'draft' => 'cb-status-surface-new',
|
||||
'sent' => 'cb-status-surface-active',
|
||||
'accepted' => 'cb-status-surface-complete',
|
||||
default => '',
|
||||
};
|
||||
@endphp
|
||||
<td class="py-2.5 align-middle {{ $statusSurface }}">
|
||||
<x-cb-status-pill :status="$quote->status" />
|
||||
</td>
|
||||
<td class="py-2.5 align-middle whitespace-nowrap">
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
<tbody>
|
||||
@foreach($invoices as $invoice)
|
||||
<tr class="hover:bg-base-200/30 transition-colors group">
|
||||
<td class="py-2.5 align-middle whitespace-nowrap">
|
||||
<td class="py-2.5 align-middle whitespace-nowrap cb-cell-id">
|
||||
<a href="{{ route('seller.business.invoices.show', [$business->slug, $invoice]) }}" class="cb-link text-sm font-medium font-mono">
|
||||
{{ $invoice->invoice_number }}
|
||||
</a>
|
||||
@@ -91,10 +91,19 @@
|
||||
@endif
|
||||
</td>
|
||||
<td class="py-2.5 align-middle text-right text-sm font-medium">
|
||||
${{ number_format($invoice->total, 2) }}
|
||||
<span class="cb-cell-money">${{ number_format($invoice->total, 2) }}</span>
|
||||
</td>
|
||||
<td class="py-2.5 align-middle">
|
||||
<x-cb-status-pill :status="$invoice->isOverdue() ? 'overdue' : $invoice->payment_status" />
|
||||
@php
|
||||
$invoiceStatus = $invoice->isOverdue() ? 'overdue' : $invoice->payment_status;
|
||||
$statusSurface = match($invoiceStatus) {
|
||||
'unpaid' => 'cb-status-surface-new',
|
||||
'overdue' => 'cb-status-surface-new',
|
||||
'paid' => 'cb-status-surface-complete',
|
||||
default => '',
|
||||
};
|
||||
@endphp
|
||||
<td class="py-2.5 align-middle {{ $statusSurface }}">
|
||||
<x-cb-status-pill :status="$invoiceStatus" />
|
||||
</td>
|
||||
<td class="py-2.5 align-middle text-right">
|
||||
<div class="dropdown dropdown-end">
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
<tbody>
|
||||
@foreach($orders as $order)
|
||||
<tr class="hover:bg-base-200/30 transition-colors group">
|
||||
<td class="py-2.5 align-middle">
|
||||
<td class="py-2.5 align-middle cb-cell-id">
|
||||
<a href="{{ route('seller.business.orders.show', [$business->slug, $order]) }}" class="cb-link text-sm font-medium font-mono">
|
||||
{{ $order->order_number }}
|
||||
</a>
|
||||
@@ -82,9 +82,9 @@
|
||||
</td>
|
||||
<td class="py-2.5 align-middle text-right">
|
||||
@if($order->total > 0)
|
||||
<span class="text-sm font-medium">${{ number_format($order->total, 2) }}</span>
|
||||
<span class="text-sm font-medium cb-cell-money">${{ number_format($order->total, 2) }}</span>
|
||||
@else
|
||||
<span class="text-sm text-base-content/40">$0.00</span>
|
||||
<span class="text-sm cb-cell-money-zero">$0.00</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="py-2.5 align-middle text-center hidden lg:table-cell">
|
||||
@@ -96,7 +96,15 @@
|
||||
<span class="text-xs text-base-content/40">—</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="py-2.5 align-middle">
|
||||
@php
|
||||
$statusSurface = match($order->status) {
|
||||
'new' => 'cb-status-surface-new',
|
||||
'in_progress', 'out_for_delivery', 'ready_for_manifest' => 'cb-status-surface-active',
|
||||
'delivered', 'buyer_approved', 'completed' => 'cb-status-surface-complete',
|
||||
default => '',
|
||||
};
|
||||
@endphp
|
||||
<td class="py-2.5 align-middle {{ $statusSurface }}">
|
||||
<x-cb-status-pill :status="$order->status" />
|
||||
</td>
|
||||
<td class="py-2.5 align-middle text-right">
|
||||
|
||||
Reference in New Issue
Block a user