Skip to content

S
sweepstake
Commit 127909bd by Arjun Jhukal
Options

updated the glossy effect for glass designed card

parent 979723cd
Showing with 232 additions and 157 deletions
src/app/(dashboard)/(user)/(outsideAuth)/page.tsx
...@@ -6,6 +6,7 @@ import { getBanners, getSubBanners } from "@/serverApi/pages"; ...@@ -6,6 +6,7 @@ import { getBanners, getSubBanners } from "@/serverApi/pages";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import DashboardProvider from "./DashboardProvider"; import DashboardProvider from "./DashboardProvider";
import GlassWrapper from "@/components/molecules/GlassWrapper";
export const dynamic = "force-dynamic"; export const dynamic = "force-dynamic";
...@@ -78,22 +79,24 @@ export default async function Home() { ...@@ -78,22 +79,24 @@ export default async function Home() {
key={game.id} key={game.id}
className="col-span-1 " className="col-span-1 "
> >
<div <GlassWrapper>
className="flex items-center gap-3 py-2 px-6 glass" <div
style={{ className="flex items-center gap-3 py-2 px-6 "
borderRadius: "24px", // style={{
background: "rgba(255, 255, 255, 0.10)", // borderRadius: "24px",
}} // background: "rgba(255, 255, 255, 0.10)",
> // }}
<Image >
src={game.thumbnail || "/assets/images/fallback.png"} <Image
alt={game.name} src={game.thumbnail || "/assets/images/fallback.png"}
width={74} alt={game.name}
height={74} width={74}
className="aspect-[1/1] object-cover group-hover:scale-105 transition-transform duration-300 rounded-full" height={74}
/> className="aspect-[1/1] object-cover group-hover:scale-105 transition-transform duration-300 rounded-full"
<strong className="text-[14px]">{game.name}</strong> />
</div> <strong className="text-[14px]">{game.name}</strong>
</div>
</GlassWrapper>
</ProtectedLink> </ProtectedLink>
))} ))}
</div> </div>
...@@ -128,18 +131,10 @@ export default async function Home() { ...@@ -128,18 +131,10 @@ export default async function Home() {
{subBannersError ? ( {subBannersError ? (
<p></p> <p></p>
) : subBanners?.data?.length ? ( ) : subBanners?.data?.length ? (
<div className="dashboard-card-wrapper flex flex-col lg:grid md:grid-cols-2 gap-5 justify-center"> <div className="dashboard-card-wrapper flex flex-col lg:grid lg:grid-cols-2 2xl:grid-cols-3 gap-5 justify-center">
{subBanners.data.map((subBanner, index) => ( {subBanners.data.map((subBanner, index) => (
<div <GlassWrapper key={subBanner.name || index}
key={subBanner.name || index} className="dashboard-card1 col-span-1 flex justify-between px-10 gap-2 rounded-[24px]">
className="dashboard-card1 col-span-1 flex justify-between px-10 gap-2 rounded-[24px] glass"
style={{
background:
index % 2 === 0
? "rgba(255, 255, 255, 0.10)"
: "rgba(255, 255, 255, 0.20)",
}}
>
<div className="py-7 gap-6"> <div className="py-7 gap-6">
{subBanner.name && ( {subBanner.name && (
<h1 <h1
...@@ -188,7 +183,7 @@ export default async function Home() { ...@@ -188,7 +183,7 @@ export default async function Home() {
/> />
</div> </div>
)} )}
</div> </GlassWrapper>
))} ))}
</div> </div>
) : null} ) : null}
......
src/app/(dashboard)/(user)/(outsideAuth)/support/page.tsx
import GlassWrapper from "@/components/molecules/GlassWrapper";
import Link from "next/link"; import Link from "next/link";
import React from "react"; import React from "react";
...@@ -14,9 +15,7 @@ export default function Support() { ...@@ -14,9 +15,7 @@ export default function Support() {
</div> </div>
<div className="grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-6"> <div className="grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-6">
<div <GlassWrapper className="p-6">
className="p-6 rounded-[24px] glass"
style={{ background: "rgba(255, 255, 255, 0.04)" }}>
<img <img
src="/assets/images/chat.svg" src="/assets/images/chat.svg"
alt="chat" alt="chat"
...@@ -34,10 +33,8 @@ export default function Support() { ...@@ -34,10 +33,8 @@ export default function Support() {
}}> }}>
Start Live Chat Start Live Chat
</a> </a>
</div> </GlassWrapper>
<div <GlassWrapper className="p-6">
className="p-6 rounded-[24px] glass"
style={{ background: "rgba(255, 255, 255, 0.04)" }}>
<img <img
src="/assets/images/support.svg" src="/assets/images/support.svg"
alt="" alt=""
...@@ -48,10 +45,8 @@ export default function Support() { ...@@ -48,10 +45,8 @@ export default function Support() {
Questions about your account or gameplay? Our team is here for you. Questions about your account or gameplay? Our team is here for you.
</p> </p>
<Link href="#" className="underline">support@sweepstakeonline.com</Link> <Link href="#" className="underline">support@sweepstakeonline.com</Link>
</div> </GlassWrapper>
<div <GlassWrapper className="p-6">
className="p-6 rounded-[24px] glass"
style={{ background: "rgba(255, 255, 255, 0.04)" }}>
<img <img
src="/assets/images/technical.svg" src="/assets/images/technical.svg"
alt="" alt=""
...@@ -62,7 +57,7 @@ export default function Support() { ...@@ -62,7 +57,7 @@ export default function Support() {
Questions about your account or gameplay? Our team is here for you. Questions about your account or gameplay? Our team is here for you.
</p> </p>
<Link href="#" className="underline">technical@sweepstakeonline.com</Link> <Link href="#" className="underline">technical@sweepstakeonline.com</Link>
</div> </GlassWrapper>
</div> </div>
</section> </section>
); );
......
src/app/(dashboard)/(user)/(privateUser)/account/AccountTab.tsx
import GlassWrapper from '@/components/molecules/GlassWrapper';
import TabController from '@/components/molecules/TabController'; import TabController from '@/components/molecules/TabController';
import UserProfileCard from "@/components/organism/Cards/UserProfileCard"; import UserProfileCard from "@/components/organism/Cards/UserProfileCard";
...@@ -36,9 +37,7 @@ export default function AccountTab() { ...@@ -36,9 +37,7 @@ export default function AccountTab() {
<div className="col-span-12 lg:col-span-5 "> <div className="col-span-12 lg:col-span-5 ">
<UserProfileCard balance={data} loading={isLoading} /> <UserProfileCard balance={data} loading={isLoading} />
</div> </div>
<div className="col-span-12 lg:col-span-7 glass" style={{ <GlassWrapper className="col-span-12 lg:col-span-7" >
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={[ <TabController links={[
{ value: "account_detail", label: "Account Details" }, { value: "account_detail", label: "Account Details" },
{ value: "wallet_information", label: "Wallet Information" }, { value: "wallet_information", label: "Wallet Information" },
...@@ -47,7 +46,7 @@ export default function AccountTab() { ...@@ -47,7 +46,7 @@ export default function AccountTab() {
controllerClassName=' px-4 lg:px-8 lg:pt-8 !mb-0' controllerClassName=' px-4 lg:px-8 lg:pt-8 !mb-0'
/> />
{renderTabContent()} {renderTabContent()}
</div> </GlassWrapper>
</div> </div>
</div> </div>
) )
......
src/app/(dashboard)/(user)/(privateUser)/account/loading.tsx 0 → 100644
// components/Loading.tsx
import React from 'react';
export default function Loading() {
return (
<div className="flex items-center justify-center h-[60vh]">
<div className="flex flex-col items-center">
{/* Spinner */}
<div className="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
<p className="mt-4 text-gray-600 font-medium text-lg">Loading...</p>
</div>
</div>
);
}
src/app/(dashboard)/(user)/(privateUser)/credentials/loading.tsx 0 → 100644
// components/Loading.tsx
import React from 'react';
export default function Loading() {
return (
<div className="flex items-center justify-center h-[60vh]">
<div className="flex flex-col items-center">
{/* Spinner */}
<div className="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
<p className="mt-4 text-gray-600 font-medium text-lg">Loading...</p>
</div>
</div>
);
}
src/app/globals.css
...@@ -410,6 +410,27 @@ ...@@ -410,6 +410,27 @@
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.glass::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.2) 0%, transparent 60%); */
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
rgba(184, 1, 192, 0.2) 0%,
rgba(224, 70, 220, 0) 60%);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.glass:hover::before {
opacity: 1;
} }
@media (max-width:1020px) { @media (max-width:1020px) {
......
src/components/molecules/GlassWrapper.tsx 0 → 100644
"use client";
import React, { useRef } from "react";
interface GlassWrapperProps {
children: React.ReactNode;
className?: string;
}
const GlassWrapper: React.FC<GlassWrapperProps> = ({ children, className }) => {
const ref = useRef<HTMLDivElement>(null);
const handleMouseMove = (e: React.MouseEvent) => {
if (!ref.current) return;
const rect = ref.current.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
ref.current.style.setProperty("--x", `${x}%`);
ref.current.style.setProperty("--y", `${y}%`);
};
const handleMouseLeave = () => {
if (!ref.current) return;
ref.current.style.setProperty("--x", `50%`);
ref.current.style.setProperty("--y", `50%`);
};
return (
<div
ref={ref}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
className={`glass ${className || ""}`}
>
{children}
</div>
);
};
export default GlassWrapper;
src/components/organism/Cards/UserProfileCard.tsx
"use client"; "use client";
import GlassWrapper from '@/components/molecules/GlassWrapper';
import { useAppSelector } from '@/hooks/hook'; import { useAppSelector } from '@/hooks/hook';
import EditIcon from '@/icons/EditIcon' import EditIcon from '@/icons/EditIcon'
import { formatDateTime } from '@/utils/formatDateTime'; import { formatDateTime } from '@/utils/formatDateTime';
...@@ -10,9 +11,7 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo ...@@ -10,9 +11,7 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
const { date } = formatDateTime(user?.registered_date as string); const { date } = formatDateTime(user?.registered_date as string);
return ( return (
<div className="player__info text-center rounded-xl lg:rounded-3xl p-4 lg:py-10 lg:px-9 glass" style={{ <GlassWrapper className="player__info text-center rounded-xl lg:rounded-3xl p-4 lg:py-10 lg:px-9" >
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"> <div className="player__profile bg-primary-grad p-[1px] rounded-full max-w-fit mx-auto relative">
<Image src={user?.profile_image_file || "/assets/images/auth-image.png"} alt='' width={100} height={100} className=' aspect-square rounded-full border-[5px] border-solid border-white' /> <Image src={user?.profile_image_file || "/assets/images/auth-image.png"} alt='' width={100} height={100} className=' aspect-square rounded-full border-[5px] border-solid border-white' />
<div className="absolute left-[50%] translate-x-[-50%] bottom-[-10px]"> <div className="absolute left-[50%] translate-x-[-50%] bottom-[-10px]">
...@@ -87,6 +86,6 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo ...@@ -87,6 +86,6 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
</div> </div>
</div>) </div>)
} }
</div> </GlassWrapper>
) )
} }
src/components/pages/dashboard/UspSlider.tsx
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import Image from "next/image"; import Image from "next/image";
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from "react";
import { motion, useMotionValue, useTransform, animate } from "framer-motion"; import { motion, useMotionValue, useTransform, animate } from "framer-motion";
import GlassWrapper from "@/components/molecules/GlassWrapper";
interface UspItem { interface UspItem {
title: string; title: string;
...@@ -53,26 +54,30 @@ export default function UspSlider({ uspData }: { uspData: { title: string; descr ...@@ -53,26 +54,30 @@ export default function UspSlider({ uspData }: { uspData: { title: string; descr
{items.map((item, index) => ( {items.map((item, index) => (
<motion.div <motion.div
key={index} key={index}
className="flex-shrink-0 w-[220px] md:w-[260px] lg:w-[280px] py-4 px-5 flex items-center gap-3 rounded-2xl glass" // style={{
style={{ // background: "rgba(255, 255, 255, 0.15)",
background: "rgba(255, 255, 255, 0.15)", // backdropFilter: "blur(8px)",
backdropFilter: "blur(8px)", // }}
}} // whileHover={{ scale: 1.05 }}
whileHover={{ scale: 1.05 }}
> >
<Image <GlassWrapper
src={item.icon || "/assets/images/fallback.png"} className="flex-shrink-0 w-[220px] md:w-[260px] lg:w-[280px] py-4 px-5 flex items-center gap-3 rounded-2xl"
alt={item.title}
width={66} >
height={66} <Image
className="rounded-full" src={item.icon || "/assets/images/fallback.png"}
/> alt={item.title}
<div className="content"> width={66}
<strong className="text-sm font-bold block mb-1"> height={66}
{item.title} className="rounded-full"
</strong> />
<p className="text-xs opacity-80">{item.description}</p> <div className="content">
</div> <strong className="text-sm font-bold block mb-1">
{item.title}
</strong>
<p className="text-xs opacity-80">{item.description}</p>
</div>
</GlassWrapper>
</motion.div> </motion.div>
))} ))}
</motion.div> </motion.div>
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/CoinCalculator.tsx
"use client"; "use client";
import GlassWrapper from '@/components/molecules/GlassWrapper';
import GoldCoinIcon from '@/icons/GoldCoinIcon'; import GoldCoinIcon from '@/icons/GoldCoinIcon';
import { Box, Button, OutlinedInput } from '@mui/material'; import { Box, Button, OutlinedInput } from '@mui/material';
import { Coin } from '@wandersonalwes/iconsax-react'; import { Coin } from '@wandersonalwes/iconsax-react';
...@@ -43,71 +44,71 @@ export default function CoinCalculator({ slug }: { slug: string }) { ...@@ -43,71 +44,71 @@ export default function CoinCalculator({ slug }: { slug: string }) {
}; };
return ( return (
<Box className="coin__card glass" sx={{ <GlassWrapper className='h-full'>
borderRadius: "16px", <Box className="coin__card" sx={{
// 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", height: "100%",
height: "100%", display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", justifyContent: "space-between"
justifyContent: "space-between" }}>
}}> <div className="title">
<div className="title"> <h2 className='text-[28px]'>Custom</h2>
<h2 className='text-[28px]'>Custom</h2> <span className='text-[12px]'>$1 = 10 Gold Coins</span>
<span className='text-[12px]'>$1 = 10 Gold Coins</span> </div>
</div>
<div className="footer"> <div className="footer">
{baseCoins && baseCoins > 0 ? ( {baseCoins && baseCoins > 0 ? (
<> <>
<div className="coin-info mt-10 flex justify-between items-center py-3 px-4 mb-4" <div className="coin-info mt-10 flex justify-between items-center py-3 px-4 mb-4"
style={{ style={{
borderRadius: "16px", borderRadius: "16px",
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)" background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
}} }}
> >
<div className="coin flex gap-1"> <div className="coin flex gap-1">
<GoldCoinIcon /> <GoldCoinIcon />
<p> <p>
<strong className='text-[16px] block'>{baseCoins}</strong> <strong className='text-[16px] block'>{baseCoins}</strong>
<span className='text-[12px]'>Gold Coins</span> <span className='text-[12px]'>Gold Coins</span>
</p> </p>
</div>
<div className="bonus">
<strong className='text-[16px] block'>+ 10</strong>
{/* <span className='text-[12px]'>bonus</span> */}
</div>
</div> </div>
<div className="bonus">
<strong className='text-[16px] block'>+ 10</strong>
{/* <span className='text-[12px]'>bonus</span> */}
</div>
</div>
{/* Navigate dynamically using router.push */} {/* Navigate dynamically using router.push */}
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
className='ss-btn bg-primary-grad !text-white flex justify-center items-center' className='ss-btn bg-primary-grad !text-white flex justify-center items-center'
onClick={handleBuy} onClick={handleBuy}
> >
<Coin /> Buy Coins <Coin /> Buy Coins
</Button> </Button>
<Button variant="contained" color="secondary" className='!mt-4' onClick={handleEdit}> <Button variant="contained" color="secondary" className='!mt-4' onClick={handleEdit}>
Edit Amount Edit Amount
</Button> </Button>
</> </>
) : ( ) : (
<> <>
<OutlinedInput <OutlinedInput
type="number" type="number"
value={amount} value={amount}
onChange={(e) => setAmount(e.target.value === "" ? "" : Number(e.target.value))} onChange={(e) => setAmount(e.target.value === "" ? "" : Number(e.target.value))}
placeholder="Enter amount" placeholder="Enter amount"
inputProps={{ min: 1 }} inputProps={{ min: 1 }}
/> />
<Button variant="contained" color="primary" className='!mt-4' onClick={handleCalculate}> <Button variant="contained" color="primary" className='!mt-4' onClick={handleCalculate}>
Calculate Calculate
</Button> </Button>
</> </>
)} )}
</div> </div>
</Box> </Box>
</GlassWrapper>
); );
} }
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx
"use client"; "use client";
import GlassWrapper from '@/components/molecules/GlassWrapper';
import { useAppDispatch } from '@/hooks/hook'; import { useAppDispatch } from '@/hooks/hook';
import BitCoinIcon from '@/icons/BitCoinIcon'; import BitCoinIcon from '@/icons/BitCoinIcon';
import GoldCoinIcon from '@/icons/GoldCoinIcon'; import GoldCoinIcon from '@/icons/GoldCoinIcon';
...@@ -74,12 +75,11 @@ export default function CheckoutPage({ amount, slug, bonus }: { ...@@ -74,12 +75,11 @@ export default function CheckoutPage({ amount, slug, bonus }: {
<h2 className='text-[20px] lg:text-[24px] mt-8 mb-4'>Select payment method</h2> <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="grid sm:grid-cols-2 mb-8">
<div className="col-span-1"> <div className="col-span-1">
<div className="py-5 px-4 rounded-[8px] glass" style={{ <GlassWrapper>
borderRadius: "8px", <div className="py-5 px-4 " >
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)", <span className="text-[14px] flex items-center justify-start gap-2"><BitCoinIcon />Crypto Currency</span>
}}> </div>
<span className="text-[14px] flex items-center justify-start gap-2"><BitCoinIcon />Crypto Currency</span> </GlassWrapper>
</div>
</div> </div>
</div> </div>
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/index.tsx
...@@ -4,6 +4,7 @@ import { Coin } from '@wandersonalwes/iconsax-react' ...@@ -4,6 +4,7 @@ import { Coin } from '@wandersonalwes/iconsax-react'
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import CoinCalculator from './CoinCalculator' import CoinCalculator from './CoinCalculator'
import GlassWrapper from '@/components/molecules/GlassWrapper'
export default function BuyCoinSinlgeGame({ slug }: { slug: string }) { export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
const packs = [ const packs = [
...@@ -38,10 +39,8 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) { ...@@ -38,10 +39,8 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
{ {
packs.map((pack) => ( packs.map((pack) => (
<div className="col-span-1 h-full glass" key={pack.label}> <GlassWrapper className="col-span-1 h-full" key={pack.label}>
<Box className="coin__card" sx={{ <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"
}}> }}>
...@@ -73,7 +72,7 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) { ...@@ -73,7 +72,7 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
<Link href={`/buy-coins/${slug}/checkout?amount=${pack.amount}&bonus=${pack.bonus}`} className='ss-btn bg-primary-grad !text-white flex justify-center items-center'><Coin />Buy Coins</Link> <Link href={`/buy-coins/${slug}/checkout?amount=${pack.amount}&bonus=${pack.bonus}`} className='ss-btn bg-primary-grad !text-white flex justify-center items-center'><Coin />Buy Coins</Link>
</div> </div>
</Box> </Box>
</div> </GlassWrapper>
)) ))
} }
<div className="col-span-1 h-full"> <div className="col-span-1 h-full">
......
src/components/pages/dashboard/userDashboard/buyCoins/index.tsx
import GlassWrapper from '@/components/molecules/GlassWrapper'
import GoldCoinIcon from '@/icons/GoldCoinIcon' import GoldCoinIcon from '@/icons/GoldCoinIcon'
import SilverCoinIcon from '@/icons/SilverCoinIcon' import SilverCoinIcon from '@/icons/SilverCoinIcon'
import { GameResponseProps } from '@/types/game' import { GameResponseProps } from '@/types/game'
...@@ -32,13 +33,9 @@ export default function BuyCoinGameListPage({ ...@@ -32,13 +33,9 @@ export default function BuyCoinGameListPage({
return ( return (
<div key={game.id} className="col-span-1"> <div key={game.id} className="col-span-1">
<div <GlassWrapper
className="coin__card px-6 py-4" className="coin__card px-6 py-4"
style={{
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)',
}}
> >
<div className="coin__detail"> <div className="coin__detail">
<div className="flex gap-4 items-center mb-4"> <div className="flex gap-4 items-center mb-4">
...@@ -65,7 +62,7 @@ export default function BuyCoinGameListPage({ ...@@ -65,7 +62,7 @@ export default function BuyCoinGameListPage({
> >
<Coin /> Buy Coins <Coin /> Buy Coins
</Link> </Link>
</div> </GlassWrapper>
</div> </div>
) )
})} })}
......
src/components/pages/dashboard/userDashboard/connectWallet/index.tsx
...@@ -3,14 +3,12 @@ import { SecuritySafe } from '@wandersonalwes/iconsax-react' ...@@ -3,14 +3,12 @@ import { SecuritySafe } from '@wandersonalwes/iconsax-react'
import Image from 'next/image' import Image from 'next/image'
import React from 'react' import React from 'react'
import ConnectWalletForm from './ConnectWalletForm' import ConnectWalletForm from './ConnectWalletForm'
import GlassWrapper from '@/components/molecules/GlassWrapper'
export default function ConnectWalletPage() { export default function ConnectWalletPage() {
return ( return (
<section className="wallet__page__root"> <section className="wallet__page__root">
<Box sx={{ <GlassWrapper className="!p-6 !lg:px-16 !lg:py-8 !text-center !max-w-[50%]">
borderRadius: "24px",
background: "rgba(255, 255, 255, 0.04)",
}} 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' /> <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> <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>
...@@ -25,7 +23,7 @@ export default function ConnectWalletPage() { ...@@ -25,7 +23,7 @@ export default function ConnectWalletPage() {
<Image src="/assets/images/payment-02.png" alt='' width={78} height={24} /> <Image src="/assets/images/payment-02.png" alt='' width={78} height={24} />
<Image src="/assets/images/payment-03.png" alt='' width={78} height={24} /> <Image src="/assets/images/payment-03.png" alt='' width={78} height={24} />
</div> </div>
</Box> </GlassWrapper>
</section> </section>
) )
} }
src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx
...@@ -9,6 +9,7 @@ import { CredentialsProps } from '@/types/game' ...@@ -9,6 +9,7 @@ import { CredentialsProps } from '@/types/game'
import { CardPasswordField } from './CardPasswordHandler' import { CardPasswordField } from './CardPasswordHandler'
import CopyToClipboard from './CopyToClipboard' import CopyToClipboard from './CopyToClipboard'
import GameIframeDialog from '../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog' import GameIframeDialog from '../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog'
import GlassWrapper from '@/components/molecules/GlassWrapper'
export default function CredentialsCard({ cred, balance }: { cred: CredentialsProps; balance: any }) { export default function CredentialsCard({ cred, balance }: { cred: CredentialsProps; balance: any }) {
...@@ -19,10 +20,7 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr ...@@ -19,10 +20,7 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr
const gcValue = const gcValue =
currentBalance?.type === "gc" ? currentBalance.balance ?? 0 : null; currentBalance?.type === "gc" ? currentBalance.balance ?? 0 : null;
return ( return (
<Box sx={{ <GlassWrapper className="p-4 lg:p-6">
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 glass">
<div className="credentials__header flex gap-2"> <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} /> <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"> <div className="game__detail">
...@@ -66,8 +64,8 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr ...@@ -66,8 +64,8 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr
isCredCard={true} isCredCard={true}
/> />
} }
</div> </div>
</Box> </GlassWrapper>
) )
} }
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