warlock/mhunt_account_dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweaks responsivness

Browse Source
This commit is contained in:
Sewmina 2024-09-12 11:58:39 +05:30
parent 541393d96a
commit e302095b11
4 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"git.enabled": true
}

4
pages/_app.tsx
View File

@ -60,8 +60,8 @@ function MyApp({ Component, pageProps }: AppProps) {
<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/favicons/manifest.json" /> <link rel="manifest" href="/favicons/manifest.json" />
<title>Privy Auth Starter</title> <title>W3b Game Dashboard</title>
<meta name="description" content="Privy Auth Starter" /> <meta name="description" content="W3B Games Dashboard" />
</Head> </Head>
<PrivyProvider <PrivyProvider
appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || ""} appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || ""}

10
pages/dashboard.tsx
View File

@ -298,15 +298,15 @@ export default function DashboardPage() {
{ icon: faDiscord, name: 'Discord', user: user?.discord, toggle: ToggleDiscord }, { icon: faDiscord, name: 'Discord', user: user?.discord, toggle: ToggleDiscord },
{ icon: faGoogle, name: 'Google', user: user?.google, toggle: ToggleGoogle } { icon: faGoogle, name: 'Google', user: user?.google, toggle: ToggleGoogle }
].map((social) => ( ].map((social) => (
<div key={social.name} className="flex items-center justify-between bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition duration-300"> <div key={social.name} className="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition duration-300">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4 mb-2 sm:mb-0">
<div className="w-8 h-8 flex items-center justify-center"> <div className="w-8 h-8 flex items-center justify-center">
<FontAwesomeIcon icon={social.icon} size="2x" className="text-blue-400" /> <FontAwesomeIcon icon={social.icon} size="2x" className="text-blue-400" />
</div> </div>
<span className="font-medium">{social.name}</span> <span className="font-medium">{social.name}</span>
</div> </div>
<div className="flex items-center space-x-4"> <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4 w-full sm:w-auto">
<span className={`px-3 py-1 rounded-full ${social.user ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'}`}> <span className={`px-3 py-1 rounded-full ${social.user ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'} text-sm sm:text-base truncate max-w-full sm:max-w-[200px]`}>
{social.user ? ( {social.user ? (
social.name === 'Google' social.name === 'Google'
? `@${(social.user as Google).email}` ? `@${(social.user as Google).email}`
@ -315,7 +315,7 @@ export default function DashboardPage() {
</span> </span>
<button <button
onClick={social.toggle} onClick={social.toggle}
className={`rounded-full px-4 py-2 font-semibold transition duration-300 ${ className={`rounded-full px-4 py-2 font-semibold transition duration-300 w-full sm:w-auto ${
social.user social.user
? 'bg-red-600 hover:bg-red-700 text-white' ? 'bg-red-600 hover:bg-red-700 text-white'
: 'bg-green-600 hover:bg-green-700 text-white' : 'bg-green-600 hover:bg-green-700 text-white'

16
pages/index.tsx
View File

@ -36,19 +36,19 @@ export default function LoginPage() {
return ( return (
<> <>
<Head> <Head>
<title>MetaHunt · Web3 Adventure</title> <title>Login · W3B Games</title>
</Head> </Head>
<main className="flex min-h-screen min-w-full bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900"> <main className="flex min-h-screen w-full bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
<div className="flex flex-1 p-6 justify-center items-center"> <div className="flex flex-1 p-6 justify-center items-center w-full h-screen">
<div className="text-center"> <div className="text-center w-full">
<div className="mb-10 h-96 flex justify-center"> <div className="mb-10 h-96 flex justify-center">
<FontAwesomeIcon icon={faCube} className="text-sm text-cyan-400 animate-pulse" /> <FontAwesomeIcon icon={faCube} className="text-6xl text-cyan-400 animate-pulse" />
</div> </div>
<h1 className="text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500"> <h1 className="text-4xl sm:text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
Welcome to W3B Game Dashboard Welcome to W3B Game Dashboard
</h1> </h1>
<p className="text-xl mb-8 text-gray-300"> <p className="text-lg sm:text-xl mb-8 text-gray-300">
Embark on a Web3 adventure like no other Embark on a Web3 adventure like no other
</p> </p>
<div className="mt-6 flex justify-center"> <div className="mt-6 flex justify-center">
@ -56,7 +56,7 @@ export default function LoginPage() {
className="bg-gradient-to-r from-purple-500 to-cyan-500 hover:from-purple-600 hover:to-cyan-600 py-3 px-8 text-white rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5" className="bg-gradient-to-r from-purple-500 to-cyan-500 hover:from-purple-600 hover:to-cyan-600 py-3 px-8 text-white rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
onClick={login} onClick={login}
> >
<FontAwesomeIcon icon={faRocket} className="mr-6 w-12 " /> <FontAwesomeIcon icon={faRocket} className="mr-4 w-8" />
Login to Dashboard Login to Dashboard
</button> </button>
</div> </div>