diff --git a/input.css b/input.css index 1f21273..7f312c6 100644 --- 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); +} + diff --git a/template/auth/sign_in_or_up.templ b/template/auth/sign_in_or_up.templ index 1832df5..7c04681 100644 --- 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" } - }} -
-

- if isSignIn { - Sign In - } else { - Sign Up - } -

- - -
- if isSignIn { - Forgot Password? - Don't have an account? Sign Up - - } else { - Already have an account? Sign In - - } -
- @Error("") -
+}} +
+

+ if isSignIn { + Sign In + } else { + Sign Up + } +

+ + +
+ if isSignIn { + + Forgot + Password? + + + Don't have an account? + Sign Up + + + } else { + Already have an account? Sign In + + } +
+ @Error("") +
} templ Error(message string) { -

- { message } -

+

+ { message } +

} diff --git a/template/auth/user.templ b/template/auth/user.templ index 13d0bc4..22efa55 100644 --- a/template/auth/user.templ +++ b/template/auth/user.templ @@ -1,30 +1,36 @@ package auth templ UserComp(user string) { -
- if user != "" { -
- - -
- } else { - Sign Up - Sign In - } +
+ if user != "" { +
+ +
+ } else { + Sign Up + Sign In + } +
} diff --git a/template/auth/verify.templ b/template/auth/verify.templ index b1ae7c4..f8b8539 100644 --- a/template/auth/verify.templ +++ b/template/auth/verify.templ @@ -1,20 +1,21 @@ package auth templ VerifyComp() { -
-
-

- Verify your email -

-

- We have sent you an email with a link to verify your account. -

-

- Please check your inbox/spam and click on the link to verify your account. -

- -
-
+
+
+

+ Verify your email +

+

+ We have sent you an email with a link to verify your account. +

+

+ Please check your inbox/spam and click on the link to verify your account. +

+ +
+
} diff --git a/template/index.templ b/template/index.templ index 2735dd0..d8fbc84 100644 --- a/template/index.templ +++ b/template/index.templ @@ -1,9 +1,14 @@ package template templ Index() { -
-
-

Spend Sparrow - Your personal finance

-
-
+
+

+ SpendSparrow logo + SpendSparrow +

+

+ Spend on the important, like a fine Whiskey +

+ Getting Started +
} diff --git a/template/layout.templ b/template/layout.templ index ae5e075..5d496fe 100644 --- a/template/layout.templ +++ b/template/layout.templ @@ -21,18 +21,24 @@ templ Layout(slot templ.Component, user templ.Component) {
-
- - SpendSparrow logo - SpendSparrow - - @user + // Header +
+
+ + SpendSparrow logo + SpendSparrow + + @user +
+
+ // Content
if slot != nil { @slot }
+ // Footer