x/spend-sparrow
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: add missing stylings for buttons and inputs
All checks were successful
Build Docker Image / Build-Docker-Image (push) Successful in 4m24s
Details
Build and Push Docker Image / Build-And-Push-Docker-Image (push) Successful in 4m30s
Details

Browse Source
This commit was merged in pull request #51.
This commit is contained in:
Tim Wundenberg
2025-05-05 20:05:56 +02:00
parent 3a8c814f2f
commit f24f1bb82e
6 changed files with 177 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
input.css
View File

@@ -4,7 +4,10 @@
@source './template/**/*.templ'; @source './template/**/*.templ';
body { body {
@apply font-shippori @apply font-shippori text-gray-700;
}
input:focus {
@apply outline-none ring-0;
} }
@theme { @theme {
@@ -31,3 +34,49 @@ body {
font-family: "Shippori Mincho"; font-family: "Shippori Mincho";
src: url("/static/font/shippori_mincho/ShipporiMincho-Medium.ttf") format("truetype"); 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);
}

131
template/auth/sign_in_or_up.templ
View File

@@ -1,85 +1,68 @@
package auth package auth
templ SignInOrUpComp(isSignIn bool) { templ SignInOrUpComp(isSignIn bool) {
{{ {{
var postUrl string var postUrl string
if isSignIn { if isSignIn {
postUrl = "/api/auth/signin" postUrl = "/api/auth/signin"
} else { } else {
postUrl = "/api/auth/signup" postUrl = "/api/auth/signup"
} }
}} }}
<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={
class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center" postUrl }>
hx-target="#sign-in-or-up-error" <h2 class="text-4xl mb-4">
hx-post={ postUrl } if isSignIn {
> Sign In
<h2 class="text-6xl mb-10"> } else {
if isSignIn { Sign Up
Sign In }
} else { </h2>
Sign Up <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">
</h2> <path
<label class="input input-bordered flex items-center gap-2"> 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">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 opacity-70"> </path>
<path <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" 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> </path>
<path </svg>
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" <input type="text" class="grow" placeholder="Email" name="email" spellcheck="false" autocomplete="off"
></path> autocorrect="off" autocapitalize="off" />
</svg> </label>
<input <label class="input input-bordered flex items-center gap-2">
type="text" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-5 w-5 opacity-70">
class="grow" <path fill-rule="evenodd"
placeholder="Email" 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"
name="email" clip-rule="evenodd"></path>
spellcheck="false" </svg>
autocomplete="off" <input type="password" class="grow" placeholder="Password" name="password" spellcheck="false" autocomplete="off"
autocorrect="off" autocorrect="off" autocapitalize="off" />
autocapitalize="off" </label>
/> <div class="flex justify-end items-center gap-3 h-14">
</label> if isSignIn {
<label class="input input-bordered flex items-center gap-2"> <a href="/auth/forgot-password" class="text-gray-500 text-sm px-1 button button-neglect">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 opacity-70"> Forgot
<path Password?
fill-rule="evenodd" </a>
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" <a href="/auth/signup" class="ml-auto text-gray-500 text-sm px-1 button button-neglect">
clip-rule="evenodd" Don't have an account?
></path> Sign Up
</svg> </a>
<input <button class="button button-primary font-pirata text-gray-600 text-2xl px-1">Sign In</button>
type="password" } else {
class="grow" <a href="/auth/signin" class="text-gray-500 text-sm px-1 button button-neglect">Already have an account? Sign In</a>
placeholder="Password" <button class="button button-primary font-pirata text-gray-600 text-2xl px-1">
name="password" Sign Up
spellcheck="false" </button>
autocomplete="off" }
autocorrect="off" </div>
autocapitalize="off" @Error("")
/> </form>
</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>
} }
templ Error(message string) { templ Error(message string) {
<p class="text-error text-right" id="sign-in-or-up-error"> <p class="text-error text-right" id="sign-in-or-up-error">
{ message } { message }
</p> </p>
} }

56
template/auth/user.templ
View File

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

33
template/auth/verify.templ
View File

@@ -1,20 +1,21 @@
package auth package auth
templ VerifyComp() { templ VerifyComp() {
<main> <main class="h-full">
<div class="flex flex-col items-center justify-center h-screen"> <div class=" flex flex-col items-center justify-center h-full">
<h2 class="text-6xl mb-10"> <h2 class="text-6xl mb-10">
Verify your email Verify your email
</h2> </h2>
<p class="text-lg text-center"> <p class="text-lg text-center">
We have sent you an email with a link to verify your account. We have sent you an email with a link to verify your account.
</p> </p>
<p class="text-lg text-center"> <p class="text-lg text-center">
Please check your inbox/spam and click on the link to verify your account. Please check your inbox/spam and click on the link to verify your account.
</p> </p>
<button class="mt-8" 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"
resend verification email hx-sync="this:drop" hx-swap="outerHTML">
</button> resend verification email
</div> </button>
</main> </div>
</main>
} }

15
template/index.templ
View File

@@ -1,9 +1,14 @@
package template package template
templ Index() { templ Index() {
<div class="h-full"> <div class="h-full text-center flex flex-col items-center justify-center">
<div class="text-center"> <h1 class="flex gap-2 w-full justify-center">
<h1 class="text-5xl font-bold">Spend Sparrow - Your personal finance</h1> <img class="w-24" src="/static/favicon.svg" alt="SpendSparrow logo" />
</div> <span class="text-8xl tracking-tighter font-bold font-pirata">SpendSparrow</span>
</div> </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>
} }

18
template/layout.templ
View File

@@ -21,18 +21,24 @@ templ Layout(slot templ.Component, user templ.Component) {
<body hx-headers='{"csrf-token": "CSRF_TOKEN"}'> <body hx-headers='{"csrf-token": "CSRF_TOKEN"}'>
<div class="h-screen flex flex-col"> <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"> // Header
<a href="/" class="flex-1 flex gap-2"> <div class="sticky top-0">
<img class="w-6" src="/static/favicon.svg" alt="SpendSparrow logo" /> <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">
<span class="text-4xl font-bold font-pirata">SpendSparrow</span> <a href="/" class="flex-1 flex gap-2">
</a> <img class="w-6" src="/static/favicon.svg" alt="SpendSparrow logo" />
@user <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> </div>
// Content
<div class="flex-1"> <div class="flex-1">
if slot != nil { if slot != nil {
@slot @slot
} }
</div> </div>
// Footer
</div> </div>
<div class="" id="toasts"> <div class="" id="toasts">
<div class="hidden" id="toast"> <div class="hidden" id="toast">