mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: design review
This commit is contained in:
Torsten Dittmann
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { isCloud } from '$lib/system';
|
||||
import { Button } from '$lib/elements/forms/index';
|
||||
import { hideNotification, shouldShowNotification } from '$lib/helpers/notifications';
|
||||
import { app } from '$lib/stores/app';
|
||||
@@ -146,9 +145,8 @@
|
||||
organization: $organization,
|
||||
project: $project
|
||||
})}
|
||||
external={!isCloud}
|
||||
fullWidthMobile
|
||||
on:click={() => handleClose()}>
|
||||
external={!!currentModalAlert.cta.external}
|
||||
fullWidthMobile>
|
||||
{shouldShowUpgrade ? 'Upgrade plan' : currentModalAlert.cta.text}
|
||||
</Button>
|
||||
|
||||
@@ -252,9 +250,8 @@
|
||||
organization: $organization,
|
||||
project: $project
|
||||
})}
|
||||
external={!isCloud}
|
||||
fullWidthMobile
|
||||
on:click={() => handleClose()}>
|
||||
external={!!currentModalAlert.cta.external}
|
||||
fullWidthMobile>
|
||||
{shouldShowUpgrade
|
||||
? 'Upgrade plan'
|
||||
: currentModalAlert.cta.text}
|
||||
@@ -285,14 +282,14 @@
|
||||
on:click={() => (openModalOnMobile = true)}>
|
||||
<div class="u-flex-vertical u-gap-4">
|
||||
<div class="u-flex u-cross-center u-main-space-between">
|
||||
<h3 class="body-text-2 u-bold">Early access</h3>
|
||||
<h3 class="body-text-2 u-bold">New features available</h3>
|
||||
<button on:click={hideAllModalAlerts}>
|
||||
<span class="icon-x" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span class="u-width-fit-content">
|
||||
Opt-in to experiments, new features, and more.
|
||||
Explore new features to enhance your projects and improve security.
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -313,11 +310,6 @@
|
||||
max-width: 289px;
|
||||
}
|
||||
|
||||
.showcase-image {
|
||||
height: 132px;
|
||||
min-width: 273px;
|
||||
}
|
||||
|
||||
.feature-count-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
@@ -389,7 +381,7 @@
|
||||
}
|
||||
|
||||
.alert-container {
|
||||
max-width: 289px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,8 +3,17 @@
|
||||
</script>
|
||||
|
||||
<Base>
|
||||
By default, all members are assigned a <span class="u-bold">Developer</span> role. You can
|
||||
change this at any time from your organization settings.
|
||||
<a class="link" target="_blank" rel="noopener noreferrer" href="https://appwrite.io/docs/roles"
|
||||
>Learn more.</a>
|
||||
<div class="u-flex-vertical u-gap-8">
|
||||
<p>
|
||||
By default, all members are assigned a <span class="u-bold">Developer</span> role. You can
|
||||
change this at any time from your organization settings.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://appwrite.io/docs/roles">Learn more</a> about roles.
|
||||
</p>
|
||||
</div>
|
||||
</Base>
|
||||
|
||||
@@ -3,16 +3,15 @@
|
||||
</script>
|
||||
|
||||
<Base>
|
||||
<p class="u-bold">Roles</p>
|
||||
<p>
|
||||
Owner, Developer <span class="inline-tag u-normal u-x-small">Default</span>, Editor,
|
||||
Analyst, Billing.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://appwrite.io/docs/roles">Learn more</a> about roles.
|
||||
</p>
|
||||
<div class="u-flex-vertical u-gap-8">
|
||||
<p class="u-bold">Roles</p>
|
||||
<p>Owner, Developer, Editor, Analyst and Billing.</p>
|
||||
<p>
|
||||
<a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://appwrite.io/docs/roles">Learn more</a> about roles.
|
||||
</p>
|
||||
</div>
|
||||
</Base>
|
||||
|
||||
@@ -9,42 +9,52 @@
|
||||
|
||||
<Base>
|
||||
{#if isCloud}
|
||||
<p>
|
||||
<span class="u-bold">Roles</span>
|
||||
{#if $organization?.billingPlan === BillingPlan.FREE}
|
||||
<span class="inline-tag u-normal u-x-small">Pro plan</span>
|
||||
{/if}
|
||||
</p>
|
||||
{#if $organization?.billingPlan !== BillingPlan.FREE}
|
||||
<p>
|
||||
Owner, Developer <span class="inline-tag u-normal u-x-small">Default</span>, Editor,
|
||||
Analyst, Billing.
|
||||
</p>
|
||||
<div class="u-flex-vertical u-gap-8">
|
||||
<p>
|
||||
<span class="u-bold">Roles</span>
|
||||
{#if $organization?.billingPlan === BillingPlan.FREE}
|
||||
<span class="inline-tag u-normal u-x-small">Pro plan</span>
|
||||
{/if}
|
||||
</p>
|
||||
<p>Owner, Developer, Editor, Analyst and Billing.</p>
|
||||
</div>
|
||||
<p>
|
||||
<Button link external href="https://appwrite.io/docs/roles">Learn more</Button> about
|
||||
roles.
|
||||
</p>
|
||||
{:else}
|
||||
<p>
|
||||
Owner, <span class="u-color-text-disabled">Developer, Editor, Analyst.</span>
|
||||
</p>
|
||||
<p class="u-flex u-main-end u-cross-center u-gap-12">
|
||||
<Button text link external href="https://appwrite.io/docs/roles">Learn more</Button>
|
||||
<a class="button is-secondary" href={$upgradeURL}>Upgrade plan</a>
|
||||
<div class="u-flex-vertical u-gap-8">
|
||||
<p>
|
||||
<span class="u-bold">Roles</span>
|
||||
{#if $organization?.billingPlan === BillingPlan.FREE}
|
||||
<span class="inline-tag u-normal u-x-small">Pro plan</span>
|
||||
{/if}
|
||||
</p>
|
||||
<p>
|
||||
Upgrade to Pro to assign new roles to members such as Owner, Developer, Editor
|
||||
or Analyst.
|
||||
</p>
|
||||
</div>
|
||||
<p class="u-flex u-main-end u-cross-center u-gap-4">
|
||||
<Button text external href="https://appwrite.io/docs/roles">Learn more</Button>
|
||||
<Button secondary external href={$upgradeURL}>Upgrade plan</Button>
|
||||
</p>
|
||||
{/if}
|
||||
{:else}
|
||||
<p>
|
||||
<span class="u-bold">Roles</span>
|
||||
<span class="inline-tag u-normal u-x-small">Appwrite Cloud</span>
|
||||
</p>
|
||||
<p>
|
||||
Upgrade to Cloud to assign new roles to members or ask us about our entriprise self
|
||||
hosted offering.
|
||||
</p>
|
||||
<p class="u-flex u-main-end u-cross-center u-gap-12">
|
||||
<Button text link external href="https://appwrite.io/docs/roles">Learn more</Button>
|
||||
<Button secondary link external href={$upgradeURL}>Upgrade to Cloud</Button>
|
||||
<div class="u-flex-vertical u-gap-8">
|
||||
<p>
|
||||
<span class="u-bold">Roles</span>
|
||||
<span class="inline-tag u-normal u-x-small">Appwrite Cloud</span>
|
||||
</p>
|
||||
<p>
|
||||
Upgrade to Cloud to assign new roles to members or ask us about our entriprise self
|
||||
hosted offering.
|
||||
</p>
|
||||
</div>
|
||||
<p class="u-flex u-main-end u-cross-center u-gap-4">
|
||||
<Button text external href="https://appwrite.io/docs/roles">Learn more</Button>
|
||||
<Button secondary external href={$upgradeURL}>Upgrade to Cloud</Button>
|
||||
</p>
|
||||
{/if}
|
||||
</Base>
|
||||
|
||||
@@ -21,3 +21,9 @@
|
||||
data-private>
|
||||
<slot />
|
||||
</svelte:element>
|
||||
|
||||
<style>
|
||||
:global(.table .button.is-text) {
|
||||
--p-text-color-default: initial !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,6 +6,7 @@ import type { Models } from '@appwrite.io/console';
|
||||
type BottomModalAlertAction = {
|
||||
text: string;
|
||||
link: (ctx: { organization: Organization; project: Models.Project }) => string;
|
||||
external?: boolean;
|
||||
};
|
||||
|
||||
export type BottomModalAlertItem = {
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<TableCellHead width={160}>Name</TableCellHead>
|
||||
<TableCellHead width={120}>Email</TableCellHead>
|
||||
<div style:--p-col-width={120} class="table-thead-col" role="columnheader">
|
||||
<span class="u-flex u-gap-8 u-cross-baseline">
|
||||
<span class="u-flex u-cross-baseline">
|
||||
<span class="eyebrow-heading-3"> Role </span>
|
||||
<Drop isPopover bind:show={showPopover} display="inline-block">
|
||||
<button
|
||||
@@ -89,7 +89,7 @@
|
||||
</button>
|
||||
<svelte:fragment slot="list">
|
||||
<div
|
||||
class="dropped card u-max-width-250 u-break-word"
|
||||
class="dropped card u-max-width-300 u-break-word"
|
||||
style:--card-border-radius="var(--border-radius-small)"
|
||||
style:--p-card-padding=".75rem"
|
||||
style:box-shadow="var(--shadow-large)">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { base } from '$app/paths';
|
||||
import RolesDark from '$lib/images/roles-dark.png';
|
||||
import RolesLight from '$lib/images/roles-dark.png';
|
||||
import RolesLight from '$lib/images/roles-light.png';
|
||||
import { type BottomModalAlertItem, showBottomModalAlert } from '$lib/stores/bottom-alerts';
|
||||
|
||||
const listOfPromotions: BottomModalAlertItem[] = [
|
||||
{
|
||||
id: 'memberRoles',
|
||||
id: 'memberRolesssssss',
|
||||
src: {
|
||||
dark: RolesDark,
|
||||
light: RolesLight
|
||||
|
||||
Reference in New Issue
Block a user