From c1020322dbf17e8ccccbf68ba10a2dbb0b201949 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 11 Mar 2025 19:40:14 +0530
Subject: [PATCH] misc: updates.

---
 src/lib/components/modal.svelte               |  3 +-
 src/routes/(console)/bottomAlerts.ts          |  2 +-
 .../database-[database]/backups/+page.svelte  | 19 ++++++---
 .../backups/components/Ellipse.svelte         | 42 +++++++++++++++++++
 .../database-[database]/backups/policy.svelte | 37 +++-------------
 .../database-[database]/backups/table.svelte  | 33 ++++++++-------
 6 files changed, 81 insertions(+), 55 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/databases/database-[database]/backups/components/Ellipse.svelte

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index c56b55132..b48e82305 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -8,6 +8,7 @@
     export let show = false;
     export let error: string = null;
     export let dismissible = true;
+    export let size: 's' | 'm' | 'l' = 'm';
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
         return;
     };
@@ -42,7 +43,7 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <Form isModal {onSubmit} bind:this={formComponent}>
-    <Modal {title} bind:open={show} {hideFooter} {dismissible}>
+    <Modal {title} bind:open={show} {hideFooter} {dismissible} {size}>
         <slot slot="description" name="description" />
         {#if error}
             <div bind:this={alert}>
diff --git a/src/routes/(console)/bottomAlerts.ts b/src/routes/(console)/bottomAlerts.ts
index fa3e2d508..a5a0550c7 100644
--- a/src/routes/(console)/bottomAlerts.ts
+++ b/src/routes/(console)/bottomAlerts.ts
@@ -25,7 +25,7 @@ if (isCloud) {
         },
         learnMore: {
             text: 'Learn more',
-            link: () => 'http://appwrite.io/docs/products/databases/backups'
+            link: () => 'https://appwrite.io/docs/products/databases/backups'
         }
     });
 }
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index 515a1a510..95f703191 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -21,7 +21,7 @@
     import { showCreateBackup, showCreatePolicy } from './store';
     import { getProjectId } from '$lib/helpers/project';
     import { trackEvent } from '$lib/actions/analytics';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     let policyCreateError: string;
     let totalPolicies: UserBackupPolicy[] = [];
@@ -243,12 +243,19 @@
     </svelte:fragment>
 </Modal>
 
-<Modal title="Create manual backup" bind:show={$showCreateBackup} onSubmit={createManualBackup}>
-    <p class="text" data-private>
-        Manual backups are <b>retained forever</b> unless manually deleted. Use for major data
-        changes or rollback safeguards.
+<Modal
+    size="s"
+    title="Create manual backup"
+    bind:show={$showCreateBackup}
+    onSubmit={createManualBackup}>
+    <Typography.Text variant="m-400">
+        Manual backups are <b>retained forever</b> unless manually deleted. Use for major data changes
+        or rollback safeguards.
+    </Typography.Text>
+
+    <Typography.Text variant="m-500">
         <b>Depending on the size of your data, this may take a while.</b>
