From 1e8d15c7068f7b913bfbb25a058c19d86d47a09c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 8 Jul 2022 11:53:30 +0200
Subject: [PATCH] feat: implement new inner modal

---
 .../[project]/users/_createTeam.svelte        | 44 ++++++++++--------
 .../[project]/users/_createUser.svelte        | 45 +++++++++++--------
 2 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index 71eeb00c3..dc7303214 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Modal, CardDrop } from '$lib/components';
+    import { Modal, InnerModal } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { InputText, Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -31,6 +31,9 @@
     $: if (!showDropdown) {
         id = null;
     }
+    $: if (!showCreate) {
+        showDropdown = false;
+    }
 </script>
 
 <Form on:submit={create}>
@@ -49,26 +52,29 @@
                         >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 team ID. Leave blank for a randomly generated team 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>
+                <InnerModal bind:show={showDropdown}>
+                    <svelte:fragment slot="title">Team ID</svelte:fragment>
+                    Enter a custom team ID. Leave blank for a randomly generated team ID.
+                    <svelte:fragment slot="content">
+                        <div class="form">
+                            <InputText
+                                id="id"
+                                label="Custom ID"
+                                showLabel={false}
+                                placeholder="Enter ID"
+                                autofocus={true}
+                                bind:value={name} />
+                            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                                <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>
+                            </div>
                         </div>
                     </svelte:fragment>
-                </CardDrop>
+                </InnerModal>
             {/if}
         </FormList>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 4ca71e0b7..46c0d19c8 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, CardDrop } from '$lib/components';
+    import { Modal, InnerModal } from '$lib/components';
     import { Pill } from '$lib/elements/';
     import {
         Button,
@@ -38,6 +38,9 @@
     $: if (!showDropdown) {
         id = null;
     }
+    $: if (!showCreate) {
+        showDropdown = false;
+    }
 </script>
 
 <Form on:submit={create}>
@@ -69,26 +72,30 @@
                         >User ID <i class="icon-pencil" /></Pill>
                 </div>
             {:else}
-                <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 "
-                            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>
+                <InnerModal bind:show={showDropdown}>
+                    <svelte:fragment slot="title">User ID</svelte:fragment>
+                    Enter a custom user ID. Leave blank for a randomly generated user ID.
+                    <svelte:fragment slot="content">
+                        <div class="form">
+                            <InputText
+                                id="id"
+                                label="Custom ID"
+                                showLabel={false}
+                                placeholder="Enter ID"
+                                autofocus={true}
+                                bind:value={name} />
+
+                            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                                <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>
+                            </div>
                         </div>
                     </svelte:fragment>
-                </CardDrop>
+                </InnerModal>
             {/if}
         </FormList>
         <svelte:fragment slot="footer">