add: order history page dark theme
This commit is contained in:
@@ -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
@@ -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 */
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user