From 694a8cff84199e0460c028dca05228c8ab47b67d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 2 Nov 2022 10:50:34 +0100
Subject: [PATCH] fix: inner modal

---
 src/lib/components/innerModal.svelte          | 48 +++++++++++--------
 .../functions/wizard/step1.svelte             | 24 +++++-----
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/innerModal.svelte b/src/lib/components/innerModal.svelte
index 384880389..96b170423 100644
--- a/src/lib/components/innerModal.svelte
+++ b/src/lib/components/innerModal.svelte
@@ -1,27 +1,33 @@
 <script>
+    import FormItem from '$lib/elements/forms/formItem.svelte';
+
     export let show = false;
 </script>
 
 {#if show}
-    <section class="modal is-inner-modal">
-        <header class="modal-header u-flex-wrap">
-            <h4 class="modal-title body-text-1">
-                <slot name="title" />
-            </h4>
-            <button
-                type="button"
-                class="x-button"
-                aria-label="Close"
-                title="Close"
-                on:click={() => (show = false)}>
-                <span class="icon-x" aria-hidden="true" />
-            </button>
-            <p class="u-flex-basis-100-percent">
-                <slot name="subtitle" />
-            </p>
-        </header>
-        <div class="modal-content">
-            <slot name="content" />
-        </div>
-    </section>
+    <FormItem>
+        <section class="modal is-inner-modal">
+            <div class="modal-form">
+                <header class="modal-header u-flex-wrap">
+                    <h4 class="modal-title body-text-1">
+                        <slot name="title" />
+                    </h4>
+                    <button
+                        type="button"
+                        class="x-button"
+                        aria-label="Close"
+                        title="Close"
+                        on:click={() => (show = false)}>
+                        <span class="icon-x" aria-hidden="true" />
+                    </button>
+                    <p class="u-flex-basis-100-percent">
+                        <slot name="subtitle" />
+                    </p>
+                </header>
+                <div class="modal-content">
+                    <slot name="content" />
+                </div>
+            </div>
+        </section>
+    </FormItem>
 {/if}
diff --git a/src/routes/console/project-[project]/functions/wizard/step1.svelte b/src/routes/console/project-[project]/functions/wizard/step1.svelte
index 2701dadec..6067d9af7 100644
--- a/src/routes/console/project-[project]/functions/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step1.svelte
@@ -39,18 +39,16 @@
             {options}
             required />
 
-        <ul class="form-list">
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Function ID
-                        </span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="Function" bind:id={$createFunction.id} />
-            {/if}
-        </ul>
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Function ID
+                    </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Function" bind:id={$createFunction.id} />
+        {/if}
     </FormList>
 </WizardStep>