Merge pull request #1921 from appwrite/fix-coupon-banner

Fix: coupon banner!

src/lib/components/billing/alerts/newDevUpgradePro.svelte

@@ -7,6 +7,8 @@
     import { organization } from '$lib/stores/organization';
     import { activeHeaderAlert } from '$routes/(console)/store';
     import GradientBanner from '../gradientBanner.svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     let show = true;
 
@@ -23,8 +25,13 @@
 
 {#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !page.url.pathname.includes('/console/account')}
     <GradientBanner on:close={handleClose}>
-        <div class="u-flex u-gap-24 u-main-center u-cross-center u-flex-vertical-mobile">
-            <span class="body-text-1">Get $50 Cloud credits for Appwrite Pro.</span>
+        <Layout.Stack
+            gap="m"
+            alignItems="center"
+            alignContent="center"
+            direction={$isSmallViewport ? 'column' : 'row'}>
+            <Typography.Text>Get $50 Cloud credits for Appwrite Pro.</Typography.Text>
+
             <Button
                 secondary
                 fullWidthMobile
@@ -39,6 +46,6 @@
                 }}>
                 Claim credits
             </Button>
-        </div>
+        </Layout.Stack>
     </GradientBanner>
 {/if}

src/lib/components/billing/gradientBanner.svelte

@@ -1,11 +1,41 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { createEventDispatcher } from 'svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
+    import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+    import { Button } from '$lib/elements/forms';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
 
+    let container: HTMLElement;
     const dispatch = createEventDispatcher();
+
+    const queryLayoutElements = () => ({
+        header: document.querySelector<HTMLElement>('main > header'),
+        sidebar: document.querySelector<HTMLElement>('main > div > nav'),
+        content: document.querySelector<HTMLElement>('main > div > section')
+    });
+
+    const setNavigationHeight = () => {
+        const alertHeight = container?.getBoundingClientRect()?.height || 0;
+        const { header, sidebar, content } = queryLayoutElements();
+        const headerHeight = header?.getBoundingClientRect().height || 0;
+        const offset = alertHeight + (!isTabletViewport && header ? headerHeight : 0);
+
+        if (header) header.style.top = `${alertHeight}px`;
+        if (sidebar) {
+            sidebar.style.top = `${offset}px`;
+            sidebar.style.height = `calc(100vh - ${offset}px)`;
+        }
+        if (content) content.style.paddingBlockStart = `${alertHeight}px`;
+    };
+
+    onMount(setNavigationHeight);
+    onDestroy(setNavigationHeight);
 </script>
 
-<div class="top-banner">
+<svelte:window on:resize={setNavigationHeight} />
+
+<div bind:this={container} class="top-banner alert is-action is-action-and-top-sticky">
     <div class="top-banner-bg">
         <div class="top-banner-bg-1">
             <img
@@ -22,14 +52,28 @@
                 alt="" />
         </div>
     </div>
+
     <div class="top-banner-content u-color-text-primary">
         <slot />
     </div>
-    <button
-        on:click|preventDefault={() => dispatch('close')}
-        type="button"
-        class="top-banner-button"
-        aria-label="close upgrade message">
-        <span class="icon-x" aria-hidden="true"></span>
-    </button>
+
+    <Button icon extraCompact class="top-banner-button position" on:click={() => dispatch('close')}>
+        <Icon icon={IconX} size="s" />
+    </Button>
 </div>
+
+<style>
+    .alert {
+        top: 0;
+        width: 100%;
+        z-index: 100;
+        position: fixed;
+    }
+
+    @media (max-width: 768px) {
+        :global(.top-banner-button.position) {
+            position: absolute;
+            padding-block-end: 3.7625rem;
+        }
+    }
+</style>

src/lib/elements/forms/button.svelte

@@ -124,3 +124,18 @@
         <slot slot="end" name="end" />
     </Button.Button>
 {/if}
+
+<!-- built-in classes don't seem to work -->
+<style lang="scss">
+    :global {
+        .is-full-width {
+            width: 100% !important;
+        }
+
+        @media (max-width: 768px) {
+            .is-full-width-mobile {
+                width: 100% !important;
+            }
+        }
+    }
+</style>