glass other page

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) => (
                         <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

@@ -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

@@ -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

@@ -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

@@ -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">