design tweaks

This commit is contained in:
Peter Steinberger 2025-06-25 02:34:26 +02:00
parent 5f053f55be
commit dac99e0c1b
2 changed files with 6 additions and 7 deletions

View file

@ -139,12 +139,12 @@ export class AuthLogin extends LitElement {
<div class="auth-container"> <div class="auth-container">
<div class="w-full max-w-sm"> <div class="w-full max-w-sm">
<div class="auth-header"> <div class="auth-header">
<div class="flex flex-col items-center gap-1 mb-3"> <div class="flex flex-col items-center gap-3 mb-8">
<terminal-icon <terminal-icon
size="40" size="56"
style="filter: drop-shadow(0 0 10px rgba(124, 230, 161, 0.3));" style="filter: drop-shadow(0 0 15px rgba(124, 230, 161, 0.4));"
></terminal-icon> ></terminal-icon>
<h2 class="auth-title">VibeTunnel</h2> <h2 class="auth-title text-3xl mt-2">VibeTunnel</h2>
<p class="auth-subtitle text-sm">Please authenticate to continue</p> <p class="auth-subtitle text-sm">Please authenticate to continue</p>
</div> </div>
</div> </div>
@ -221,12 +221,11 @@ export class AuthLogin extends LitElement {
</div> </div>
<form @submit=${this.handlePasswordLogin} class="space-y-4"> <form @submit=${this.handlePasswordLogin} class="space-y-4">
<div> <div>
<label class="form-label text-xs mb-2">Password</label>
<input <input
type="password" type="password"
class="input-field" class="input-field"
data-testid="password-input" data-testid="password-input"
placeholder="Enter your system password" placeholder="System Password"
.value=${this.loginPassword} .value=${this.loginPassword}
@input=${(e: Event) => { @input=${(e: Event) => {
this.loginPassword = (e.target as HTMLInputElement).value; this.loginPassword = (e.target as HTMLInputElement).value;

View file

@ -71,7 +71,7 @@
/* Input fields with glow effect */ /* Input fields with glow effect */
.input-field { .input-field {
@apply bg-dark-bg-secondary border border-dark-border rounded-lg px-4 py-3 text-dark-text w-full; @apply bg-[#121212] border border-dark-border rounded-lg px-4 py-3 text-dark-text w-full;
@apply transition-all duration-200 ease-in-out; @apply transition-all duration-200 ease-in-out;
@apply hover:border-accent-green-darker focus:border-accent-green; @apply hover:border-accent-green-darker focus:border-accent-green;
@apply focus:shadow-glow-green-sm; @apply focus:shadow-glow-green-sm;