From ba4fd6fb0cb9655de82e1c889cdfc2e4db787b23 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Thu, 12 Sep 2024 15:08:53 +0530
Subject: [PATCH] update: ui changes per design.

---
 .../database-[database]/backups/+page.svelte  |  42 +---
 .../database-[database]/backups/policy.svelte | 231 ++++++++++--------
 2 files changed, 137 insertions(+), 136 deletions(-)

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 c55156484..316deda77 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
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, Empty, Modal, PaginationWithLimit } from '$lib/components';
+    import { Alert, Modal, PaginationWithLimit } from '$lib/components';
     import { Container } from '$lib/layout';
     import ContainerHeader from './containerHeader.svelte';
     import BackupPolicy from './policy.svelte';
@@ -95,35 +95,9 @@
                         {/if}
                     </div>
                 {:else}
-                    <Empty single on:click={() => (showCreateManualBackup = true)}>
-                        <div class="u-text-center">
-                            <div class="body-text-2 u-bold darker-neutral-color">
-                                Create a backup to get started.
-                            </div>
-                            <p class="body-text-2 u-margin-block-start-4 policy-item-caption">
-                                Need a hand? Learn more in our documentation.
-                            </p>
-                        </div>
-
-                        <div class="u-flex u-gap-16 u-main-center">
-                            <Button
-                                text
-                                external
-                                event="empty_documentation"
-                                href="https://appwrite.io/docs/products/databases/backups"
-                                ariaLabel="create backup"
-                                >Documentation
-                            </Button>
-
-                            <Button
-                                event="create_policy"
-                                class="small-radius-border-button"
-                                on:click={() => (showCreateManualBackup = true)}>
-                                <span class="icon-plus" aria-hidden="true" />
-                                <span class="text">Create Backup</span>
-                            </Button>
-                        </div>
-                    </Empty>
+                    <article class="empty card u-width-full-line common-section">
+                        No backups yet
+                    </article>
                 {/if}
             </div>
         {:else}
@@ -172,3 +146,11 @@
         <Button submit>Create</Button>
     </svelte:fragment>
 </Modal>
+
+<style>
+    .empty {
+        block-size: 365px;
+        text-align: center;
+        align-content: center;
+    }
+</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 52866f391..94df84523 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
@@ -98,123 +98,134 @@
     };
 </script>
 
-<Card
-    class="u-margin-block-start-24"
-    style="--card-padding: 1rem; --card-padding-mobile: 2rem; min-width: 21rem;">
-    <div class="u-flex-vertical-mobile">
-        {#each policies.policies as policy, index}
-            <!-- TODO: check card paddings later -->
-            <div
-                class="policy-card-item-padding u-flex-vertical u-gap-10"
-                class:u-padding-block-start-10={index !== 0}
-                class:u-sep-block-end={index !== policies.total - 1}
-                style:margin-block={index !== 0 ? '6px' : ''}>
-                <div class="u-flex-vertical u-gap-2">
-                    <div class="u-flex u-main-space-between">
-                        <h3 class="body-text-2 u-bold darker-neutral-color">{policy.name}</h3>
-                        <DropList bind:show={showDropdown[index]} placement="bottom-end">
-                            <button
-                                class="is-only-icon is-text"
-                                aria-label="More options"
-                                on:click|preventDefault={() => {
-                                    showDropdown[index] = !showDropdown[index];
-                                }}>
-                                <span class="icon-dots-horizontal" aria-hidden="true" />
-                            </button>
-
-                            <svelte:fragment slot="list">
-                                <DropListItem
-                                    on:click={() => {
-                                        showDelete = true;
-                                        selectedPolicy = policy;
-                                        showDropdown[index] = false;
-                                    }}>
-                                    Delete
-                                </DropListItem>
-                            </svelte:fragment>
-                        </DropList>
-                    </div>
-
-                    <div class="policy-item-subtitles u-flex u-gap-6">
-                        {getPolicyDescription(policy.schedule)}
-                        <span class="small-ellipse">●</span>
-                        {formatRetentionMessage(policy.retention)}
-                    </div>
-                </div>
-
-                <!-- Previous and Next section -->
+<div class="u-flex u-flex-vertical u-gap-10">
+    <Card
+        class="u-margin-block-start-24"
+        style="--card-padding: 1rem; --card-padding-mobile: 2rem; min-width: 21rem;">
+        <div class="u-flex-vertical-mobile">
+            {#each policies.policies as policy, index}
+                <!-- TODO: check card paddings later -->
                 <div
-                    class="policy-cycles u-flex u-cross-start u-padding-block-2 policy-item-subtitles">
-                    <div class="u-flex-vertical policy-item-caption">
-                        <span style="color: #97979B">Previous</span>
+                    class="policy-card-item-padding u-flex-vertical u-gap-10"
+                    class:u-padding-block-start-10={index !== 0}
+                    class:u-sep-block-end={index !== policies.total - 1}
+                    style:margin-block={index !== 0 ? '6px' : ''}>
+                    <div class="u-flex-vertical u-gap-2">
+                        <div class="u-flex u-main-space-between">
+                            <h3 class="body-text-2 u-bold darker-neutral-color">{policy.name}</h3>
+                            <DropList bind:show={showDropdown[index]} placement="bottom-end">
+                                <button
+                                    class="is-only-icon is-text"
+                                    aria-label="More options"
+                                    on:click|preventDefault={() => {
+                                        showDropdown[index] = !showDropdown[index];
+                                    }}>
+                                    <span class="icon-dots-horizontal" aria-hidden="true" />
+                                </button>
 
-                        <div
-                            class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
-                            <span
-                                style="font-size: 1rem; margin-bottom: 2px; color: {lastBackupDates[
-                                    policy.$id
-                                ]
-                                    ? 'hsl(var(--color-success-100))'
-                                    : 'inherit'};">
-                                ●
-                            </span>
+                                <svelte:fragment slot="list">
+                                    <DropListItem
+                                        on:click={() => {
+                                            showDelete = true;
+                                            selectedPolicy = policy;
+                                            showDropdown[index] = false;
+                                        }}>
+                                        Delete
+                                    </DropListItem>
+                                </svelte:fragment>
+                            </DropList>
+                        </div>
 
