Skip to content

Commit 70ac83f

Browse files
HarshMN2345HarshMN2345
committed
fix:replaced pill with badge
1 parent ab5ddc2 commit 70ac83f

File tree

15 files changed

+112
-73
lines changed

15 files changed

+112
-73
lines changed

‎src/lib/components/code.svelte

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
</script>
99

1010
<script lang="ts">
11-
import { Pill } from '$lib/elements';
11+
import { Badge, Icon } from '@appwrite.io/pink-svelte';
12+
import { IconCode, IconAndroid, IconFlutter, IconApple } from '@appwrite.io/pink-icons-svelte';
1213
import Prism from 'prismjs';
1314
import 'prismjs/components/prism-dart';
1415
import 'prismjs/components/prism-kotlin';
@@ -24,6 +25,21 @@
2425
2526
export let label: string = null;
2627
export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
28+
29+
function getIcon(iconName: string) {
30+
switch (iconName) {
31+
case 'code':
32+
return IconCode;
33+
case 'android':
34+
return IconAndroid;
35+
case 'flutter':
36+
return IconFlutter;
37+
case 'apple':
38+
return IconApple;
39+
default:
40+
return null;
41+
}
42+
}
2743
export let code: string;
2844
export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
2945
export let withLineNumbers = false;
@@ -49,12 +65,11 @@
4965
<div
5066
class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
5167
{#if label}
52-
<Pill>
68+
<Badge variant="secondary" content={label}>
5369
{#if labelIcon}
54-
<span class={`icon-${labelIcon}`} aria-hidden="true"></span>
70+
<Icon icon={getIcon(labelIcon)} size="s" slot="start" />
5571
{/if}
56-
{label}
57-
</Pill>
72+
</Badge>
5873
{/if}
5974
{#if withCopy}
6075
<Copy value={code}>

‎src/lib/components/eventModal.svelte

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts">
22
import { Button } from '$lib/elements/forms';
33
import { Modal } from '$lib/components';
4-
import { Pill } from '$lib/elements';
54
import { createEventDispatcher } from 'svelte';
65
import { at, empty } from '$lib/helpers/array';
76
import { singular } from '$lib/helpers/string';
@@ -295,13 +294,12 @@
295294
<Typography.Text variant="m-500">Choose an attribute (optional)</Typography.Text>
296295
<Layout.Stack gap="s" wrap="wrap" direction="row">
297296
{#each available.attributes as attribute}
298-
<Pill
297+
<Tag
299298
disabled={showInput}
300299
selected={selected.attribute === attribute}
301-
button
302300
on:click={() => select('attribute', attribute)}>
303301
{attribute}
304-
</Pill>
302+
</Tag>
305303
{/each}
306304
</Layout.Stack>
307305
</Layout.Stack>

‎src/lib/layout/containerHeader.svelte

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script lang="ts">
22
import { DropList } from '$lib/components';
33
import { BillingPlan } from '$lib/constants';
4-
import { Link, Pill } from '$lib/elements';
4+
import { Link } from '$lib/elements';
5+
import { Badge, Icon } from '@appwrite.io/pink-svelte';
6+
import { IconInfo } from '@appwrite.io/pink-icons-svelte';
57
import { Alert } from '@appwrite.io/pink-svelte';
68
import {
79
checkForProjectLimitation,
@@ -125,13 +127,19 @@
125127
{#if isCloud && isLimited}
126128
<DropList bind:show={showDropdown} width="16">
127129
{#if hasProjectLimitation}
128-
<Pill button on:click={() => (showDropdown = !showDropdown)}>
129-
<span class="icon-info"></span>{total}/{limit} created
130-
</Pill>
130+
<Badge
131+
variant="secondary"
132+
content={`${total}/${limit} created`}
133+
on:click={() => (showDropdown = !showDropdown)}>
134+
<Icon icon={IconInfo} size="s" slot="start" />
135+
</Badge>
131136
{:else if $organization?.billingPlan !== BillingPlan.SCALE}
132-
<Pill button on:click={() => (showDropdown = !showDropdown)}>
133-
<span class="icon-info"></span>Limits applied
134-
</Pill>
137+
<Badge
138+
variant="secondary"
139+
content="Limits applied"
140+
on:click={() => (showDropdown = !showDropdown)}>
141+
<Icon icon={IconInfo} size="s" slot="start" />
142+
</Badge>
135143
{/if}
136144
<svelte:fragment slot="list">
137145
<slot name="tooltip" {limit} {tier} {title} {upgradeMethod} {hasUsageFees}>

‎src/routes/(console)/account/organizations/+page.svelte

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
import { sdk } from '$lib/stores/sdk';
1414
import type { PageData } from './$types';
1515
import { isCloud } from '$lib/system';
16-
import { Pill } from '$lib/elements';
16+
import { Badge } from '@appwrite.io/pink-svelte';
1717
import type { Models } from '@appwrite.io/console';
1818
import type { Organization } from '$lib/stores/organization';
1919
import { daysLeftInTrial, plansInfo, tierToPlan } from '$lib/stores/billing';
@@ -75,8 +75,10 @@
7575
{#if organization?.billingPlan === BillingPlan.FREE || organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
7676
<Tooltip>
7777
<div class="u-flex u-cross-center">
78-
<Pill class="eyebrow-heading-3"
79-
>{tierToPlan(organization?.billingPlan)?.name}</Pill>
78+
<Badge
79+
variant="secondary"
80+
content={tierToPlan(organization?.billingPlan)?.name}
81+
class="eyebrow-heading-3" />
8082
</div>
8183
<span slot="tooltip"
8284
>You are limited to 1 free organization per account</span>
@@ -85,7 +87,10 @@
8587
{#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlan !== BillingPlan.FREE && $plansInfo.get(organization.billingPlan)?.trialDays}
8688
<Tooltip>
8789
<div class="u-flex u-cross-center">
88-
<Pill class="eyebrow-heading-3">TRIAL</Pill>
90+
<Badge
91+
class="eyebrow-heading-3"
92+
variant="secondary"
93+
content="TRIAL" />
8994
</div>
9095
<span slot="tooltip"
9196
>{`Your trial ends on ${toLocaleDate(

‎src/routes/(console)/organization-[organization]/billing/availableCredit.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
import { BillingPlan } from '$lib/constants';
1515
import { Click, trackEvent } from '$lib/actions/analytics';
1616
import { upgradeURL } from '$lib/stores/billing';
17-
import { Pill } from '$lib/elements';
17+
1818
import { Alert, Badge, Icon, Link, Table, Tooltip, Typography } from '@appwrite.io/pink-svelte';
1919
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
2020
@@ -152,7 +152,7 @@
152152
{#if credit.status === 'expired'}
153153
<Tooltip>
154154
<span>
155-
<Pill>Expired</Pill>
155+
<Badge variant="secondary" content="Expired" />
156156
</span>
157157
<span slot="tooltip"
158158
>{toLocaleDate(credit.expiration)}</span>

‎src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { EmptySearch } from '$lib/components';
3-
import { Pill } from '$lib/elements';
3+
import { Badge } from '@appwrite.io/pink-svelte';
44
import { Button } from '$lib/elements/forms';
55
import {
66
TableBody,
@@ -77,7 +77,10 @@
7777
{session.osVersion}
7878
</p>
7979
{#if session.current}
80-
<Pill success>current session</Pill>
80+
<Badge
81+
variant="secondary"
82+
type="success"
83+
content="current session" />
8184
{/if}
8285
</div>
8386
</TableCell>

‎src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
55
import { Modal, CustomId } from '$lib/components';
66
import { Dependencies } from '$lib/constants';
7-
import { Pill } from '$lib/elements';
7+
import { Badge, Icon } from '@appwrite.io/pink-svelte';
8+
import { IconPencil } from '@appwrite.io/pink-icons-svelte';
89
import { Button, InputText, InputSelect, InputPhone } from '$lib/elements/forms';
910
import InputEmail from '$lib/elements/forms/inputEmail.svelte';
1011
import { addNotification } from '$lib/stores/notifications';
@@ -116,10 +117,12 @@
116117

117118
{#if !showCustomId}
118119
<div>
119-
<Pill button on:click={() => (showCustomId = !showCustomId)}
120-
><span class="icon-pencil" aria-hidden="true"></span><span class="text">
121-
Target ID
122-
</span></Pill>
120+
<Badge
121+
variant="secondary"
122+
content="Target ID"
123+
on:click={() => (showCustomId = !showCustomId)}>
124+
<Icon icon={IconPencil} size="s" slot="start" />
125+
</Badge>
123126
</div>
124127
{:else}
125128
<CustomId bind:show={showCustomId} name="Target" bind:id autofocus={false} />

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import { Pill } from '$lib/elements';
32
import { DropList } from '$lib/components';
43
import { Button } from '$lib/elements/forms';
54
import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -41,12 +40,12 @@
4140
{#if title === 'Policies' && policiesCreated >= maxPolicies}
4241
<div style:height="40px;" style:padding-block-start="4px">
4342
<DropList bind:show={showDropdown} width="16">
44-
<Pill disabled={buttonDisabled} button on:click={() => (showDropdown = true)}>
45-
<Layout.Stack direction="row" gap="xs" alignItems="center" inline>
46-
<Icon icon={IconInfo} size="s" />
47-
{policiesCreated}/{maxPolicies} created
48-
</Layout.Stack>
49-
</Pill>
43+
<Badge
44+
variant="secondary"
45+
content={`${policiesCreated}/${maxPolicies} created`}
46+
on:click={() => (showDropdown = true)}>
47+
<Icon icon={IconInfo} size="s" slot="start" />
48+
</Badge>
5049
<svelte:fragment slot="list">
5150
<slot name="tooltip">
5251
<span>

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { base } from '$app/paths';
33
import { page } from '$app/state';
44
import { CardContainer, GridItem1, Id } from '$lib/components';
5-
import { Pill } from '$lib/elements';
5+
import { Badge } from '@appwrite.io/pink-svelte';
66
import { canWriteCollections } from '$lib/stores/roles';
77
import type { PageData } from './$types';
88
export let data: PageData;
@@ -22,7 +22,7 @@
2222
<svelte:fragment slot="title">{collection.name}</svelte:fragment>
2323
<svelte:fragment slot="status">
2424
{#if !collection.enabled}
25-
<Pill>disabled</Pill>
25+
<Badge variant="secondary" content="disabled" />
2626
{/if}</svelte:fragment>
2727

2828
<Id value={collection.$id}>{collection.$id}</Id>

‎src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
import { CustomId, LabelCard } from '$lib/components';
55
import { providers } from '../store';
66
import { InputText } from '$lib/elements/forms';
7-
import { Pill } from '$lib/elements';
7+
import { Badge, Icon } from '@appwrite.io/pink-svelte';
8+
import { IconPencil } from '@appwrite.io/pink-icons-svelte';
89
import { Providers } from '../../provider.svelte';
910
import { SmtpEncryption } from '@appwrite.io/console';
1011
@@ -151,10 +152,12 @@
151152

152153
{#if !showCustomId}
153154
<div>
154-
<Pill button on:click={() => (showCustomId = !showCustomId)}
155-
><span class="icon-pencil" aria-hidden="true"></span><span class="text">
156-
Provider ID
157-
</span></Pill>
155+
<Badge
156+
variant="secondary"
157+
content="Provider ID"
158+
on:click={() => (showCustomId = !showCustomId)}>
159+
<Icon icon={IconPencil} size="s" slot="start" />
160+
</Badge>
158161
</div>
159162
{:else}
160163
<CustomId bind:show={showCustomId} name="Provider" bind:id autofocus={false} />

0 commit comments

Comments
 (0)