From e302095b11d88af427a7567a374eadf81329eb98 Mon Sep 17 00:00:00 2001
From: Sewmina <sewmina7@gmail.com>
Date: Thu, 12 Sep 2024 11:58:39 +0530
Subject: [PATCH] tweaks responsivness

---
 .vscode/settings.json |  3 +++
 pages/_app.tsx        |  4 ++--
 pages/dashboard.tsx   | 22 +++++++++++-----------
 pages/index.tsx       | 16 ++++++++--------
 4 files changed, 24 insertions(+), 21 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..d55ccc7
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.enabled": true
+}
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 871dfde..7fdb059 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -60,8 +60,8 @@ function MyApp({ Component, pageProps }: AppProps) {
         <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
         <link rel="manifest" href="/favicons/manifest.json" />
 
-        <title>Privy Auth Starter</title>
-        <meta name="description" content="Privy Auth Starter" />
+        <title>W3b Game Dashboard</title>
+        <meta name="description" content="W3B Games Dashboard" />
       </Head>
       <PrivyProvider
         appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || ""}
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 0dd9c43..666dbf8 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -298,24 +298,24 @@ export default function DashboardPage() {
                     { icon: faDiscord, name: 'Discord', user: user?.discord, toggle: ToggleDiscord },
                     { icon: faGoogle, name: 'Google', user: user?.google, toggle: ToggleGoogle }
                   ].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 className="flex items-center space-x-4">
+                    <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 mb-2 sm:mb-0">
                         <div className="w-8 h-8 flex items-center justify-center">
                           <FontAwesomeIcon icon={social.icon} size="2x" className="text-blue-400" />
                         </div>
                         <span className="font-medium">{social.name}</span>
                       </div>
-                      <div className="flex items-center space-x-4">
-                      <span className={`px-3 py-1 rounded-full ${social.user ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'}`}>
-                      {social.user ? (
-  social.name === 'Google' 
-    ? `@${(social.user as Google).email}` 
-    : `@${(social.user as Twitter | Discord).username}`
-) : 'Not linked'}
-                      </span>
+                      <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'} text-sm sm:text-base truncate max-w-full sm:max-w-[200px]`}>
+                          {social.user ? (
+                            social.name === 'Google' 
+                              ? `@${(social.user as Google).email}` 
+                              : `@${(social.user as Twitter | Discord).username}`
+                          ) : 'Not linked'}
+                        </span>
                         <button
                           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
                               ? 'bg-red-600 hover:bg-red-700 text-white'
                               : 'bg-green-600 hover:bg-green-700 text-white'
diff --git a/pages/index.tsx b/pages/index.tsx
index ed39b3c..2bba6bd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -36,19 +36,19 @@ export default function LoginPage() {
   return (
     <>
       <Head>
-        <title>MetaHunt · Web3 Adventure</title>
+        <title>Login · W3B Games</title>
       </Head>
 
-      <main className="flex min-h-screen min-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="text-center">
+      <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 w-full h-screen">
+          <div className="text-center w-full">
             <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>
-            <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
             </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
             </p>
             <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"
                 onClick={login}
               >
-                <FontAwesomeIcon icon={faRocket} className="mr-6 w-12 " />
+                <FontAwesomeIcon icon={faRocket} className="mr-4 w-8" />
                 Login to Dashboard
               </button>
             </div>