-                            {#if lastBackupDates[policy.$id]}
-                                {toLocaleDateTime(lastBackupDates[policy.$id])}
-                            {:else}
-                                No backups yet
-                            {/if}
+                        <div class="policy-item-subtitles u-flex u-gap-6">
+                            {getPolicyDescription(policy.schedule)}
+                            <span class="small-ellipse">●</span>
+                            {formatRetentionMessage(policy.retention)}
                         </div>
                     </div>
 
-                    <div class="u-border-vertical" />
+                    <!-- Previous and Next section -->
+                    <div
+                        class="policy-cycles u-flex u-cross-start u-padding-block-2 policy-item-subtitles">
+                        <div class="u-flex-vertical policy-item-caption">
+                            <span style="color: #97979B">Previous</span>
 
-                    <div class="u-flex-vertical policy-item-caption">
-                        <span style="color: #97979B">Next</span>
-                        <div
-                            class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
-                            {toLocaleDateTime(
-                                parseExpression(policy.schedule, {
-                                    utc: !isHourlySchedule(policy.schedule)
-                                })
-                                    .next()
-                                    .toString()
-                            )}
+                            <div
+                                class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
+                                <span
+                                    style="font-size: 1rem; margin-bottom: 2px; color: {lastBackupDates[
+                                        policy.$id
+                                    ]
+                                        ? 'hsl(var(--color-success-100))'
+                                        : 'inherit'};">
+                                    ●
+                                </span>
+
+                                {#if lastBackupDates[policy.$id]}
+                                    {toLocaleDateTime(lastBackupDates[policy.$id])}
+                                {:else}
+                                    No backups yet
+                                {/if}
+                            </div>
+                        </div>
+
+                        <div class="u-border-vertical" />
+
+                        <div class="u-flex-vertical policy-item-caption">
+                            <span style="color: #97979B">Next</span>
+                            <div
+                                class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
+                                {toLocaleDateTime(
+                                    parseExpression(policy.schedule, {
+                                        utc: !isHourlySchedule(policy.schedule)
+                                    })
+                                        .next()
+                                        .toString()
+                                )}
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        {:else}
-            <Empty single isCard={false} target="backup" on:click={() => (showCreatePolicy = true)}>
-                <div slot="empty-media">
-                    {#if $app.themeInUse === 'dark'}
-                        <img src={EmptyDark} alt="create" aria-hidden="true" height="242" />
-                    {:else}
-                        <img src={EmptyLight} alt="create" aria-hidden="true" height="242" />
-                    {/if}
-                </div>
-
-                <div class="u-text-center">
-                    <div class="body-text-2 u-bold darker-neutral-color">
-                        Ensure your data stays safe
+            {:else}
+                <Empty
+                    single
+                    isCard={false}
+                    target="backup"
+                    on:click={() => (showCreatePolicy = true)}>
+                    <div slot="empty-media">
+                        {#if $app.themeInUse === 'dark'}
+                            <img src={EmptyDark} alt="create" aria-hidden="true" height="242" />
+                        {:else}
+                            <img src={EmptyLight} alt="create" aria-hidden="true" height="242" />
+                        {/if}
                     </div>
-                    <p class="body-text-2 u-margin-block-start-4 policy-item-caption">
-                        Create a backup policy to automate regular and secure data protection.
-                    </p>
-                </div>
-                <div class="u-flex u-gap-16 u-main-center">
-                    <Button
-                        event="create_policy"
-                        class="small-radius-border-button"
-                        on:click={() => (showCreatePolicy = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create Policy</span>
-                    </Button>
-                </div>
-            </Empty>
-        {/each}
-    </div>
-</Card>
+
+                    <div class="u-text-center">
+                        <div class="body-text-2 u-bold darker-neutral-color">
+                            Ensure your data stays safe
+                        </div>
+                        <p class="body-text-2 u-margin-block-start-4 policy-item-caption">
+                            Create a backup policy to automate regular and secure data protection.
+                        </p>
+                    </div>
+                    <div class="u-flex u-gap-16 u-main-center">
+                        <Button
+                            event="create_policy"
+                            class="small-radius-border-button"
+                            on:click={() => (showCreatePolicy = true)}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text">Create Policy</span>
+                        </Button>
+                    </div>
+                </Empty>
+            {/each}
+        </div>
+    </Card>
+
+    <span class="policy-item-subtitles policy-addon-fee-alert">
+        Database backups are free until <b>November 2024</b>. Starting then, a $20.00 fee will apply
+        per backup policy.
+    </span>
+</div>
 
 <Modal
     title="Delete policy"
@@ -257,6 +268,14 @@
         /*padding-inline: var(--space-3, 6px) var(--space-4, 8px);*/
     }
 
+    .policy-addon-fee-alert {
+        margin-inline: 12px;
+    }
+
+    :global(.theme-light .policy-addon-fee-alert) {
+        color: var(--mid-neutrals-60, #6c6c71);
+    }
+
     .u-padding-block-start-10 {
         padding-block-start: 10px !important;
     }