Merge pull request #1740 from appwrite/backups-to-pink2

Backups to pink2

Author: TorstenDittmann

src/lib/components/backupRestoreBox.svelte

@@ -12,6 +12,7 @@
     import { base } from '$app/paths';
     import { getProjectId } from '$lib/helpers/project';
     import { toLocaleDate } from '$lib/helpers/date';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     const backupRestoreItems: {
         archives: Map<string, BackupArchive>;
@@ -146,7 +147,9 @@
                 <section class="upload-box">
                     <header class="upload-box-header">
                         <h4 class="upload-box-title">
-                            <span class="text">{titleText} ({items.size})</span>
+                            <Typography.Text variant="m-500">
+                                {titleText} ({items.size})
+                            </Typography.Text>
                         </h4>
                         <button
                             class="upload-box-button"
@@ -172,13 +175,13 @@
                                     <section class="progress-bar u-width-full-line">
                                         <div
                                             class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
-                                            <span class="body-text-2">
+                                            <Typography.Text>
                                                 {text(item.status, key)}
-                                            </span>
+                                            </Typography.Text>
 
-                                            <span class="backup-name">
+                                            <Typography.Caption variant="400">
                                                 {backupName(item, key)}
-                                            </span>
+                                            </Typography.Caption>
                                         </div>
                                         <div
                                             class="progress-bar-container"
@@ -195,7 +198,7 @@
     </div>
 {/if}
 
-<style>
+<style lang="scss">
     .upload-box-title {
         font-size: 11px;
     }
@@ -211,13 +214,17 @@
         justify-content: center;
     }
 
-    .backup-name {
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 130%;
-        font-style: normal;
-        letter-spacing: -0.12px;
-        color: var(--mid-neutrals-50, #818186);
-        font-family: var(--font-family-sansSerif, Inter);
+    .progress-bar-container {
+        height: 4px;
+
+        &::before {
+            height: 4px;
+            background-color: var(--bgcolor-neutral-invert);
+        }
+
+        &.is-danger::before {
+            height: 4px;
+            background-color: var(--bgcolor-error);
+        }
     }
 </style>

src/lib/components/billing/paymentModal.svelte

@@ -77,7 +77,9 @@
 
     <div class="aw-stripe-container" data-private>
         {#if isLoading}
-            <Spinner />
+            <div class="loader-element">
+                <Spinner />
+            </div>
         {/if}
 
         <div class="stripe-element" bind:this={element}>
@@ -99,5 +101,11 @@
         .stripe-element {
             width: 100%;
         }
+
+        .loader-element {
+            width: 100%;
+            align-self: center;
+            justify-items: end;
+        }
     }
 </style>

src/lib/components/billing/selectPaymentMethod.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, InputChoice, InputText } from '$lib/elements/forms';
+    import { Button, InputText } from '$lib/elements/forms';
     import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
     import { hasStripePublicKey, isCloud } from '$lib/system';
     import { onMount } from 'svelte';

src/lib/components/confirm.svelte

@@ -15,6 +15,11 @@
 
     let confirm = false;
     let checkboxId = `delete_${title.replaceAll(' ', '_').toLowerCase()}`;
+
+    // reset checkbox status
+    $: if (open && confirmDeletion) {
+        confirm = false;
+    }
 </script>
 
 <Form isModal {onSubmit}>

src/lib/components/modal.svelte

@@ -7,6 +7,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;
     };
@@ -28,7 +29,7 @@
 </script>
 
 <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}>
@@ -50,3 +51,10 @@
         </svelte:fragment>
     </Modal>
 </Form>
+
+<style>
+    /* temporary fix to modal width */
+    :global(dialog section) {
+        max-width: 100% !important;
+    }
+</style>

