From 3637edb816f673830b70b05354a5b74909549999 Mon Sep 17 00:00:00 2001
From: Steven Le Rouzic <steven.lerouzic@gmail.com>
Date: Sun, 28 Apr 2024 01:13:27 +0200
Subject: Start work on styling

---
 view/components.templ | 51 +++++++++++++++++++++++++++++++++++++++++++++++
 view/login.templ      | 55 ++++++++++++++++++++++++++++++++++++++-------------
 view/main.templ       | 11 ++++++++++-
 3 files changed, 102 insertions(+), 15 deletions(-)
 create mode 100644 view/components.templ

(limited to 'view')

diff --git a/view/components.templ b/view/components.templ
new file mode 100644
index 0000000..b2383ba
--- /dev/null
+++ b/view/components.templ
@@ -0,0 +1,51 @@
+package view
+
+templ textLikeField(fieldType string, name string, placeholder string) {
+  <input
+    type={ fieldType }
+    name={ name }
+    placeholder={ placeholder }
+    class="
+      bg-slate-800 focus:bg-slate-700
+      text-slate-200 placeholder-slate-500
+      p-2
+      rounded-md border border-slate-600 border-b-slate-500
+      focus:bg-slate-700
+      shadow-inner
+    "
+  />
+}
+
+templ TextField(name string, placeholder string) {
+  @textLikeField("text", name, placeholder)
+}
+
+templ PasswordField(name string, placeholder string) {
+  @textLikeField("password", name, placeholder)
+}
+
+templ Button(fieldType string, name string, attrs templ.Attributes) {
+  <button
+    type={ fieldType }
+    class="
+      text-slate-200
+      bg-blue-500 hover:bg-blue-400 active:bg-blue-600
+      py-2 px-6
+      rounded-full border-t border-t-blue-400
+    "
+    { attrs... }
+  >{ name }</button>
+}
+ 
+templ SecondaryButton(fieldType string, name string, attrs templ.Attributes) {
+  <button
+    type={ fieldType }
+    class="
+      text-slate-100/50
+      bg-transparent hover:bg-slate-300/10 active:bg-slate-300/20
+      py-2 px-6
+      rounded-full border border-slate-100/50
+    "
+    { attrs... }
+  >{ name }</button>
+}
diff --git a/view/login.templ b/view/login.templ
index 56e003c..1beb1d6 100644
--- a/view/login.templ
+++ b/view/login.templ
@@ -5,25 +5,52 @@ import (
 )
 
 templ LoginFormError(currentUser *model.User, err string) {
-    <div class="login-form">
     if currentUser == nil {
-        <form hx-post="/login" hx-target-error="closest .login-form">
-            <p>
-                <input type="text" name="user" placeholder="User" />
-                <input type="password" name="password" placeholder="Password" />
-                <button type="submit">Sign in</button>
-                if err != "" {
-                    <span class="error">{ err }</span>
-                }
-            </p>
-        </form>
+        <div class="login-form">
+            <form
+                hx-post="/login"
+                hx-target-error="closest .login-form"
+                class="
+                    w-80
+                    mx-auto
+                    flex flex-col
+                    gap-4
+                "
+            >
+                    @TextField("user", "User name")
+                    @PasswordField("password", "Password")
+                    @Button("submit", "Sign in", templ.Attributes{})
+                    if err != "" {
+                        <span class="text-red-400">{ err }</span>
+                    }
+            </form>
+        </div>
     } else {
-        <p>Signed in as { currentUser.Name } <button type="button" hx-post="/logout" hx-refresh>Sign out</button></p>
+        <div class="
+                flex flex-row items-baseline justify-start
+             "
+        >
+            <h1
+                class="
+                    grow
+                    text-slate-300 text-4xl font-semibold
+                "
+            >Prout prout</h1>
+            <div
+                class="
+                    flex flex-row justify-end items-center gap-4
+                "
+            >
+                <p>Signed in as <b>{ currentUser.Name }</b></p>
+                @SecondaryButton("button", "Sign out", templ.Attributes{
+                    "hx-post": "/logout",
+                    "hx-refresh": true,
+                })
+            </div>
+        </div>
     }
-    </div>
 }
 
 templ LoginForm(currentUser *model.User) {
     @LoginFormError(currentUser, "")
 }
-
diff --git a/view/main.templ b/view/main.templ
index 4ae917b..04751b1 100644
--- a/view/main.templ
+++ b/view/main.templ
@@ -14,7 +14,16 @@ templ Main(contents templ.Component, currentUser *model.User) {
         <script src="/static/htmx.min.js"></script>
         <script src="/static/response-targets.js"></script>
     </head>
-    <body hx-boost="true" hx-ext="response-targets">
+    <body
+        hx-boost="true"
+        hx-ext="response-targets"
+        class="
+            w-full sm:max-w-screen-sm md:max-w-screen-md
+            mx-auto py-6
+            bg-slate-900
+            text-slate-400
+        "
+    >
         @LoginForm(currentUser)
         @contents
     </body>
-- 
cgit