From e4e581b3462debeada522e8f034189e01785421c Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Fri, 18 Mar 2022 19:43:41 +0100
Subject: style registration page

---
 web/pw-server/src/routes/register.svelte | 75 ++++++++++++++++++++++++++++----
 1 file changed, 67 insertions(+), 8 deletions(-)

(limited to 'web/pw-server/src/routes')

diff --git a/web/pw-server/src/routes/register.svelte b/web/pw-server/src/routes/register.svelte
index 6344399..1b0b84a 100644
--- a/web/pw-server/src/routes/register.svelte
+++ b/web/pw-server/src/routes/register.svelte
@@ -28,11 +28,70 @@
   };
 </script>
 
-<h1>Register</h1>
-<form on:submit|preventDefault={onSubmit}>
-  <label for="username">Username</label>
-  <input name="username" bind:value={username} />
-  <label for="password">Password</label>
-  <input type="password" name="password" bind:value={password} />
-  <button type="submit">Register</button>
-</form>
+<div class="page-card">
+  <div class="page-card-content">
+    <h1 class="page-card-header">Create account</h1>
+    <form class="register-form" on:submit|preventDefault={onSubmit}>
+      <label for="username">Username</label>
+      <input name="username" bind:value={username} />
+      <label for="password">Password</label>
+      <input type="password" name="password" bind:value={password} />
+      <button type="submit">Sign up</button>
+    </form>
+  </div>
+</div>
+
+<style lang="scss">
+  .page-card {
+    margin: 50px auto;
+    width: 40%;
+    max-width: 600px;
+    border: 1px solid #b5b5b5;
+    box-sizing: border-box;
+    border-radius: 0px;
+  }
+
+  .page-card-content {
+    margin: 20px 50px;
+  }
+
+  .page-card-header {
+    padding-top: .5em;
+    padding-bottom: 1em;
+    text-align: center;
+  }
+
+  .register-form {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+  }
+
+  .register-form label {
+    margin: 10px 5px;
+    font-weight: 500;
+  }
+
+  .register-form input {
+    margin: 10px 5px;
+    font-size: 1rem;
+    // height: 2.5em;
+    display: block;
+    border-radius: 4px;
+    border: 1px solid #b5b5b5;
+    padding: .75rem 1rem;
+  }
+
+  .register-form button {
+    background-color: lightgreen;
+    padding: 8px 16px;
+    border-radius: 8px;
+    border: 0;
+    font-size: 18pt;
+    display: block;
+    margin: 10px auto;
+    margin-top: 16px;
+
+  }
+</style>
\ No newline at end of file
-- 
cgit v1.2.3