From 276c48853346d3a6cec5eddcdc6c3b9747a4d40b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 1 Jul 2022 11:58:59 +0200
Subject: [PATCH 1/6] feat: updated activity & session layout

---
 .../users/teams/[team]/activity.svelte        | 34 ++++++++++---------
 .../users/user/[user]/activity.svelte         | 30 +++++++++-------
 .../users/user/[user]/sessions.svelte         | 27 +++++++--------
 3 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/routes/console/[project]/users/teams/[team]/activity.svelte b/src/routes/console/[project]/users/teams/[team]/activity.svelte
index 5badf1ec1..35b9b8fb0 100644
--- a/src/routes/console/[project]/users/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/activity.svelte
@@ -37,23 +37,25 @@
                     {#each response.logs as log}
                         <TableRow>
                             <TableCellText title="Client">
-                                <div class="image-item">
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                        alt={log.clientName} />
-                                </div>
-                                <span class="">
-                                    <p>
-                                        {log.clientName}
-                                        {log.clientVersion}
-                                    </p>
-                                    <span class="u-small">
-                                        on {log.osName}
-                                        {log.osVersion}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="image-item">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <span class="u-line-height-1-5">
+                                        <p>
+                                            {log.clientName}
+                                            {log.clientVersion}
+                                        </p>
+                                        <span class="u-small">
+                                            on {log.osName}
+                                            {log.osVersion}
+                                        </span>
                                     </span>
-                                </span>
+                                </div>
                             </TableCellText>
                             <TableCellText title="Event">{log.event}</TableCellText>
 
diff --git a/src/routes/console/[project]/users/user/[user]/activity.svelte b/src/routes/console/[project]/users/user/[user]/activity.svelte
index df75127bc..2acd80987 100644
--- a/src/routes/console/[project]/users/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/users/user/[user]/activity.svelte
@@ -37,19 +37,25 @@
                     {#each response.logs as log}
                         <TableRow>
                             <TableCellText title="Client">
-                                <div class="image-item">
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                        alt={log.clientName} />
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="image-item">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <span class="u-line-height-1-5">
+                                        <p>
+                                            {log.clientName}
+                                            {log.clientVersion}
+                                        </p>
+                                        <span class="u-small">
+                                            on {log.osName}
+                                            {log.osVersion}
+                                        </span>
+                                    </span>
                                 </div>
-                                <p>
-                                    {log.clientName}
-                                    {log.clientVersion}
-                                </p>
-                                on {log.osName}
-                                {log.osVersion}
                             </TableCellText>
                             <TableCellText title="Event">{log.event}</TableCellText>
 
diff --git a/src/routes/console/[project]/users/user/[user]/sessions.svelte b/src/routes/console/[project]/users/user/[user]/sessions.svelte
index f5c0a2612..313e2a87e 100644
--- a/src/routes/console/[project]/users/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/sessions.svelte
@@ -50,21 +50,20 @@
                     {#each response.sessions as session}
                         <TableRow>
                             <TableCellText title="Client">
-                                <div class="image-item">
-                                    <img
-                                        height="20"
-                                        width="20"
-                                        src={`/icons/color/${session?.clientName.toLocaleLowerCase()}.svg`}
-                                        alt={session.clientName} />
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="image-item">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={`/icons/color/${session?.clientName.toLocaleLowerCase()}.svg`}
+                                            alt={session.clientName} />
+                                    </div>
+                                    <span class="u-line-height-1-5">
+                                        <p>{session.clientName}</p>
+                                        <span class="u-small">
+                                            Last activity: {toLocaleDateTime(session?.expire)}
+                                        </span></span>
                                 </div>
-                                <span>
-                                    <p>
-                                        {session.clientName}
-                                    </p>
-                                    <span class="u-small">
-                                        Last activity: {toLocaleDateTime(session?.expire)}
-                                    </span>
-                                </span>
                             </TableCellText>
 
                             <TableCellText title="IP">{session.ip}</TableCellText>

From 905f222414f8ab88fdea396cef54a2f83ce9205e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 1 Jul 2022 12:04:54 +0200
Subject: [PATCH 2/6] feat: modal sizes & create user id dropdown

---
 src/lib/components/modal.svelte               |  8 ++-
 .../[project]/users/_appleOAuth.svelte        |  2 +-
 .../[project]/users/_auth0OAuth.svelte        |  2 +-
 .../[project]/users/_createTeam.svelte        |  2 +-
 .../[project]/users/_createUser.svelte        | 51 +++++++++++++++----
 .../console/[project]/users/_mainOAuth.svelte |  2 +-
 .../[project]/users/_microsoftOAuth.svelte    |  2 +-
 .../console/[project]/users/_oktaOAuth.svelte |  2 +-
 8 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index e4b02785a..4dde95931 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -3,7 +3,7 @@
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
 
     export let show = false;
-
+    export let size: 'small' | 'big' = null;
     let browser = false;
     //TODO: explore other solutions compatible with testing library
     onMount(() => {
@@ -51,7 +51,11 @@
 
 {#if show}
     <div class="modal-curtain" data-curtain on:click={handleBLur} transition:fade={transitionFade}>
-        <section class="modal" transition:fly={transitionFly}>
+        <section
+            class:is-small={size === 'small'}
+            class:is-big={size === 'big'}
+            class="modal"
+            transition:fly={transitionFly}>
             <header class="modal-header">
                 <h4 class="modal-title">
                     <slot name="header" />
diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 06c560898..6633be014 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal 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/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index 9294b1af7..115e2f3b6 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal 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 0cba42edd..04c26a766 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 1079de97e..bfc39605b 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
+    import { Modal, Card } from '$lib/components';
     import { Pill } from '$lib/elements/';
     import {
         Button,
@@ -17,7 +17,7 @@
 
     const dispatch = createEventDispatcher();
 
-    let idModal = false;
+    let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
 
     const create = async () => {
@@ -36,7 +36,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText
@@ -58,15 +58,44 @@
                 required={true}
                 bind:value={pass} />
 
-            <div>
-                <Pill button on:click={() => (idModal = !idModal)}
-                    >User ID <i class="icon-pencil" /></Pill>
-            </div>
-            {#if idModal}
-                <div class="common-section">
-                    <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
-                    <InputText id="id" label="" placeholder="" bind:value={id} />
+            {#if !showDropdown}
+                <div>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}
+                        >User ID <i class="icon-pencil" /></Pill>
                 </div>
+            {:else}
+                <Card>
+                    <header class="modal-header">
+                        <h4 class="modal-title">User ID</h4>
+                        <button
+                            type="button"
+                            class="x-button"
+                            aria-label="Close Modal"
+                            title="Close Modal"
+                            on:click={() => (showDropdown = false)}>
+                            <span class="icon-x" aria-hidden="true" />
+                        </button>
+                    </header>
+                    <div class="modal-content">
+                        <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
+                    </div>
+                    <div class="modal-footer">
+                        <input
+                            class="input-text"
+                            type="text"
+                            name="id"
+                            id="id"
+                            placeholder="Enter ID"
+                            bind:value={id} />
+                        <div class="u-flex u-gap-12">
+                            <div class="icon-info u-block" />
+                            <p>
+                                Allowed characters: alphanumeric, hyphen, non-leading underscore,
+                                period
+                            </p>
+                        </div>
+                    </div>
+                </Card>
             {/if}
         </FormList>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index c0b4b7b93..7f93434ce 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal 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 10a549edf..64e3721b0 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal 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/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index 2f842f6c1..883691244 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <Form on:submit={update}>
-    <Modal bind:show={showModal}>
+    <Modal size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>

From 04a2ea6bca48d31214e10a60ce3b1c64b86f3ace Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 1 Jul 2022 13:01:24 +0200
Subject: [PATCH 3/6] feat: add cardDrop & ID dropdown

---
 src/lib/components/cardDrop.svelte            | 26 ++++++++++++++
 src/lib/components/index.ts                   |  1 +
 src/lib/components/modal.svelte               |  6 ++++
 .../[project]/users/_createTeam.svelte        | 35 +++++++++++++++++--
 .../[project]/users/_createUser.svelte        | 30 +++++-----------
 5 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 src/lib/components/cardDrop.svelte

diff --git a/src/lib/components/cardDrop.svelte b/src/lib/components/cardDrop.svelte
new file mode 100644
index 000000000..7ce00a63b
--- /dev/null
+++ b/src/lib/components/cardDrop.svelte
@@ -0,0 +1,26 @@
+<script>
+    import { Card } from '$lib/components';
+    export let show = false;
+</script>
+
+{#if show}
+    <Card>
+        <header class="modal-header">
+            <h4 class="modal-title"><slot name="header" /></h4>
+            <button
+                type="button"
+                class="x-button"
+                aria-label="Close"
+                title="Close"
+                on:click={() => (show = false)}>
+                <span class="icon-x" aria-hidden="true" />
+            </button>
+        </header>
+        <div class="modal-content">
+            <slot />
+        </div>
+        <div class="modal-footer">
+            <slot name="footer" />
+        </div>
+    </Card>
+{/if}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 01de65cfb..928a68fe5 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -2,6 +2,7 @@ export { default as Modal } from './modal.svelte';
 export { default as Pagination } from './pagination.svelte';
 export { default as Card } from './card.svelte';
 export { default as CardGrid } from './cardGrid.svelte';
+export { default as CardDrop } from './cardDrop.svelte';
 export { default as Tile } from './tile.svelte';
 export { default as Tiles } from './tiles.svelte';
 export { default as Back } from './back.svelte';
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 4dde95931..e78cccba0 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -4,6 +4,7 @@
 
     export let show = false;
     export let size: 'small' | 'big' = null;
+    export let icon = false;
     let browser = false;
     //TODO: explore other solutions compatible with testing library
     onMount(() => {
@@ -57,6 +58,11 @@
             class="modal"
             transition:fly={transitionFly}>
             <header class="modal-header">
+                {#if icon}
+                    <div class="avatar is-color-orange is-medium">
+                        <span class="icon-exclamation" aria-hidden="true" />
+                    </div>
+                {/if}
                 <h4 class="modal-title">
                     <slot name="header" />
                 </h4>
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index 04c26a766..5356238cd 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
+    import { Modal, CardDrop } from '$lib/components';
+    import { Pill } from '$lib/elements';
     import { InputText, Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -9,11 +10,12 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string;
+    let name: string, id: string;
+    let showDropdown = false;
 
     const create = async () => {
         try {
-            const team = await sdkForProject.teams.create('unique()', name);
+            const team = await sdkForProject.teams.create(id ? id : 'unique()', name);
             name = '';
             showCreate = false;
             dispatch('created', team);
@@ -36,6 +38,33 @@
                 placeholder="John Doe"
                 autofocus={true}
                 bind:value={name} />
+            {#if !showDropdown}
+                <div>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}
+                        >Team ID <i class="icon-pencil" /></Pill>
+                </div>
+            {:else}
+                <CardDrop bind:show={showDropdown}>
+                    <svelte:fragment slot="header">Team ID</svelte:fragment>
+                    <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
+                    <svelte:fragment slot="footer">
+                        <input
+                            class="input-text "
+                            type="text"
+                            name="id"
+                            id="id"
+                            placeholder="Enter ID"
+                            bind:value={id} />
+                        <div class="u-flex u-gap-12">
+                            <div class="icon-info u-block" />
+                            <p class="u-small">
+                                Allowed characters: alphanumeric, hyphen, non-leading underscore,
+                                period
+                            </p>
+                        </div>
+                    </svelte:fragment>
+                </CardDrop>
+            {/if}
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index bfc39605b..314ba30b9 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Modal, Card } from '$lib/components';
+    import { Modal, CardDrop } from '$lib/components';
     import { Pill } from '$lib/elements/';
     import {
         Button,
@@ -64,24 +64,12 @@
                         >User ID <i class="icon-pencil" /></Pill>
                 </div>
             {:else}
-                <Card>
-                    <header class="modal-header">
-                        <h4 class="modal-title">User ID</h4>
-                        <button
-                            type="button"
-                            class="x-button"
-                            aria-label="Close Modal"
-                            title="Close Modal"
-                            on:click={() => (showDropdown = false)}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </button>
-                    </header>
-                    <div class="modal-content">
-                        <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
-                    </div>
-                    <div class="modal-footer">
+                <CardDrop bind:show={showDropdown}>
+                    <svelte:fragment slot="header">User ID</svelte:fragment>
+                    <p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
+                    <svelte:fragment slot="footer">
                         <input
-                            class="input-text"
+                            class="input-text "
                             type="text"
                             name="id"
                             id="id"
@@ -89,13 +77,13 @@
                             bind:value={id} />
                         <div class="u-flex u-gap-12">
                             <div class="icon-info u-block" />
-                            <p>
+                            <p class="u-small">
                                 Allowed characters: alphanumeric, hyphen, non-leading underscore,
                                 period
                             </p>
                         </div>
-                    </div>
-                </Card>
+                    </svelte:fragment>
+                </CardDrop>
             {/if}
         </FormList>
         <svelte:fragment slot="footer">

From 93af690cd50832029d4367f572ee625fc8fa41d9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 1 Jul 2022 13:12:24 +0200
Subject: [PATCH 4/6] feat: add warning icon to modals

---
 src/lib/components/modal.svelte                             | 6 +++---
 .../[project]/users/teams/[team]/_createMember.svelte       | 2 +-
 .../[project]/users/teams/[team]/_deleteMembership.svelte   | 2 +-
 .../console/[project]/users/teams/[team]/_deleteTeam.svelte | 2 +-
 .../users/user/[user]/_deleteAllMemberships.svelte          | 2 +-
 .../[project]/users/user/[user]/_deleteAllSessions.svelte   | 2 +-
 .../[project]/users/user/[user]/_deleteMembership.svelte    | 2 +-
 .../[project]/users/user/[user]/_deleteSession.svelte       | 2 +-
 .../console/[project]/users/user/[user]/_deleteUser.svelte  | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index e78cccba0..7843b7c91 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -4,7 +4,7 @@
 
     export let show = false;
     export let size: 'small' | 'big' = null;
-    export let icon = false;
+    export let warning = false;
     let browser = false;
     //TODO: explore other solutions compatible with testing library
     onMount(() => {
@@ -58,12 +58,12 @@
             class="modal"
             transition:fly={transitionFly}>
             <header class="modal-header">
-                {#if icon}
+                {#if warning}
                     <div class="avatar is-color-orange is-medium">
                         <span class="icon-exclamation" aria-hidden="true" />
                     </div>
                 {/if}
-                <h4 class="modal-title">
+                <h4 class="heading-level-5">
                     <slot name="header" />
                 </h4>
                 <button
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMember.svelte b/src/routes/console/[project]/users/teams/[team]/_createMember.svelte
index 278315321..c0cac2ecb 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMember.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_createMember.svelte
@@ -42,7 +42,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal warning={true} bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</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 5f30ba58e..09c36c0cd 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal bind:show={showDelete}>
+    <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete member</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
index b8dd33a9e..186928720 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 bind:show={showDelete}>
+    <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete member</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 0c1b62c41..958b41301 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <Form on:submit={deleteAllMemberships}>
-    <Modal bind:show={showDeleteAll}>
+    <Modal warning={true} bind:show={showDeleteAll}>
         <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 02e9bc301..f3ff70117 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteAllSessions}>
-    <Modal bind:show={showDeleteAll}>
+    <Modal warning={true} bind:show={showDeleteAll}>
         <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
index 2666bf0c6..6074c21d5 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 bind:show={showDelete}>
+    <Modal warning={true} bind:show={showDelete}>
         <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 9da04c77e..ee2ca5781 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 bind:show={showDelete}>
+    <Modal warning={true} bind:show={showDelete}>
         <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 8631721f4..b79b5ef84 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteUser}>
-    <Modal bind:show={showDelete}>
+    <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete user</svelte:fragment>
         <p>Are you sure you want to delete <b>{$user.response.name}</b> from '{$project.name}'?</p>
         <svelte:fragment slot="footer">

From 062593d8784fb5499e50caab6adf7a924568804a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 1 Jul 2022 13:15:21 +0200
Subject: [PATCH 5/6] fix: capitalization

---
 .../[project]/users/teams/[team]/_deleteMembership.svelte       | 2 +-
 .../console/[project]/users/teams/[team]/_deleteTeam.svelte     | 2 +-
 .../[project]/users/user/[user]/_deleteAllMemberships.svelte    | 2 +-
 .../[project]/users/user/[user]/_deleteMembership.svelte        | 2 +-
 .../console/[project]/users/user/[user]/_deleteUser.svelte      | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
index 09c36c0cd..9af6db795 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
@@ -36,7 +36,7 @@
 
 <Form on:submit={deleteMembership}>
     <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete member</svelte:fragment>
+        <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/teams/[team]/_deleteTeam.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
index 186928720..7cf7911da 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
@@ -27,7 +27,7 @@
 
 <Form on:submit={deleteTeam}>
     <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete member</svelte:fragment>
+        <svelte:fragment slot="header">Delete Team</svelte:fragment>
 
         <p>
             Are you sure you want to delete <b>{team.name}</b>?
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
index 958b41301..929d17e45 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
@@ -28,7 +28,7 @@
 
 <Form on:submit={deleteAllMemberships}>
     <Modal warning={true} bind:show={showDeleteAll}>
-        <svelte:fragment slot="header">Delete all memberships</svelte:fragment>
+        <svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
 
         <p>
             Are you sure you want to delete <b>{$user.response.name}'s</b> all memberships?
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
index 6074c21d5..cc1ef893f 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
@@ -36,7 +36,7 @@
 
 <Form on:submit={deleteMembership}>
     <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete member</svelte:fragment>
+        <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/user/[user]/_deleteUser.svelte b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
index b79b5ef84..bc177b861 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
@@ -27,7 +27,7 @@
 
 <Form on:submit={deleteUser}>
     <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete user</svelte:fragment>
+        <svelte:fragment slot="header">Delete User</svelte:fragment>
         <p>Are you sure you want to delete <b>{$user.response.name}</b> from '{$project.name}'?</p>
         <svelte:fragment slot="footer">
             <Button text on:click={() => (showDelete = false)}>Cancel</Button>

From cdb3abf3cc1258e783a91e5262c628524214e72f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 1 Jul 2022 13:47:36 +0200
Subject: [PATCH 6/6] fix: removed unused class

---
 src/lib/components/alert.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index 921f54b28..526121d46 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -9,7 +9,7 @@
     const dispatch = createEventDispatcher();
 </script>
 
-<section class={`alert is-${type} common-section`}>
+<section class={`alert is-${type} `}>
     <div class="alert-grid">
         {#if dismissible}
             <button