-    </p>
+    </Typography.Text>
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => ($showCreateBackup = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/components/Ellipse.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/components/Ellipse.svelte
new file mode 100644
index 000000000..20fad9807
--- /dev/null
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/components/Ellipse.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let size: 'm' | 's' = 'm';
+    export let color: string | undefined = 'currentColor';
+
+    const sizes = {
+        m: { width: 8, height: 8, cx: 4, cy: 4, r: 4 },
+        s: { width: 4, height: 4, cx: 2, cy: 2, r: 2 }
+    };
+
+    const { width, height, cx, cy, r } = sizes[size] || sizes.m;
+</script>
+
+<span class="ellipse" class:m={size === 'm'} class:s={size === 's'}>
+    <span class="ellipse-wrapper">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            {width}
+            {height}
+            viewBox={`0 0 ${width} ${height}`}
+            fill="none">
+            <circle {cx} {cy} {r} fill={color ?? 'currentColor'} />
+        </svg>
+    </span>
+</span>
+
+<style>
+    .ellipse {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .ellipse-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ellipse svg {
+        display: inline;
+        vertical-align: middle;
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
index 7de846479..1f7e705bc 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
@@ -26,6 +26,7 @@
     } from '@appwrite.io/pink-svelte';
     import { IconDotsHorizontal, IconPlus, IconTrash } from '@appwrite.io/pink-icons-svelte';
     import { Confirm } from '$lib/components/index.js';
+    import Ellipse from './components/Ellipse.svelte';
 
     let showDelete = false;
     let selectedPolicy: BackupPolicy = null;
@@ -186,16 +187,7 @@
                                     {policyDescription}
                                 {/if}
 
-                                <span class="small-ellipse">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="2"
-                                        height="2"
-                                        viewBox="0 0 2 2"
-                                        fill="none">
-                                        <circle cx="1" cy="1" r="1" fill="currentColor" />
-                                    </svg>
-                                </span>
+                                <Ellipse size="s" />
 
                                 {formatRetentionMessage(policy.retention)}
                             </Layout.Stack>
@@ -207,15 +199,10 @@
                         <div style="width: 128px" class="u-flex-vertical policy-item-caption">
                             <span style="color: #97979B">Previous</span>
                             <div class="u-flex u-gap-4 u-cross-center darker-neutral-color">
-                                <span class="ellipse" class:success={!!lastBackupDates[policy.$id]}>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        height="8"
-                                        width="8"
-                                        viewBox="0 0 8 8"
-                                        fill="none"
-                                        ><circle cx="4" cy="4" r="4" fill="currentColor" /></svg>
-                                </span>
+                                <Ellipse
+                                    color={lastBackupDates[policy.$id]
+                                        ? 'var(--bgcolor-success)'
+                                        : undefined} />
 
                                 <Typography.Caption variant="400">
                                     {#if lastBackupDates[policy.$id]}
@@ -326,18 +313,6 @@
         }
     }
 
-    :global(.small-ellipse) {
-        line-height: 0;
-    }
-
-    :global(.ellipse) {
-        line-height: 8px;
-
-        &.success {
-            color: hsl(var(--color-success-100));
-        }
-    }
-
     :global(.u-gap-6) {
         gap: 0.375rem;
     }
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
index 6fdab0755..8cf049132 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
@@ -18,12 +18,14 @@
     import {
         ActionMenu,
         Icon,
+        Layout,
         Popover,
         Selector,
         Status,
         Table,
         Tag,
-        Tooltip
+        Tooltip,
+        Typography
     } from '@appwrite.io/pink-svelte';
     import {
         IconDotsHorizontal,
@@ -33,6 +35,7 @@
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
     import { capitalize } from '$lib/helpers/string';
+    import Ellipse from './components/Ellipse.svelte';
 
     export let data: PageData;
 
@@ -290,25 +293,23 @@
 
 <Modal title="Restore backup" bind:show={showRestore} onSubmit={restoreBackup}>
     <Card
-        isTile
         class="restore-modal-inner-card u-width-full-line"
         style="border-radius: var(--border-radius-small, 8px); padding: 1rem;">
-        <div class="u-flex u-flex-vertical u-gap-4">
-            <span class="body-text-2 u-bold darker-neutral-color">
+        <Layout.Stack gap="xxs">
+            <Typography.Text variant="m-500">
                 {cleanBackupName(selectedBackup)}
-            </span>
-            <div class="u-flex u-cross-center u-gap-6 u-width-full-line">
-                <span class="u-flex u-cross-center u-gap-4">
-                    <span class="u-color-text-success u-font-size-12">●</span> Completed
-                </span>
-                <span class="small-ellipse">●</span>
-                {calculateSize(selectedBackup.size)}
-                <span class="small-ellipse">●</span>
+            </Typography.Text>
 
-                <!-- TODO: ellipsis-->
-                {timeFromNow(selectedBackup.$createdAt)}
-            </div>
-        </div>
+            <Typography.Caption variant="500">
+                <Layout.Stack direction="row" gap="xs">
+                    <Ellipse color="var(--bgcolor-success)" /> Completed
+                    <Ellipse size="s" />
+                    {calculateSize(selectedBackup.size)}
+                    <Ellipse size="s" />
+                    {timeFromNow(selectedBackup.$createdAt)}
+                </Layout.Stack>
+            </Typography.Caption>
+        </Layout.Stack>
     </Card>
 
     <FormList>