danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

add: menu page dark theme

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-12 19:30:16 +03:30
parent 5936f66665
commit d11cd474ab
11 changed files with 119 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/page.tsx
+10 -11
View File
@@ -5,7 +5,6 @@ import SearchBox from "@/components/input/SearchBox";
import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
import Image from "next/image";
import EqualizerIcon from "@/components/icons/EqualizerIcon";
import TextAlignIcon from "@/components/icons/TextAlignIcon";
import VerticalScrollView from "@/components/listview/VerticalScrollView";
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
@@ -15,7 +14,7 @@ import Button from "@/components/button/PrimaryButton";
import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
import { Switch } from "@/components/ui/switch";
import { TicketPercentIcon } from "lucide-react";
import { MedalStar } from 'iconsax-react'
import { Candle2, MedalStar } from 'iconsax-react'
import { useQueryState } from 'next-usequerystate'
import clsx from "clsx";
import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
@@ -224,7 +223,7 @@ const MenuIndex = () => {
<CategoryItemRenderer
key={index}
className={clsx(
index === +selectedCategory && "bg-white!",
index === +selectedCategory && "bg-container!",
)}
onClick={() => updateCategory(index)}
>
@@ -235,7 +234,7 @@ const MenuIndex = () => {
height={32}
alt="category image"
/>
<span className="text-xs text-black">{item.title}</span>
<span className="text-xs text-foreground">{item.title}</span>
</CategoryItemRenderer>
))}
</HorizontalScrollView>
@@ -247,12 +246,12 @@ const MenuIndex = () => {
{categories[+selectedCategory]?.title}
</span>
<div className="inline-flex gap-2 justify-around items-center">
<button onClick={toggleFilterModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
<EqualizerIcon />
<button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
<Candle2 className="stroke-foreground" size={16} />
<span className="text-xs leading-5 font-medium">{tMenu('MenuFilterDrawer.Label')}</span>
</button>
<button onClick={toggleSortingModal} className="rounded-lg h-8 bg-white p-1.5">
<TextAlignIcon />
<button onClick={toggleSortingModal} className="rounded-lg h-8 bg-container p-1.5">
<TextAlignIcon className="text-foreground" />
</button>
</div>
</div>
@@ -262,7 +261,7 @@ const MenuIndex = () => {
animate={{ y: smallCategoriesVisible ? 0 : -50, opacity: smallCategoriesVisible ? 1 : 0 }}
transition={{ duration: .1 }}
className={clsx(
'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
``
)}>
<HorizontalScrollView className="w-full noscrollbar py-4!">
@@ -270,7 +269,7 @@ const MenuIndex = () => {
<CategorySmallItemRenderer
key={index}
className={clsx(
index === +selectedCategory && "bg-white!",
index === +selectedCategory && "bg-container!",
)}
onClick={() => updateCategory(index)}
>
@@ -281,7 +280,7 @@ const MenuIndex = () => {
height={24}
alt="category image"
/>
<span className="text-xs text-black">{item.title}</span>
<span className="text-xs text-foreground">{item.title}</span>
</CategorySmallItemRenderer>
))}
</HorizontalScrollView>
src/app/globals.css
+89 -48
View File
@@ -37,7 +37,7 @@ input[type="password"]:not(:placeholder-shown) {
font-style: normal;
font-weight: normal;
speak: none;
color: #b6b6b6da;
color: var(--disabled-text);
margin: 5px 0px 10px 0px;
font-size: 24px;
/* Controls dot size (width & height) */
@@ -96,7 +96,7 @@ input[type="password"]:not(:placeholder-shown) {
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 0px transparent inset !important;
box-shadow: 0 0 0px 0px transparent inset !important;
-webkit-text-fill-color: #b6b6b6da !important;
-webkit-text-fill-color: var(--disabled-text) !important;
background: currentColor !important;
transition: background-color 10000s ease-in-out 0s;
}
@@ -104,7 +104,7 @@ input:-webkit-autofill {
input:autofill {
-webkit-box-shadow: 0 0 0px 0px transparent inset !important;
box-shadow: 0 0 0px 0px transparent inset !important;
-webkit-text-fill-color: #b6b6b6da !important;
-webkit-text-fill-color: var(--disabled-text) !important;
background: currentColor !important;
transition: background-color 10000s ease-in-out 0s;
}
@@ -129,9 +129,9 @@ input:autofill {
border-radius: inherit;
/* inherit border-radius from parent */
background: linear-gradient(to bottom right,
#FFFFFF 6.25%,
var(--container) 6.25%,
rgba(255, 253, 253, 0) 52.01%,
#FFFFFF 96.87%);
var(--container) 96.87%);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
@@ -146,7 +146,6 @@ input:autofill {
box-sizing: border-box;
}
@theme {
--font-irancell: var(--font-irancell);
@@ -187,20 +186,34 @@ input:autofill {
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-background: var(--background); /* oklch(0.963 0.008 289.2) */
--color-container: var(--container); /* oklch(1 0 0) */
--color-primary: var(--primary); /* oklch(0.14 0 0) */
--color-border: var(--border); /* oklch(0.885 0.007 248.3) */
--color-invalid: var(--invalid); /* oklch(0.515 0.118 27.5) */
--color-valid: var(--valid); /* oklch(0.46 0.107 132.7) */
--color-foreground: var(--foreground); /* oklch(0.202 0 0) */
--color-disabled: var(--disabled); /* oklch(0.91 0.004 295.2) */
--color-disabled2: var(--disabled2); /* oklch(0.5 0 0) */
--color-disabled3: var(--disabled3); /* oklch(0.949 0.002 277.1) */
--color-disabled-text: var(--disabled-text); /* oklch(0.34 0.006 257.4) */
--color-menu-header: var(--menu-header); /* oklch(0.79 0.03 237.3) */
--color-icon-deactive: var(--icon-deactive); /* oklch(0.65 0.027 234.8) */
--color-icon-active: var(--icon-active); /* oklch(0.12 0.002 304.5) */
--color-background: var(--background);
/* oklch(0.963 0.008 289.2) */
--color-container: var(--container);
/* oklch(1 0 0) */
--color-primary: var(--primary);
/* oklch(0.14 0 0) */
--color-border: var(--border);
/* oklch(0.885 0.007 248.3) */
--color-invalid: var(--invalid);
/* oklch(0.515 0.118 27.5) */
--color-valid: var(--valid);
/* oklch(0.46 0.107 132.7) */
--color-foreground: var(--foreground);
/* oklch(0.202 0 0) */
--color-disabled: var(--disabled);
/* oklch(0.91 0.004 295.2) */
--color-disabled2: var(--disabled2);
/* oklch(0.5 0 0) */
--color-disabled3: var(--disabled3);
/* oklch(0.949 0.002 277.1) */
--color-disabled-text: var(--disabled-text);
/* oklch(0.34 0.006 257.4) */
--color-menu-header: var(--menu-header);
/* oklch(0.79 0.03 237.3) */
--color-icon-deactive: var(--icon-deactive);
/* oklch(0.65 0.027 234.8) */
--color-icon-active: var(--icon-active);
/* oklch(0.12 0.002 304.5) */
}
/* unified theme */
@@ -247,20 +260,34 @@ html[data-theme="light"] {
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0); */
--background: oklch(0.963 0.008 289.2); /* #F4F5F9 */
--container: oklch(1 0 0); /* #FFFFFF */
--primary: oklch(0.14 0 0); /* #000000 */
--border: oklch(0.885 0.007 248.3); /* #E5E5E5 */
--invalid: oklch(0.515 0.118 27.5); /* red (#FF0000 approx) */
--valid: oklch(0.46 0.107 132.7); /* #439C46 */
--foreground: oklch(0.202 0 0); /* #333333 */
--disabled: oklch(0.91 0.004 295.2); /* #E7E7E7 */
--disabled2: oklch(0.5 0 0); /* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1); /* #F2F2F2 */
--disabled-text: oklch(0.34 0.006 257.4); /* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3); /* #C3C7DD */
--icon-deactive: oklch(0.65 0.027 234.8); /* #A8ABBF */
--icon-active: oklch(0.12 0.002 304.5); /* #292D32 */
--background: oklch(0.963 0.008 289.2);
/* #F4F5F9 */
--container: oklch(1 0 0);
/* #FFFFFF */
--primary: oklch(0.14 0 0);
/* #000000 */
--border: oklch(0.885 0.007 248.3);
/* #E5E5E5 */
--invalid: oklch(0.515 0.118 27.5);
/* red (#FF0000 approx) */
--valid: oklch(0.46 0.107 132.7);
/* #439C46 */
--foreground: oklch(0.202 0 0);
/* #333333 */
--disabled: oklch(0.91 0.004 295.2);
/* #E7E7E7 */
--disabled2: oklch(0.5 0 0);
/* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1);
/* #F2F2F2 */
--disabled-text: oklch(0.34 0.006 257.4);
/* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3);
/* #C3C7DD */
--icon-deactive: oklch(0.65 0.027 234.8);
/* #A8ABBF */
--icon-active: oklch(0.12 0.002 304.5);
/* #292D32 */
}
html[data-theme="dark"] {
@@ -296,20 +323,34 @@ html[data-theme="dark"] {
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0); */
--background: oklch(23.26% 0.014 253.1); /* #F4F5F9 */
--container: oklch(25.33% 0.016 252.42); /* #FFFFFF */
--primary: oklch(14% 0.005 285.823); /* #000000 */
--border: oklch(21.15% 0.012 254.09); /* #E5E5E5 */
--invalid: oklch(0.515 0.118 27.5); /* red (#FF0000 approx) */
--valid: oklch(0.46 0.107 132.7); /* #439C46 */
--foreground: oklch(97.807% 0.029 256.847); /* #333333 */
--disabled: oklch(42.866% 0.00494 286.051); /* #E7E7E7 */
--disabled2: oklch(0.5 0 0); /* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1); /* #F2F2F2 */
--disabled-text: oklch(75.73% 0.01398 251.72); /* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3); /* #C3C7DD */
--icon-deactive: oklch(0.65 0.027 234.8); /* #A8ABBF */
--icon-active: oklch(0.12 0.002 304.5); /* #292D32 */
--background: oklch(23.26% 0.014 253.1);
/* #F4F5F9 */
--container: oklch(30.33% 0.016 252.42);
/* #FFFFFF */
--primary: oklch(14% 0.005 285.823);
/* #000000 */
--border: oklch(21.15% 0.012 254.09);
/* #E5E5E5 */
--invalid: oklch(0.515 0.118 27.5);
/* red (#FF0000 approx) */
--valid: oklch(0.46 0.107 132.7);
/* #439C46 */
--foreground: oklch(97.807% 0.029 256.847);
/* #333333 */
--disabled: oklch(42.866% 0.00494 286.051);
/* #E7E7E7 */
--disabled2: oklch(0.5 0 0);
/* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1);
/* #F2F2F2 */
--disabled-text: oklch(75.73% 0.01398 251.72);
/* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3);
/* #C3C7DD */
--icon-deactive: oklch(0.65 0.027 234.8);
/* #A8ABBF */
--icon-active: oklch(0.12 0.002 304.5);
/* #292D32 */
}
/* @layer base {
src/components/icons/MinusIcon.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface MinusIconProps {
const MinusIcon: React.FC<MinusIconProps> = ({
className = '',
stroke = '#333333',
stroke = 'currentColor',
strokeWidth = 1.5,
size = 10,
}) => {
src/components/icons/PlusIcon.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface PlusIconProps {
const PlusIcon: React.FC<PlusIconProps> = ({
className = '',
stroke = '#333333',
stroke = 'currentColor',
strokeWidth = 1.5,
size = 10,
}) => {
src/components/icons/TextAlignIcon.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface TextAlignIconProps {
const TextAlignIcon: React.FC<TextAlignIconProps> = ({
className = '',
stroke = '#333333',
stroke = 'currentColor',
strokeWidth = 1.5,
size = 20,
}) => {
src/components/input/SearchBox.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ interface SearchboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
export default function SearchBox({ className, value, placeholder = '', onChange, ...props }: SearchboxProps) {
return (
<div className={clsx(
"bg-white inline-flex rounded-xl px-4 h-10 w-full items-center content-center",
"bg-container inline-flex rounded-xl px-4 h-10 w-full items-center content-center",
className
)}>
<SearchIcon stroke="#8C90A3" />
src/components/listview/CategoryItemRenderer.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ type Props = {
function CategoryItemRenderer({ children, ...rest }: Props) {
return (
<div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-white/40`}>
<div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40`}>
<div
{...rest}
className="rounded-normal w-[88px] h-[88px] flex flex-col justify-center items-center gap-2"
src/components/listview/CategorySmallItemRenderer.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ type Props = {
function CategorySmallItemRenderer({ children, ...rest }: Props) {
return (
<div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-white/40`}>
<div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40 dark:bg-background`}>
<div
{...rest}
className="rounded-normal h-[44px] flex flex-row justify-center items-center p-2.5 gap-2"
src/components/listview/MenuItem.tsx
+6 -6
View File
@@ -32,7 +32,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
/>
<div className="w-full inline-flex flex-col justify-between">
<div>
<div className="text-sm2 font-normal text-black">{food.name}</div>
<div className="text-sm2 font-normal text-black dark:text-white">{food.name}</div>
<div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
{food.contains}
</div>
@@ -49,15 +49,15 @@ const MenuItem = ({ food }: MenuItemProps) => {
className="inline-flex w-full justify-center items-center gap-2"
>
<PlusIcon />
<div className="text-sm2 pt-0.5 font-normal text-black">افزودن</div>
<div className="text-sm2 pt-0.5 font-normal text-foreground">افزودن</div>
</button>
) : (
<>
<button
onClick={() => increment(food.id)}
className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
>
<PlusIcon />
<PlusIcon className="text-foreground" />
</button>
<motion.div
key={quantity}
@@ -72,9 +72,9 @@ const MenuItem = ({ food }: MenuItemProps) => {
<button
onClick={() => decrement(food.id)}
className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
>
<MinusIcon />
<MinusIcon className="text-foreground" />
</button>
</>
)}
src/components/listview/MenuItemRenderer.tsx
+1 -4
View File
@@ -10,10 +10,7 @@ function MenuItemRendererComponent({ children, ...rest }: Props) {
return (
<div
{...rest}
className={`${rest.className} transition-all duration-200 ease-out w-full min-h-36 bg-white rounded-3xl px-4 flex items-center justify-between gap-4`}
style={{
boxShadow: '0px 2px 16px 0px #00000014'
}}>
className={`${rest.className} box-shadow-normal transition-all duration-200 ease-out w-full min-h-36 bg-container rounded-3xl px-4 flex items-center justify-between gap-4`}>
{children}
</div>
src/components/topbar/TopBar.tsx
+5 -6
View File
@@ -1,10 +1,9 @@
'use client'
import React from 'react'
import BurgerMenuIcon from '../icons/BurgerMenuIcon'
import NotificationBellIcon from '../icons/NotificationBellIcon'
import Image from 'next/image'
import { ArrowDown2, LogoutCurve, ProfileCircle, Setting2 } from 'iconsax-react'
import { ArrowDown2, HambergerMenu, LogoutCurve, ProfileCircle, Setting2 } from 'iconsax-react'
import Dropdown from '../utils/Dropdown'
import Seperator from '../utils/Seperator'
import Link from 'next/link'
@@ -33,7 +32,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
<div className='grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 xl:gap-8 items-center'>
<div className='inline-flex justify-between items-center'>
<button className='inline-block xl:hidden' onClick={toggleMenuState}>
<BurgerMenuIcon />
<HambergerMenu className='stroke-foreground' size={24} />
</button>
{/* <div onClick={toggleSearchModalState} className='xl:bg-[#EEF0F7] xl:hidden inline-flex rounded-xl px-4 h-12 xl:w-[370px] items-center content-center' >
S
@@ -54,7 +53,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
width={73}
height={25}
alt='Profile avatar'
className='rounded-full'
className='rounded-full dark:invert-100'
src={'/assets/images/danak-logo.png'} />
</div>
<div className='flex items-center justify-end gap-3 xl:gap-6'>
@@ -63,8 +62,8 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
<Link
href={`/${name}/notifications`}
className='relative'>
<NotificationBellIcon className='size-4.5 text-icon-active' />
<span className='absolute -right-1 -top-1 bg-red-500 size-3 rounded-full text-[8px] text-white'>
<NotificationBellIcon className='size-4.5 text-icon-active dark:text-foreground' />
<span className='absolute -right-1 -top-1 bg-red-500 size-3 rounded-full text-[8px] text-container'>
<div className='mt-0.25 place-self-center'>2</div>
</span>
</Link>