src/lib/elements/forms/inputSelectCheckbox.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { DropList } from '$lib/components';
     import { SelectSearchCheckbox } from '..';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconChevronDown, IconChevronUp } from '@appwrite.io/pink-icons-svelte';
 
     type Option = {
         value: string;
@@ -60,16 +62,11 @@
             </ul>
         </div>
 
-        <input
-            class="tags-input-text u-cursor-text"
-            {placeholder}
-            bind:value={search}
-            bind:this={input} />
-        <span
-            class:icon-cheveron-up={show}
-            class:icon-cheveron-down={!show}
-            class="chevron-icon u-position-absolute u-inset-inline-end-12"
-            aria-hidden="true"></span>
+        <div class="input">
+            <input {placeholder} bind:value={search} bind:this={input} />
+
+            <Icon size="m" icon={show ? IconChevronUp : IconChevronDown} />
+        </div>
     </button>
 
     <svelte:fragment slot="list">
@@ -88,13 +85,41 @@
 </DropList>
 
 <style>
-    @media (max-width: 768px) {
-        .chevron-icon {
-            inset-block-start: 0.25rem !important;
-        }
+    .tags-input {
+        width: 100%;
+    }
 
+    @media (max-width: 768px) {
         .tags-input {
             padding-right: 2rem;
         }
     }
+
+    .input {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        transition: all 0.15s ease-in-out;
+        border: var(--border-width-s) solid var(--border-neutral);
+        border-radius: var(--border-radius-s);
+        background-color: var(--p-input-background-color);
+        padding-inline: var(--space-6);
+        outline-offset: calc(var(--border-width-s) * -1);
+        --p-input-background-color: var(--input-background-color, var(--bgcolor-neutral-default));
+    }
+    .input input {
+        inline-size: 100%;
+        padding-block: var(--space-3);
+        padding-inline: 0;
+        border: none;
+        display: block;
+        line-height: 140%;
+        background: none;
+    }
+    .input input::placeholder {
+        color: var(--fgcolor-neutral-tertiary);
+    }
+    .input:focus-within {
+        outline: var(--border-width-l) solid var(--border-focus);
+    }
 </style>

src/lib/elements/forms/inputSwitch.svelte

@@ -8,4 +8,6 @@
     export let description: string = undefined;
 </script>
 
-<Selector.Switch {id} {description} {label} {disabled} bind:checked={value} on:invalid on:change />
+<Selector.Switch {id} {description} {label} {disabled} bind:checked={value} on:invalid on:change>
+    <slot name="description" slot="description" />
+</Selector.Switch>

src/lib/helpers/notifications.ts

@@ -19,7 +19,7 @@ const userPreferences = () => get(user)?.prefs;
 const notificationPrefs = (): Record<string, NotificationPrefItem> => {
     const prefs = userPreferences();
 
-    // due to php backend, empty object can be returnd as an empty array
+    // due to php backend, empty object can be returned as an empty array.
     if (!prefs?.notificationPrefs || Array.isArray(prefs.notificationPrefs)) {
         return {};
     }

src/lib/layout/headerAlert.svelte

@@ -5,18 +5,23 @@
     export let title: string;
     export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
 
-    let container;
+    let container: HTMLElement | null = null;
 
     function setNavigationHeight() {
         const alertHeight = container ? container.getBoundingClientRect().height : 0;
         const header: HTMLHeadingElement = document.querySelector('main > header');
         const sidebar: HTMLElement = document.querySelector('main > div > nav');
+        const contentSection: HTMLElement = document.querySelector('main > div > section');
+
         if (header) {
             header.style.top = `${alertHeight}px`;
         }
         if (sidebar) {
             sidebar.style.top = `${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px`;
         }
+        if (contentSection) {
+            contentSection.style.paddingBlockStart = `${alertHeight}px`;
+        }
     }
 
     onMount(() => {
@@ -30,6 +35,7 @@
 </script>
 
 <svelte:window on:resize={setNavigationHeight} />
+
 <section
     bind:this={container}
     class="alert is-action is-action-and-top-sticky u-sep-block-end"

src/routes/(console)/account/organizations/+page.svelte

@@ -107,7 +107,7 @@
             </svelte:fragment>
         </CardContainer>
     {:else}
-        <Empty single on:click={createOrg}>
+        <Empty single on:click={createOrg} target="organization">
             <p>Create a new organization</p>
         </Empty>
     {/if}

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'
         }
     });
 }

src/routes/(console)/project-[project]/+layout.svelte

@@ -122,6 +122,7 @@
 <style>
     .layout-level-progress-bars {
         gap: 1rem;
+        z-index: 1;
         display: flex;
         flex-direction: column;
 

src/routes/(console)/project-[project]/databases/create.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CustomId, Modal } from '$lib/components';
+    import { CustomId, Modal } from '$lib/components';
     import { Button, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -12,7 +12,7 @@
     import { upgradeURL } from '$lib/stores/billing';
     import CreatePolicy from './database-[database]/backups/createPolicy.svelte';
     import { cronExpression, type UserBackupPolicy } from '$lib/helpers/backups';
-    import { Icon, Tag } from '@appwrite.io/pink-svelte';
+    import { Alert, Icon, Tag } from '@appwrite.io/pink-svelte';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
 
     export let showCreate = false;
@@ -122,33 +122,30 @@
                 }}><Icon icon={IconPencil} /> Database ID</Tag>
         </div>
     {/if}
+
     <CustomId bind:show={showCustomId} name="Database" bind:id autofocus={false} />
 
     {#if isCloud}
-        <div class="u-flex-vertical u-gap-24 u-padding-block-start-24">
-            {#if $organization?.billingPlan === BillingPlan.FREE}
-                {#if showPlanUpgradeAlert}
-                    <Alert
-                        type="warning"
-                        dismissible
-                        on:dismiss={() => (showPlanUpgradeAlert = false)}>
-                        <svelte:fragment slot="title">
-                            This database won't be backed up
-                        </svelte:fragment>
-                        Upgrade your plan to ensure your data stays safe and backed up.
-                        <svelte:fragment slot="buttons">
-                            <Button href={$upgradeURL} text>Upgrade plan</Button>
-                        </svelte:fragment>
-                    </Alert>
-                {/if}
-            {:else}
-                <CreatePolicy
-                    bind:totalPolicies
-                    bind:isShowing={showCreate}
-                    title="Backup policies"
-                    subtitle="Protect your data and ensure quick recovery by adding backup policies." />
+        {#if $organization?.billingPlan === BillingPlan.FREE}
+            {#if showPlanUpgradeAlert}
+                <Alert.Inline
+                    dismissible
+                    title="This database won't be backed up"
+                    status="warning"
+                    on:dismiss={() => (showPlanUpgradeAlert = false)}>
+                    Upgrade your plan to ensure your data stays safe and backed up.
+                    <svelte:fragment slot="actions">
+                        <Button compact href={$upgradeURL}>Upgrade plan</Button>
+                    </svelte:fragment>
+                </Alert.Inline>
             {/if}
-        </div>
+        {:else}
+            <CreatePolicy
+                bind:totalPolicies
+                bind:isShowing={showCreate}
+                title="Backup policies"
+                subtitle="Protect your data and ensure quick recovery by adding backup policies." />
+        {/if}
     {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>