feat: consistent styling

templates/auth/account.html

@@ -1,49 +1,47 @@
 {% extends "body_base.html" %}
-{% block content %}
+{% block main %}
 <style>
   form.htmx-request {
     opacity: 0.5;
   }
 </style>
-<div class="min-h-screen grid place-items-center place-content-center">
-  <div class="max-w-lg mx-auto">
-    <h2 class="text-2xl font-bold text-center mb-8">Account Settings</h2>
-    <div class="form-control">
-      <label class="label">
-        <span class="label-text">Email</span>
-      </label>
-      <input type="email" name="email" value="{{ user.email }}" class="input input-bordered w-full" disabled />
-    </div>
-    <div class="form-control">
-      <label class="label">
-        <span class="label-text">API key</span>
-      </label>
-      {% block api_key_section %}
-      {% if user.api_key %}
-      <input type="text" name="api-key" value="{{ user.api_key }}" class="input input-bordered w-full" disabled />
-      {% else %}
-      <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
-        Create API-Key
-      </button>
-      {% endif %}
-      {% endblock %}
-    </div>
-    <div class="form-control mt-4">
-      <button hx-post="/verify-email" class="btn btn-secondary w-full">
-        Verify Email
-      </button>
-    </div>
-    <div class="form-control mt-4">
-      <button hx-get="/change-password" class="btn btn-primary w-full">
-        Change Password
-      </button>
-    </div>
-    <div class="form-control mt-4">
-      <button hx-delete="/delete-account" class="btn btn-error w-full">
-        Delete Account
-      </button>
-    </div>
-    <div id="account-result" class="mt-4"></div>
+<div class="max-w-lg w-full">
+  <h2 class="text-2xl font-bold text-center mb-8">Account Settings</h2>
+  <div class="form-control">
+    <label class="label">
+      <span class="label-text">Email</span>
+    </label>
+    <input type="email" name="email" value="{{ user.email }}" class="input input-bordered w-full" disabled />
   </div>
+  <div class="form-control">
+    <label class="label">
+      <span class="label-text">API key</span>
+    </label>
+    {% block api_key_section %}
+    {% if user.api_key %}
+    <input type="text" name="api-key" value="{{ user.api_key }}" class="input input-bordered w-full" disabled />
+    {% else %}
+    <button hx-post="/set-api-key" class="btn btn-secondary w-full" hx-swap="outerHTML">
+      Create API-Key
+    </button>
+    {% endif %}
+    {% endblock %}
+  </div>
+  <div class="form-control mt-4">
+    <button hx-post="/verify-email" class="btn btn-secondary w-full">
+      Verify Email
+    </button>
+  </div>
+  <div class="form-control mt-4">
+    <button hx-get="/change-password" class="btn btn-primary w-full">
+      Change Password
+    </button>
+  </div>
+  <div class="form-control mt-4">
+    <button hx-delete="/delete-account" class="btn btn-error w-full">
+      Delete Account
+    </button>
+  </div>
+  <div id="account-result" class="mt-4"></div>
 </div>
 {% endblock %}

templates/auth/signin_form.html

@@ -5,41 +5,41 @@
     opacity: 0.5;
   }
 </style>
-<div class="min-h-screen grid place-items-center place-content-center">
-  <div class="max-w-lg mx-auto">
-    <h2 class="text-2xl font-bold text-center mb-8">Login to your account</h2>
-    <form hx-post="/signin">
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Email</span>
-        </label>
-        <input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
-      </div>
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Password</span>
-        </label>
-        <input type="password" name="password" placeholder="Enter your password" class="input input-bordered w-full"
-          required minlength="8" />
-      </div>
-      <div class="form-control mt-4">
-        <label class="label cursor-pointer justify-start gap-2">
-          <input type="checkbox" name="remember_me" class="checkbox checkbox-primary" />
-          <span class="label-text">Remember me</span>
-        </label>
-      </div>
-      <div class="form-control mt-6">
-        <button id="submit-btn" class="btn btn-primary w-full">
-          Login
-        </button>
-      </div>
-      <div id="login-result"></div>
-    </form>
-    <div class="divider">OR</div>
-    <div class="text-center text-sm">
-      Don't have an account?
-      <a href="/signup" class="link link-primary">Sign up</a>
+
+<div class="min-h-screen container mx-auto max-w-md flex justify-center flex-col">
+  <h2 class="text-2xl font-bold text-center mb-8">Login to your account</h2>
+
+  <form hx-post="/signin" hx-target="#login-result">
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">Email</span>
+      </label>
+      <input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
     </div>
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">Password</span>
+      </label>
+      <input type="password" name="password" placeholder="Enter your password" class="input input-bordered w-full"
+        required minlength="8" />
+    </div>
+    <div class="form-control mt-4">
+      <label class="label cursor-pointer justify-start gap-4">
+        <input type="checkbox" name="remember_me" class="checkbox checkbox-primary" />
+        <span class="label-text">Remember me</span>
+      </label>
+    </div>
+    <div class="mt-4" id="login-result"></div>
+    <div class="form-control mt-6">
+      <button id="submit-btn" class="btn btn-primary w-full">
+        Login
+      </button>
+    </div>
+  </form>
+  <div class="divider">OR</div>
+  <div class="text-center text-sm">
+    Don't have an account?
+    <a href="/signup" hx-boost="true" class="link link-primary">Sign up</a>
   </div>
 </div>
 {% endblock %}

templates/auth/signup_form.html

