feat(account): #49 add design for accounts

2025-05-07 10:13:54 +02:00
parent 3d0601fc7c
commit c8daf6a04d
10 changed files with 208 additions and 218 deletions
--- a/input.css
+++ b/input.css
@@ -28,33 +28,25 @@ input:focus {
 /* 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);
+	@apply cursor-pointer border-2 rounded-lg border-transparent;
 }

 .button-primary:hover,
 .button-normal:hover {
  transform: translate(-0.25rem, -0.25rem);
+  box-shadow: 3px 3px 3px var(--color-gray-200);
 }

 .button-primary {
-  border: 2px solid var(--color-gray-400);
+	@apply border-gray-400
 }

 .button-normal {
-  border: 2px solid var(--color-gray-200);
-}
-
-.button-neglect {
-  border: 2px solid white;
+	@apply border-gray-200
 }

 .button-neglect:hover {
-  border-color: var(--color-gray-200);
+	@apply border-gray-200;
 }

 /* Input */
--- a/template/account/account.templ
+++ b/template/account/account.templ
@@ -1,13 +1,20 @@
 package account

 import "fmt"
+import "spend-sparrow/template/svg"

 templ Account() {
-	<div class="mt-10 flex flex-col items-center">
+	<div class="max-w-6xl mt-10 mx-auto">
+		<button class="ml-auto button button-primary px-2 flex-1 flex items-center gap-2 justify-center">
+			@svg.Plus()
+			<p class="">New Account</p>
+		</button>
+		<div class="my-6 flex flex-col items-center">
 			@accountItem("Sparkasse", 51268)
 			@accountItem("Bargeld", 11822)
 			@accountItem("Bargeld Milch", 8200)
 		</div>
+	</div>
 }

 func displayBalance(balance int) string {
@@ -17,11 +24,26 @@ func displayBalance(balance int) string {
 }

 templ accountItem(name string, balance int) {
-	<div class="border-1 border-gray-300 w-full max-w-6xl m-4 p-4 bg-gray-50 rounded-lg text-xl flex justify-end gap-4">
+	<div class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg text-xl flex justify-end gap-4">
 		<p class="mr-auto">{ name }</p>
 		<p class="mr-20 text-green-700">{ displayBalance(balance) }</p>
-		<button class="button button-neglect px-1">Edit</button>
-		<button class="button button-neglect px-1">Delete</button>
-		<button class="button button-neglect px-1">Transaction</button>
+		<button class="button button-neglect px-1 flex items-center gap-2">
+			@svg.Edit()
+			<span>
+				Edit
+			</span>
+		</button>
+		<button class="button button-neglect px-1 flex items-center gap-2">
+			@svg.Delete()
+			<span>
+				Delete
+			</span>
+		</button>
+		<button title="View Account Transactions" class="button button-neglect px-1 flex items-center gap-2">
+			@svg.Eye()
+			<span>
+				View
+			</span>
+		</button>
 	</div>
 }
--- a/template/auth/sign_in_or_up.templ
+++ b/template/auth/sign_in_or_up.templ
@@ -9,8 +9,11 @@ postUrl = "/api/auth/signin"
 	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 }>
+	<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
@@ -21,23 +24,42 @@ postUrl = "/api/auth/signup"
 		<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>
+					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>
+					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" />
+			<input
+				type="text"
+				class="grow"
+				placeholder="Email"
+				name="email"
+				spellcheck="false"
+				autocomplete="off"
+				autocorrect="off"
+				autocapitalize="off"
+				autofocus
+			/>
 		</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"
+				<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>
+					clip-rule="evenodd"
+				></path>
 			</svg>
-		<input type="password" class="grow" placeholder="Password" name="password" spellcheck="false" autocomplete="off"
-			autocorrect="off" autocapitalize="off" />
+			<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/template/auth/user.templ
+++ b/template/auth/user.templ
@@ -12,15 +12,15 @@ templ UserComp(user string) {
 					</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">
+					<ul class="w-fit float-right mr-4 p-3 border-2 border-gray-200 rounded-lg bg-white shadow-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>
+							<a class="button w-full px-1 button-neglect block" 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>
+							<a class="button w-full px-1 button-neglect block" 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="">
+							<a class="button w-full px-1 button-neglect text-gray-400 mt-4 block" href="/auth/delete-account" class="">
 								Delete
 								Account
 							</a>
--- a/template/auth/verify.templ
+++ b/template/auth/verify.templ
@@ -12,8 +12,12 @@ templ VerifyComp() {
 			<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">
+			<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>
--- a/template/layout.templ
+++ b/template/layout.templ
@@ -28,7 +28,7 @@ templ Layout(slot templ.Component, user templ.Component, loggedIn bool, path str
 			<script src="/static/js/toast.js"></script>
 		</head>
 		<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
-			<div class="h-screen flex flex-col">
+			<div class="min-h-screen flex flex-col">
 				// Header
 				<div class="sticky top-0">
 					<nav class="flex bg-white items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2">
--- a/template/mail/register.templ
+++ b/template/mail/register.templ
@@ -5,19 +5,18 @@ import "net/url"
 templ Register(baseUrl string, token string) {
 	<!DOCTYPE html>
 	<html lang="en">
-
 		<head>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<title>Welcome</title>
 		</head>
-
 		<body>
 			<h4>Thank you for Sign Up!</h4>
-	<p>Click <a href={ templ.URL(baseUrl + "/auth/verify-email?token=" + url.QueryEscape(token)) }>here</a> to finalize
-		your registration.</p>
+			<p>
+				Click <a href={ templ.URL(baseUrl + "/auth/verify-email?token=" + url.QueryEscape(token)) }>here</a> to finalize
+				your registration.
+			</p>
 			<p>Kind regards</p>
 		</body>
-
 	</html>
 }
--- a/template/svg/default.templ
+++ b/template/svg/default.templ
@@ -0,0 +1,25 @@
+package svg
+
+templ Edit() {
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 384" class="h-4 w-4 text-gray-500">
+		<path fill="currentColor" d="M0 304L236 68l80 80L80 384H0v-80zM378 86l-39 39l-80-80l39-39q6-6 15-6t15 6l50 50q6 6 6 15t-6 15z"></path>
+	</svg>
+}
+
+templ Delete() {
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 384" class="h-4 w-4 text-gray-500">
+		<path fill="currentColor" d="M21 341V85h256v256q0 18-12.5 30.5T235 384H64q-18 0-30.5-12.5T21 341zM299 21v43H0V21h75L96 0h107l21 21h75z"></path>
+	</svg>
+}
+
+templ Eye() {
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 472 384" class="h-4 w-4 text-gray-500">
+		<path fill="currentColor" d="M235 32q79 0 142.5 44.5T469 192q-28 71-91.5 115.5T235 352T92 307.5T0 192q28-71 92-115.5T235 32zm0 267q44 0 75-31.5t31-75.5t-31-75.5T235 85t-75.5 31.5T128 192t31.5 75.5T235 299zm-.5-171q26.5 0 45.5 18.5t19 45.5t-19 45.5t-45.5 18.5t-45-18.5T171 192t18.5-45.5t45-18.5z"></path>
+	</svg>
+}
+
+templ Plus() {
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 384" class="h-4 w-4 text-gray-500">
+		<path fill="currentColor" d="M299 213H171v128h-43V213H0v-42h128V43h43v128h128v42z"></path>
+	</svg>
+}
--- a/template/workout/default.go
+++ b/template/workout/default.go
@@ -1 +0,0 @@
-package workout
--- a/template/workout/workout.templ
+++ b/template/workout/workout.templ
@@ -1,73 +0,0 @@
-package workout
-
-templ WorkoutComp(currentDate string) {
-	<main class="mx-2">
-		<form
-			class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-10"
-			hx-post="/api/workout"
-			hx-target="#workout-placeholder"
-			hx-swap="outerHTML"
-		>
-			<h2 class="text-4xl mb-8">Track your workout</h2>
-			<input id="date" type="date" class="" value={ currentDate } name="date"/>
-			<select class="w-full" name="type">
-				<option>Push Ups</option>
-				<option>Pull Ups</option>
-			</select>
-			<input type="number" class="" placeholder="Sets" name="sets"/>
-			<input type="number" class="" placeholder="Reps" name="reps"/>
-			<button class="self-end">Save</button>
-		</form>
-		<div hx-get="/api/workout" hx-trigger="load"></div>
-	</main>
-}
-
-type Workout struct {
-	Id   string
-	Date string
-	Type string
-	Sets string
-	Reps string
-}
-
-templ WorkoutListComp(workouts []Workout) {
-	<div class="overflow-x-auto mx-auto max-w-lg">
-		<h2 class="text-4xl mt-14 mb-8">Workout history</h2>
-		<table class="table table-auto max-w-full">
-			<thead>
-				<tr>
-					<th>Date</th>
-					<th>Type</th>
-					<th>Sets</th>
-					<th>Reps</th>
-					<th></th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="hidden" id="workout-placeholder"></tr>
-				for _,w := range workouts {
-					@WorkoutItemComp(w, false)
-				}
-			</tbody>
-		</table>
-	</div>
-}
-
-templ WorkoutItemComp(w Workout, includePlaceholder bool) {
-	if includePlaceholder {
-		<tr class="hidden" id="workout-placeholder"></tr>
-	}
-	<tr>
-		<th>{ w.Date }</th>
-		<th>{ w.Type }</th>
-		<th>{ w.Sets }</th>
-		<th>{ w.Reps }</th>
-		<th>
-			<div class="tooltip" data-tip="Delete Entry">
-				<button hx-delete={ "api/workout/" + w.Id } hx-target="closest tr" type="submit">
-					Delete
-				</button>
-			</div>
-		</th>
-	</tr>
-}