From 1511505d0f61769b8ebc010cf09b79a81ce0b170 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 18 Sep 2025 20:51:07 +0200
Subject: [PATCH] Refactor LoginDemo.vue for improved layout and accessibility

- Adjusted layout classes for better responsiveness and spacing in the login demo page.
- Updated text sizes and spacing for headings and paragraphs to enhance readability across different screen sizes.
- Modified button sizes and styles for a more consistent user experience.
- Improved accessibility by ensuring proper semantic structure and spacing in demo and login sections.

These changes enhance the overall user interface and experience of the LoginDemo component.
---
 src/pages/LoginDemo.vue | 110 +++++++++++++++-------------------------
 1 file changed, 41 insertions(+), 69 deletions(-)

diff --git a/src/pages/LoginDemo.vue b/src/pages/LoginDemo.vue
index 547319b..14e574b 100644
--- a/src/pages/LoginDemo.vue
+++ b/src/pages/LoginDemo.vue
@@ -1,14 +1,15 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8">
-    <div class="flex flex-col items-center justify-center space-y-8 max-w-4xl mx-auto w-full">
+  <div
+    class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
+    <div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
       <!-- Welcome Section -->
-      <div class="text-center space-y-6">
+      <div class="text-center space-y-2 sm:space-y-4">
         <div class="flex justify-center">
-          <img src="@/assets/logo.png" alt="Logo" class="h-36 w-36 sm:h-48 sm:w-48 md:h-60 md:w-60" />
+          <img src="@/assets/logo.png" alt="Logo" class="h-34 w-34 sm:h-42 sm:w-42 lg:h-50 lg:w-50" />
         </div>
-        <div class="space-y-4">
-          <h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
-          <p class="text-xl text-muted-foreground max-w-md mx-auto">
+        <div class="space-y-1 sm:space-y-3">
+          <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
+          <p class="text-sm sm:text-base md:text-xl text-muted-foreground max-w-md mx-auto px-4">
             Your secure platform for events and community management
           </p>
         </div>
@@ -16,10 +17,11 @@
 
       <!-- Demo Account Creation Card -->
       <Card class="w-full max-w-md">
-        <CardContent class="p-8 space-y-6">
+        <CardContent class="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
           <!-- Demo Badge -->
           <div class="flex justify-center">
-            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
+            <div
+              class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
               <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
               <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
             </div>
@@ -28,32 +30,24 @@
           <!-- Mode Toggle -->
           <div class="flex justify-center">
             <div class="inline-flex rounded-lg bg-muted p-1">
-              <Button
-                variant="ghost"
-                size="sm"
-                :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
-                @click="activeMode = 'demo'"
-              >
+              <Button variant="ghost" size="sm" :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
+                @click="activeMode = 'demo'">
                 Demo Account
               </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
-                @click="activeMode = 'login'"
-              >
+              <Button variant="ghost" size="sm" :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
+                @click="activeMode = 'login'">
                 Sign In
               </Button>
             </div>
           </div>
 
           <!-- Demo Mode Content -->
-          <div v-if="activeMode === 'demo'" class="space-y-6">
+          <div v-if="activeMode === 'demo'" class="space-y-4 sm:space-y-6">
             <!-- Demo Info -->
-            <div class="text-center space-y-3">
-              <h2 class="text-2xl font-semibold">Create Demo Account</h2>
-              <p class="text-muted-foreground text-sm leading-relaxed">
-                Get instant access with a pre-funded demo account containing 
+            <div class="text-center space-y-2 sm:space-y-3">
+              <h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Create Demo Account</h2>
+              <p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
+                Get instant access with a pre-funded demo account containing
                 <span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
               </p>
             </div>
@@ -65,12 +59,8 @@
                   <Label class="text-sm font-medium">Username</Label>
                   <div class="flex items-center gap-2">
                     <Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
-                    <Button 
-                      variant="outline" 
-                      size="sm" 
-                      @click="copyToClipboard(generatedCredentials.username)"
-                      class="shrink-0"
-                    >
+                    <Button variant="outline" size="sm" @click="copyToClipboard(generatedCredentials.username)"
+                      class="shrink-0">
                       Copy
                     </Button>
                   </div>
@@ -79,12 +69,8 @@
                   <Label class="text-sm font-medium">Password</Label>
                   <div class="flex items-center gap-2">
                     <Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
-                    <Button 
-                      variant="outline" 
-                      size="sm" 
-                      @click="copyToClipboard(generatedCredentials.password)"
-                      class="shrink-0"
-                    >
+                    <Button variant="outline" size="sm" @click="copyToClipboard(generatedCredentials.password)"
+                      class="shrink-0">
                       Copy
                     </Button>
                   </div>
@@ -96,23 +82,19 @@
             </div>
 
             <!-- Create Account Button -->
-            <Button 
-              @click="createFakeAccount" 
-              :disabled="isLoading" 
-              class="w-full h-12 text-lg font-medium"
-              size="lg"
-            >
+            <Button @click="createFakeAccount" :disabled="isLoading"
+              class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
               <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
               {{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
             </Button>
           </div>
 
           <!-- Login Mode Content -->
-          <div v-else class="space-y-6">
+          <div v-else class="space-y-4 sm:space-y-6">
             <!-- Login Info -->
-            <div class="text-center space-y-3">
-              <h2 class="text-2xl font-semibold">Sign In</h2>
-              <p class="text-muted-foreground text-sm leading-relaxed">
+            <div class="text-center space-y-2 sm:space-y-3">
+              <h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
+              <p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
                 Sign in to your existing account
               </p>
             </div>
@@ -121,32 +103,19 @@
             <div class="space-y-4">
               <div class="space-y-2">
                 <Label for="login-username">Username or Email</Label>
-                <Input 
-                  id="login-username" 
-                  v-model="loginForm.username" 
-                  placeholder="Enter your username or email"
-                  @keydown.enter="handleLogin"
-                />
+                <Input id="login-username" v-model="loginForm.username" placeholder="Enter your username or email"
+                  @keydown.enter="handleLogin" />
               </div>
               <div class="space-y-2">
                 <Label for="login-password">Password</Label>
-                <Input 
-                  id="login-password" 
-                  type="password" 
-                  v-model="loginForm.password" 
-                  placeholder="Enter your password"
-                  @keydown.enter="handleLogin"
-                />
+                <Input id="login-password" type="password" v-model="loginForm.password"
+                  placeholder="Enter your password" @keydown.enter="handleLogin" />
               </div>
             </div>
 
             <!-- Login Button -->
-            <Button 
-              @click="handleLogin" 
-              :disabled="isLoading || !canLogin" 
-              class="w-full h-12 text-lg font-medium"
-              size="lg"
-            >
+            <Button @click="handleLogin" :disabled="isLoading || !canLogin"
+              class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
               <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
               {{ isLoading ? 'Signing In...' : 'Sign In' }}
             </Button>
@@ -158,7 +127,8 @@
           </p>
 
           <!-- Success Message -->
-          <div v-if="successMessage" class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
+          <div v-if="successMessage"
+            class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
             {{ successMessage }}
           </div>
 
@@ -169,7 +139,9 @@
             </p>
             <div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
               <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                <path fill-rule="evenodd"
+                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                  clip-rule="evenodd" />
               </svg>
               <span class="font-medium">Demo data may be erased at any time</span>
             </div>