@@ -6,41 +6,39 @@
     opacity: 0.5;
   }
 </style>
-<div class="min-h-screen grid place-items-center place-content-center">
-  <div class="max-w-lg mx-auto">
-    <h2 class="text-2xl font-bold text-center mb-8">Create your account</h2>
 
-    <form hx-post="/signup" hx-target="#signup-result" class="">
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Email</span>
-        </label>
-        <input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
-      </div>
+<div class="min-h-screen container mx-auto max-w-md flex justify-center flex-col">
+  <h2 class="text-2xl font-bold text-center mb-8">Create your account</h2>
 
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Password</span>
-        </label>
-        <input type="password" name="password" placeholder="Create a password" class="input input-bordered w-full"
-          required minlength="8" />
-      </div>
-
-      <div class="form-control mt-6">
-        <button id="submit-btn" class="btn btn-primary w-full">
-          Create Account
-        </button>
-      </div>
-
-      <div id="signup-result"></div>
-    </form>
-
-    <div class="divider">OR</div>
-
-    <div class="text-center text-sm">
-      Already have an account?
-      <a href="/signin" class="link link-primary">Sign in</a>
+  <form hx-post="/signup" hx-target="#signup-result" class="">
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">Email</span>
+      </label>
+      <input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
     </div>
+
+    <div class="form-control">
+      <label class="label">
+        <span class="label-text">Password</span>
+      </label>
+      <input type="password" name="password" placeholder="Create a password" class="input input-bordered w-full"
+        required minlength="8" />
+    </div>
+    <div class="mt-4" id="signup-result"></div>
+    <div class="form-control mt-6">
+      <button id="submit-btn" class="btn btn-primary w-full">
+        Create Account
+      </button>
+    </div>
+
+  </form>
+
+  <div class="divider">OR</div>
+
+  <div class="text-center text-sm">
+    Already have an account?
+    <a href="/signin" hx-boost="true" class="link link-primary">Sign in</a>
   </div>
 </div>
 {% endblock %}

templates/body_base.html

@@ -1,27 +1,30 @@
 {% extends "head_base.html" %}
-
 {% block body %}
 
-<body class="min-h-screen">
-  <nav class="navbar bg-base-200">
-    <div class="flex-1">
-      <a class="btn text-xl border-transparent btn-outline btn-primary" href="/">Minne</a>
-    </div>
-    <div class="flex-none">
-      <ul class="menu menu-horizontal px-1">
-        {% if user %}
-        <li><a hx-boost="true" href="/account">Account</a></li>
-        <li><a hx-boost="true" href="/signout">Sign out</a></li>
-        {% else %}
-        <li><a hx-boost="true" href="/signin">Login</a></li>
-        <li><a hx-boost="true" href="/signup">Sign up</a></li>
-        {% endif %}
-      </ul>
-    </div>
-  </nav>
+<body>
+  <div class="min-h-screen flex flex-col">
+    <!-- Navbar -->
+    <nav class="navbar bg-base-200">
+      <div class="flex-1">
+        <a class="btn text-xl border-transparent btn-outline btn-primary" href="/">Minne</a>
+      </div>
+      <div>
+        <ul class="menu menu-horizontal px-1">
+          {% if user %}
+          <li><a hx-boost="true" href="/account">Account</a></li>
+          <li><a hx-boost="true" href="/signout">Sign out</a></li>
+          {% else %}
+          <li><a hx-boost="true" href="/signin">Login</a></li>
+          <li><a hx-boost="true" href="/signup">Sign up</a></li>
+          {% endif %}
+        </ul>
+      </div>
+    </nav>
 
-  <main class="container mx-auto ">
-    {% block content %}{% endblock %}
-  </main>
+    <!-- Main Content -->
+    <main class="flex-grow flex items-center justify-center">
+      {% block main %}{% endblock %}
+    </main>
+  </div>
 </body>
 {% endblock %}

templates/body_base.jinja

@@ -0,0 +1,27 @@
+{% extends "head_base.html" %}
+
+{% block body %}
+
+<body class="min-h-screen">
+  <nav class="navbar bg-base-200">
+    <div class="flex-1">
+      <a class="btn text-xl border-transparent btn-outline btn-primary" href="/">Minne</a>
+    </div>
+    <div class="flex-none">
+      <ul class="menu menu-horizontal px-1">
+        {% if user %}
+        <li><a hx-boost="true" href="/account">Account</a></li>
+        <li><a hx-boost="true" href="/signout">Sign out</a></li>
+        {% else %}
+        <li><a hx-boost="true" href="/signin">Login</a></li>
+        <li><a hx-boost="true" href="/signup">Sign up</a></li>
+        {% endif %}
+      </ul>
+    </div>
+  </nav>
+
+  <main class="container mx-auto ">
+    {% block content %}{% endblock %}
+  </main>
+</body>
+{% endblock %}

templates/head_base.html

@@ -11,7 +11,8 @@
 
   <!-- Optional but recommended for iOS support -->
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png">
+  <link rel="icon" href="/assets/icon/favicon.ico">
+  <link rel="apple-touch-icon" href="/assets/icon/apple-touch-icon.png">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   {% block head %}{% endblock %}
 </head>

templates/index.html

@@ -1,5 +1,5 @@
 {% extends "body_base.html" %}
-{% block content %}
+{% block main %}
 <div class="flex flex-col items-center justify-center min-h-[80vh] space-y-8">
   <!-- Hero Section -->
   <div class="text-center space-y-4 mb-8">