updated the glass view for user dashboard

src/app/(dashboard)/(user)/(outsideAuth)/page.tsx

@@ -178,7 +178,7 @@ export default async function Home() {
                   )}
                 </div>
                 {subBanner.image_url && (
-                  <div className="dashboard-card-img aspect-[245/245]">
+                  <div className="dashboard-card-img aspect-[245/245] hidden md:block">
                     <Image
                       src={subBanner.image_url}
                       alt={subBanner.name || "Sub Banner"}

src/app/(dashboard)/(user)/(outsideAuth)/support/page.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 export default function Support() {
 	return (
-		<section className="support__root">
+		<section className="support__root ">
 			<div className="section__title mb-8">
 				<h1 className="text-[26px] lg:text-[32px] mb-2">
 					Need any Assistance?
@@ -15,7 +15,7 @@ export default function Support() {
 
 			<div className="grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-6">
 				<div
-					className="p-6 rounded-[24px]"
+					className="p-6 rounded-[24px] glass"
 					style={{ background: "rgba(255, 255, 255, 0.04)" }}>
 					<img
 						src="/assets/images/chat.svg"
@@ -36,7 +36,7 @@ export default function Support() {
 					</a>
 				</div>
 				<div
-					className="p-6 rounded-[24px]"
+					className="p-6 rounded-[24px] glass"
 					style={{ background: "rgba(255, 255, 255, 0.04)" }}>
 					<img
 						src="/assets/images/support.svg"
@@ -50,7 +50,7 @@ export default function Support() {
 					<Link href="#" className="underline">support@sweepstakeonline.com</Link>
 				</div>
 				<div
-					className="p-6 rounded-[24px]"
+					className="p-6 rounded-[24px] glass"
 					style={{ background: "rgba(255, 255, 255, 0.04)" }}>
 					<img
 						src="/assets/images/technical.svg"

src/app/(dashboard)/(user)/(privateUser)/account/AccountTab.tsx

@@ -33,15 +33,19 @@ export default function AccountTab() {
     return (
         <div className='profile__root'>
             <div className="grid lg:grid-cols-12 gap-6">
-                <div className="col-span-12 lg:col-span-5">
+                <div className="col-span-12 lg:col-span-5 ">
                     <UserProfileCard balance={data} loading={isLoading} />
                 </div>
-                <div className="col-span-12 lg:col-span-7">
+                <div className="col-span-12 lg:col-span-7 glass" style={{
+                    background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)"
+                }}>
                     <TabController links={[
                         { value: "account_detail", label: "Account Details" },
                         { value: "wallet_information", label: "Wallet Information" },
                         { value: "change_password", label: "Change Password" },
-                    ]} currentTab={currentActiveTab} onTabChange={handleTabChange} />
+                    ]} currentTab={currentActiveTab} onTabChange={handleTabChange}
+                        controllerClassName=' px-4 lg:px-8 lg:pt-8 !mb-0'
+                    />
                     {renderTabContent()}
                 </div>
             </div>

src/app/(dashboard)/(user)/(privateUser)/account/page.tsx

@@ -7,6 +7,7 @@ import { Tab } from "@mui/material";
 import WithdrawnHistoryPage from "@/components/pages/dashboard/userDashboard/withdrawlHistory";
 import DepositHistoryPage from "@/components/pages/dashboard/userDashboard/depositHistory";
 import { useSearchParams } from "next/navigation";
+import { Coin, Coin1, User } from "@wandersonalwes/iconsax-react";
 
 type AccountTabProps = "account" | "deposit" | "withdraw"
 export default function ProfilePage() {
@@ -39,12 +40,14 @@ export default function ProfilePage() {
     return (
         <>
             <TabController links={[
-                { label: "Account", value: "account" },
-                { label: "Deposit", value: "deposit" },
-                { label: "Withdraw", value: "withdraw" },
+                { label: "Account", value: "account", icon: <User className="mx-auto" /> },
+                { label: "Deposit", value: "deposit", icon: <Coin className="mx-auto" /> },
+                { label: "Withdraw", value: "withdraw", icon: <Coin1 className="mx-auto" /> },
             ]}
                 currentTab={currentActiveTab}
-                onTabChange={handleTabChange} />
+                onTabChange={handleTabChange}
+                linkClassName="lg:px-12"
+            />
 
             {renderTabContent()}
         </>

src/components/molecules/TabController.tsx

@@ -21,9 +21,13 @@ export default function TabController({
     links,
     currentTab,
     onTabChange,
+    linkClassName,
+    controllerClassName
 }: {
     links: TabLink[];
     currentTab: string;
+    linkClassName?: string;
+    controllerClassName?: string;
     onTabChange: (tab: string) => void;
 }) {
     const anchorRef = useRef<HTMLButtonElement | null>(null);
@@ -38,23 +42,24 @@ export default function TabController({
 
     const handleTabClick = (tab: string) => {
         onTabChange(tab);
-        setOpen(false); // close mobile popper when tab changes
+        setOpen(false);
     };
 
     const currentTabLabel = links.find((link) => link.value === currentTab)?.label || "";
     const currentTabIcon = links.find((link) => link.value === currentTab)?.icon || "";
     return (
-        <Box className="mb-4">
+        <Box >
             {/* Desktop Tabs */}
-            <Box className="hidden md:flex gap-4">
+            <Box className={`hidden md:flex gap-4 border-b-[2px] border-[rgba(255,255,255,0.12)] mb-4 ${controllerClassName}`}>
                 {links.map((link) => (
                     <a
                         href="#"
                         key={link.value}
                         color="secondary"
                         onClick={(e) => { e.preventDefault(); handleTabClick(link.value) }}
-                        className={` tab__link !p-4 !text-[14px] !text-center ${currentTab === link.value ? "active" : ""}`}
+                        className={`${linkClassName} tab__link p-4 text-[14px] !text-center  ${currentTab === link.value ? "active" : ""}`}
                     >
+                        {link.icon}
                         {link.label}
                     </a>
                 ))}

src/components/organism/Cards/UserProfileCard.tsx

@@ -10,7 +10,7 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
     const { date } = formatDateTime(user?.registered_date as string);
 
     return (
-        <div className="player__info text-center  rounded-xl lg:rounded-3xl p-4 lg:py-10 lg:px-9" style={{
+        <div className="player__info text-center  rounded-xl lg:rounded-3xl p-4 lg:py-10 lg:px-9 glass" style={{
             background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)"
         }}>
             <div className="player__profile bg-primary-grad p-[1px] rounded-full max-w-fit mx-auto relative">

src/components/pages/auth/register/index.tsx

@@ -67,10 +67,10 @@ export default function RegisterPage() {
                     );
                     router.replace(PATH.AUTH.VERIFY_EMAIL.ROOT);
                 }
-                catch (e) {
+                catch (e: any) {
                     dispatch(
                         showToast({
-                            message: "Unable to register user. Try again later",
+                            message: e.message || "Unable to register user. Try again later",
                             variant: ToastVariant.ERROR,
                             autoTime: true,
                         }),

src/components/pages/dashboard/adminDashboard/players/addPlayerForm/AddPlayerForm.tsx

@@ -182,7 +182,7 @@ export default function AddPlayerForm({ formik, id, data, loading }: { formik: F
                 </div>
 
             </div>
-            <div className="text-end my-4 lg:my-8 max-w-fit ml-auto flex justify-end gap-4 px-10">
+            <div className="text-end mb-4 lg:mb-8 max-w-fit ml-auto flex justify-end gap-4 px-10">
                 {/* {id ? <Button color='error' variant='contained' onClick={() => {
                     router.push(PATH.ADMIN.PLAYERS.ROOT)
                 }}>Cancel Player Edit</Button> : null} */}

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/CoinCalculator.tsx

@@ -43,9 +43,9 @@ export default function CoinCalculator({ slug }: { slug: string }) {
     };
 
     return (
-        <Box className="coin__card" sx={{
+        <Box className="coin__card glass" sx={{
             borderRadius: "16px",
-            background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
+            // background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
             padding: "16px",
             height: "100%",
             display: "flex",

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx

@@ -23,9 +23,10 @@ export default function CheckoutPage({ amount, slug, bonus }: {
                 <div className="col-span-12 lg:col-span-4 ">
                     <Box className="coin__card" sx={{
                         borderRadius: "16px",
-                        background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
-                        padding: "16px"
-
+                        padding: "16px",
+                        border: '1px solid  #B801C0',
+                        background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)',
+                        boxShadow: '0 0 24px 0 rgba(234, 3, 91, 0.20)'
                     }}>
                         <div className="title">
                             <h2 className='text-[28px]'>${amount}</h2>
@@ -73,7 +74,7 @@ export default function CheckoutPage({ amount, slug, bonus }: {
                         <h2 className='text-[20px] lg:text-[24px]  mt-8 mb-4'>Select payment method</h2>
                         <div className="grid sm:grid-cols-2 mb-8">
                             <div className="col-span-1">
-                                <div className="py-5 px-4 rounded-[8px]" style={{
+                                <div className="py-5 px-4 rounded-[8px] glass" style={{
                                     borderRadius: "8px",
                                     background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)",
                                 }}>

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/index.tsx

@@ -31,14 +31,14 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
     return (
         <section className="buy__coin__root">
             <div className="section__title mb-4 lg:mb-8 max-w-[520px]">
-                <h1 className='mb-2 text-[24px] lg:text-[32px]'>Buy Panda Master Coins</h1>
+                <h1 className='mb-2 text-[24px] lg:text-[32px]'>Buy Coins</h1>
                 <p className='text-[11px] lg:text-[13px]'>To start playing and cashing out your winnings, you’ll need a crypto wallet to purchase E-Credits and receive payouts. Don't worry—it’s quick and easy!</p>
             </div>
             <div className="grid grid-col-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
                 {
                     packs.map((pack) => (
 
-                        <div className="col-span-1 h-full" key={pack.label}>
+                        <div className="col-span-1 h-full glass" key={pack.label}>
                             <Box className="coin__card" sx={{
                                 borderRadius: "16px",
                                 background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
@@ -77,7 +77,7 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
                     ))
                 }
                 <div className="col-span-1 h-full">
-                    <CoinCalculator slug={slug}/>
+                    <CoinCalculator slug={slug} />
                 </div>
             </div >
         </section >

src/components/pages/dashboard/userDashboard/connectWallet/index.tsx

@@ -10,7 +10,7 @@ export default function ConnectWalletPage() {
             <Box sx={{
                 borderRadius: "24px",
                 background: "rgba(255, 255, 255, 0.04)",
-            }} className="!p-6 !lg:px-16 !lg:py-8 !text-center !max-w-[50%]">
+            }} className="!p-6 !lg:px-16 !lg:py-8 !text-center !max-w-[50%] glass">
                 <Image src={"/assets/images/wallet-featured-image.png"} alt='' width={174} height={140} className='mx-auto' />
 
                 <span className="py-2 px-3 rounded-3xl bg-[#DBFBF6] border border-[#426A66] text-[#426A66] flex justify-center items-center max-w-fit mx-auto my-4 lg:my-6"><SecuritySafe />Safe and secure</span>

src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx

@@ -21,7 +21,7 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr
         <Box sx={{
             borderRadius: "24px",
             background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
-        }} className="p-4 lg:p-6">
+        }} className="p-4 lg:p-6 glass">
             <div className="credentials__header flex gap-2">
                 <Image src={cred?.logo || "/assets/images/fallback.png"} alt={cred?.full_name} className='rounded-full aspect-square' width={74} height={74} />
                 <div className="game__detail">

src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/UserCoin.tsx

@@ -11,7 +11,7 @@ export default function UserCoin({ slug }: { slug: string }) {
         <Box sx={{
             background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%)",
             borderRadius: "16px"
-        }} className="flex justify-center items-center gap-2 py-4 px-6  ">
+        }} className="flex justify-center items-center gap-2 py-4 px-6 glass ">
             <SilverCoinIcon />
             <div className="coins">
                 <strong className="text-[16px] leading-4 font-[600] block mb-1">{data?.balance || 0}</strong>