refactor: Adjust logo dimensions for improved responsiveness in Navbar and Login components
- Update logo sizes in Navbar.vue and Login.vue to enhance visual consistency and responsiveness across the application.
This commit is contained in:
parent
a461dd656e
commit
31fe244089
2 changed files with 22 additions and 58 deletions
|
|
@ -55,7 +55,7 @@ const handleLogout = async () => {
|
||||||
<!-- Logo and Desktop Navigation -->
|
<!-- Logo and Desktop Navigation -->
|
||||||
<div class="flex items-center gap-6">
|
<div class="flex items-center gap-6">
|
||||||
<router-link to="/" class="flex items-center gap-2 text-foreground hover:text-foreground/90">
|
<router-link to="/" class="flex items-center gap-2 text-foreground hover:text-foreground/90">
|
||||||
<img src="@/assets/logo.png" alt="Logo" class="h-8 w-8 sm:h-10 sm:w-10 md:h-12 md:w-12" />
|
<img src="@/assets/logo.png" alt="Logo" class="h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14" />
|
||||||
<span class="font-semibold">{{ t('nav.title') }}</span>
|
<span class="font-semibold">{{ t('nav.title') }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@
|
||||||
<div class="container py-8 space-y-6">
|
<div class="container py-8 space-y-6">
|
||||||
<div class="flex flex-col items-center justify-center min-h-[60vh] space-y-8">
|
<div class="flex flex-col items-center justify-center min-h-[60vh] space-y-8">
|
||||||
<!-- Welcome Section -->
|
<!-- Welcome Section -->
|
||||||
<div class="text-center space-y-4">
|
<div class="text-center space-y-4">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<img src="@/assets/logo.png" alt="Logo" class="h-16 w-16 sm:h-24 sm:w-24 md:h-32 md:w-32 lg:h-36 lg:w-36" />
|
<img src="@/assets/logo.png" alt="Logo" class="h-36 w-36 sm:h-48 sm:w-48 md:h-60 md:w-60" />
|
||||||
</div>
|
</div>
|
||||||
<h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
<h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
||||||
<p class="text-xl text-muted-foreground max-w-md">
|
<p class="text-xl text-muted-foreground max-w-md">
|
||||||
Your secure platform for events and community management
|
Your secure platform for events and community management
|
||||||
|
|
@ -23,31 +23,18 @@
|
||||||
<CardContent class="space-y-4">
|
<CardContent class="space-y-4">
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Label for="username">Username or Email</Label>
|
<Label for="username">Username or Email</Label>
|
||||||
<Input
|
<Input id="username" v-model="loginForm.username" placeholder="Enter your username or email"
|
||||||
id="username"
|
@keydown.enter="handleLogin" />
|
||||||
v-model="loginForm.username"
|
|
||||||
placeholder="Enter your username or email"
|
|
||||||
@keydown.enter="handleLogin"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Label for="password">Password</Label>
|
<Label for="password">Password</Label>
|
||||||
<Input
|
<Input id="password" type="password" v-model="loginForm.password" placeholder="Enter your password"
|
||||||
id="password"
|
@keydown.enter="handleLogin" />
|
||||||
type="password"
|
|
||||||
v-model="loginForm.password"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
@keydown.enter="handleLogin"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<p v-if="error" class="text-sm text-destructive text-center">
|
<p v-if="error" class="text-sm text-destructive text-center">
|
||||||
{{ error }}
|
{{ error }}
|
||||||
</p>
|
</p>
|
||||||
<Button
|
<Button @click="handleLogin" :disabled="isLoading || !canLogin" class="w-full">
|
||||||
@click="handleLogin"
|
|
||||||
:disabled="isLoading || !canLogin"
|
|
||||||
class="w-full"
|
|
||||||
>
|
|
||||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
||||||
Sign In
|
Sign In
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -73,51 +60,28 @@
|
||||||
<CardContent class="space-y-4">
|
<CardContent class="space-y-4">
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Label for="reg-username">Username</Label>
|
<Label for="reg-username">Username</Label>
|
||||||
<Input
|
<Input id="reg-username" v-model="registerForm.username" placeholder="Choose a username"
|
||||||
id="reg-username"
|
@keydown.enter="handleRegister" />
|
||||||
v-model="registerForm.username"
|
|
||||||
placeholder="Choose a username"
|
|
||||||
@keydown.enter="handleRegister"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Label for="reg-email">Email (optional)</Label>
|
<Label for="reg-email">Email (optional)</Label>
|
||||||
<Input
|
<Input id="reg-email" type="email" v-model="registerForm.email" placeholder="Enter your email"
|
||||||
id="reg-email"
|
@keydown.enter="handleRegister" />
|
||||||
type="email"
|
|
||||||
v-model="registerForm.email"
|
|
||||||
placeholder="Enter your email"
|
|
||||||
@keydown.enter="handleRegister"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Label for="reg-password">Password</Label>
|
<Label for="reg-password">Password</Label>
|
||||||
<Input
|
<Input id="reg-password" type="password" v-model="registerForm.password" placeholder="Choose a password"
|
||||||
id="reg-password"
|
@keydown.enter="handleRegister" />
|
||||||
type="password"
|
|
||||||
v-model="registerForm.password"
|
|
||||||
placeholder="Choose a password"
|
|
||||||
@keydown.enter="handleRegister"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Label for="reg-password-repeat">Confirm Password</Label>
|
<Label for="reg-password-repeat">Confirm Password</Label>
|
||||||
<Input
|
<Input id="reg-password-repeat" type="password" v-model="registerForm.password_repeat"
|
||||||
id="reg-password-repeat"
|
placeholder="Confirm your password" @keydown.enter="handleRegister" />
|
||||||
type="password"
|
|
||||||
v-model="registerForm.password_repeat"
|
|
||||||
placeholder="Confirm your password"
|
|
||||||
@keydown.enter="handleRegister"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<p v-if="error" class="text-sm text-destructive text-center">
|
<p v-if="error" class="text-sm text-destructive text-center">
|
||||||
{{ error }}
|
{{ error }}
|
||||||
</p>
|
</p>
|
||||||
<Button
|
<Button @click="handleRegister" :disabled="isLoading || !canRegister" class="w-full">
|
||||||
@click="handleRegister"
|
|
||||||
:disabled="isLoading || !canRegister"
|
|
||||||
class="w-full"
|
|
||||||
>
|
|
||||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
||||||
Create Account
|
Create Account
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue