feat: add missing stylings for buttons and inputs

2025-05-05 20:05:56 +02:00
parent 3a8c814f2f
commit f24f1bb82e
6 changed files with 177 additions and 127 deletions
--- a/input.css
+++ b/input.css
@@ -4,7 +4,10 @@
@source './template/**/*.templ';

 body {
-	@apply font-shippori
+	@apply font-shippori text-gray-700;
+}
+input:focus {
+	@apply outline-none ring-0;
 }

@theme {
@@ -31,3 +34,49 @@ body {
  font-family: "Shippori Mincho";
  src: url("/static/font/shippori_mincho/ShipporiMincho-Medium.ttf") format("truetype");
 }
+
+/* Button */
+.button {
+  transition: all 150ms linear;
+	border-radius: 0.5rem;
+	@apply inline-block cursor-pointer bg-white;
+}
+
+.button:hover {
+  box-shadow: 3px 3px 3px var(--color-gray-200);
+}
+
+.button-primary:hover,
+.button-normal:hover {
+  transform: translate(-0.25rem, -0.25rem);
+}
+
+.button-primary {
+  border: 2px solid var(--color-gray-400);
+}
+
+.button-normal {
+  border: 2px solid var(--color-gray-200);
+}
+
+.button-neglect {
+  border: 2px solid white;
+}
+
+.button-neglect:hover {
+  border-color: var(--color-gray-200);
+}
+
+/* Input */
+
+.input {
+	border-radius: 0.5rem;
+	border: 2px solid var(--color-gray-200);
+	transition: all 150ms linear;
+	@apply px-3 py-2 text-lg;
+}
+.input:has(input:focus) {
+	border-color: var(--color-gray-400);
+	box-shadow: 0 0 0 2px var(--color-gray-200);
+}
+
--- a/template/auth/sign_in_or_up.templ
+++ b/template/auth/sign_in_or_up.templ
@@ -1,85 +1,68 @@
 package auth

 templ SignInOrUpComp(isSignIn bool) {
-	{{
+{{
 var postUrl string
 if isSignIn {
-	postUrl = "/api/auth/signin"
+postUrl = "/api/auth/signin"
 } else {
-	postUrl = "/api/auth/signup"
+postUrl = "/api/auth/signup"
 }
-	}}
-	<form
-		class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center"
-		hx-target="#sign-in-or-up-error"
-		hx-post={ postUrl }
-	>
-		<h2 class="text-6xl mb-10">
-			if isSignIn {
-				Sign In
-			} else {
-				Sign Up
-			}
-		</h2>
-		<label class="input input-bordered flex items-center gap-2">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 opacity-70">
-				<path
-					d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
-				></path>
-				<path
-					d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
-				></path>
-			</svg>
-			<input
-				type="text"
-				class="grow"
-				placeholder="Email"
-				name="email"
-				spellcheck="false"
-				autocomplete="off"
-				autocorrect="off"
-				autocapitalize="off"
-			/>
-		</label>
-		<label class="input input-bordered flex items-center gap-2">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 opacity-70">
-				<path
-					fill-rule="evenodd"
-					d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
-					clip-rule="evenodd"
-				></path>
-			</svg>
-			<input
-				type="password"
-				class="grow"
-				placeholder="Password"
-				name="password"
-				spellcheck="false"
-				autocomplete="off"
-				autocorrect="off"
-				autocapitalize="off"
-			/>
-		</label>
-		<div class="flex justify-end items-center gap-2">
-			if isSignIn {
-				<a href="/auth/forgot-password" class="grow link text-gray-500 text-sm">Forgot Password?</a>
-				<a href="/auth/signup" class="link text-gray-500 text-sm">Don't have an account? Sign Up</a>
-				<button class="btn btn-primary">
-					Sign In
-				</button>
-			} else {
-				<a href="/auth/signin" class="link text-gray-500 text-sm">Already have an account? Sign In</a>
-				<button class="btn btn-primary self-end">
-					Sign Up
-				</button>
-			}
-		</div>
-		@Error("")
-	</form>
+}}
+<form class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center" hx-target="#sign-in-or-up-error" hx-post={
+	postUrl }>
+	<h2 class="text-4xl mb-4">
+		if isSignIn {
+		Sign In
+		} else {
+		Sign Up
+		}
+	</h2>
+	<label class="input flex items-center gap-2">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
+			<path
+				d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z">
+			</path>
+			<path
+				d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z">
+			</path>
+		</svg>
+		<input type="text" class="grow" placeholder="Email" name="email" spellcheck="false" autocomplete="off"
+			autocorrect="off" autocapitalize="off" />
+	</label>
+	<label class="input input-bordered flex items-center gap-2">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
+			<path fill-rule="evenodd"
+				d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+				clip-rule="evenodd"></path>
+		</svg>
+		<input type="password" class="grow" placeholder="Password" name="password" spellcheck="false" autocomplete="off"
+			autocorrect="off" autocapitalize="off" />
+	</label>
+	<div class="flex justify-end items-center gap-3 h-14">
+		if isSignIn {
+		<a href="/auth/forgot-password" class="text-gray-500 text-sm px-1 button button-neglect">
+			Forgot
+			Password?
+		</a>
+		<a href="/auth/signup" class="ml-auto text-gray-500 text-sm px-1 button button-neglect">
+			Don't have an account?
+			Sign Up
+		</a>
+		<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">Sign In</button>
+		} else {
+		<a href="/auth/signin" class="text-gray-500 text-sm px-1 button button-neglect">Already have an account? Sign In</a>
+		<button class="button button-primary font-pirata text-gray-600 text-2xl px-1">
+			Sign Up
+		</button>
+		}
+	</div>
+	@Error("")
+</form>
 }

 templ Error(message string) {
-	<p class="text-error text-right" id="sign-in-or-up-error">
-		{ message }
-	</p>
+<p class="text-error text-right" id="sign-in-or-up-error">
+	{ message }
+</p>
 }
