From 37f244a8586ae2a55fa20e28a3555d25bd034267 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:10:36 +0200
Subject: [PATCH] fix by torsten

---
 src/lib/components/InnerModal.svelte          |  2 +-
 src/lib/components/alert.svelte               | 16 ++++----
 src/lib/components/modal.svelte               | 13 +++---
 src/lib/elements/forms/helper.svelte          | 26 +++++++-----
 src/lib/elements/forms/inputCheckbox.svelte   | 26 ++++++------
 src/lib/elements/forms/inputCustomId.svelte   |  2 +
 src/lib/elements/forms/inputEmail.svelte      | 25 ++++++-----
 src/lib/elements/forms/inputFile.svelte       |  2 +-
 src/lib/elements/forms/inputNumber.svelte     | 20 ++++-----
 src/lib/elements/forms/inputPassword.svelte   | 41 +++++++++----------
 src/lib/elements/forms/inputPhone.svelte      | 33 +++++++++------
 src/lib/elements/forms/inputRadio.svelte      | 23 +++++------
 src/lib/elements/forms/inputSearch.svelte     | 11 ++---
 src/lib/elements/forms/inputSelect.svelte     | 24 +++++------
 src/lib/elements/forms/inputSwitch.svelte     | 20 ++++-----
 src/lib/elements/forms/inputTags.svelte       | 27 ++++++------
 src/lib/elements/forms/inputText.svelte       | 22 +++++-----
 src/lib/elements/forms/inputTextarea.svelte   | 20 ++++-----
 src/lib/layout/notification.svelte            | 28 ++++++-------
 src/lib/layout/shell.svelte                   | 10 ++---
 .../console/[project]/storage/_create.svelte  | 29 +++++++------
 .../storage/bucket/[bucket]/_create.svelte    | 16 ++++----
 .../bucket/[bucket]/_deleteBucket.svelte      |  2 +-
 .../bucket/[bucket]/_deleteFile.svelte        |  2 +-
 .../[bucket]/file/[file]/_deleteFile.svelte   |  2 +-
 .../[project]/users/_appleOAuth.svelte        | 13 +++---
 .../[project]/users/_auth0OAuth.svelte        |  8 ++--
 .../[project]/users/_createTeam.svelte        | 15 +++----
 .../[project]/users/_createUser.svelte        | 28 +++++++------
 .../console/[project]/users/_mainOAuth.svelte | 10 +++--
 .../[project]/users/_microsoftOAuth.svelte    | 14 ++++---
 .../console/[project]/users/_oktaOAuth.svelte |  8 ++--
 .../teams/[team]/_createMembership.svelte     | 10 ++---
 .../teams/[team]/_deleteMembership.svelte     |  3 +-
 .../users/teams/[team]/_deleteTeam.svelte     |  2 +-
 .../user/[user]/_deleteAllMemberships.svelte  |  2 +-
 .../user/[user]/_deleteAllSessions.svelte     |  3 +-
 .../user/[user]/_deleteMembership.svelte      |  2 +-
 .../users/user/[user]/_deleteSession.svelte   |  2 +-
 .../users/user/[user]/_deleteUser.svelte      |  2 +-
 .../[project]/users/user/[user]/index.svelte  | 33 +++++++++------
 tests/unit/elements/inputPhone.test.ts        |  1 -
 vite.config.js                                |  2 +-
 43 files changed, 302 insertions(+), 298 deletions(-)

diff --git a/src/lib/components/InnerModal.svelte b/src/lib/components/InnerModal.svelte
index 5b59d4f1c..384880389 100644
--- a/src/lib/components/InnerModal.svelte
+++ b/src/lib/components/InnerModal.svelte
@@ -17,7 +17,7 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
             <p class="u-flex-basis-100-percent">
-                <slot />
+                <slot name="subtitle" />
             </p>
         </header>
         <div class="modal-content">
diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index f83488a7f..bf06d2c28 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -3,16 +3,9 @@
     import type { Buttons } from '../stores/notifications';
 
     export let dismissible = false;
