style: Update dark mode color palette from neutral to zinc.
This commit is contained in:
Yoga Pangestu
parent
07e0c4ce90
commit
acfa2977b3
@ -13,10 +13,9 @@
|
||||
<div class="mt-6">
|
||||
<flux:card>
|
||||
<div class="px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
|
||||
<div
|
||||
class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-neutral-700">
|
||||
<div class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-zinc-600">
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
<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,
|
||||
</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'] }}
|
||||
</p>
|
||||
</div>
|
||||
@ -36,37 +35,37 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
|
||||
<div>
|
||||
<div class="grid space-y-3">
|
||||
<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:
|
||||
</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'] }}
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<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:
|
||||
</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'] }}
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<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:
|
||||
</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'] }}
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<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:
|
||||
</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'] }}
|
||||
</dd>
|
||||
</dl>
|
||||
@ -77,51 +76,51 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
|
||||
<!-- End Grid -->
|
||||
|
||||
<!-- 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="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
|
||||
</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
|
||||
</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 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 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)
|
||||
<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">
|
||||
<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
|
||||
</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>
|
||||
<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
|
||||
</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>
|
||||
<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
|
||||
</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>
|
||||
<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
|
||||
</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 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
|
||||
</div>
|
||||
<!-- End Table -->
|
||||
@ -132,20 +131,20 @@ class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark
|
||||
<!-- Grid -->
|
||||
<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">
|
||||
<dt class="col-span-3 text-gray-500 dark:text-neutral-500">Subotal:</dt>
|
||||
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
|
||||
<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-zinc-100">
|
||||
{{ $orderData['subtotal'] }}</dd>
|
||||
</dl>
|
||||
|
||||
<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>
|
||||
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
|
||||
<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-zinc-100">
|
||||
{{ $orderData['discount'] }}</dd>
|
||||
</dl>
|
||||
|
||||
<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>
|
||||
<dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">
|
||||
<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-zinc-100">
|
||||
{{ $orderData['total'] }}</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user