--- a/template/auth/user.templ
+++ b/template/auth/user.templ
@@ -1,30 +1,36 @@
 package auth

 templ UserComp(user string) {
-	<div id="user-info" class="flex gap-5 items-center">
-		if user != "" {
-			<div class="inline-block relative">
-				<button class="font-semibold py-2 px-4 inline-flex items-center">
-					<span class="mr-1">{ user }</span>
-					<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-						<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
-					</svg>
-				</button>
-				<div class="absolute hidden group-hover:block w-full">
-					<ul class="w-fit float-right mr-4 p-3">
-						<li class="mb-1">
-							<a hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
-						</li>
-						<li class="mb-1">
-							<a href="/auth/change-password">Change Password</a>
-						</li>
-						<li><a href="/auth/delete-account" class="">Delete Account</a></li>
-					</ul>
-				</div>
-			</div>
-		} else {
-			<a href="/auth/signup" class="">Sign Up</a>
-			<a href="/auth/signin" class="">Sign In</a>
-		}
+<div id="user-info" class="flex gap-5 items-center">
+	if user != "" {
+	<div class="inline-block group relative">
+		<button class="font-semibold py-2 px-4 inline-flex items-center">
+			<span class="mr-1">{ user }</span>
+			<!-- SVG is arrow down -->
+			<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+				<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
+			</svg>
+		</button>
+		<div class="absolute hidden group-has-hover:block w-full">
+			<ul class="w-fit float-right mr-4 p-3 border-2 border-gray-200 rounded-lg">
+				<li class="mb-1">
+					<a class="button w-full px-1 button-neglect" hx-post="/api/auth/signout" hx-target="#user-info">Sign Out</a>
+				</li>
+				<li class="mb-1">
+					<a class="button w-full px-1 button-neglect" href="/auth/change-password">Change Password</a>
+				</li>
+				<li>
+					<a class="button w-full px-1 button-neglect text-gray-400 mt-4" href="/auth/delete-account" class="">
+						Delete
+						Account
+					</a>
+				</li>
+			</ul>
+		</div>
 	</div>
+	} else {
+	<a href="/auth/signup" class="font-pirata text-xl button px-1 button-neglect">Sign Up</a>
+	<a href="/auth/signin" class="font-pirata text-xl button px-1 button-neglect">Sign In</a>
+	}
+</div>
 }
