Merge pull request #1954 from appwrite/fix-platform-tags

Fix platform tags and selector cards

src/routes/(console)/organization-[organization]/+page.svelte

@@ -19,8 +19,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { sdk } from '$lib/stores/sdk';
     import { loading } from '$routes/store';
-    import type { Models } from '@appwrite.io/console';
-    import { ID, Region } from '@appwrite.io/console';
+    import { ID, Region, type Models } from '@appwrite.io/console';
     import { openImportWizard } from '../project-[region]-[project]/settings/migrations/(import)';
     import { readOnly } from '$lib/stores/billing';
     import { onMount, type ComponentType } from 'svelte';
@@ -162,23 +161,28 @@
                     <svelte:fragment slot="title">
                         {project.name}
                     </svelte:fragment>
-                    {#each platforms as platform, i}
-                        {#if i < 3}
-                            {@const icon = getIconForPlatform(platform.icon)}
-                            <Badge variant="secondary" content={platform.name}>
-                                <Icon {icon} size="s" slot="start" />
-                            </Badge>
-                        {/if}
+
+                    {#each platforms.slice(0, 2) as platform}
+                        {@const icon = getIconForPlatform(platform.icon)}
+                        <Badge
+                            variant="secondary"
+                            content={platform.name}
+                            style="width: max-content;">
+                            <Icon {icon} size="s" slot="start" />
+                        </Badge>
                     {/each}
-                    {#if platforms?.length > 3}
-                        <Badge variant="secondary" content={`+${project.platforms.length - 3}`} />
+
+                    {#if platforms.length > 3}
+                        <Badge
+                            variant="secondary"
+                            content={`+${platforms.length - 2}`}
+                            style="width: max-content;" />
                     {/if}
+
                     <svelte:fragment slot="icons">
                         {#if isCloud && $regionsStore?.regions}
                             {@const region = findRegion(project)}
-                            <span class="u-color-text-gray u-medium u-line-height-2">
-                                {region?.name}
-                            </span>
+                            <Typography.Text>{region.name}</Typography.Text>
                         {/if}
                     </svelte:fragment>
                 </GridItem1>

src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte

@@ -57,10 +57,8 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
             trackEvent(Submit.PlatformCreate, {
                 type: 'android'
             });
-            await Promise.all([
-                invalidate(Dependencies.PROJECT),
-                invalidate(Dependencies.PLATFORMS)
-            ]);
+            invalidate(Dependencies.PROJECT);
+            invalidate(Dependencies.PLATFORMS);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({

src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte

@@ -4,6 +4,7 @@
     import { createPlatform } from './wizard/store';
     import { Dependencies } from '$lib/constants';
     import {
+        Card as Pink2Card,
         Code,
         Layout,
         Icon,
@@ -26,7 +27,6 @@
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
     import { app } from '$lib/stores/app';
-    import { LabelCard } from '$lib/components';
 
     let showExitModal = false;
     let isPlatformCreated = false;
@@ -68,10 +68,8 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
             trackEvent(Submit.PlatformCreate, {
                 type: platform
             });
-            await Promise.all([
-                invalidate(Dependencies.PROJECT),
-                invalidate(Dependencies.PLATFORMS)
-            ]);
+            invalidate(Dependencies.PROJECT);
+            invalidate(Dependencies.PLATFORMS);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -108,20 +106,18 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
     <Form onSubmit={createApplePlatform}>
         <Layout.Stack gap="xxl">
             <!-- Step One -->
-            <Layout.Stack gap="l" direction="row">
+            <Layout.Grid gap="l" rowGap="l" columns={4} columnsXS={2}>
                 {#each Object.entries(platforms) as [key, value]}
-                    <div class="u-width-full-line">
-                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
-                        <LabelCard
-                            name={key}
-                            bind:group={platform}
-                            variant="primary"
-                            {value}
-                            title={key}
-                            disabled={isPlatformCreated} />
-                    </div>
+                    <Pink2Card.Selector
+                        {value}
+                        id={key}
+                        title={key}
+                        imageRadius="s"
+                        name="framework"
+                        bind:group={platform}
+                        disabled={isCreatingPlatform || isPlatformCreated} />
                 {/each}
-            </Layout.Stack>
+            </Layout.Grid>
 
             <!-- Step Two -->
             {#if !isPlatformCreated}

src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte

@@ -4,6 +4,7 @@
     import { createPlatform } from './wizard/store';
     import { Dependencies } from '$lib/constants';
     import {
+        Card as Pink2Card,
         Code,
         Layout,
         Icon,
@@ -25,7 +26,6 @@
     import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
-    import { LabelCard } from '$lib/components';
 
     let showExitModal = false;
     let isPlatformCreated = false;
@@ -125,10 +125,8 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
                 type: platform
             });
 
-            await Promise.all([
-                invalidate(Dependencies.PROJECT),
-                invalidate(Dependencies.PLATFORMS)
-            ]);
+            invalidate(Dependencies.PROJECT);
+            invalidate(Dependencies.PLATFORMS);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -165,19 +163,18 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
     <Form onSubmit={createFlutterPlatform}>
         <Layout.Stack gap="xxl">
             <!-- Step One -->
-            <Layout.Stack gap="l" direction="row">
+            <Layout.Grid gap="l" rowGap="l" columns={3} columnsXS={2} columnsXXS={1}>
                 {#each Object.entries(platforms) as [key, value]}
-                    <div class="u-width-full-line">
-                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
-                        <LabelCard
-                            name={key}
-                            bind:group={platform}
-                            variant="primary"
-                            {value}
-                            title={key} />
-                    </div>
+                    <Pink2Card.Selector
+                        {value}
+                        id={key}
+                        title={key}
+                        imageRadius="s"
+                        name="framework"
+                        bind:group={platform}
+                        disabled={isCreatingPlatform || isPlatformCreated} />
                 {/each}
-            </Layout.Stack>
+            </Layout.Grid>
 
             <!-- Step Two -->
             {#if !isPlatformCreated}

src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte

@@ -4,6 +4,7 @@
     import { createPlatform } from './wizard/store';
     import { Dependencies } from '$lib/constants';
     import {
+        Card as Pink2Card,
         Code,
         Layout,
         Icon,
@@ -25,10 +26,9 @@
     import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
-    import { LabelCard } from '$lib/components';
 
     let showExitModal = false;
-    export let isPlatformCreated = false;
+    let isPlatformCreated = false;
     let isCreatingPlatform = false;
     let connectionSuccessful = false;
     const projectId = page.params.project;
@@ -94,10 +94,9 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.para
             trackEvent(Submit.PlatformCreate, {
                 type: platform
             });
-            await Promise.all([
-                invalidate(Dependencies.PROJECT),
-                invalidate(Dependencies.PLATFORMS)
-            ]);
+
+            invalidate(Dependencies.PROJECT);
+            invalidate(Dependencies.PLATFORMS);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -136,16 +135,14 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.para
             <!-- Step One -->
             <Layout.Stack gap="l" direction="row">
                 {#each Object.entries(platforms) as [key, value]}
-                    <div class="u-width-full-line">
-                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
-                        <LabelCard
-                            name={key}
-                            bind:group={platform}
-                            variant="primary"
-                            {value}
-                            title={key}
-                            disabled={isPlatformCreated} />
-                    </div>
+                    <Pink2Card.Selector
+                        {value}
+                        id={key}
+                        title={key}
+                        imageRadius="s"
+                        name="framework"
+                        bind:group={platform}
+                        disabled={isCreatingPlatform || isPlatformCreated} />
                 {/each}
             </Layout.Stack>
 

src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte

@@ -11,10 +11,9 @@
         Fieldset,
         InlineCode,
         Card,
-        Button,
         Tooltip
     } from '@appwrite.io/pink-svelte';
-    import { Form, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import {
         IconVue,
         IconAppwrite,
@@ -166,10 +165,8 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                 type: platform
             });
 
-            await Promise.all([
-                invalidate(Dependencies.PROJECT),
-                invalidate(Dependencies.PLATFORMS)
-            ]);
+            invalidate(Dependencies.PROJECT);
+            invalidate(Dependencies.PLATFORMS);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -223,10 +220,10 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                         </div>
                         <Layout.Stack direction="row" justifyContent="flex-end">
                             {#if isChangingFramework}
-                                <Button.Button
+                                <Button
                                     disabled={!selectedFramework}
                                     on:click={() => (isChangingFramework = false)}>
-                                    Save</Button.Button>
+                                    Save</Button>
                             {/if}
                         </Layout.Stack>
                     </Layout.Stack>
@@ -249,8 +246,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                             </Tooltip>
                         </InputText></Fieldset>
                     <Layout.Stack direction="row" justifyContent="flex-end"
-                        ><Button.Button type="submit" disabled={!selectedFramework}
-                            >Create platform</Button.Button
+                        ><Button submit disabled={!selectedFramework}>Create platform</Button
                         ></Layout.Stack>
                 {/if}
             {:else}
@@ -264,12 +260,12 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                             <Typography.Text variant="m-500"
                                 >{selectedFramework.label}</Typography.Text>
                         </Layout.Stack>
-                        <Button.Button
-                            variant="secondary"
+                        <Button
                             size="s"
+                            secondary
                             on:click={() => {
                                 isChangingFramework = true;
-                            }}>Change</Button.Button>
+                            }}>Change</Button>
                     </Layout.Stack></Card.Base>
             {/if}
 
@@ -338,15 +334,15 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                                 color="--fgcolor-neutral-primary">
                                 Demo app runs on http://localhost:{selectedFramework.portNumber}</Typography.Text
                             ></Layout.Stack>
-                        <Button.Anchor
-                            variant="secondary"
+                        <Button
+                            external
+                            secondary
                             href={`http://localhost:${selectedFramework.portNumber}`}
-                            target="_blank"
                             ><Layout.Stack direction="row" gap="xs"
                                 >Open <Icon
                                     icon={IconExternalLink}
                                     color="--fgcolor-neutral-tertiary" /></Layout.Stack
-                            ></Button.Anchor
+                            ></Button
                         ></Layout.Stack
                     ></Card.Base>
             {/if}
@@ -394,10 +390,12 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
 
     <svelte:fragment slot="footer">
         {#if isPlatformCreated}
-            <Button.Anchor
+            <Button
+                size="s"
+                secondary
+                fullWidthMobile
                 href={location.pathname}
-                variant="secondary"
-                disabled={isCreatingPlatform}>Go to dashboard</Button.Anchor>
+                disabled={isCreatingPlatform}>Go to dashboard</Button>
         {/if}
     </svelte:fragment>
 </Wizard>