update: locked content.

src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte

@@ -3,7 +3,7 @@
     import { Container } from '$lib/layout';
     import ContainerHeader from './containerHeader.svelte';
     import BackupPolicy from './policy.svelte';
-    import UpgradeCard from './upgradeCard.svelte';
+    import LockedCard from './locked.svelte';
     import Table from './table.svelte';
     import type { PageData } from './$types';
     import CreatePolicy from './createPolicy.svelte';
@@ -14,22 +14,12 @@
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { isCloud, isSelfHosted } from '$lib/system';
     import { organization } from '$lib/stores/organization';
-    import { app } from '$lib/stores/app';
     import { onMount } from 'svelte';
     import { feedback } from '$lib/stores/feedback';
     import { cronExpression, type UserBackupPolicy } from '$lib/helpers/backups';
     import { ID } from '@appwrite.io/console';
     import { showCreateBackup, showCreatePolicy } from './store';
 
-    import LockedBackupsDarkDesktop from '$lib/images/backups/empty/backups-dark.png';
-    import LockedBackupsLightDesktop from '$lib/images/backups/empty/backups-light.png';
-
-    import LockedBackupsDarkMobile from '$lib/images/backups/empty/backups-mobile-dark.png';
-    import LockedBackupsLightMobile from '$lib/images/backups/empty/backups-mobile-light.png';
-
-    import LockedBackupsDarkTablet from '$lib/images/backups/empty/backups-tablet-dark.png';
-    import LockedBackupsLightTablet from '$lib/images/backups/empty/backups-tablet-light.png';
-
     let policyCreateError: string;
     let totalPolicies: UserBackupPolicy[] = [];
     let isDisabled = isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE);
@@ -188,34 +178,7 @@
             </div>
         {:else}
             <div class="u-flex-vertical u-gap-32">
-                <UpgradeCard />
-
-                <img
-                    class="is-not-mobile"
-                    src={$app.themeInUse === 'dark'
-                        ? LockedBackupsDarkDesktop
-                        : LockedBackupsLightDesktop}
-                    alt="create"
-                    aria-hidden="true"
-                    style="opacity: 0.5" />
-
-                <img
-                    class="is-tablet"
-                    src={$app.themeInUse === 'dark'
-                        ? LockedBackupsDarkTablet
-                        : LockedBackupsLightTablet}
-                    alt="create"
-                    aria-hidden="true"
-                    style="opacity: 0.5" />
-
-                <img
-                    class="is-only-mobile"
-                    src={$app.themeInUse === 'dark'
-                        ? LockedBackupsDarkMobile
-                        : LockedBackupsLightMobile}
-                    alt="create"
-                    aria-hidden="true"
-                    style="opacity: 0.5" />
+                <LockedCard />
             </div>
         {/if}
     </div>
@@ -254,23 +217,9 @@
         align-content: center;
     }
 
-    .is-tablet {
-        display: none;
-    }
-
     @media (min-width: 768px) {
         .policies-holder-card {
             max-width: 21.5rem;
         }
     }
-
-    @media (min-width: 525px) and (max-width: 768px) {
-        .is-tablet {
-            display: block;
-        }
-
-        .is-only-mobile {
-            display: none !important;
-        }
-    }
 </style>

src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte

@@ -12,7 +12,9 @@
 </script>
 
 <header class:u-flex={isFlex} class="u-gap-12 common-section u-main-space-between u-flex-wrap">
-    <div class="u-flex u-cross-child-center u-cross-center u-gap-16">
+    <div
+        class="u-flex u-cross-child-center u-cross-center u-gap-16"
+        class:is-disabled={buttonDisabled}>
         <div class="body-text-1 u-bold backups-title">{title}</div>
     </div>
 

src/routes/(console)/project-[project]/databases/database-[database]/backups/locked.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+    import ContainerHeader from './containerHeader.svelte';
+    import UpgradeCard from './upgradeCard.svelte';
+    import { app } from '$lib/stores/app';
+
+    import LockedBackupsDarkDesktop from '$lib/images/backups/empty/backups-dark.png';
+    import LockedBackupsLightDesktop from '$lib/images/backups/empty/backups-light.png';
+
+    import LockedBackupsDarkMobile from '$lib/images/backups/empty/backups-mobile-dark.png';
+    import LockedBackupsLightMobile from '$lib/images/backups/empty/backups-mobile-light.png';
+
+    import LockedBackupsDarkTablet from '$lib/images/backups/empty/backups-tablet-dark.png';
+    import LockedBackupsLightTablet from '$lib/images/backups/empty/backups-tablet-light.png';
+</script>
+
+<div class="u-flex-vertical u-gap-32">
+    <UpgradeCard />
+
+    <div style="opacity: 0.25;">
+        <!-- mobile, only policies are shown -->
+        <div class="is-only-mobile u-flex-vertical u-gap-16">
+            <ContainerHeader
+                title="Policies"
+                buttonText="Create policy"
+                buttonType="secondary"
+                buttonDisabled={true} />
+
+            <img
+                src={$app.themeInUse === 'dark'
+                    ? LockedBackupsDarkMobile
+                    : LockedBackupsLightMobile}
+                alt="create"
+                aria-hidden="true" />
+        </div>
+
+        <!-- tablet, only policies are shown but bigger table-->
+        <div class="is-tablet u-flex-vertical u-gap-16 u-width-full-line">
+            <ContainerHeader
+                title="Policies"
+                buttonText="Create policy"
+                buttonType="secondary"
+                buttonDisabled={true} />
+
+            <img
+                src={$app.themeInUse === 'dark'
+                    ? LockedBackupsDarkTablet
+                    : LockedBackupsLightTablet}
+                alt="create"
+                aria-hidden="true" />
+        </div>
+
+        <div class="is-desktop u-flex-vertical u-gap-16">
+            <div class="desktop-locked-card-buttons u-flex u-gap-24">
+                <div style="width: 31%">
+                    <ContainerHeader
+                        title="Policies"
+                        buttonText="Create policy"
+                        buttonType="secondary"
+                        buttonDisabled={true} />
+                </div>
+
+                <div style="width: 69%; padding-inline-start: 1.5rem;">
+                    <ContainerHeader
+                        title="Backups"
+                        buttonText="Manual backup"
+                        buttonType="secondary"
+                        buttonDisabled={true} />
+                </div>
+            </div>
+
+            <img
+                src={$app.themeInUse === 'dark'
+                    ? LockedBackupsDarkDesktop
+                    : LockedBackupsLightDesktop}
+                alt="create"
+                aria-hidden="true" />
+        </div>
+    </div>
+</div>
+
+<style>
+    .is-tablet {
+        display: none;
+    }
+
+    :global(.desktop-locked-card-buttons .common-section) {
+        margin-block-start: unset !important;
+    }
+
+    @media (max-width: 524px) {
+        .is-tablet,
+        .is-desktop {
+            height: 0;
+            visibility: hidden;
+            display: none !important;
+        }
+    }
+
+    @media (min-width: 525px) and (max-width: 799.99px) {
+        .is-tablet {
+            display: block;
+        }
+
+        .is-desktop,
+        .is-only-mobile {
+            height: 0;
+            visibility: hidden;
+            display: none !important;
+        }
+    }
+
+    @media (min-width: 800px) {
+        .is-desktop {
+            display: block !important;
+        }
+
+        .is-tablet,
+        .is-only-mobile {
+            height: 0;
+            visibility: hidden;
+            display: none !important;
+        }
+    }
+</style>