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 = () => {
return currentOrders.map((order) => {
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='flex gap-2'>
<LocationPinIcon size={16} />
@@ -127,7 +127,7 @@ function OrdersIndex() {
</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-start gap-[9px]'>
@@ -142,7 +142,7 @@ function OrdersIndex() {
height={32}
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}
</span>
</span>
@@ -165,7 +165,7 @@ function OrdersIndex() {
const secondTab = () => {
return currentOrders.map((order) => {
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='flex gap-2'>
<LocationPinIcon size={16} />
@@ -177,7 +177,7 @@ function OrdersIndex() {
</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-start gap-[9px]'>
@@ -192,7 +192,7 @@ function OrdersIndex() {
height={32}
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}
</span>
</span>
+1 -1
View File
@@ -280,7 +280,7 @@ html[data-theme="light"] {
/* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1);
/* #F2F2F2 */
--disabled-text: oklch(0.34 0.006 257.4);
--disabled-text: oklch(0.6564 0.0285 276.16);
/* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3);
/* #C3C7DD */
+3 -3
View File
@@ -36,16 +36,16 @@ export type TabContainerClassName = {
export const TabContainerClassNames: TabContainerClassName = {
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: '',
headerDeactive: '',
headerActive: '',
icon: 'text-xs transition-all duration-150',
iconDeactive: 'stroke-disabled-text',
iconActive: 'stroke-black',
iconActive: 'stroke-black dark:stroke-foreground',
title: 'text-xs transition-all duration-150',
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) {