-    export let type: '' | 'info' | 'success' | 'warning' | 'error' = 'info';
+    export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
     export let buttons: Buttons[] = [];
 
-    let icon = {
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        info: 'icon-info'
-    };
-
     const dispatch = createEventDispatcher();
 </script>
 
@@ -31,7 +24,12 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
         {/if}
-        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
+        <span
+            class:icon-info={type === 'info'}
+            class:icon-check-circle={type === 'success'}
+            class:icon-exclamation={type === 'warning'}
+            class:icon-exclamation-circle={type === 'error'}
+            aria-hidden="true" />
         <div class="content">
             {#if $$slots.title}
                 <h6 class="title">
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 3a1263411..137463f0f 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { createEventDispatcher, onMount } from 'svelte';
+    import { browser } from '$app/env';
+    import { createEventDispatcher } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
     import { Alert } from '$lib/components';
 
@@ -7,11 +8,6 @@
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
-    let browser = false;
-    //TODO: explore other solutions compatible with testing library
-    onMount(() => {
-        browser = true;
-    });
 
     const dispatch = createEventDispatcher();
     const transitionFly: FlyParams = {
@@ -28,19 +24,20 @@
             closeModal();
         }
     };
-
     const handleBLur = (event: MouseEvent) => {
         const target: Partial<HTMLElement> = event.target;
         if (target.hasAttribute('data-curtain')) {
             closeModal();
         }
     };
-
     const closeModal = () => {
         show = false;
         dispatch('close');
     };
 
