From b719c651f8be9ecf29fb654f700f4110a93adb3b Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 20 Feb 2024 16:16:55 -0800
Subject: [PATCH] fix(messaging): add dividers between topics in topics modal

---
 .../messaging/topicsModal.svelte              | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/topicsModal.svelte b/src/routes/console/project-[project]/messaging/topicsModal.svelte
index 12a2a3f58..f0f88fe4b 100644
--- 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>