mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Merge pull request #8 from appwrite-labs/fix-rebrand-css
Updated based on QA
This commit is contained in:
Eldad A. Fux
GitHub
+1
-1
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logos/appwrite-icon.svg" />
|
||||
<link
|
||||
rel="preload"
|
||||
href="/fonts/inter/inter-v8-latin-600.woff2"
|
||||
|
||||
@@ -381,9 +381,9 @@
|
||||
}
|
||||
|
||||
:global(.theme-dark) .card {
|
||||
--cmd-center-bg: rgba(27, 27, 40, 0.8);
|
||||
--cmd-center-bg: hsl(var(--color-neutral-100-new));
|
||||
--cmd-center-border: hsl(var(--color-neutral-150));
|
||||
--cmd-center-shadow: 0px 16px 32px 0px #14141f;
|
||||
--cmd-center-shadow: 0px 16px 32px 0px hsl(var(--color-neutral-110-new));
|
||||
|
||||
--kbd-bg: hsl(var(--color-neutral-150));
|
||||
|
||||
@@ -391,7 +391,11 @@
|
||||
--crumb-color: hsl(var(--color-neutral-30));
|
||||
|
||||
--result-bg: hsl(var(--color-neutral-200));
|
||||
--footer-bg: linear-gradient(180deg, #1b1b28 0%, #282a3b 100%);
|
||||
--footer-bg: linear-gradient(
|
||||
180deg,
|
||||
hsl(var(--color-neutral-100-new)) 0%,
|
||||
hsl(var(--color-neutral-85-new)) 100%
|
||||
);
|
||||
|
||||
--icon-color: hsl(var(--color-neutral-70));
|
||||
--label-color: hsl(var(--color-neutral-30));
|
||||
|
||||
@@ -2,13 +2,14 @@
|
||||
export let size: number;
|
||||
export let src: string;
|
||||
export let name: string;
|
||||
export let color: string;
|
||||
</script>
|
||||
|
||||
<img
|
||||
width={size}
|
||||
height={size}
|
||||
class="avatar"
|
||||
style="--size: {size / 16}rem"
|
||||
style="--size: {size / 16}rem; background-color: {color};"
|
||||
{src}
|
||||
title={name}
|
||||
alt={name} />
|
||||
|
||||
@@ -5,8 +5,9 @@
|
||||
export let name: string;
|
||||
export let size: number;
|
||||
export let background: string | undefined = undefined;
|
||||
export let color: string = 'black';
|
||||
|
||||
$: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background).toString();
|
||||
</script>
|
||||
|
||||
<Avatar {name} {size} {src} />
|
||||
<Avatar {name} {size} {src} {color} />
|
||||
|
||||
@@ -29,14 +29,9 @@
|
||||
on:click={track}
|
||||
aria-label={`create {target}`}>
|
||||
{#if $app.themeInUse === 'dark'}
|
||||
<img src={EmptyDark} alt="create" aria-hidden="true" height="124" width="215" />
|
||||
<img src={EmptyDark} alt="create" aria-hidden="true" width="376" />
|
||||
{:else}
|
||||
<img
|
||||
src={EmptyLight}
|
||||
alt="create"
|
||||
aria-hidden="true"
|
||||
height="124"
|
||||
width="215" />
|
||||
<img src={EmptyLight} alt="create" aria-hidden="true" width="376" />
|
||||
{/if}
|
||||
</button>
|
||||
<slot>
|
||||
|
||||
@@ -77,17 +77,3 @@
|
||||
<slot />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.is-github {
|
||||
background-color: #373b4d;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color: #373b4d, $amount: 2.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color: #373b4d, $amount: 5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 9.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 16 KiB |
@@ -19,7 +19,6 @@
|
||||
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;
|
||||
@@ -96,7 +95,7 @@
|
||||
</svelte:fragment>
|
||||
</DropList>
|
||||
<a
|
||||
href="https://appwrite.io/support"
|
||||
href="https://github.com/appwrite/appwrite/issues/new/choose"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="button is-small is-text">
|
||||
@@ -225,81 +224,9 @@
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
{#if isCloud}
|
||||
<section class="drop-section">
|
||||
<a
|
||||
class="claim"
|
||||
title="Gradient Border"
|
||||
href="/card"
|
||||
data-sveltekit-reload>
|
||||
Claim your Cloud card
|
||||
</a>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.claim {
|
||||
display: block;
|
||||
background-image: linear-gradient(90deg, #fd7f34, #bd155b);
|
||||
|
||||
padding: 0.6875rem 0.625rem;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #ffffff;
|
||||
|
||||
transition: 150ms ease;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
background: linear-gradient(
|
||||
113.48deg,
|
||||
#3b3b4eaa -15.8%,
|
||||
rgba(255, 255, 255, 0.7) 27.72%,
|
||||
#3b3b4eaa 109.47%
|
||||
);
|
||||
z-index: -2;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #1b1b28 0%, #272739 62.73%, #c81b4c 136.87%);
|
||||
z-index: -1;
|
||||
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,28 +5,12 @@
|
||||
import LoginLight from '$lib/images/login/login-light-mode.png';
|
||||
import { app } from '$lib/stores/app';
|
||||
import { user } from '$lib/stores/user';
|
||||
import { onDestroy } from 'svelte';
|
||||
|
||||
export let imgLight = LoginLight;
|
||||
export let imgDark = LoginDark;
|
||||
|
||||
let innerWidth = 0;
|
||||
$: isMobile = innerWidth < 768;
|
||||
|
||||
const prevTheme = $app.theme;
|
||||
$: if (isMobile) {
|
||||
$app.theme = 'dark';
|
||||
} else {
|
||||
$app.theme = prevTheme;
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
$app.theme = prevTheme;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<main class="grid-1-1 is-full-page" id="main">
|
||||
<section
|
||||
class="u-flex u-flex-vertical"
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
In order to continue, set the following record on your DNS provider. DNS records may
|
||||
take up to 48 hours to propagate. Please retry over the next 48 hours, but if
|
||||
verification still fails, please <a
|
||||
href="https://appwrite.io/support"
|
||||
href="https://github.com/appwrite/appwrite/issues/new/choose"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">contact support</a
|
||||
>.
|
||||
@@ -80,7 +80,7 @@
|
||||
In order to continue, set the following record on your DNS provider. DNS records may
|
||||
take up to 48 hours to propagate. Please retry over the next 48 hours, but if
|
||||
verification still fails, please <a
|
||||
href="https://appwrite.io/support"
|
||||
href="https://github.com/appwrite/appwrite/issues/new/choose"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">contact support</a
|
||||
>.
|
||||
|
||||
@@ -135,6 +135,7 @@
|
||||
<Progress />
|
||||
|
||||
<style lang="scss" global>
|
||||
@import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
|
||||
.tippy-box {
|
||||
--p-tooltip-text-color: var(--color-neutral-10);
|
||||
--p-tooltip--bg-color: var(--color-neutral-100);
|
||||
@@ -225,6 +226,7 @@
|
||||
--color-neutral-85-new: 240 4% 18%; /* #2D2D31 */
|
||||
--color-neutral-90-new: 240 7% 12%; /* #1D1D21 */
|
||||
--color-neutral-100-new: 240 6% 10%; /* #19191C */
|
||||
--color-neutral-110-new: 240 5% 8%; /* #141416 */
|
||||
|
||||
--color-neutral-0: var(--color-neutral-0-new);
|
||||
--color-neutral-5: var(--color-neutral-5-new);
|
||||
@@ -240,7 +242,7 @@
|
||||
--color-neutral-200: var(--color-neutral-85-new);
|
||||
--color-neutral-300: var(--color-neutral-90-new);
|
||||
--color-neutral-400: var(--color-neutral-100-new);
|
||||
--color-neutral-500: var(--color-neutral-100-new);
|
||||
--color-neutral-500: var(--color-neutral-110-new);
|
||||
|
||||
// --color-neutral-0: 0 0% 100%; /* #ffffff */
|
||||
// --color-neutral-5: 240 11% 98%; /* #FAFAFB */
|
||||
@@ -258,7 +260,39 @@
|
||||
// --color-neutral-100: 240 6% 10%; /* #19191C */
|
||||
}
|
||||
|
||||
.theme-dark .modal::backdrop {
|
||||
background-color: hsl(240 5% 8% / 0.6);
|
||||
}
|
||||
|
||||
.theme-dark .card-header {
|
||||
background: var(--url) #18181b;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
}
|
||||
.theme-light .card-header {
|
||||
background-color: #fbfbfc;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
}
|
||||
|
||||
.theme-dark .card {
|
||||
--p-card-bg-color: var(--color-neutral-100-new);
|
||||
}
|
||||
|
||||
.is-cloud {
|
||||
--heading-font: 'Aeonik Pro', arial, sans-serif;
|
||||
.heading-level {
|
||||
@media #{$break3open} {
|
||||
&-1,
|
||||
&-2,
|
||||
&-3,
|
||||
&-4,
|
||||
&-5,
|
||||
&-6,
|
||||
&-7 {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
{
|
||||
label: 'Contact support',
|
||||
callback: () => {
|
||||
window.open('https://appwrite.io/support', '_blank');
|
||||
window.open('https://github.com/appwrite/appwrite/issues/new/choose', '_blank');
|
||||
},
|
||||
group: 'help',
|
||||
icon: 'question-mark-circle'
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 61 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 64 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 61 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 63 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 53 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 55 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 52 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 55 KiB |
@@ -1,11 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { addPlatform, Platform } from './platforms/+page.svelte';
|
||||
import OnboardDarkIntro from './intro-dark.png';
|
||||
import OnboardDark1 from './onboard-1-dark.svg';
|
||||
import OnboardDark2 from './onboard-2-dark.svg';
|
||||
import OnboardLightIntro from './intro-light.png';
|
||||
import OnboardLight1 from './onboard-1-light.svg';
|
||||
import OnboardLight2 from './onboard-2-light.svg';
|
||||
import OnboardDark1Desktop from './onboard-1-dark-desktop.svg';
|
||||
import OnboardDark1Mobile from './onboard-1-dark-mobile.svg';
|
||||
import OnboardLight1Desktop from './onboard-1-light-desktop.svg';
|
||||
import OnboardLight1Mobile from './onboard-1-light-mobile.svg';
|
||||
import OnboardDark2Desktop from './onboard-2-dark-desktop.svg';
|
||||
import OnboardDark2Mobile from './onboard-2-dark-mobile.svg';
|
||||
import OnboardLight2Desktop from './onboard-2-light-desktop.svg';
|
||||
import OnboardLight2Mobile from './onboard-2-light-mobile.svg';
|
||||
import { app } from '$lib/stores/app';
|
||||
import { wizard } from '$lib/stores/wizard';
|
||||
import Wizard from './keys/wizard.svelte';
|
||||
@@ -40,8 +44,12 @@
|
||||
}
|
||||
|
||||
$: onBoardIntro = $app.themeInUse === 'dark' ? OnboardDarkIntro : OnboardLightIntro;
|
||||
$: onBoardImage1 = $app.themeInUse === 'dark' ? OnboardDark1 : OnboardLight1;
|
||||
$: onBoardImage2 = $app.themeInUse === 'dark' ? OnboardDark2 : OnboardLight2;
|
||||
$: onBoardImage1Mobile = $app.themeInUse === 'dark' ? OnboardDark1Mobile : OnboardLight1Mobile;
|
||||
$: onBoardImage1Desktop =
|
||||
$app.themeInUse === 'dark' ? OnboardDark1Desktop : OnboardLight1Desktop;
|
||||
$: onBoardImage2Mobile = $app.themeInUse === 'dark' ? OnboardDark2Mobile : OnboardLight2Mobile;
|
||||
$: onBoardImage2Desktop =
|
||||
$app.themeInUse === 'dark' ? OnboardDark2Desktop : OnboardLight2Desktop;
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
@@ -142,53 +150,57 @@
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<article
|
||||
class="card u-grid u-width-full-line common-section onboard-cover"
|
||||
style={`background-image: url(${onBoardImage1}); box-shadow: none !important`}>
|
||||
<div class="u-flex u-flex-vertical u-cross-center">
|
||||
<div class="avatar">
|
||||
<i class="icon-lock-closed" />
|
||||
</div>
|
||||
<div class="common-section">
|
||||
<h7 class="heading-level-7">Add a platform to view data about your project</h7>
|
||||
</div>
|
||||
<div class="u-margin-block-start-16 u-text-center" style:max-width="550px">
|
||||
Get insights on bandwidth usage, requests, realtime connections and more after making
|
||||
your first API call
|
||||
<article class="card u-grid u-width-full-line common-section onboard-cover">
|
||||
<img src={onBoardImage1Mobile} class="is-only-mobile u-width-full-line" alt="statistics" />
|
||||
<img src={onBoardImage1Desktop} class="is-not-mobile u-width-full-line" alt="statistics" />
|
||||
<div class="u-height-100-percent u-width-full-line u-padding-block-start-20">
|
||||
<div
|
||||
class="u-flex u-flex-vertical u-height-100-percent u-cross-center u-padding-inline-24">
|
||||
<div class="avatar">
|
||||
<i class="icon-lock-closed" />
|
||||
</div>
|
||||
<div class="common-section u-text-center">
|
||||
<h7 class="heading-level-7">Add a platform to view data about your project</h7>
|
||||
</div>
|
||||
<div class="u-margin-block-start-16 u-text-center" style:max-width="550px">
|
||||
Get insights on bandwidth usage, requests, realtime connections and more after
|
||||
making your first API call
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<img src={onBoardImage2} class="common-section" alt="statistics" />
|
||||
<img
|
||||
src={onBoardImage2Mobile}
|
||||
class="common-section is-only-mobile u-width-full-line"
|
||||
alt="statistics" />
|
||||
<img
|
||||
src={onBoardImage2Desktop}
|
||||
class="common-section is-not-mobile u-width-full-line"
|
||||
alt="statistics" />
|
||||
|
||||
<style lang="scss">
|
||||
@import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
|
||||
|
||||
.card-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media #{$break2open} {
|
||||
.card-header {
|
||||
background: var(--url);
|
||||
background-image: var(--url);
|
||||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
}
|
||||
}
|
||||
:global(.theme-dark) .card-header {
|
||||
background-color: #18181b;
|
||||
}
|
||||
|
||||
:global(.theme-light) .card-header {
|
||||
background-color: #fbfbfc;
|
||||
}
|
||||
.onboard-cover > div {
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
|
||||
.onboard-cover {
|
||||
height: 342px;
|
||||
background: none;
|
||||
background-position: top center;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
@media #{$break1} {
|
||||
margin-block-start: 15%;
|
||||
}
|
||||
|
||||
@media #{$break2open} {
|
||||
margin-block-start: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z"
|
||||
fill="#FD366E" />
|
||||
<path
|
||||
d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z"
|
||||
fill="#FD366E" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 976 B |
Reference in New Issue
Block a user