Skip to content

Include beta indicator on Appwrite Cloud #574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TorstenDittmann merged 2 commits into from
Oct 9, 2023
Merged

Include beta indicator on Appwrite Cloud #574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf067b3
Update navbar to include Beta tag for cloud
stnguyen90 Oct 4, 2023
7d1f98d
Update login page to include cloud beta tag
stnguyen90 Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 20 additions & 9 deletions src/lib/layout/header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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} />
Expand Down
54 changes: 52 additions & 2 deletions src/lib/layout/unauthenticated.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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" />
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
Comment on lines +161 to +166
Copy link
Contributor Author

@stnguyen90 stnguyen90 Oct 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@ArmanNik ArmanNik Oct 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@stnguyen90 stnguyen90 Oct 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd use what we have

@ArmanNik, what do you mean?

Copy link
Contributor Author

@stnguyen90 stnguyen90 Oct 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@TGlide TGlide Oct 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@stnguyen90 stnguyen90 Oct 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?


: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>