Skip to content

S
sweepstake
Commit b1fb9786 by Arjun Jhukal
Options

updated the glass view for user dashboard

parent 27f95c58
Showing with 45 additions and 32 deletions
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment