From e4f735b1bf39dac3e5c1417d55d0cabf9eb3a16d Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:18:49 -0800
Subject: [PATCH 1/3] Update modal description padding

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

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 636e713ca3..6d123ef696 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -127,7 +127,7 @@
                         </button>
                     {/if}
                 </div>
-                <p>
+                <p class="u-margin-block-start-4">
                     <slot name="description">
                         {description}
                     </slot>

From 6dd7b18bb2f76c30789baa088db1657db44a1abf Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:19:11 -0800
Subject: [PATCH 2/3] Update label permission modal

---
 src/lib/components/permissions/label.svelte | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/permissions/label.svelte b/src/lib/components/permissions/label.svelte
index 531c25284e..b927b544f0 100644
--- a/src/lib/components/permissions/label.svelte
+++ b/src/lib/components/permissions/label.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { Button, FormItem, FormList, Helper, InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { Modal } from '..';
     import type { Writable } from 'svelte/store';
@@ -32,12 +32,18 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal title="Label" bind:show on:close={reset} onSubmit={create}>
-    <p class="text">Labels allow you to grant access to users with the specfied label.</p>
+<Modal
+    title="Label"
+    description="Labels allow you to grant access to users with the specfied label."
+    bind:show
+    on:close={reset}
+    onSubmit={create}>
     <FormList>
-        <InputText showLabel={false} id="label" label="Label" placeholder="admin" bind:value />
-        <Helper type={isError ? 'warning' : 'neutral'}
-            >Only alphanumeric characters are allowed.</Helper>
+        <FormItem>
+            <InputText id="label" label="Label" placeholder="Enter label" bind:value />
+            <Helper type={isError ? 'warning' : 'neutral'}
+                >Only alphanumeric characters are allowed.</Helper>
+        </FormItem>
     </FormList>
 
     <svelte:fragment slot="footer">

From 90bdf8249450b1a6d5b6d43ce4241904101ae14c Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:19:35 -0800
Subject: [PATCH 3/3] Update custom permission modal

---
 src/lib/components/permissions/custom.svelte | 33 +++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index 3d2d366934..35abd34db5 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { Button, FormItem, FormList, Helper, InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { Modal } from '..';
     import type { Writable } from 'svelte/store';
@@ -25,21 +25,24 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal title="Custom permission" bind:show on:close={reset} onSubmit={create}>
-    <p class="text">
-        Custom permissions allow you to grant access to specific users or teams using their ID and
-        role.
-    </p>
+<Modal
+    title="Custom permission"
+    description="Custom permissions allow you to grant access to specific users or teams using their ID and
+role."
+    bind:show
+    on:close={reset}
+    onSubmit={create}>
     <FormList>
-        <InputText
-            showLabel={false}
-            id="custom-permission"
-            label="Custom permission"
-            placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
-            bind:value />
-        <Helper type="neutral">
-            A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
-        </Helper>
+        <FormItem>
+            <InputText
+                id="custom-permission"
+                label="Role"
+                placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
+                bind:value />
+            <Helper type="neutral">
+                A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
+            </Helper>
+        </FormItem>
     </FormList>
 
     <svelte:fragment slot="footer">