--- a/template/auth/verify.templ
+++ b/template/auth/verify.templ
@@ -1,20 +1,21 @@
 package auth

 templ VerifyComp() {
-	<main>
-		<div class="flex flex-col items-center justify-center h-screen">
-			<h2 class="text-6xl mb-10">
-				Verify your email
-			</h2>
-			<p class="text-lg text-center">
-				We have sent you an email with a link to verify your account.
-			</p>
-			<p class="text-lg text-center">
-				Please check your inbox/spam and click on the link to verify your account.
-			</p>
-			<button class="mt-8" hx-get="/api/auth/verify-resend" hx-sync="this:drop" hx-swap="outerHTML">
-				resend verification email
-			</button>
-		</div>
-	</main>
+<main class="h-full">
+	<div class=" flex flex-col items-center justify-center h-full">
+		<h2 class="text-6xl mb-10">
+			Verify your email
+		</h2>
+		<p class="text-lg text-center">
+			We have sent you an email with a link to verify your account.
+		</p>
+		<p class="text-lg text-center">
+			Please check your inbox/spam and click on the link to verify your account.
+		</p>
+		<button class="mt-8 button button-normal px-2 text-gray-500 text-xl" hx-get="/api/auth/verify-resend"
+			hx-sync="this:drop" hx-swap="outerHTML">
+			resend verification email
+		</button>
+	</div>
+</main>
 }
--- a/template/index.templ
+++ b/template/index.templ
@@ -1,9 +1,14 @@
 package template

 templ Index() {
-	<div class="h-full">
-		<div class="text-center">
-			<h1 class="text-5xl font-bold">Spend Sparrow - Your personal finance</h1>
-		</div>
-	</div>
+<div class="h-full text-center flex flex-col items-center justify-center">
+	<h1 class="flex gap-2 w-full justify-center">
+		<img class="w-24" src="/static/favicon.svg" alt="SpendSparrow logo" />
+		<span class="text-8xl tracking-tighter font-bold font-pirata">SpendSparrow</span>
+	</h1>
+	<h2 class="text-3xl mt-8 text-gray-800">
+		Spend on the important<span class="text-sm">, like a fine Whiskey</span>
+	</h2>
+	<a href="/auth/signup" class="mt-24 button button-primary text-2xl p-4 font-bold">Getting Started</a>
+</div>
 }
--- a/template/layout.templ
+++ b/template/layout.templ
@@ -21,18 +21,24 @@ templ Layout(slot templ.Component, user templ.Component) {

 <body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
 	<div class="h-screen flex flex-col">
-		<div class="flex justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2 shadow-sm">
-			<a href="/" class="flex-1 flex gap-2">
-				<img class="w-6" src="/static/favicon.svg" alt="SpendSparrow logo" />
-				<span class="text-4xl font-bold font-pirata">SpendSparrow</span>
-			</a>
-			@user
+		// Header
+		<div class="sticky top-0">
+			<div class="flex bg-white justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2">
+				<a href="/" class="flex-1 flex gap-2">
+					<img class="w-6" src="/static/favicon.svg" alt="SpendSparrow logo" />
+					<span class="text-4xl font-bold font-pirata">SpendSparrow</span>
+				</a>
+				@user
+			</div>
+			<div class="h-12 inset-0 bg-linear-0 from-transparent to-white"></div>
 		</div>
+		// Content
 		<div class="flex-1">
 			if slot != nil {
 			@slot
 			}
 		</div>
+		// Footer
 	</div>
 	<div class="" id="toasts">
 		<div class="hidden" id="toast">