Merge pull request #618 from appwrite/feat-user-labels

Update label and custom permission modals

Author: TorstenDittmann

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>

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

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