From 7aaa94d6028e7fd0400992bc170e37f8f36540d8 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 1 Sep 2022 17:23:27 +0200 Subject: [PATCH] feat: update style of login page --- src/lib/elements/forms/button.svelte | 5 +- src/lib/images/login/login-dark-mode.svg | 284 ++++++++++++++++++++++ src/lib/images/login/login-light-mode.svg | 253 +++++++++++++++++++ src/routes/login.svelte | 129 ++++++++-- 4 files changed, 646 insertions(+), 25 deletions(-) create mode 100644 src/lib/images/login/login-dark-mode.svg create mode 100644 src/lib/images/login/login-light-mode.svg diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte index 1b17010d2..641720d78 100644 --- a/src/lib/elements/forms/button.svelte +++ b/src/lib/elements/forms/button.svelte @@ -7,6 +7,7 @@ export let round = false; export let external = false; export let href: string = null; + export let fullWidth = false; //TODO: add option to add aria-label to buttons that are only icons @@ -20,7 +21,8 @@ class:is-only-icon={round} class:is-secondary={secondary} class:is-text={text} - class:is-danger={danger}> + class:is-danger={danger} + class:is-full-width={fullWidth}> {:else} @@ -32,6 +34,7 @@ class:is-secondary={secondary} class:is-danger={danger} class:is-text={text} + class:is-full-width={fullWidth} type={submit ? 'submit' : 'button'}> diff --git a/src/lib/images/login/login-dark-mode.svg b/src/lib/images/login/login-dark-mode.svg new file mode 100644 index 000000000..999b6b52a --- /dev/null +++ b/src/lib/images/login/login-dark-mode.svg @@ -0,0 +1,284 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/images/login/login-light-mode.svg b/src/lib/images/login/login-light-mode.svg new file mode 100644 index 000000000..cc09c6267 --- /dev/null +++ b/src/lib/images/login/login-light-mode.svg @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/login.svelte b/src/routes/login.svelte index 9d4fb293f..a3691f57d 100644 --- a/src/routes/login.svelte +++ b/src/routes/login.svelte @@ -12,6 +12,9 @@ import { addNotification } from '$lib/stores/notifications'; import { sdkForConsole } from '$lib/stores/sdk'; import { user } from '$lib/stores/user'; + import AppwriteLogo from '$lib/images/appwrite.svg'; + import LoginLight from '$lib/images/login/login-light-mode.svg'; + import LoginDark from '$lib/images/login/login-dark-mode.svg'; let mail: string, pass: string; @@ -31,34 +34,112 @@ }); } }; + + const technologies = [ + 'js', + 'flutter', + 'apple', + 'android', + 'node_js', + 'php', + 'python', + 'ruby', + 'dart', + 'kotlin', + 'swift' + ]; - Login + Appwrite - Sign in -

Login

+
+
+
+ + Appwrite + +
-
- - - - - - - -
+
-Create an Account +
+ + +
+ +
+ +
+

Integrate with your favourite technologies

+
    + {#each technologies as tech} +
  • +
    • + {/each} +
+
+
+
+
+
+
+ +
+

Sign In

+
+
+ + + + + + + +
+
+ + +
+ +
+

+ version 0.15.2.402 +

+
+
+
+