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/forgot.svelte | 67 +++++++++++++++++----------------
 1 file changed, 35 insertions(+), 32 deletions(-)

(limited to 'apps/portal/src/app/pages/forgot.svelte')

diff --git a/apps/portal/src/app/pages/forgot.svelte b/apps/portal/src/app/pages/forgot.svelte
index f22d664..5ffac23 100644
--- a/apps/portal/src/app/pages/forgot.svelte
+++ b/apps/portal/src/app/pages/forgot.svelte
@@ -5,11 +5,12 @@
 	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 Layout from "./_layout.svelte";
 
 	let isLoading = false;
 	let username;
-	
+
 	const alert = {
 		title: "",
 		type: "",
@@ -65,35 +66,37 @@
 </script>
 
 <Layout>
-    <form on:submit|preventDefault={submit_form}
-          class="margin-bottom-md max-width-xxs">
-        <fieldset>
-            <legend class="form-legend">
-                <span class="margin-bottom-xs">Send reset link</span> <br/>
-                <span class="text-sm">... or <a href="/login"
-                                                use:link>log in</a></span>
-            </legend>
-            <div class="margin-bottom-xs">
-                <p>Provide your email address, and we'll send you a link to set your new password.</p>
-            </div>
-            <div class="margin-bottom-xxs max-width-xxs">
-                <Alert visible={alert.isVisible}
-                       title={alert.title}
-                       message={alert.message}
-                       type={alert.type}/>
-            </div>
-            <div class="margin-bottom-xs">
-                <input type="email"
-                       id="email-address"
-                       placeholder="Email address"
-                       class="form-control width-100%"
-                       bind:value={username}/>
-            </div>
-            <div class="flex justify-end">
-                <Button text="Send reset link"
-                        type="primary"
-                        loading={isLoading}/>
-            </div>
-        </fieldset>
-    </form>
+    <Tile>
+        <form on:submit|preventDefault={submit_form}
+              class="max-width-xxs">
+            <fieldset>
+                <legend class="form-legend">
+                    <span class="margin-bottom-xs">Send reset link</span> <br/>
+                    <span class="text-sm">... or <a href="/login"
+                                                    use:link>log in</a></span>
+                </legend>
+                <div class="margin-bottom-xs">
+                    <p>Provide your email address, and we'll send you a link to set your new password.</p>
+                </div>
+                <div class="margin-bottom-xxs max-width-xxs">
+                    <Alert visible={alert.isVisible}
+                           title={alert.title}
+                           message={alert.message}
+                           type={alert.type}/>
+                </div>
+                <div class="margin-bottom-xs">
+                    <input type="email"
+                           id="email-address"
+                           placeholder="Email address"
+                           class="form-control width-100%"
+                           bind:value={username}/>
+                </div>
+                <div class="flex justify-end">
+                    <Button text="Send reset link"
+                            type="primary"
+                            loading={isLoading}/>
+                </div>
+            </fieldset>
+        </form>
+    </Tile>
 </Layout>
-- 
cgit v1.3