Update custom permission modal

Author: stnguyen90

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">