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