+    /**
+     * Workaround until https://github.com/sveltejs/svelte/issues/3105 is resolved.
+     */
     $: if (browser) {
         if (show) {
             document.body.classList.add('u-overflow-hidden');
diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index 8cb9d8b46..52b662ee4 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,18 +1,22 @@
 <script lang="ts">
-    export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
-
-    let icon = {
-        info: 'icon-info',
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        neutral: 'icon-info'
-    };
+    export let type: 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 </script>
 
-<p class={`helper u-${type} u-margin-block-start-12"`}>
+<p
+    class="helper u-margin-block-start-12"
+    class:u-info={type === 'info'}
+    class:u-error={type === 'error'}
+    class:u-success={type === 'success'}
+    class:u-warning={type === 'warning'}
+    class:u-neutral={type === 'neutral'}>
     {#if type}
-        <span class={icon[type] ?? ''} aria-hidden="true" />
+        <span
+            class:icon-info={type === 'info'}
+            class:icon-error={type === 'error'}
+            class:icon-success={type === 'success'}
+            class:icon-warning={type === 'warning'}
+            class:icon-neutral={type === 'neutral'}
+            aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />
diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 6e9e3c75a..cecc2a441 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -7,23 +7,21 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
-        errorMessage = element.validationMessage;
-        if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
-        }
         event.preventDefault();
-        showHelper = true;
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -31,15 +29,15 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
-            bind:this={element}
             {id}
             {disabled}
             {required}
             type="checkbox"
-            bind:checked={value} />
+            bind:this={element}
+            bind:checked={value}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputCustomId.svelte b/src/lib/elements/forms/inputCustomId.svelte
index 2d30b8da4..09d43093e 100644
--- a/src/lib/elements/forms/inputCustomId.svelte
+++ b/src/lib/elements/forms/inputCustomId.svelte
@@ -7,9 +7,11 @@
     export let placeholder = '';
     export let required = false;
     export let autofocus = false;
+
     let element: HTMLInputElement;
     let unique = true;
     let bench = '';
+
     const toggle = async () => {
         unique = !unique;
         if (unique) {
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 9b07303d7..1358a5202 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -11,11 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -25,18 +23,19 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
         if (element.validity.typeMismatch) {
-            errorMessage = 'Your email should be formatted as: name@example.com';
+            error = 'Your email should be formatted as: name@example.com';
+            return;
         }
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -44,18 +43,18 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
             {required}
-            autocomplete={autocomplete ? 'on' : 'off'}
             type="email"
             class="input-text"
+            autocomplete={autocomplete ? 'on' : 'off'}
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 545523e77..bb1431cd4 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -12,6 +12,6 @@
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
-        <input {id} {disabled} {required} bind:files type="file" />
+        <input {id} {disabled} {required} type="file" bind:files />
     </div>
 </FormItem>
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index acf1453e6..1aab304d5 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -12,11 +12,9 @@
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -27,16 +25,16 @@
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
-        errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
 
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -44,7 +42,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -54,9 +51,10 @@
             type="number"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 452834751..d1e0aa1fd 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -13,13 +13,11 @@
     export let meter = false;
     export let autocomplete = false;
     export let showPasswordButton = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
     export let minlength = 8;
     export let maxlength: number = null;
 
     let element: HTMLInputElement;
+    let error: string;
     let showInPlainText = false;
 
     onMount(() => {
@@ -30,21 +28,22 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
-        console.log(element.validity);
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
         if (element.validity.tooShort) {
-            errorMessage = 'Password should contain at least 8 characters';
+            error = 'Password should contain at least 8 characters';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
-    $: if (value) {
-        showHelper = false;
-    }
     $: strength = value ? value.length * 10 : 0;
+    $: if (value) {
+        error = null;
+    }
 </script>
 
 <FormItem>
@@ -52,32 +51,32 @@
     <div class="input-text-wrapper">
         {#if showInPlainText}
             <input
-                on:invalid={handleInvalid}
-                type="text"
                 {id}
-                name={id}
                 {placeholder}
                 {disabled}
-                autocomplete={autocomplete ? 'on' : 'off'}
                 {minlength}
                 {maxlength}
+                name={id}
+                type="text"
                 class="input-text"
+                autocomplete={autocomplete ? 'on' : 'off'}
                 bind:value
-                bind:this={element} />
+                bind:this={element}
+                on:invalid={handleInvalid} />
         {:else}
             <input
-                on:invalid={handleInvalid}
                 {id}
                 {placeholder}
                 {disabled}
                 {required}
-                autocomplete={autocomplete ? 'on' : 'off'}
                 {minlength}
                 {maxlength}
                 type="password"
                 class="input-text"
+                autocomplete={autocomplete ? 'on' : 'off'}
                 bind:value
-                bind:this={element} />
+                bind:this={element}
+                on:invalid={handleInvalid} />
         {/if}
 
         {#if meter}
@@ -104,7 +103,7 @@
             </button>
         {/if}
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 5fa512e5b..47e331e79 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -12,11 +12,11 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let errorMessage = 'Allowed characters: leading ‘+’ and maximum of 15 digits';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
+
+    const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -26,15 +26,21 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
-        if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+
+        if (element.validity.patternMismatch) {
+            error = "Allowed characters: leading '+' and maximum of 15 digits";
+            return;
         }
-        showHelper = true;
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -42,19 +48,20 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
             {required}
             {maxlength}
+            {pattern}
+            type="text"
             autocomplete={autocomplete ? 'on' : 'off'}
-            type="tel"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 681885ac1..ac1734e0d 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -9,41 +9,40 @@
     export let name: string;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
 <FormItem>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
-            bind:this={element}
             {id}
             {name}
             {disabled}
             {required}
             {value}
             type="radio"
-            bind:group />
+            bind:group
+            bind:this={element}
+            on:invalid={handleInvalid} />
         <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index 5b3651c40..e1806d3d7 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -40,16 +40,11 @@
         {required}
         type="search"
         class="input-text"
-        on:input={valueChange}
-        bind:this={element} />
+        bind:this={element}
+        on:input={valueChange} />
     <span class="icon-search" aria-hidden="true" />
     {#if isWithEndButton && value}
-        <button
-            class="x-button"
-            aria-label="Clear search"
-            on:click={() => {
-                value = '';
-            }}>
+        <button class="x-button" aria-label="Clear search" on:click={() => (value = '')}>
             <span class="icon-x" aria-hidden="true" />
         </button>
     {/if}
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 6129cb11e..ef96176c7 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -11,24 +11,22 @@
         value: string;
         label: string;
     }[];
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLSelectElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -36,12 +34,12 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="select">
         <select
-            on:invalid={handleInvalid}
-            bind:this={element}
-            bind:value
             {id}
             {required}
-            {disabled}>
+            {disabled}
+            bind:this={element}
+            bind:value
+            on:invalid={handleInvalid}>
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}
@@ -50,7 +48,7 @@
         </select>
         <span class="icon-cheveron-down" aria-hidden="true" />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 1e395cbfb..a4891363e 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -6,24 +6,22 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -31,7 +29,6 @@
     <label class="choice-item" for={id}>
         <div class="input-text-wrapper">
             <input
-                on:invalid={handleInvalid}
                 {id}
                 {disabled}
                 {required}
@@ -40,13 +37,14 @@
                 role="switch"
                 bind:this={element}
                 bind:checked={value}
-                on:change />
+                on:change
+                on:invalid={handleInvalid} />
         </div>
         <div class="choice-item-content">
             <div class="choice-item-title">{label}</div>
         </div>
     </label>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index a1d4e41e3..0ad75a294 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -8,12 +8,10 @@
     export let tags: string[] = [];
     export let placeholder = '';
     export let autofocus = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let value = '';
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -53,15 +51,16 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -88,18 +87,18 @@
                 </ul>
             </div>
             <input
-                on:invalid={handleInvalid}
-                type="text"
-                class="tags-input-text"
                 {id}
                 {placeholder}
+                type="text"
+                class="tags-input-text"
+                bind:value
+                bind:this={element}
                 on:keydown={handleInput}
                 on:blur={addValue}
-                bind:value
-                bind:this={element} />
+                on:invalid={handleInvalid} />
         </div>
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 5235c215c..013caca3f 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -12,11 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -26,15 +24,17 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -42,7 +42,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -52,9 +51,10 @@
             type="text"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 6d02c9675..5736943e7 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -11,11 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let maxlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLTextAreaElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -25,15 +23,15 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -41,7 +39,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <textarea
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -49,9 +46,10 @@
             {maxlength}
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index a5f8cbe35..0cca8694d 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -6,29 +6,25 @@
     export let title: Notification['title'];
     export let buttons: Notification['buttons'];
 
-    let icon = {
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        info: 'icon-info'
-    };
-
-    let typeClass = {
-        success: 'is-success',
-        warning: 'is-warning',
-        error: 'is-danger',
-        info: 'is-info'
-    };
-
     const dispatch = createEventDispatcher();
 </script>
 
-<li class={`alert-sticky ${type ? typeClass[type] : ''}`}>
+<li
+    class="alert-sticky"
+    class:is-success={type === 'success'}
+    class:is-warning={type === 'warning'}
+    class:is-error={type === 'error'}
+    class:is-info={type === 'info'}>
     <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
         <span class="icon-x" aria-hidden="true" />
     </button>
     <div class="alert-sticky-image">
-        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
+        <span
+            class:icon-check-cirle={type === 'success'}
+            class:icon-exclamation={type === 'warning'}
+            class:icon-exclamation-circle={type === 'error'}
+            class:icon-info={type === 'info'}
+            aria-hidden="true" />
     </div>
     <div class="alert-sticky-content">
         {#if title}
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 97ca79d1d..da74cd3eb 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -68,7 +68,7 @@
             class="icon-button is-no-desktop"
             aria-label="Open Menu"
             on:click={() => (isOpen = !isOpen)}>
-            <span class={isOpen ? 'icon-x' : 'icon-menu'} aria-hidden="true" />
+            <span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
         </button>
         <slot name="header" />
     </header>
@@ -88,10 +88,10 @@
                 </h1>
                 {#if $copyData?.value}
                     <Copy value={$copyData.value}>
-                        <Pill button
-                            ><span
-                                class="icon-duplicate"
-                                aria-hidden="true" />{$copyData.text}</Pill>
+                        <Pill button>
+                            <span class="icon-duplicate" aria-hidden="true" />
+                            {$copyData.text}
+                        </Pill>
                     </Copy>
                 {/if}
             </svelte:fragment>
diff --git a/src/routes/console/[project]/storage/_create.svelte b/src/routes/console/[project]/storage/_create.svelte
index 801526f5c..f4b926da8 100644
--- a/src/routes/console/[project]/storage/_create.svelte
+++ b/src/routes/console/[project]/storage/_create.svelte
@@ -12,7 +12,7 @@
     let name = '';
     let id: string = null;
     let showDropdown = false;
-    let modalError: string;
+    let error: string;
 
     const create = async () => {
         try {
@@ -24,8 +24,8 @@
             name = null;
             showCreate = false;
             dispatch('created', bucket);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -34,12 +34,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Bucket</svelte:fragment>
         <FormList>
             <InputText
@@ -52,15 +52,17 @@
 
             {#if !showDropdown}
                 <div>
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}
-                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Bucket ID
-                        </span></Pill>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                        <span class="icon-pencil" aria-hidden="true" />
+                        <span class="text"> Bucket ID </span>
+                    </Pill>
                 </div>
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">Bucket ID</svelte:fragment>
-                    <p>Enter a custom bucket ID. Leave blank for a randomly generated one.</p>
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom bucket ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
@@ -75,9 +77,10 @@
                                 <span
                                     class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                                     aria-hidden="true" />
-                                <span class="text u-line-height-1-5"
-                                    >Allowed characters: alphanumeric, hyphen, non-leading
-                                    underscore, period</span>
+                                <span class="text u-line-height-1-5">
+                                    Allowed characters: alphanumeric, hyphen, non-leading
+                                    underscore, period
+                                </span>
                             </div>
                         </div>
                     </svelte:fragment>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
index 30f6aa42c..38317a0af 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
@@ -19,8 +19,8 @@
     let read: string[] = [];
     let write: string[] = [];
     let id: string = null;
+    let error: string;
     let showDropdown = false;
-    let modalError: string;
 
     const create = async () => {
         try {
@@ -36,8 +36,8 @@
             showDropdown = false;
             uploader.addFile(file);
             dispatch('created');
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -68,12 +68,10 @@
     }
 
     $: if (!showCreate) {
-        id = null;
+        id = files = error = null;
         list = new DataTransfer();
-        files = null;
         read = [];
         write = [];
-        modalError = null;
     }
 
     $: if (!showDropdown) {
@@ -84,7 +82,7 @@
 <input bind:files id="file" type="file" style="display: none" />
 
 <Form on:submit={create}>
-    <Modal error={modalError} bind:show={showCreate}>
+    <Modal {error} bind:show={showCreate}>
         <svelte:fragment slot="header">Upload File</svelte:fragment>
         <FormList>
             <div>
@@ -135,7 +133,9 @@
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">File ID</svelte:fragment>
-                    <p>Enter a custom file ID. Leave blank for a randomly generated one.</p>
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom file ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
index 550883a4b..a8e89db1c 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteUser}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
         <p>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
index c05dbeb69..b21e98870 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteFile}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete File</svelte:fragment>
         <p>Are you sure you want to delete <b>{file.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
index b7276efbf..065012aec 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteFile}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete File</svelte:fragment>
         <p>Are you sure you want to delete <b>{$file.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 4804311f1..605a45405 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { keyID, teamID, p8 } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -29,21 +29,22 @@
                 secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
                 To use {provider.name} authentication in your application, first fill in this form. For
                 more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
+                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+                    visit the docs.
+                </a>
             </p>
             <InputSwitch
                 id="state"
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index f3dc7425a..179c58607 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { clientSecret, auth0Domain } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -29,14 +29,14 @@
                 secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index f53aaaef0..109e91f92 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -10,9 +10,8 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, id: string;
+    let name: string, id: string, error: string;
     let showDropdown = false;
-    let modalError: string;
 
     const create = async () => {
         try {
@@ -25,8 +24,8 @@
                 message: `${team.name} has been created`
             });
             dispatch('created', team);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -35,12 +34,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText
@@ -59,7 +58,9 @@
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">Team ID</svelte:fragment>
-                    Enter a custom team ID. Leave blank for a randomly generated one.
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom team ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 7f56bde87..8f33df69f 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -19,7 +19,7 @@
 
     let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
-    let modalError: string;
+    let error: string;
 
     const create = async () => {
         try {
@@ -32,8 +32,8 @@
                 message: `${user.name} has been created`
             });
             dispatch('created', user);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -42,12 +42,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText
@@ -72,15 +72,18 @@
 
             {#if !showDropdown}
                 <div>
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}
-                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
                             User ID
-                        </span></Pill>
+                        </span>
+                    </Pill>
                 </div>
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">User ID</svelte:fragment>
-                    Enter a custom user ID. Leave blank for a randomly generated one.
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom user ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
@@ -95,9 +98,10 @@
                                 <span
                                     class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                                     aria-hidden="true" />
-                                <span class="text u-line-height-1-5"
-                                    >Allowed characters: alphanumeric, hyphen, non-leading
-                                    underscore, period</span>
+                                <span class="text u-line-height-1-5">
+                                    Allowed characters: alphanumeric, hyphen, non-leading
+                                    underscore, period
+                                </span>
                             </div>
                         </div>
                     </svelte:fragment>
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index 7429b7385..c760a1fdb 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -14,8 +14,10 @@
 
     export let showModal = false;
     export let provider: Provider;
+
     const projectId = $page.params.project;
-    let modalError: string;
+
+    let error: string;
 
     const update = async () => {
         try {
@@ -26,14 +28,14 @@
                 provider.secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/users/_microsoftOAuth.svelte
index 73e1ae506..d1e0a2938 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -14,8 +14,9 @@
 
     export let showModal = false;
     export let provider: Provider;
+
     let { clientSecret, tenantID } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
 
@@ -30,21 +31,22 @@
             );
 
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
                 To use {provider.name} authentication in your application, first fill in this form. For
                 more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
+                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+                    visit the docs.
+                </a>
             </p>
             <InputSwitch
                 id="state"
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index ad34410d2..aa0ec1786 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
 
@@ -31,14 +31,14 @@
             );
 
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
index 53df2076f..d128d7b22 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
@@ -11,8 +11,8 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, email: string, roles: [];
-    let modalError: string;
+    let name: string, email: string, roles: string[];
+    let error: string;
 
     const create = async () => {
         const url = `${$page.url.origin}/console/${$page.params.project}/users/teams/${$page.params.team}/members`;
@@ -33,14 +33,14 @@
             roles = [];
             showCreate = false;
             dispatch('created', user);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Membership</svelte:fragment>
         <FormList>
             <InputEmail
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
index 22c68152f..4551afd99 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
@@ -35,9 +35,8 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Member</svelte:fragment>
-
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
         </p>
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
index 1b1a18398..dacd5e9d2 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteTeam}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Team</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
index f5c76479c..da8a539c3 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteAllMemberships}>
-    <Modal warning={true} bind:show={showDeleteAll}>
+    <Modal bind:show={showDeleteAll} warning>
         <svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
index 8905281b6..13ec19bad 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
@@ -26,9 +26,8 @@
 </script>
 
 <Form on:submit={deleteAllSessions}>
-    <Modal warning={true} bind:show={showDeleteAll}>
+    <Modal bind:show={showDeleteAll} warning>
         <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
-
         <p>
             Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
         </p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
index 4d5cf77f8..30e5f4a8b 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Member</svelte:fragment>
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte b/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
index ee2ca5781..b447e8f90 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteSession}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
 
         <p>Are you sure you want to delete this session?</p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
index 2b2d31892..ca9482f6f 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <Form on:submit={deleteUser}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete User</svelte:fragment>
         <p>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index 2d685b872..0278da85f 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -228,7 +228,8 @@
                     text={$user.status}
                     secondary={!$user.status}
                     on:click={() => updateStatus()}
-                    >{$user.status ? 'Block account' : 'Unblock account'}</Button>
+                    >{$user.status ? 'Block account' : 'Unblock account'}
+                </Button>
                 {#if $user.status}
                     {#if $user.phone && $user.email}
                         <DropList
@@ -244,12 +245,16 @@
                                 {$user.emailVerification ? 'Unverify' : 'Verify'} account
                             </Button>
                             <svelte:fragment slot="list">
-                                <DropListItem icon="mail" on:click={() => updateVerificationEmail()}
-                                    >{$user.emailVerification ? 'Unverify' : 'Verify'} email</DropListItem>
+                                <DropListItem
+                                    icon="mail"
+                                    on:click={() => updateVerificationEmail()}>
+                                    {$user.emailVerification ? 'Unverify' : 'Verify'} email
+                                </DropListItem>
                                 <DropListItem
                                     icon="phone"
                                     on:click={() => updateVerificationPhone()}>
-                                    {$user.phoneVerification ? 'Unverify' : 'Verify'} phone</DropListItem>
+                                    {$user.phoneVerification ? 'Unverify' : 'Verify'} phone
+                                </DropListItem>
                             </svelte:fragment>
                         </DropList>
                     {:else if !$user.phone}
@@ -300,8 +305,9 @@
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
-                    <Button disabled={userEmail === $user.email || !userEmail} submit
-                        >Update</Button>
+                    <Button disabled={userEmail === $user.email || !userEmail} submit>
+                        Update
+                    </Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -321,8 +327,9 @@
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
-                    <Button disabled={userPhone === $user.phone || !userPhone} submit
-                        >Update</Button>
+                    <Button disabled={userPhone === $user.phone || !userPhone} submit>
+                        Update
+                    </Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -334,7 +341,7 @@
                 </div>
 
                 <p>
-                    Enter a new password. A password must contain <b> at least 8 characters.</b>
+                    Enter a new password. A password must contain <b>at least 8 characters.</b>
                 </p>
                 <svelte:fragment slot="aside">
                     <ul>
@@ -380,8 +387,9 @@
                                             </div>
                                         </div>
                                         <div class="form-item-part u-stretch">
-                                            <label class="label" for={`value-${index}`}
-                                                >Value</label>
+                                            <label class="label" for={`value-${index}`}>
+                                                Value
+                                            </label>
                                             <div class="input-text-wrapper">
                                                 <input
                                                     id={`value-${value}`}
@@ -419,7 +427,8 @@
                                 }
                             }}>
                             <span class="icon-plus" aria-hidden="true" />
-                            <span class="text"> Add Preference </span></Button>
+                            <span class="text">Add Preference</span>
+                        </Button>
                     </form>
                 </svelte:fragment>
 
diff --git a/tests/unit/elements/inputPhone.test.ts b/tests/unit/elements/inputPhone.test.ts
index ff180f4d8..f5370b119 100644
--- a/tests/unit/elements/inputPhone.test.ts
+++ b/tests/unit/elements/inputPhone.test.ts
@@ -9,7 +9,6 @@ test('shows phone input', () => {
 
     expect(getByText('input')).toBeInTheDocument();
     expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'tel');
 });
 
 test('shows phone input - required', () => {
diff --git a/vite.config.js b/vite.config.js
index 8c3afb766..2c66ac739 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -19,7 +19,7 @@ const config = {
         include: ['tests/**/*.test.ts'],
         globals: true,
         environment: 'jsdom',
-        thread: true
+        threads: true
     }
 };