feat: Proper login and register designs

3 files changed, 54 insertions, 13 deletions

diff --git a/views/profile/index.php b/views/profile/index.php
index 2334c1b..471b257 100644
--- a/views/profile/index.php
+++ b/views/profile/index.php
@@ -8,8 +8,9 @@
 
 <?php if ($user !== null): ?>
     <section>
-        <?= $user->Username ?>
-        <?= $user->Role ?>
+        <!-- https://tabler.io/icons -->
+        <svg class="user-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="currentColor" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z" /><path d="M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z" /></svg>
+        <h1 class="username"><?= $user->Username ?></h1>
     </section>
 <?php else: ?>
     <h2>User "<?= $username ?>" doesn't exist!</h2>
diff --git a/views/register/index.php b/views/register/index.php
index 86f4aa7..4bec861 100644
--- a/views/register/index.php
+++ b/views/register/index.php
@@ -1,16 +1,20 @@
-<?php if (isset($user_status)): ?>
-    <?php if ($user_status !== ""): ?>
-        <p>
-            Fail: <?= $user_status ?>
-        </p>
-    <?php else: ?>
-        <p>
-            Success!
-        </p>
+<h1>Register</h1>
+
+<hr class="new-section"/>
+
+<form action="#" method="POST" class="font-115 flex-col-centered max-width-20 center-margin">
+    <?php if (isset($user_status)): ?>
+        <?php if ($user_status !== ""): ?>
+            <p class="item error"><span>
+                <strong>Error:</strong> <?= $user_status ?>
+            </span></p>
+        <?php else: ?>
+            <p class="item success">
+                Success!
+            </p>
+        <?php endif; ?>
     <?php endif; ?>
-<?php endif; ?>
 
-<form action="#" method="POST">
     <input type="text" name="username" placeholder="Username" minlength="1" pattern="[A-Za-z][A-Za-z_0-9]*">
     <input type="password" name="password" placeholder="Password" minlength="4">
     <input type="submit" value="Register">
diff --git a/views/styles.css b/views/styles.css
index 5058854..8d815ad 100644
--- a/views/styles.css
+++ b/views/styles.css
@@ -88,6 +88,10 @@ input[type=submit]:hover {
   width: 100%;
 }
 
+.font-115 {
+  font-size: 1.15em;
+}
+
 .font-125 {
   font-size: 1.25em;
 }
@@ -96,6 +100,10 @@ input[type=submit]:hover {
   font-size: 1.5em;
 }
 
+.max-width-20 {
+  max-width: 20em;
+}
+
 .center-margin {
   margin-left: auto;
   margin-right: auto;
@@ -112,6 +120,12 @@ input[type=submit]:hover {
   gap: 0.75em;
 }
 
+.flex-col-centered {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
 .flex-expand {
   flex: 1;
 }
@@ -296,3 +310,25 @@ hr.new-section {
   color: gray;
   margin: 0.25em;
 }
+
+.item.error {
+  border-color: var(--cherry);
+}
+
+.item.success {
+  border-color: var(--dark-green);
+}
+
+/* User */
+.user-icon {
+  height: 7em;
+  color: inherit;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.username {
+  display: inline-block;
+  font-size: 2.5em;
+  vertical-align: middle;
+}