style: Update dark mode color palette from neutral to zinc.

This commit is contained in:
Yoga Pangestu 2026-01-03 14:49:51 +07:00
parent 07e0c4ce90
commit acfa2977b3

View File

@ -13,10 +13,9 @@
<div class="mt-6"> <div class="mt-6">
<flux:card> <flux:card>
<div class="px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10"> <div class="px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
<div <div class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-zinc-600">
class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-neutral-700">
<div> <div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-neutral-200">Invoice</h2> <h2 class="text-2xl font-semibold text-gray-800 dark:text-zinc-100">Invoice</h2>
</div> </div>
</div> </div>
@ -24,10 +23,10 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
<div class="grid md:grid-cols-2 gap-3"> <div class="grid md:grid-cols-2 gap-3">
<div> <div>
<div class="space-y-1 text-sm"> <div class="space-y-1 text-sm">
<p class="text-gray-500 dark:text-neutral-500"> <p class="text-gray-500 dark:text-zinc-400">
Untuk pelanggan kami yang terhormat, Untuk pelanggan kami yang terhormat,
</p> </p>
<p class="font-medium text-gray-800 dark:text-neutral-200"> <p class="font-medium text-gray-800 dark:text-zinc-100">
{{ $orderData['customer'] }} {{ $orderData['customer'] }}
</p> </p>
</div> </div>
@ -36,37 +35,37 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
<div> <div>
<div class="grid space-y-3"> <div class="grid space-y-3">
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm"> <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500"> <dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
Nomor Invoice: Nomor Invoice:
</dt> </dt>
<dd class="font-medium text-gray-800 dark:text-neutral-200"> <dd class="font-medium text-gray-800 dark:text-zinc-100">
{{ $orderData['invoice_number'] }} {{ $orderData['invoice_number'] }}
</dd> </dd>
</dl> </dl>
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm"> <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500"> <dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
Status: Status:
</dt> </dt>
<dd class="font-medium text-gray-800 dark:text-neutral-200"> <dd class="font-medium text-gray-800 dark:text-zinc-100">
{{ $orderData['status'] }} {{ $orderData['status'] }}
</dd> </dd>
</dl> </dl>
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm"> <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500"> <dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
Tanggal: Tanggal:
</dt> </dt>
<dd class="font-medium text-gray-800 dark:text-neutral-200"> <dd class="font-medium text-gray-800 dark:text-zinc-100">
{{ $orderData['date'] }} {{ $orderData['date'] }}
</dd> </dd>
</dl> </dl>
<dl class="flex flex-col sm:flex-row gap-x-3 text-sm"> <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
<dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500"> <dt class="min-w-36 max-w-50 text-gray-500 dark:text-zinc-400">
Order di: Order di:
</dt> </dt>
<dd class="font-medium text-gray-800 dark:text-neutral-200"> <dd class="font-medium text-gray-800 dark:text-zinc-100">
{{ $orderData['channel'] }} {{ $orderData['channel'] }}
</dd> </dd>
</dl> </dl>
@ -77,51 +76,51 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
<!-- End Grid --> <!-- End Grid -->
<!-- Table --> <!-- Table -->
<div class="mt-6 border border-gray-200 p-4 rounded-lg space-y-4 dark:border-neutral-700"> <div class="mt-6 border border-gray-200 p-4 rounded-lg space-y-4 dark:border-zinc-600">
<div class="hidden sm:grid sm:grid-cols-5"> <div class="hidden sm:grid sm:grid-cols-5">
<div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase dark:text-neutral-500"> <div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
Item Item
</div> </div>
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500"> <div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
Kuantitas Kuantitas
</div> </div>
<div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Harga <div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">Harga
</div> </div>
<div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Total <div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">Total
</div> </div>
</div> </div>
<div class="hidden sm:block border-b border-gray-200 dark:border-neutral-700"></div> <div class="hidden sm:block border-b border-gray-200 dark:border-zinc-600"></div>
@foreach ($items as $item) @foreach ($items as $item)
<div class="grid grid-cols-3 sm:grid-cols-5 gap-2" wire:key="item-{{ $item['id'] }}"> <div class="grid grid-cols-3 sm:grid-cols-5 gap-2" wire:key="item-{{ $item['id'] }}">
<div class="col-span-full sm:col-span-2"> <div class="col-span-full sm:col-span-2">
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500"> <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
Item Item
</h5> </h5>
<p class="font-medium text-gray-800 dark:text-neutral-200">{{ $item['name'] }}</p> <p class="font-medium text-gray-800 dark:text-zinc-100">{{ $item['name'] }}</p>
</div> </div>
<div> <div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500"> <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
Kuantitas Kuantitas
</h5> </h5>
<p class="text-gray-800 dark:text-neutral-200">{{ $item['quantity'] }}</p> <p class="text-gray-800 dark:text-zinc-100">{{ $item['quantity'] }}</p>
</div> </div>
<div> <div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500"> <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
Harga Harga
</h5> </h5>
<p class="text-gray-800 dark:text-neutral-200">{{ $item['unit_price'] }}</p> <p class="text-gray-800 dark:text-zinc-100">{{ $item['unit_price'] }}</p>
</div> </div>
<div> <div>
<h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500"> <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-zinc-400">
Total Total
</h5> </h5>
<p class="sm:text-end text-gray-800 dark:text-neutral-200">{{ $item['total'] }}</p> <p class="sm:text-end text-gray-800 dark:text-zinc-100">{{ $item['total'] }}</p>
</div> </div>
</div> </div>
<div class="sm:hidden border-b border-gray-200 dark:border-neutral-700"></div> <div class="sm:hidden border-b border-gray-200 dark:border-zinc-600"></div>
@endforeach @endforeach
</div> </div>
<!-- End Table --> <!-- End Table -->
@ -132,20 +131,20 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
<!-- Grid --> <!-- Grid -->
<div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2"> <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm"> <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500 dark:text-neutral-500">Subotal:</dt> <dt class="col-span-3 text-gray-500 dark:text-zinc-400">Subotal:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200"> <dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
{{ $orderData['subtotal'] }}</dd> {{ $orderData['subtotal'] }}</dd>
</dl> </dl>
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm"> <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500 dark:text-neutral-500">Diskon:</dt> <dt class="col-span-3 text-gray-500 dark:text-zinc-400">Diskon:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200"> <dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
{{ $orderData['discount'] }}</dd> {{ $orderData['discount'] }}</dd>
</dl> </dl>
<dl class="grid sm:grid-cols-5 gap-x-3 text-sm"> <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
<dt class="col-span-3 text-gray-500 dark:text-neutral-500">Total:</dt> <dt class="col-span-3 text-gray-500 dark:text-zinc-400">Total:</dt>
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200"> <dd class="col-span-2 font-medium text-gray-800 dark:text-zinc-100">
{{ $orderData['total'] }}</dd> {{ $orderData['total'] }}</dd>
</dl> </dl>