add: order history page dark theme

This commit is contained in:
Mahyar Khanbolooki
2025-08-12 20:08:16 +03:30
parent 3ff244c9b1
commit a67711b075
3 changed files with 10 additions and 10 deletions
+6 -6
View File
@@ -115,7 +115,7 @@ function OrdersIndex() {
const firstTab = () => { const firstTab = () => {
return currentOrders.map((order) => { return currentOrders.map((order) => {
return ( return (
<div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-white rounded-3xl'> <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
<div className="text-sm2"> <div className="text-sm2">
<div className='flex gap-2'> <div className='flex gap-2'>
<LocationPinIcon size={16} /> <LocationPinIcon size={16} />
@@ -127,7 +127,7 @@ function OrdersIndex() {
</div> </div>
</div> </div>
<hr className='mx-4 mt-6 text-disabled3 border-2' /> <hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
<div className='flex justify-between mt-6'> <div className='flex justify-between mt-6'>
<div className='flex justify-start gap-[9px]'> <div className='flex justify-start gap-[9px]'>
@@ -142,7 +142,7 @@ function OrdersIndex() {
height={32} height={32}
alt="order image" alt="order image"
/> />
<span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5"> <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-container border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
{item.quantity} {item.quantity}
</span> </span>
</span> </span>
@@ -165,7 +165,7 @@ function OrdersIndex() {
const secondTab = () => { const secondTab = () => {
return currentOrders.map((order) => { return currentOrders.map((order) => {
return ( return (
<div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-white rounded-3xl'> <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
<div className="text-sm2"> <div className="text-sm2">
<div className='flex gap-2'> <div className='flex gap-2'>
<LocationPinIcon size={16} /> <LocationPinIcon size={16} />
@@ -177,7 +177,7 @@ function OrdersIndex() {
</div> </div>
</div> </div>
<hr className='mx-4 mt-6 text-disabled3 border-2' /> <hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
<div className='flex justify-between mt-6'> <div className='flex justify-between mt-6'>
<div className='flex justify-start gap-[9px]'> <div className='flex justify-start gap-[9px]'>
@@ -192,7 +192,7 @@ function OrdersIndex() {
height={32} height={32}
alt="order image" alt="order image"
/> />
<span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5"> <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-container border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
{item.quantity} {item.quantity}
</span> </span>
</span> </span>
+1 -1
View File
@@ -280,7 +280,7 @@ html[data-theme="light"] {
/* #7F7F7F */ /* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1); --disabled3: oklch(0.949 0.002 277.1);
/* #F2F2F2 */ /* #F2F2F2 */
--disabled-text: oklch(0.34 0.006 257.4); --disabled-text: oklch(0.6564 0.0285 276.16);
/* #8C90A3 */ /* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3); --menu-header: oklch(0.79 0.03 237.3);
/* #C3C7DD */ /* #C3C7DD */
+3 -3
View File
@@ -36,16 +36,16 @@ export type TabContainerClassName = {
export const TabContainerClassNames: TabContainerClassName = { export const TabContainerClassNames: TabContainerClassName = {
wrapper: 'h-full', wrapper: 'h-full',
scrollView: 'h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] justify-center rounded-[32px] inline-flex items-center gap-10', scrollView: 'h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] dark:bg-container/70 justify-center rounded-[32px] inline-flex items-center gap-10',
header: '', header: '',
headerDeactive: '', headerDeactive: '',
headerActive: '', headerActive: '',
icon: 'text-xs transition-all duration-150', icon: 'text-xs transition-all duration-150',
iconDeactive: 'stroke-disabled-text', iconDeactive: 'stroke-disabled-text',
iconActive: 'stroke-black', iconActive: 'stroke-black dark:stroke-foreground',
title: 'text-xs transition-all duration-150', title: 'text-xs transition-all duration-150',
titleDeactive: 'text-disabled-text', titleDeactive: 'text-disabled-text',
titleActive: 'text-black' titleActive: 'text-black dark:text-foreground'
} }
function TabContainer({ className = TabContainerClassNames, changeType = TabContainerRenderType.RENDERER, defaultIndex = 0, itemRenderer, children, ...restProps }: Props) { function TabContainer({ className = TabContainerClassNames, changeType = TabContainerRenderType.RENDERER, defaultIndex = 0, itemRenderer, children, ...restProps }: Props) {