fix(messaging): add dividers between topics in topics modal

appwrite · Feb 21, 2024 · b719c65 · b719c65
1 parent ccfe6b9
commit b719c65
Showing 1 changed file with 33 additions and 19 deletions.
diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
     import { EmptySearch, Modal, PaginationInline } from '$lib/components';
     import { Button, FormList, InputCheckbox, InputSearch } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableRow
+    } from '$lib/elements/table';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
@@ -91,25 +97,33 @@
         bind:value={search} />
     {#if Object.keys(topicResultsById).length > 0}
         <FormList>
-            {#each Object.entries(topicResultsById) as [topicId, topic]}
-                <InputCheckbox
-                    id={topicId}
-                    disabled={!!topicsById[topicId]}
-                    checked={!!selected[topicId]}
-                    on:change={(event) => onTopicSelection(event, topic)}>
-                    <svelte:fragment slot="description">
-                        <span class="title">
-                            <span class="u-line-height-1-5">
-                                <span class="body-text-2 u-bold" data-private>
-                                    {topic.name}
-                                </span>
-                                <span class="collapsible-button-optional">
-                                    ({getTotal(topic)} subscribers)
-                                </span>
-                            </span></span>
-                    </svelte:fragment>
-                </InputCheckbox>
-            {/each}
+            <Table noMargin noStyles>
+                <TableBody>
+                    {#each Object.entries(topicResultsById) as [topicId, topic]}
+                        <TableRow>
+                            <TableCell>
+                                <InputCheckbox
+                                    id={topicId}
+                                    disabled={!!topicsById[topicId]}
+                                    checked={!!selected[topicId]}
+                                    on:change={(event) => onTopicSelection(event, topic)}>
+                                    <svelte:fragment slot="description">
+                                        <span class="title">
+                                            <span class="u-line-height-1-5">
+                                                <span class="body-text-2 u-bold" data-private>
+                                                    {topic.name}
+                                                </span>
+                                                <span class="collapsible-button-optional">
+                                                    ({getTotal(topic)} subscribers)
+                                                </span>
+                                            </span></span>
+                                    </svelte:fragment>
+                                </InputCheckbox>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
         </FormList>
         <div class="u-flex u-main-space-between">
             <p class="text">Total results: {totalResults}</p>