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/login.svelte | 101 +++++++++++++++++----------------
 1 file changed, 52 insertions(+), 49 deletions(-)

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

diff --git a/apps/portal/src/app/pages/login.svelte b/apps/portal/src/app/pages/login.svelte
index 3324056..df8d537 100644
--- a/apps/portal/src/app/pages/login.svelte
+++ b/apps/portal/src/app/pages/login.svelte
@@ -4,6 +4,7 @@
 	import {api_base, projects_base, IconNames} from "$shared/lib/configuration";
 	import Button from "$shared/components/button.svelte";
 	import Alert from "$shared/components/alert.svelte";
+	import Tile from "$shared/components/tile.svelte";
 	import {login} from "$shared/lib/api/user";
 	import {is_email} from "$shared/lib/helpers";
 	import Layout from "./_layout.svelte";
@@ -92,54 +93,56 @@
 </script>
 
 <Layout>
-    <form on:submit|preventDefault={loginForm.submit_form}
-          class="margin-bottom-md max-width-xxs">
-        <fieldset>
-            <legend class="form-legend">
-                <span class="margin-bottom-xs">Log into your account</span>
-                <br/>
-                <span class="text-sm">... or <a href="/signup"
-                                                use:link>create a new one</a></span>
-            </legend>
-            <div class="margin-bottom-xxs max-width-xxs">
-                <Alert visible={loginForm.alert.isVisible}
-                       title={loginForm.alert.title}
-                       message={loginForm.alert.message}
-                       type={loginForm.alert.type}/>
-            </div>
-            <div class="margin-bottom-xxs">
-                <input type="email"
-                       placeholder="Email address"
-                       class="form-control width-100%"
-                       id="username"
-                       bind:value={loginForm.values.username}/>
-            </div>
-            <div class="margin-bottom-xxs">
-                <input type="password"
-                       placeholder="Password"
-                       id="password"
-                       class="form-control width-100%"
-                       bind:value={loginForm.values.password}/>
-                <div class="flex justify-end">
-                    <a tabindex="-1"
-                       class="text-sm"
-                       href="/forgot"
-                       use:link>Reset password</a>
+    <Tile>
+        <form on:submit|preventDefault={loginForm.submit_form}
+              class="max-width-xxs">
+            <fieldset>
+                <legend class="form-legend">
+                    <span class="margin-bottom-xs">Log into your account</span>
+                    <br/>
+                    <span class="text-sm">... or <a href="/signup"
+                                                    use:link>create a new one</a></span>
+                </legend>
+                <div class="margin-bottom-xxs max-width-xxs">
+                    <Alert visible={loginForm.alert.isVisible}
+                           title={loginForm.alert.title}
+                           message={loginForm.alert.message}
+                           type={loginForm.alert.type}/>
                 </div>
-            </div>
-            <div class="flex justify-between">
-                <Button text="Login with Github"
-                        variant="secondary"
-                        icon="{IconNames.github}"
-                        icon_right_aligned="true"
-                        href={api_base("_/account/create-github-session")}
-                        loading={loginForm.loading}
-                />
-                <Button text="Login"
-                        type="submit"
-                        variant="primary"
-                        loading={loginForm.loading}/>
-            </div>
-        </fieldset>
-    </form>
+                <div class="margin-bottom-xxs">
+                    <input type="email"
+                           placeholder="Email address"
+                           class="form-control width-100%"
+                           id="username"
+                           bind:value={loginForm.values.username}/>
+                </div>
+                <div class="margin-bottom-xxs">
+                    <input type="password"
+                           placeholder="Password"
+                           id="password"
+                           class="form-control width-100%"
+                           bind:value={loginForm.values.password}/>
+                    <div class="flex justify-end">
+                        <a tabindex="-1"
+                           class="text-sm"
+                           href="/forgot"
+                           use:link>Reset password</a>
+                    </div>
+                </div>
+                <div class="flex justify-between">
+                    <Button text="Login with Github"
+                            variant="secondary"
+                            icon="{IconNames.github}"
+                            icon_right_aligned="true"
+                            href={api_base("_/account/create-github-session")}
+                            loading={loginForm.loading}
+                    />
+                    <Button text="Login"
+                            type="submit"
+                            variant="primary"
+                            loading={loginForm.loading}/>
+                </div>
+            </fieldset>
+        </form>
+    </Tile>
 </Layout>
-- 
cgit v1.3