From cf067b3b816995d03cdf6766d49e9c581ef5a414 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 3 Oct 2023 17:20:34 -0700
Subject: [PATCH 1/2] Update navbar to include Beta tag for cloud

---
 src/lib/layout/header.svelte | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 5f3b24cbc6..ecf632a7f6 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -19,6 +19,7 @@
     import { newOrgModal, organization, organizationList } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
+    import { isCloud } from '$lib/system';
     import { slide } from 'svelte/transition';
 
     let showDropdown = false;
@@ -65,15 +66,25 @@
 
 <svelte:window on:click={onBlur} />
 
-<a
-    class="logo"
-    href={$organization ? `${base}/console/organization-${$organization.$id}` : `${base}/console`}>
-    <img
-        src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
-        width="120"
-        height="22"
-        alt="Appwrite" />
-</a>
+<div class="logo u-inline-flex u-gap-16 u-cross-center">
+    <a
+        href={$organization
+            ? `${base}/console/organization-${$organization.$id}`
+            : `${base}/console`}>
+        <img
+            src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
+            width="120"
+            height="22"
+            alt="Appwrite" />
+    </a>
+    {#if isCloud}
+        <div
+            class="tag eyebrow-heading-3"
+            style="--p-tag-height: 1.785rem; --p-tag-content-height: 1.15rem; padding-block: 0.25rem;">
+            <span class="text u-x-small" style="font-weight: 500">Beta</span>
+        </div>
+    {/if}
+</div>
 
 {#if $page.data.breadcrumbs}
     <svelte:component this={$page.data.breadcrumbs} />

From 7d1f98d0e519bc8ebb4a41ec6800d9d11a2d44aa Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 3 Oct 2023 17:21:05 -0700
Subject: [PATCH 2/2] Update login page to include cloud beta tag

---
 src/lib/layout/unauthenticated.svelte | 54 ++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 56917a6448..661c49be3b 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -5,6 +5,7 @@
     import LoginLight from '$lib/images/login/login-light-mode.png';
     import { app } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
+    import { isCloud } from '$lib/system';
 
     export let imgLight = LoginLight;
     export let imgDark = LoginDark;
@@ -14,7 +15,7 @@
     <section
         class="u-flex u-flex-vertical"
         style:--url={`url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
-        <div class="logo">
+        <div class="logo u-flex u-gap-16">
             <a href={user ? '/console' : '/'}>
                 {#if $app.themeInUse === 'dark'}
                     <img
@@ -30,6 +31,9 @@
                         alt="Appwrite Logo" />
                 {/if}
             </a>
+            {#if isCloud}
+                <span class="aw-badges aw-eyebrow">Cloud Beta</span>
+            {/if}
         </div>
 
         <div class="u-flex u-stretch" />
@@ -76,7 +80,7 @@
             font-weight: 400;
             line-height: 100%; /* 80px */
             letter-spacing: -1.6px;
-            backdrop-filter: blur(8px);
+            backdrop-filter: blur(0.5 rem);
             .underscore {
                 -webkit-text-fill-color: #f02e65;
             }
@@ -127,4 +131,50 @@
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }
+
+    .aw-eyebrow {
+        font-family: 'Source Code Pro', monospace;
+        line-height: 0.9rem;
+        font-size: 0.78rem;
+        letter-spacing: 0.08em;
+        font-weight: 400;
+        text-transform: uppercase;
+    }
+
+    .aw-badges {
+        --p-badges-shadow-bg-color: #f2c8d6;
+        --p-badges-shadow-border-color: #f69db7;
+        --p-badges-shadowopacity: 0.4;
+        align-self: center;
+        color: hsl(var(--color-neutral-0));
+        padding-block: 0.375rem;
+        padding-inline: 0.75rem;
+        border-radius: 0.375rem;
+        background: radial-gradient(
+            98.13% 199.7% at 98.13% 100%,
+            #fe6947 0%,
+            #fd366e 41.6%,
+            #fd366e 100%
+        );
+        -webkit-backdrop-filter: blur(2.5rem);
+        backdrop-filter: blur(2.5rem);
+        box-shadow:
+            0.1875rem 0.1875rem var(--p-badges-shadow-bg-color),
+            0.25rem 0.1875rem var(--p-badges-shadow-border-color),
+            0.1875rem 0.25rem var(--p-badges-shadow-border-color),
+            0.125rem 0.1875rem var(--p-badges-shadow-border-color),
+            0.1875rem 0.125rem var(--p-badges-shadow-border-color);
+
+        :global(.theme-dark) & {
+            --p-badges-shadow-bg-color: #2c2c2f;
+            --p-badges-shadow-border-color: #39393c;
+            --p-badges-shadowopacity: 0.13;
+        }
+
+        :global(.theme-light) & {
+            --p-badges-shadow-bg-color: #f2c8d6;
+            --p-badges-shadow-border-color: #f69db7;
+            --p-badges-shadowopacity: 0.4;
+        }
+    }
 </style>