From 3211ef25f7bc321832c9962eb73c7201d221e2a6 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 5 Jun 2022 18:45:16 +0200
Subject: refactor: Update style on portal forms

---
 apps/portal/src/app/pages/sign-up.svelte | 91 +++++++++++++++-----------------
 1 file changed, 44 insertions(+), 47 deletions(-)

(limited to 'apps/portal/src/app/pages/sign-up.svelte')

diff --git a/apps/portal/src/app/pages/sign-up.svelte b/apps/portal/src/app/pages/sign-up.svelte
index 80780e0..31ae55b 100644
--- a/apps/portal/src/app/pages/sign-up.svelte
+++ b/apps/portal/src/app/pages/sign-up.svelte
@@ -3,6 +3,7 @@
 	import {is_email} from "$shared/lib/helpers";
 	import Alert from "$shared/components/alert.svelte";
 	import Button from "$shared/components/button.svelte";
+	import Tile from "$shared/components/tile.svelte";
 	import {link} from "svelte-spa-router";
 	import Layout from "./_layout.svelte";
 
@@ -78,51 +79,47 @@
 </script>
 
 <Layout>
-    <form
-            on:submit|preventDefault={signupForm.submit_form}
-            class="margin-bottom-md max-width-xxs"
-    >
-        <fieldset>
-            <legend class="form-legend">
-                <span class="margin-bottom-xs">Create your account</span> <br/>
-                <span class="text-sm"
-                >... or <a href="/login"
-                           use:link>log in</a></span
-                >
-            </legend>
-            <div class="margin-bottom-xxs max-width-xxs">
-                <Alert
-                        visible={signupForm.alert.isVisible}
-                        title={signupForm.alert.title}
-                        message={signupForm.alert.message}
-                        type={signupForm.alert.type}
-                />
-            </div>
-            <div class="margin-bottom-xxs">
-                <input
-                        type="email"
-                        placeholder="Email address"
-                        class="form-control width-100%"
-                        id="email-address"
-                        bind:value={signupForm.values.username}
-                />
-            </div>
-            <div class="margin-bottom-xxs">
-                <input
-                        type="password"
-                        placeholder="Password"
-                        class="form-control width-100%"
-                        bind:value={signupForm.values.password}
-                />
-            </div>
-            <div class="flex justify-end">
-                <Button
-                        class="margin-bottom-xs"
-                        text="Submit"
-                        type="primary"
-                        loading={signupForm.loading}
-                />
-            </div>
-        </fieldset>
-    </form>
+    <Tile>
+        <form on:submit|preventDefault={signupForm.submit_form}
+              class="max-width-xxs">
+            <fieldset>
+                <legend class="form-legend">
+                    <span class="margin-bottom-xs">Create your account</span> <br/>
+                    <span class="text-sm"
+                    >... or <a href="/login"
+                               use:link>log in</a></span
+                    >
+                </legend>
+                <div class="margin-bottom-xxs max-width-xxs">
+                    <Alert visible={signupForm.alert.isVisible}
+                           title={signupForm.alert.title}
+                           message={signupForm.alert.message}
+                           type={signupForm.alert.type}
+                    />
+                </div>
+                <div class="margin-bottom-xxs">
+                    <input type="email"
+                           placeholder="Email address"
+                           class="form-control width-100%"
+                           id="email-address"
+                           bind:value={signupForm.values.username}
+                    />
+                </div>
+                <div class="margin-bottom-xxs">
+                    <input type="password"
+                           placeholder="Password"
+                           class="form-control width-100%"
+                           bind:value={signupForm.values.password}
+                    />
+                </div>
+                <div class="flex justify-end">
+                    <Button class="margin-bottom-xs"
+                            text="Submit"
+                            type="primary"
+                            loading={signupForm.loading}
+                    />
+                </div>
+            </fieldset>
+        </form>
+    </Tile>
 </Layout>
-- 
cgit v1.3