Include beta indicator on Appwrite Cloud #574

stnguyen90 · 2023-10-04T00:29:44Z

What does this PR do?

To help emphasize Appwrite Cloud is still in beta

Test Plan

Cloud

Navbar Desktop

Navbar Mobile

Sign In Desktop

Sign In Mobile

Self-hosted

Navbar

Login

Related PRs and Issues

None

Have you read the Contributing Guidelines on issues?

Yes

vercel · 2023-10-04T00:29:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 5, 2023 9:27pm
console-cloud	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 5, 2023 9:27pm
console-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 5, 2023 9:27pm
console-preview-cloud	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 5, 2023 9:27pm

stnguyen90 · 2023-10-04T00:30:48Z

src/lib/layout/unauthenticated.svelte

@@ -127,4 +131,50 @@
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
+
+    .aw-eyebrow {
+        font-family: 'Source Code Pro';


We don't have Aeonik Fono in the Console. Is that okay?

yes, we actually decided to use the operating systems font for monospace

I added a fallback for monospace.

stnguyen90 · 2023-10-04T00:31:24Z

src/lib/layout/unauthenticated.svelte

+        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);


The shadow on the website is black, but in the design is pinkish. Which should I follow?

Shadows might be tricky, I'd use what we have and create a task for fixing this one we do the porting to the new colors in pink

I'd use what we have

@ArmanNik, what do you mean?

I tried using the shadow-large class, but it didn't add much of a shadow and it looked different than the design.

I'd personally say following the design is more important. Does using inspect on Figma (in dev mode) return a box-shadow property for you? If so, you can use that directly while Pink/Console is not updated

I'd personally say following the design is more important. Does using inspect on Figma (in dev mode) return a box-shadow property for you? If so, you can use that directly while Pink/Console is not updated

@TGlide the design doesn't use a box shadow. it uses extra divs and hard-coded sizes. I've been fiddling with the CSS for a few hours and made no progress so I'm thinking it might be better to leave as is for now and revisit when the website is updated. Then, we can update it in the Console. How does that sound?

stnguyen90 · 2023-10-04T00:32:07Z

src/lib/layout/header.svelte

@@ -74,6 +75,11 @@
        height="22"
        alt="Appwrite" />
 </a>
+{#if isCloud}
+    <div class="tag eyebrow-heading-3">
+        <span class="text u-x-small">Beta</span>


From what we have in pink, this seems like the smallest this element can get, but it doesn't match the design. How can I make it smaller?

you could do something like style:font-size="0.5rem!important" and try to match the design

Changing the font size didn't automatically adjust the size of the tag or margins so I had to tweak those manually.

eldadfux · 2023-10-04T17:19:17Z

@stnguyen90 I can't login, how does all of that look on mobile?

stnguyen90 · 2023-10-04T18:34:13Z

@eldadfux I've added screenshots of mobile.

ArmanNik · 2023-10-05T19:03:33Z

src/lib/layout/header.svelte

+            style="--p-tag-height: 25px; --p-tag-content-height: 18px;">
+            <span class="text u-x-small" style="margin-block: 3.5px; font-weight: 500">Beta</span>


We should probably use rems if possible so it can scale with the users' base size.
Also I would add padding to the tag rather than margin to the text 🤔

ArmanNik · 2023-10-05T19:05:04Z

src/lib/layout/unauthenticated.svelte

+        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);


Shadows might be tricky, I'd use what we have and create a task for fixing this one we do the porting to the new colors in pink

vercel bot deployed to Preview – console October 4, 2023 00:30 View deployment

stnguyen90 commented Oct 4, 2023

View reviewed changes

stnguyen90 requested review from eldadfux and TorstenDittmann October 4, 2023 00:32

eldadfux approved these changes Oct 4, 2023

View reviewed changes

stnguyen90 force-pushed the feat-beta-navbar branch from 6ae493b to d5067ab Compare October 4, 2023 18:32

vercel bot deployed to Preview – console-preview October 4, 2023 18:34 View deployment

vercel bot deployed to Preview – console-preview-cloud October 4, 2023 18:35 View deployment

vercel bot deployed to Preview – console-cloud October 4, 2023 18:36 View deployment

vercel bot deployed to Preview – console October 4, 2023 18:38 View deployment

stnguyen90 requested review from TGlide and ArmanNik October 5, 2023 18:58

ArmanNik reviewed Oct 5, 2023

View reviewed changes

stnguyen90 added 2 commits October 5, 2023 14:22

Update navbar to include Beta tag for cloud

cf067b3

Update login page to include cloud beta tag

7d1f98d

stnguyen90 force-pushed the feat-beta-navbar branch from d5067ab to 7d1f98d Compare October 5, 2023 21:22

stnguyen90 requested a review from ArmanNik October 5, 2023 21:22

vercel bot deployed to Preview – console-preview-cloud October 5, 2023 21:23 View deployment

vercel bot deployed to Preview – console October 5, 2023 21:25 View deployment

vercel bot deployed to Preview – console-preview October 5, 2023 21:26 View deployment

vercel bot deployed to Preview – console-cloud October 5, 2023 21:27 View deployment

ArmanNik approved these changes Oct 6, 2023

View reviewed changes

TorstenDittmann merged commit 2f47e4e into main Oct 9, 2023
2 checks passed

TorstenDittmann deleted the feat-beta-navbar branch October 9, 2023 10:12

This was referenced Nov 1, 2023

PRs Closed in October 2023 appwrite/.github#92

Closed

PRs Opened in October 2023 appwrite/.github#93

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Include beta indicator on Appwrite Cloud #574

Include beta indicator on Appwrite Cloud #574

stnguyen90 commented Oct 4, 2023 •

edited

Loading

vercel bot commented Oct 4, 2023 •

edited

Loading

stnguyen90 Oct 4, 2023

TorstenDittmann Oct 4, 2023

stnguyen90 Oct 4, 2023

stnguyen90 Oct 4, 2023

ArmanNik Oct 5, 2023

stnguyen90 Oct 5, 2023

stnguyen90 Oct 5, 2023

TGlide Oct 6, 2023

stnguyen90 Oct 6, 2023

stnguyen90 Oct 4, 2023

TorstenDittmann Oct 4, 2023

stnguyen90 Oct 4, 2023

eldadfux commented Oct 4, 2023

stnguyen90 commented Oct 4, 2023

ArmanNik Oct 5, 2023

stnguyen90 Oct 5, 2023

ArmanNik Oct 5, 2023

		style="--p-tag-height: 25px; --p-tag-content-height: 18px;">
		<span class="text u-x-small" style="margin-block: 3.5px; font-weight: 500">Beta</span>

Include beta indicator on Appwrite Cloud #574

Include beta indicator on Appwrite Cloud #574

Conversation

stnguyen90 commented Oct 4, 2023 • edited Loading

What does this PR do?

Test Plan

Cloud

Navbar Desktop

Navbar Mobile

Sign In Desktop

Sign In Mobile

Self-hosted

Navbar

Login

Related PRs and Issues

Have you read the Contributing Guidelines on issues?

vercel bot commented Oct 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eldadfux commented Oct 4, 2023

stnguyen90 commented Oct 4, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stnguyen90 commented Oct 4, 2023 •

edited

Loading

vercel bot commented Oct 4, 2023 •

edited

Loading