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

glass other page

Browse Source
This commit is contained in:
hamid zarghami
2026-06-21 15:02:18 +03:30
parent de45b1f197
commit d34a3a92f1
33 changed files with 106 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Dialogs)/game/page.tsx
+4 -3
View File
@@ -4,6 +4,7 @@ import { type FC } from 'react'
import { useRouter } from 'next/navigation'
import Seperator from '@/components/utils/Seperator'
import Image from 'next/image'
import { glassSurfaceCardFlat } from '@/lib/styles/glassSurface'
const GamePage: FC = () => {
@@ -46,7 +47,7 @@ const GamePage: FC = () => {
<div className='mt-8 flex flex-col gap-4'>
<div
style={{ direction: 'ltr' }}
className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
className={glassSurfaceCardFlat('rounded-[10px] p-2 flex justify-between items-center cursor-pointer')}
onClick={() => {
const currentPath = window.location.pathname
const basePath = currentPath.split('/game')[0]
@@ -76,7 +77,7 @@ const GamePage: FC = () => {
<div
style={{ direction: 'ltr' }}
className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
className={glassSurfaceCardFlat('rounded-[10px] p-2 flex justify-between items-center cursor-pointer')}
onClick={() => {
const currentPath = window.location.pathname
const basePath = currentPath.split('/game')[0]
@@ -106,7 +107,7 @@ const GamePage: FC = () => {
<div
style={{ direction: 'ltr' }}
className='bg-white dark:bg-container shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer border border-transparent dark:border-border/50'
className={glassSurfaceCardFlat('rounded-[10px] p-2 flex justify-between items-center cursor-pointer')}
onClick={() => {
const currentPath = window.location.pathname
const basePath = currentPath.split('/game')[0]
src/app/[name]/(Dialogs)/notifications/page.tsx
+2 -1
View File
@@ -10,6 +10,7 @@ import { useGetNotifications, useReadAllNotifications } from './hooks/useNotific
import type { Notification } from './types/Types';
import { useGetNotificationsCount } from '../../(Main)/hooks/useMenuData';
import Prompt from '@/components/utils/Prompt';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type Props = object
@@ -110,7 +111,7 @@ export default function NotificationsIndex({ }: Props) {
const formattedTime = formatTime(notification.createdAt);
return (
<li key={notification.id} className='bg-container py-5 px-4 rounded-container shadow-lg'>
<li key={notification.id} className={glassSurfaceCard('py-5 px-4')}>
{/* <h5 className='font-medium text-sm'>{notification.title}</h5> */}
<p className='text-xs mt-2 leading-5'>{notification.content}</p>
src/app/[name]/(Dialogs)/order/checkout/[id]/components/AddressSection.tsx
+3 -2
View File
@@ -8,6 +8,7 @@ import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
import { useCheckoutStore } from '../../store/Store';
import useToggle from '@/hooks/helpers/useToggle';
import { AddressSelectionModal } from './AddressSelectionModal';
@@ -66,7 +67,7 @@ export const AddressSection = () => {
// اگر آدرس ندارد
if (addresses.length === 0) {
return (
<section className="bg-container rounded-container box-shadow-normal p-4">
<section className={glassSurfaceCard('p-4')}>
<div className="py-3">
<h3 className="text-sm2 font-medium leading-5 mb-4">{t("SectionAddress.Title")}</h3>
<p className='text-sm2 text-disabled-text mb-4'>
@@ -89,7 +90,7 @@ export const AddressSection = () => {
return (
<>
<section className="bg-container rounded-container box-shadow-normal p-4">
<section className={glassSurfaceCard('p-4')}>
<div className="py-3">
<div className='w-full flex justify-between items-center gap-2'>
<h3 className="text-sm2 font-medium leading-5 inline-block">{t("SectionAddress.Title")}</h3>
src/app/[name]/(Dialogs)/order/checkout/[id]/components/CarAddressSection.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
'use client';
import InputField from '@/components/input/InputField';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
import { useCheckoutStore } from '../../store/Store';
import { useCallback, useEffect } from 'react';
@@ -42,7 +43,7 @@ export const CarAddressSection = () => {
}, [carAddress, setCarAddress]);
return (
<section className="bg-container rounded-container box-shadow-normal p-4">
<section className={glassSurfaceCard('p-4')}>
<div className="py-3">
<h3 className="text-sm2 font-medium leading-5 mb-4">
اطلاعات خودرو
src/app/[name]/(Dialogs)/order/checkout/[id]/components/CouponSection.tsx
+2 -1
View File
@@ -8,6 +8,7 @@ import { useApplyCoupon, useRemoveCoupon } from '../../hooks/useOrderData';
import Button from '@/components/button/PrimaryButton';
import { extractErrorMessage } from '@/lib/func';
import { toast } from '@/components/Toast';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
import { useEffect, useState } from 'react';
import { useGetCartItems } from '@/app/[name]/(Main)/cart/hooks/useCartData';
@@ -73,7 +74,7 @@ export const CouponSection = ({
}, [cartItems, onCouponCodeChange]);
return (
<section className="bg-container rounded-container box-shadow-normal p-4">
<section className={glassSurfaceCard('p-4')}>
<div className="py-3">
<h3 className="text-sm2 font-medium leading-5">{t("SectionCoupon.Title")}</h3>
src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx
+2 -1
View File
@@ -8,6 +8,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { extractErrorMessage } from "@/lib/func";
import { Card, Icon, Wallet2 } from "iconsax-react";
import Image from "next/image";
import { glassSurfaceCard } from "@/lib/styles/glassSurface";
import { useCallback, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import { PaymentMethodEnum } from "../../enum/Enum";
@@ -121,7 +122,7 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect
};
return (
<section className="bg-container rounded-container box-shadow-normal p-4">
<section className={glassSurfaceCard('p-4')}>
<div className="py-3">
<h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionPayment.Title")}</h3>
src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx
+2 -1
View File
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
import { useGetShipmentMethod } from '../../hooks/useOrderData';
import { DeliveryMethod } from '../../types/Types';
import { useCheckoutStore } from '../../store/Store';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type ShippingSectionProps = {
deliveryType: string;
@@ -57,7 +58,7 @@ export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: Shipping
})) || [];
return (
<section className="bg-container rounded-container box-shadow-normal p-4">
<section className={glassSurfaceCard('p-4')}>
<div className="py-3">
<h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionShipping.Title")}</h3>
<Combobox
src/app/[name]/(Dialogs)/order/checkout/[id]/components/TableSection.tsx
+2 -1
View File
@@ -3,6 +3,7 @@
import { MinusIcon, PlusIcon } from 'lucide-react';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type TableSectionProps = {
tableNumber: number;
@@ -14,7 +15,7 @@ export const TableSection = ({ tableNumber, onIncrement, onDecrement }: TableSec
const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
return (
<section className="bg-container rounded-container box-shadow-normal p-4 py-2">
<section className={glassSurfaceCard('p-4 py-2')}>
<div className="py-3">
<div className='w-full grid grid-cols-2 justify-between items-center gap-2'>
<h3 className="text-sm2 font-medium leading-5 inline-block">{t("SectionTable.Title")}</h3>
src/app/[name]/(Dialogs)/verify/[id]/page.tsx
+2 -1
View File
@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react'
import { useVerify } from '../hooks/useVerifyData';
import { toast } from '@/components/Toast';
import { VerifyData } from '../types/Types';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type Props = object
@@ -74,7 +75,7 @@ export default function VerifyIndex({ }: Props) {
return (
<div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
<div className='flex-1 flex flex-col items-center justify-center'>
<div className='bg-container py-5 px-2 rounded-container shadow-lg w-full'>
<div className={glassSurfaceCard('py-5 px-2 w-full')}>
<div className={`items-center gap-2 rounded-2xl h-35 flex flex-col justify-center ${isError ? 'bg-red-50' : 'bg-gray-50'}`}>
{isError ? (
<CloseCircle className='size-10 stroke-red-500' variant='TwoTone' />
src/app/[name]/(Main)/[id]/page.tsx
+7 -6
View File
@@ -7,6 +7,7 @@ import { toast, toastLoginRequired } from "@/components/Toast";
import { getToken } from "@/lib/api/func";
import { ef } from "@/lib/helpers/utfNumbers";
import clsx from "clsx";
import { glassSurface, glassSurfaceCard, glassSurfaceFlat } from "@/lib/styles/glassSurface";
import { motion } from "framer-motion";
import { ArrowLeft, Clock, Cup, Heart, TruckTick } from "iconsax-react";
import { useParams, useRouter } from "next/navigation";
@@ -135,7 +136,7 @@ function FoodPage({}: Props) {
!isAvailable && "opacity-50",
)}
>
<div className="relative w-full lg:h-full min-h-0 not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
<div className={glassSurface('relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:!bg-transparent lg:!border-0 lg:!shadow-none lg:[backdrop-filter:none]')}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
className="lg:object-cover lg:h-full object-cover bg-[#F2F2F9] w-full"
@@ -146,12 +147,12 @@ function FoodPage({}: Props) {
}}
/>
<div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
<div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
<div className={glassSurfaceFlat('whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold')}>
{categoryName || "-"}
</div>
<button
onClick={handleBackToMenu}
className="p-2 rounded-full bg-container/40"
className={glassSurfaceFlat('p-2 rounded-full')}
>
<ArrowLeft
size={18}
@@ -161,7 +162,7 @@ function FoodPage({}: Props) {
</div>
</div>
<div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:h-full lg:min-h-0 bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none lg:overflow-y-auto">
<div className={glassSurfaceCard('relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:h-full lg:min-h-0 w-full overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none lg:overflow-y-auto rounded-3xl')}>
<div className="w-full inline-flex justify-between items-center shrink-0">
<h5 className="text-base font-bold">{foodName}</h5>
<button
@@ -249,7 +250,7 @@ function FoodPage({}: Props) {
<button
onClick={handleAddToCart}
disabled={!isAvailable}
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-40 disabled:pointer-events-none"
className={glassSurfaceFlat('hover:brightness-95 active:brightness-90 rounded-sm p-2 transition-all disabled:opacity-40 disabled:pointer-events-none')}
>
<PlusIcon className="text-foreground" />
</button>
@@ -264,7 +265,7 @@ function FoodPage({}: Props) {
</motion.div>
<button
onClick={handleRemoveFromCart}
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
className={glassSurfaceFlat('hover:brightness-95 active:brightness-90 rounded-sm p-2 transition-all')}
>
<MinusIcon className="text-foreground" />
</button>
src/app/[name]/(Main)/about/AboutPage.tsx
+9 -9
View File
@@ -13,6 +13,7 @@ import Image from 'next/image';
import React from 'react'
import { useGetAbout, useGetReviews, useGetSchedules } from './hooks/useAboutData';
import AboutSkeleton from './components/AboutSkeleton';
import { glassSurfaceCard, glassSurfaceCardFlat, glassSurfaceFlat } from '@/lib/styles/glassSurface';
const sortings = [
'جدیدترین',
@@ -81,7 +82,7 @@ function AboutPage() {
return (
<section aria-labelledby="about-title" className='py-4'>
<section
className="bg-container rounded-container shadow-container p-4">
className={glassSurfaceCard('p-4')}>
<div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
<div className="">
<h2 className='text-sm2 font-bold leading-5'>{restaurant.name}</h2>
@@ -123,7 +124,7 @@ function AboutPage() {
{(restaurant.phone || restaurant.telegram || restaurant.whatsapp || restaurant.instagram) && (
<section
className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>
<h2 className='text-sm2 font-medium leading-5'>ارتباط</h2>
<div className='col-span-1 text-center flex justify-center gap-4'>
{restaurant.phone &&
@@ -151,7 +152,7 @@ function AboutPage() {
)}
{restaurant.address && (
<section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
<section className={glassSurfaceCard('px-4 pt-6 pb-6 mt-4')}>
<h2 className='text-sm2 font-medium leading-5'>آدرس</h2>
<p className='text-sm2 mt-[9px] leading-5'>{restaurant.address}</p>
{restaurant.latitude && restaurant.longitude && (
@@ -166,7 +167,7 @@ function AboutPage() {
{schedules.length > 0 && getTodaySchedule() && (
<section
aria-label='ساعات کاری'
className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
<div className="flex items-center gap-2 justify-start">
<Clock size={16} className='stroke-disabled-text' />
<div className='text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]'>باز</div>
@@ -186,8 +187,7 @@ function AboutPage() {
.map(([weekDay, daySchedules]) => (
<div
key={weekDay}
style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
<div className="text-sm2">
{getDayName(Number(weekDay))}
</div>
@@ -254,7 +254,7 @@ function AboutPage() {
<section aria-labelledby="reviews-title" className='py-4'>
<section
aria-label='امتیاز کاربران'
className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
<div className="text-center font-bold text-5xl">
{averageRating.toFixed(1)}
</div>
@@ -267,10 +267,10 @@ function AboutPage() {
</div>
</section>
<section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
<section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4')}>
<div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
<h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
<button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
<button onClick={toggleSortingModal} className={glassSurfaceFlat('rounded-xl h-8 pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]')}>
<EqualizerIcon className='dark:text-white' />
<span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
</button>
src/app/[name]/(Main)/about/components/AboutSkeleton.tsx
+8 -7
View File
@@ -4,12 +4,13 @@ import { Skeleton } from "@/components/ui/skeleton";
import TabContainer from "@/components/tab/TabContainer";
import { TabHeader } from "@/components/tab/TabHeader";
import { InfoCircle, Star1 } from 'iconsax-react';
import { glassSurfaceCard, glassSurfaceCardFlat } from '@/lib/styles/glassSurface';
const AboutSkeleton = () => {
const firstTabSkeleton = () => (
<section className='py-4'>
{/* اطلاعات رستوران */}
<section className="bg-container rounded-container shadow-container p-4">
<section className={glassSurfaceCard('p-4')}>
<div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
<div className="flex-1">
<Skeleton className="h-6 w-32 rounded-md mb-4" />
@@ -31,7 +32,7 @@ const AboutSkeleton = () => {
</section>
{/* ارتباط */}
<section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
<section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>
<Skeleton className="h-5 w-16 rounded-md" />
<div className='col-span-1 text-center flex justify-center gap-4'>
{[...Array(3)].map((_, index) => (
@@ -41,7 +42,7 @@ const AboutSkeleton = () => {
</section>
{/* آدرس */}
<section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
<section className={glassSurfaceCard('px-4 pt-6 pb-6 mt-4')}>
<Skeleton className="h-5 w-12 rounded-md mb-[9px]" />
<Skeleton className="h-4 w-full rounded-md mb-2" />
<Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
@@ -52,7 +53,7 @@ const AboutSkeleton = () => {
</section>
{/* ساعات کاری امروز */}
<section className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
<section className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
<div className="flex items-center gap-2">
<Skeleton className="w-4 h-4 rounded-full" />
<Skeleton className="h-5 w-8 rounded-md" />
@@ -66,7 +67,7 @@ const AboutSkeleton = () => {
{[...Array(3)].map((_, index) => (
<div
key={index}
className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
<Skeleton className="h-5 w-20 rounded-md" />
<Skeleton className="h-5 w-24 rounded-md" />
</div>
@@ -77,7 +78,7 @@ const AboutSkeleton = () => {
const secondTabSkeleton = () => (
<section className='py-4'>
{/* امتیاز کاربران */}
<section className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
<section className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
<Skeleton className="h-16 w-20 rounded-md mx-auto" />
<div className="flex flex-col w-fit items-end gap-1">
{[...Array(5)].map((_, index) => (
@@ -87,7 +88,7 @@ const AboutSkeleton = () => {
</section>
{/* نظرات کاربران */}
<section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
<section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4')}>
<div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
<Skeleton className="h-5 w-24 rounded-md" />
<Skeleton className="h-8 w-28 rounded-xl" />
src/app/[name]/(Main)/cart/CartPage.tsx
+3 -2
View File
@@ -16,6 +16,7 @@ import CartSkeleton from "./components/CartSkeleton";
import CartSummary from "./components/CartSummary";
import { useCart } from "./hook/useCart";
import { useCartPageState } from "./hooks/useCartPageState";
import { glassSurfaceCard } from "@/lib/styles/glassSurface";
const CartPage = () => {
const { t } = useTranslation("parallels", { keyPrefix: "Cart" });
@@ -42,7 +43,7 @@ const CartPage = () => {
};
return (
<div className="overflow-y-auto h-full noscrollbar flex flex-col bg-background">
<div className="overflow-y-auto h-full noscrollbar flex flex-col">
<div className="grid grid-cols-3 items-center mt-6">
{isCartEmpty || isLoading ? (
<span></span>
@@ -93,7 +94,7 @@ const CartPage = () => {
) : (
<div className="flex flex-col gap-4 pb-24">
{!isPremium && (
<div className="bg-container rounded-container p-4 border border-border shadow-sm">
<div className={glassSurfaceCard('p-4')}>
<div className="flex items-start gap-3 mb-4">
<div className="shrink-0 mt-0.5">
<NotificationBellIcon
src/app/[name]/(Main)/cart/components/CartSummary.tsx
+2 -1
View File
@@ -11,6 +11,7 @@ import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileD
import { useGetCartItems } from '../hooks/useCartData';
import { useCartStore } from '../store/Store';
import { guestCartItemsToFoods } from '../lib/cartUtils';
import { glassSurfaceNav } from '@/lib/styles/glassSurface';
interface CartSummaryProps {
isPremium: boolean;
@@ -73,7 +74,7 @@ const CartSummary = ({ isPremium, hasItems }: CartSummaryProps) => {
</div>
)}
<div className='fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-container border-t border-border p-4 w-full'>
<div className={glassSurfaceNav('fixed bottom-0 left-0 right-0 z-50 border-t border-border p-4 w-full')}>
<div className='flex justify-between items-center gap-4'>
<div className='flex flex-col'>
<div className='text-xs text-gray-400 dark:text-disabled-text'>{t('PayableAmountLabel')}</div>
src/app/[name]/(Main)/chat/[id]/page.tsx
+2 -1
View File
@@ -4,6 +4,7 @@ import { ef } from '@/lib/helpers/utfNumbers'
import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react'
import React, { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { glassSurfaceCard } from '@/lib/styles/glassSurface'
type Props = object
@@ -64,7 +65,7 @@ function ChatIndex ({}: Props) {
<section className='flex flex-col h-full pt-6'>
<h1 className='font-medium'>علی مصلحی</h1>
<div className='bg-container rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden'>
<div className={glassSurfaceCard('rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden')}>
<div className='overflow-y-auto flex flex-col-reverse'>
<ul className='grid gap-6 pb-6 '>
{messagesMemo.map((v, i) => {
src/app/[name]/(Main)/chat/page.tsx
+4 -3
View File
@@ -16,6 +16,7 @@ import {
import { useRouter } from 'next/navigation'
import useToggle from '@/hooks/helpers/useToggle'
import Prompt from '@/components/utils/Prompt'
import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
type Props = object
@@ -170,7 +171,7 @@ function ChatIndex ({}: Props) {
{selectedChats.length > 0 ? (
<span
onClick={toggleDeleteModal}
className='bg-container p-2 rounded-xl active:bg-gray-50 dark:active:bg-neutral-500'
className={glassSurfaceFlat('p-2 rounded-xl active:brightness-95 cursor-pointer')}
>
<Trash
size={24}
@@ -180,7 +181,7 @@ function ChatIndex ({}: Props) {
) : (
<Link
href={'chat/nearby'}
className='bg-container p-2 rounded-xl active:bg-gray-50 dark:active:bg-neutral-500'
className={glassSurfaceFlat('p-2 rounded-xl active:brightness-95 cursor-pointer')}
>
<Radar2
size={24}
@@ -198,7 +199,7 @@ function ChatIndex ({}: Props) {
<li
key={i}
{...longPress(chat.id)}
className='select-none flex items-center gap-x-2 hover:brightness-105 cursor-default active:brightness-102 p-2 bg-background rounded-xl'
className={glassSurfaceFlat('select-none flex items-center gap-x-2 hover:brightness-105 cursor-default active:brightness-102 p-2 rounded-xl')}
>
<div className='size-[49px] min-w-[49px]'>
{selectedChats.includes(chat.id) ? (
src/app/[name]/(Main)/order/history/page.tsx
+3 -2
View File
@@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next';
import { useGetOrders } from './hooks/useHistoryData';
import { HistoryOrderItem } from './types/Types';
import { OrderStatus } from './enum/Enum';
import { glassSurface } from '@/lib/styles/glassSurface';
const fallbackImage = '/assets/images/food-preview.png';
@@ -80,7 +81,7 @@ function OrdersIndex() {
const items: HistoryOrderItem[] = order.items || [];
return (
<div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
<div key={order.id} className={glassSurface('w-full px-[17px] mb-4 pt-8 pb-6 rounded-3xl')}>
<div className="text-sm2">
<div className='flex items-center justify-between mb-2'>
<div className='flex gap-2 items-center'>
@@ -165,7 +166,7 @@ function OrdersIndex() {
const items: HistoryOrderItem[] = order.items || [];
return (
<div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
<div key={order.id} className={glassSurface('w-full px-[17px] mb-4 pt-8 pb-6 rounded-3xl')}>
<div className="text-sm2">
<div className='flex items-center justify-between mb-2'>
<div className='flex gap-2 items-center'>
src/app/[name]/(Main)/order/rate/[orderId]/page.tsx
+2 -1
View File
@@ -14,6 +14,7 @@ import { CreateRateType } from '../types/Types';
import { toast } from '@/components/Toast';
import { PositivePointEnum, NegativePointEnum } from '../enum/Enum';
import { extractErrorMessage } from '@/lib/func';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type Props = object
@@ -148,7 +149,7 @@ function RatingOrderIndex({ }: Props) {
<section className='flex flex-col h-full pt-6'>
<h1 className='font-medium'>{t("Heading")}</h1>
<form onSubmit={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
<form onSubmit={submitForm} className={glassSurfaceCard('flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4')}>
<div>
<div className='w-full'>
src/app/[name]/(Main)/transactions/discount/club/page.tsx
+4 -3
View File
@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
import { useGetAbout } from '../../../about/hooks/useAboutData';
import { toast } from '@/components/Toast';
import { extractErrorMessage } from '@/lib/func';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
function TransactionsIndex() {
@@ -37,7 +38,7 @@ function TransactionsIndex() {
<section
aria-label="درباره باشگاه مشتریان"
className='mt-3 bg-container dark:bg-container rounded-normal grid grid-cols-4 items-center border border-transparent dark:border-border/50'
className={glassSurfaceCard('mt-3 rounded-normal grid grid-cols-4 items-center')}
>
<div className='col-span-3 py-5 pe-7 ps-5 relative h-36.5'>
<div className='w-full h-full absolute top-0 left-0 overflow-clip text-muted-foreground/30 dark:text-foreground/20'>
@@ -78,7 +79,7 @@ function TransactionsIndex() {
</section>
{/* بخش نمایش اعتبار کاربر */}
<section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
<section className={glassSurfaceCard('mt-6 rounded-normal p-5')}>
<div className='flex items-center gap-2 mb-4'>
<MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
<h2 className='font-bold text-base dark:text-foreground'>اعتبار شما</h2>
@@ -92,7 +93,7 @@ function TransactionsIndex() {
</section>
{/* بخش تبدیل امتیاز به اعتبار */}
<section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
<section className={glassSurfaceCard('mt-6 rounded-normal p-5')}>
<div className='flex items-center gap-2 mb-4'>
<MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
<h2 className='font-bold text-base dark:text-foreground'>تبدیل امتیاز به اعتبار</h2>
src/app/[name]/(Main)/transactions/discount/page.tsx
+3 -2
View File
@@ -4,6 +4,7 @@ import React, { useCallback } from 'react'
import { useGetMyCoupons } from '../hooks/useTransactionData';
import { toast } from '@/components/Toast';
import type { Coupon } from '../types/Types';
import { glassSurfaceCard, glassSurfaceCardFlat } from '@/lib/styles/glassSurface';
function TransactionsIndex() {
const { data: myCoupons, isLoading } = useGetMyCoupons();
@@ -32,7 +33,7 @@ function TransactionsIndex() {
<section
aria-label="درباره کدهای تخفیف"
className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
className={glassSurfaceCard('mt-3 rounded-normal grid grid-cols-4 items-center')}
>
<div className='col-span-3 py-9.5 pe-7 ps-5 relative'>
<div className='w-full h-full absolute top-0 left-0 overflow-clip'>
@@ -94,7 +95,7 @@ function TransactionsIndex() {
{coupons.map((coupon) => (
<article
key={coupon.id}
className='bg-container rounded-normal flex justify-between items-center'
className={glassSurfaceCardFlat('rounded-normal flex justify-between items-center')}
>
<div className='py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
<h3 className='font-bold text-sm2'>مبلغ تخفیف: {formatDiscount(coupon)}</h3>
src/app/[name]/(Main)/transactions/page.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import React from 'react'
import { useGetTransactions } from './hooks/useTransactionData';
import { TransactionsTable } from './components/TransactionsTable';
import LoadingOverlay from '@/components/overlays/LoadingOverlay';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
function TransactionsReviewIndex() {
const { data: transactionsResponse, isLoading: isLoadingTransactions } = useGetTransactions();
@@ -56,7 +57,7 @@ function TransactionsReviewIndex() {
</div>
</div> */}
<div className='w-full h-full bg-container rounded-3xl mt-0'>
<div className={glassSurfaceCard('w-full h-full mt-0 rounded-3xl')}>
<TransactionsTable transactions={transactions} />
</div>
</section>
src/app/[name]/(Profile)/profile/address/page.tsx
+2 -1
View File
@@ -11,6 +11,7 @@ import { Address } from './types/Types';
import Prompt from '@/components/utils/Prompt';
import { toast } from '@/components/Toast';
import useToggle from '@/hooks/helpers/useToggle';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type Props = object
@@ -107,7 +108,7 @@ function UserAddressesPage({ }: Props) {
addresses.map((address) => (
<div
key={address.id}
className={`bg-container rounded-container w-full shadow-xl px-4 py-4 flex flex-col justify-between ${address.isDefault ? 'border border-primary' : ''}`}
className={glassSurfaceCard(`w-full px-4 py-4 flex flex-col justify-between ${address.isDefault ? 'border border-primary' : ''}`)}
>
<div className="flex justify-between items-start mb-2">
<h2 className='text-sm font-medium'>{address.title}</h2>
src/app/[name]/(Profile)/profile/edit/page.tsx
+2 -1
View File
@@ -13,6 +13,7 @@ import Calendar from '@/components/ui/calendar';
import { getDateLib } from "react-day-picker/persian";
import { useRouter } from 'next/navigation';
import { useGetProfile, useSingleUpload, useUpdateProfile } from '../hooks/userProfileData';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { UpdateProfileType } from '../types/Types';
@@ -197,7 +198,7 @@ function ProfileIndex({ }: Props) {
<h1 className='text-sm2 place-self-center font-medium'>ویرایش اطلاعات</h1>
</div>
<form onSubmit={formik.handleSubmit} className="mt-8 flex-1 bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
<form onSubmit={formik.handleSubmit} className={glassSurfaceCard('mt-8 flex-1 w-full py-6 px-4 flex flex-col justify-between')}>
<div className="bg-inherit">
<div className="justify-self-center w-fit relative text-center pb-10">
<input
src/app/[name]/(Profile)/profile/page.tsx
+2 -1
View File
@@ -9,6 +9,7 @@ import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React from 'react'
import { useGetProfile } from './hooks/userProfileData';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type Props = object
@@ -43,7 +44,7 @@ function ProfileIndex({ }: Props) {
/>
</div>
<div className="mt-8 flex-1 h-full bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
<div className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>
<div className="">
<div className="flex items-center justify-start gap-3 pb-6 border-b-[1.5px] border-border">
src/app/[name]/(Profile)/profile/settings/page.tsx
+5 -4
View File
@@ -14,6 +14,7 @@ import { Key, KeySquare, Notification1, ArrowLeft, TickCircle } from 'iconsax-re
import { useRouter } from 'next/navigation';
import React, { Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
function UserSettingsIndex() {
const router = useRouter();
@@ -38,7 +39,7 @@ function UserSettingsIndex() {
return (
<section aria-labelledby="about-title" className='py-4 flex-1 h-full'>
<section
className="bg-container rounded-container shadow-container p-4">
className={glassSurfaceCard('p-4')}>
<div className="flex justify-between items-center pb-[25px]">
<h2 className='text-sm leading-5'>{data.TabNotifications.Heading}</h2>
@@ -94,7 +95,7 @@ function UserSettingsIndex() {
return (
<section aria-labelledby="reviews-title" className='py-4'>
<section
className="bg-container rounded-container shadow-container p-4">
className={glassSurfaceCard('p-4')}>
<div className="flex justify-between items-center pb-[25px]">
<h2 className='text-sm leading-5'>{data.TabPassword.Heading}</h2>
@@ -154,7 +155,7 @@ function UserSettingsIndex() {
return (
<section aria-labelledby="reviews-title" className='py-4'>
<div
className="bg-container rounded-container shadow-container p-4">
className={glassSurfaceCard('p-4')}>
<div className="pb-4">
<h2 className='text-sm leading-5'>{data.TabAuthenticator.Heading}</h2>
@@ -236,7 +237,7 @@ function UserSettingsIndex() {
/>
</div>
<section className='bg-container rounded-container shadow-container p-4'>
<section className={glassSurfaceCard('p-4')}>
<div className='flex justify-between items-center pb-4'>
<h2 className='text-sm leading-5'>{data.StatisticalParticipation.Heading}</h2>
<Switch
src/app/[name]/(Profile)/profile/wallet/page.tsx
+2 -1
View File
@@ -6,6 +6,7 @@ import { ef, ue } from '@/lib/helpers/utfNumbers';
import { ArrowLeft, ArrowRight, WalletMinus } from 'iconsax-react';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react'
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type Props = object
@@ -34,7 +35,7 @@ function UserWalletIndex({ }: Props) {
<form
onSubmit={chargeAction}
className="mt-8 flex-1 h-full bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>
<div className="">
<div className="flex items-center justify-center text-center gap-4 pb-6 border-b-[1.5px] border-border">
src/components/tab/TabContainer.tsx
+2 -1
View File
@@ -6,6 +6,7 @@ import { TabHeader, TabItemProps } from './TabHeader';
import clsx from 'clsx';
import TabHeaderRenderer from './TabHeaderRenderer';
import Image from 'next/image';
import { glassSurfaceNav } from '@/lib/styles/glassSurface';
type Props = {
itemRenderer?: (child: ReactNode, index: number) => ReactElement;
@@ -38,7 +39,7 @@ 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] dark:bg-container/70 justify-center rounded-[32px] inline-flex items-center gap-10',
scrollView: glassSurfaceNav('h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden justify-center rounded-[32px] inline-flex items-center gap-10'),
header: '',
headerDeactive: '',
headerActive: '',
src/features/auth/components/AuthFormWrapper.tsx
+2 -1
View File
@@ -2,6 +2,7 @@
// import LoadingOverlay from '@/components/overlays/LoadingOverlay';
import React from 'react'
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
type Props = {
isPending: boolean,
@@ -24,7 +25,7 @@ function AuthFormWrapper({ children, isPending, onSubmit, ...restProps }: Props)
onSubmit={handleSubmit}
className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'
>
<div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
<div className={glassSurfaceCard('relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] overflow-clip lg:flex-row justify-between')}>
{children}
{/* <LoadingOverlay visible={isPending} bgOpacity={0} /> */}
</div>
src/features/auth/components/StepEnterNumber.tsx
+2 -1
View File
@@ -8,6 +8,7 @@ import Image from 'next/image'
import React, { useState } from 'react'
import type { ChangeEvent } from 'react'
import { useTranslation } from 'react-i18next'
import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useOtpRequest } from '@/app/auth/login/hooks/useAuthData'
@@ -115,7 +116,7 @@ function StepEnterNumber(_props: StepEnterNumberProps = {}) {
inputMode='tel'
autoComplete='tel'
dir='ltr'
className='mt-10 w-full bg-container'
className={glassSurfaceFlat('mt-10 w-full')}
inputClassName='text-left dltr'
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
labelText={t('Enter.LabelPhoneNumber')}
src/features/auth/components/StepEnterPassword.tsx
+2 -1
View File
@@ -8,6 +8,7 @@ import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
type Props = {
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
@@ -68,7 +69,7 @@ function StepEnterPassword ({
aria-errormessage={error}
autoFocus
autoComplete='current-password'
className='mt-10 bg-container'
className={glassSurfaceFlat('mt-10')}
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
labelText={t('EnterPass.LabelPass')}
value={value}
src/features/auth/components/StepNewPassword.tsx
+3 -2
View File
@@ -7,6 +7,7 @@ import { AUTH_PAGE_ELEMENT } from '@/enums'
import Image from 'next/image'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
type Props = {
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
@@ -84,7 +85,7 @@ function StepNewPassword ({
valid={!hasError()}
aria-errormessage={error}
autoComplete='new-password'
className='mt-10 bg-container'
className={glassSurfaceFlat('mt-10')}
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
labelText={t('NewPassword.LabelPass')}
value={value}
@@ -108,7 +109,7 @@ function StepNewPassword ({
valid={!hasError(error2)}
aria-errormessage={error2}
autoComplete='new-password'
className='mt-6 bg-container'
className={glassSurfaceFlat('mt-6')}
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
labelText={t('NewPassword.LabelRepeatPass')}
value={repeatValue}
src/features/auth/components/StepOtp.tsx
+2 -1
View File
@@ -13,6 +13,7 @@ import { useBulkCart } from '@/app/[name]/(Main)/cart/hooks/useCartData'
import { setRefreshToken, setToken } from '@/lib/api/func'
import { useSearchParams } from 'next/navigation'
import { AUTH_PAGE_ELEMENT } from '@/enums'
import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
import clsx from 'clsx'
import { formatCountdown } from '@/hooks/useCountdown'
@@ -110,7 +111,7 @@ const StepOtp = ({ phone, slug, timerRunning, secondsLeft, onResend, isResendPen
type='tel'
autoComplete="one-time-code"
inputMode="numeric"
className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-container border border-border text-foreground outline-0 rounded-[10px] text-center text-sm' />
className={glassSurfaceFlat('w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 border border-border text-foreground outline-0 rounded-[10px] text-center text-sm')} />
}
/>
</div>
src/lib/styles/glassSurface.ts
+10
View File
@@ -20,3 +20,13 @@ export function glassSurfaceFlat(...extra: ClassValue[]) {
export function glassSurfaceSelected(...extra: ClassValue[]) {
return clsx(GLASS_SURFACE, GLASS_SURFACE_SELECTED, extra);
}
/** Page-level card sections (about, cart, profile, etc.) */
export function glassSurfaceCard(...extra: ClassValue[]) {
return clsx(GLASS_SURFACE, "rounded-container", extra);
}
/** Nested / secondary card sections with no shadow */
export function glassSurfaceCardFlat(...extra: ClassValue[]) {
return clsx(GLASS_SURFACE, GLASS_SURFACE_FLAT, "rounded-container", extra);
}