mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Torsten Dittmann
ecbf8b2488
The commit updates various UI components to use the new Pink design library, replacing older custom components. Key changes include: - Replace custom Alert components with Pink's Alert.Inline - Replace custom Table components with Pink's Table.Root/Cell structure - Update form inputs and selectors to use Pink variants - Remove unnecessary wrapper elements and classes - Adjust layout and typography to match Pink patterns - Clean up redundant styles and markup Focus is on maintaining functionality while adopting the new design system components.
36 lines
1.1 KiB
Svelte
36 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { Click, trackEvent } from '$lib/actions/analytics';
|
|
import { BillingPlan } from '$lib/constants';
|
|
import { Button } from '$lib/elements/forms';
|
|
import { tierToPlan, upgradeURL } from '$lib/stores/billing';
|
|
import { Layout, Typography } from '@appwrite.io/pink-svelte';
|
|
import { Card } from '..';
|
|
|
|
export let service: string;
|
|
export let eventSource: string;
|
|
</script>
|
|
|
|
<Card>
|
|
<slot>
|
|
<Layout.Stack alignItems="center">
|
|
<Typography.Text variant="m-600">Upgrade to add {service}</Typography.Text>
|
|
<Typography.Text>
|
|
Upgrade to a {tierToPlan(BillingPlan.PRO).name} plan to add {service} to your organization
|
|
</Typography.Text>
|
|
|
|
<Button
|
|
secondary
|
|
fullWidthMobile
|
|
href={$upgradeURL}
|
|
on:click={() => {
|
|
trackEvent(Click.OrganizationClickUpgrade, {
|
|
from: 'button',
|
|
source: eventSource
|
|
});
|
|
}}>
|
|
Upgrade
|
|
</Button>
|
|
</Layout.Stack>
|
|
</slot>
|
|
</Card>
|