diff --git a/src/app/[name]/(Dialogs)/game/page.tsx b/src/app/[name]/(Dialogs)/game/page.tsx index 4e5a192..a193424 100644 --- a/src/app/[name]/(Dialogs)/game/page.tsx +++ b/src/app/[name]/(Dialogs)/game/page.tsx @@ -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 = () => {
{ const currentPath = window.location.pathname const basePath = currentPath.split('/game')[0] @@ -76,7 +77,7 @@ const GamePage: FC = () => {
{ const currentPath = window.location.pathname const basePath = currentPath.split('/game')[0] @@ -106,7 +107,7 @@ const GamePage: FC = () => {
{ const currentPath = window.location.pathname const basePath = currentPath.split('/game')[0] diff --git a/src/app/[name]/(Dialogs)/notifications/page.tsx b/src/app/[name]/(Dialogs)/notifications/page.tsx index e97da81..1e594bc 100644 --- a/src/app/[name]/(Dialogs)/notifications/page.tsx +++ b/src/app/[name]/(Dialogs)/notifications/page.tsx @@ -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 ( -
  • +
  • {/*
    {notification.title}
    */}

    {notification.content}

    diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/AddressSection.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/AddressSection.tsx index ecc2faa..d8d4444 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/AddressSection.tsx +++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/AddressSection.tsx @@ -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 ( -
    +

    {t("SectionAddress.Title")}

    @@ -89,7 +90,7 @@ export const AddressSection = () => { return ( <> -

    +

    {t("SectionAddress.Title")}

    diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/CarAddressSection.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/CarAddressSection.tsx index c791156..8d864be 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/CarAddressSection.tsx +++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/CarAddressSection.tsx @@ -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 ( -
    +

    اطلاعات خودرو diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/CouponSection.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/CouponSection.tsx index a46c235..002d15e 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/CouponSection.tsx +++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/CouponSection.tsx @@ -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 ( -
    +

    {t("SectionCoupon.Title")}

    diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx index 2dfb3c1..99998e0 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx +++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx @@ -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 ( -
    +

    {tOrderDetail("SectionPayment.Title")}

    diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx index 16bd6b2..1f0f080 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx +++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/ShippingSection.tsx @@ -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 ( -
    +

    {tOrderDetail("SectionShipping.Title")}

    +

    {t("SectionTable.Title")}

    diff --git a/src/app/[name]/(Dialogs)/verify/[id]/page.tsx b/src/app/[name]/(Dialogs)/verify/[id]/page.tsx index 11fd65f..19a0eef 100644 --- a/src/app/[name]/(Dialogs)/verify/[id]/page.tsx +++ b/src/app/[name]/(Dialogs)/verify/[id]/page.tsx @@ -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 (
    -
    +
    {isError ? ( diff --git a/src/app/[name]/(Main)/[id]/page.tsx b/src/app/[name]/(Main)/[id]/page.tsx index 4093468..65a4b39 100644 --- a/src/app/[name]/(Main)/[id]/page.tsx +++ b/src/app/[name]/(Main)/[id]/page.tsx @@ -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", )} > -
    +
    {/* eslint-disable-next-line @next/next/no-img-element */}
    -
    +
    {categoryName || "-"}
    -
    +
    {foodName}
    @@ -264,7 +265,7 @@ function FoodPage({}: Props) { diff --git a/src/app/[name]/(Main)/about/AboutPage.tsx b/src/app/[name]/(Main)/about/AboutPage.tsx index 83db909..df93658 100644 --- a/src/app/[name]/(Main)/about/AboutPage.tsx +++ b/src/app/[name]/(Main)/about/AboutPage.tsx @@ -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 (
    + className={glassSurfaceCard('p-4')}>

    {restaurant.name}

    @@ -123,7 +124,7 @@ function AboutPage() { {(restaurant.phone || restaurant.telegram || restaurant.whatsapp || restaurant.instagram) && (
    + className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>

    ارتباط

    {restaurant.phone && @@ -151,7 +152,7 @@ function AboutPage() { )} {restaurant.address && ( -
    +

    آدرس

    {restaurant.address}

    {restaurant.latitude && restaurant.longitude && ( @@ -166,7 +167,7 @@ function AboutPage() { {schedules.length > 0 && getTodaySchedule() && (
    + className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
    باز
    @@ -186,8 +187,7 @@ function AboutPage() { .map(([weekDay, daySchedules]) => (
    + className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
    {getDayName(Number(weekDay))}
    @@ -254,7 +254,7 @@ function AboutPage() {
    + className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
    {averageRating.toFixed(1)}
    @@ -267,10 +267,10 @@ function AboutPage() {
    -
    +

    نظرات کاربران

    - diff --git a/src/app/[name]/(Main)/about/components/AboutSkeleton.tsx b/src/app/[name]/(Main)/about/components/AboutSkeleton.tsx index f29aea9..0059481 100644 --- a/src/app/[name]/(Main)/about/components/AboutSkeleton.tsx +++ b/src/app/[name]/(Main)/about/components/AboutSkeleton.tsx @@ -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 = () => (
    {/* اطلاعات رستوران */} -
    +
    @@ -31,7 +32,7 @@ const AboutSkeleton = () => {
    {/* ارتباط */} -
    +
    {[...Array(3)].map((_, index) => ( @@ -41,7 +42,7 @@ const AboutSkeleton = () => {
    {/* آدرس */} -
    +
    @@ -52,7 +53,7 @@ const AboutSkeleton = () => {
    {/* ساعات کاری امروز */} -
    +
    @@ -66,7 +67,7 @@ const AboutSkeleton = () => { {[...Array(3)].map((_, index) => (
    + className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
    @@ -77,7 +78,7 @@ const AboutSkeleton = () => { const secondTabSkeleton = () => (
    {/* امتیاز کاربران */} -
    +
    {[...Array(5)].map((_, index) => ( @@ -87,7 +88,7 @@ const AboutSkeleton = () => {
    {/* نظرات کاربران */} -
    +
    diff --git a/src/app/[name]/(Main)/cart/CartPage.tsx b/src/app/[name]/(Main)/cart/CartPage.tsx index addbe00..99f4edd 100644 --- a/src/app/[name]/(Main)/cart/CartPage.tsx +++ b/src/app/[name]/(Main)/cart/CartPage.tsx @@ -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 ( -
    +
    {isCartEmpty || isLoading ? ( @@ -93,7 +94,7 @@ const CartPage = () => { ) : (
    {!isPremium && ( -
    +
    {
    )} -
    +
    {t('PayableAmountLabel')}
    diff --git a/src/app/[name]/(Main)/chat/[id]/page.tsx b/src/app/[name]/(Main)/chat/[id]/page.tsx index 42975fe..5b77c7c 100644 --- a/src/app/[name]/(Main)/chat/[id]/page.tsx +++ b/src/app/[name]/(Main)/chat/[id]/page.tsx @@ -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) {

    علی مصلحی

    -
    +
      {messagesMemo.map((v, i) => { diff --git a/src/app/[name]/(Main)/chat/page.tsx b/src/app/[name]/(Main)/chat/page.tsx index fd58810..c113b67 100644 --- a/src/app/[name]/(Main)/chat/page.tsx +++ b/src/app/[name]/(Main)/chat/page.tsx @@ -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 ? (
      {selectedChats.includes(chat.id) ? ( diff --git a/src/app/[name]/(Main)/order/history/page.tsx b/src/app/[name]/(Main)/order/history/page.tsx index 87ad3c9..efd30ca 100644 --- a/src/app/[name]/(Main)/order/history/page.tsx +++ b/src/app/[name]/(Main)/order/history/page.tsx @@ -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 ( -
      +
      @@ -165,7 +166,7 @@ function OrdersIndex() { const items: HistoryOrderItem[] = order.items || []; return ( -
      +
      diff --git a/src/app/[name]/(Main)/order/rate/[orderId]/page.tsx b/src/app/[name]/(Main)/order/rate/[orderId]/page.tsx index ac0f1d3..39ca02b 100644 --- a/src/app/[name]/(Main)/order/rate/[orderId]/page.tsx +++ b/src/app/[name]/(Main)/order/rate/[orderId]/page.tsx @@ -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) {

      {t("Heading")}

      -
      +
      diff --git a/src/app/[name]/(Main)/transactions/discount/club/page.tsx b/src/app/[name]/(Main)/transactions/discount/club/page.tsx index 595bc9a..ac9e605 100644 --- a/src/app/[name]/(Main)/transactions/discount/club/page.tsx +++ b/src/app/[name]/(Main)/transactions/discount/club/page.tsx @@ -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() {
      @@ -78,7 +79,7 @@ function TransactionsIndex() {
      {/* بخش نمایش اعتبار کاربر */} -
      +

      اعتبار شما

      @@ -92,7 +93,7 @@ function TransactionsIndex() {
      {/* بخش تبدیل امتیاز به اعتبار */} -
      +

      تبدیل امتیاز به اعتبار

      diff --git a/src/app/[name]/(Main)/transactions/discount/page.tsx b/src/app/[name]/(Main)/transactions/discount/page.tsx index 11fa18a..4c6518c 100644 --- a/src/app/[name]/(Main)/transactions/discount/page.tsx +++ b/src/app/[name]/(Main)/transactions/discount/page.tsx @@ -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() {
      @@ -94,7 +95,7 @@ function TransactionsIndex() { {coupons.map((coupon) => (

      مبلغ تخفیف: {formatDiscount(coupon)}

      diff --git a/src/app/[name]/(Main)/transactions/page.tsx b/src/app/[name]/(Main)/transactions/page.tsx index c68ff66..c7105fe 100644 --- a/src/app/[name]/(Main)/transactions/page.tsx +++ b/src/app/[name]/(Main)/transactions/page.tsx @@ -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() {
      */} -
      +
      diff --git a/src/app/[name]/(Profile)/profile/address/page.tsx b/src/app/[name]/(Profile)/profile/address/page.tsx index 89ee865..c9b7c06 100644 --- a/src/app/[name]/(Profile)/profile/address/page.tsx +++ b/src/app/[name]/(Profile)/profile/address/page.tsx @@ -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) => (

      {address.title}

      diff --git a/src/app/[name]/(Profile)/profile/edit/page.tsx b/src/app/[name]/(Profile)/profile/edit/page.tsx index 60c231e..791b39c 100644 --- a/src/app/[name]/(Profile)/profile/edit/page.tsx +++ b/src/app/[name]/(Profile)/profile/edit/page.tsx @@ -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) {

      ویرایش اطلاعات

      - +
      -
      +
      diff --git a/src/app/[name]/(Profile)/profile/settings/page.tsx b/src/app/[name]/(Profile)/profile/settings/page.tsx index 3cf37f2..9b1f7bb 100644 --- a/src/app/[name]/(Profile)/profile/settings/page.tsx +++ b/src/app/[name]/(Profile)/profile/settings/page.tsx @@ -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 (
      + className={glassSurfaceCard('p-4')}>

      {data.TabNotifications.Heading}

      @@ -94,7 +95,7 @@ function UserSettingsIndex() { return (
      + className={glassSurfaceCard('p-4')}>

      {data.TabPassword.Heading}

      @@ -154,7 +155,7 @@ function UserSettingsIndex() { return (
      + className={glassSurfaceCard('p-4')}>

      {data.TabAuthenticator.Heading}

      @@ -236,7 +237,7 @@ function UserSettingsIndex() { />
      -
      +

      {data.StatisticalParticipation.Heading}

      + className={glassSurfaceCard('mt-8 flex-1 h-full w-full py-6 px-4 flex flex-col justify-between')}>
      diff --git a/src/components/tab/TabContainer.tsx b/src/components/tab/TabContainer.tsx index 52f3ab0..96d9fc2 100644 --- a/src/components/tab/TabContainer.tsx +++ b/src/components/tab/TabContainer.tsx @@ -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: '', diff --git a/src/features/auth/components/AuthFormWrapper.tsx b/src/features/auth/components/AuthFormWrapper.tsx index c97d537..b45bfea 100644 --- a/src/features/auth/components/AuthFormWrapper.tsx +++ b/src/features/auth/components/AuthFormWrapper.tsx @@ -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' > -
      +
      {children} {/* */}
      diff --git a/src/features/auth/components/StepEnterNumber.tsx b/src/features/auth/components/StepEnterNumber.tsx index e48bb32..aff0603 100644 --- a/src/features/auth/components/StepEnterNumber.tsx +++ b/src/features/auth/components/StepEnterNumber.tsx @@ -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')} diff --git a/src/features/auth/components/StepEnterPassword.tsx b/src/features/auth/components/StepEnterPassword.tsx index 7ec3837..a14c1f6 100644 --- a/src/features/auth/components/StepEnterPassword.tsx +++ b/src/features/auth/components/StepEnterPassword.tsx @@ -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) => 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} diff --git a/src/features/auth/components/StepNewPassword.tsx b/src/features/auth/components/StepNewPassword.tsx index 632bc0f..6346b71 100644 --- a/src/features/auth/components/StepNewPassword.tsx +++ b/src/features/auth/components/StepNewPassword.tsx @@ -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) => 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} diff --git a/src/features/auth/components/StepOtp.tsx b/src/features/auth/components/StepOtp.tsx index 93e2442..c2d80c8 100644 --- a/src/features/auth/components/StepOtp.tsx +++ b/src/features/auth/components/StepOtp.tsx @@ -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')} /> } />
      diff --git a/src/lib/styles/glassSurface.ts b/src/lib/styles/glassSurface.ts index 3bd53d0..4e61ad1 100644 --- a/src/lib/styles/glassSurface.ts +++ b/src/lib/styles/glassSurface.ts @@ -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); +}