diff --git a/package.json b/package.json index 075cc9469..2be84dad3 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@513bf8e", "@appwrite.io/pink-legacy": "^1.0.0", - "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b", + "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a01c70f81..886e1957d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^1.0.0 version: 1.0.0 '@appwrite.io/pink-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -221,8 +221,8 @@ packages: peerDependencies: svelte: ^4.0.0 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ab7b49cc28d3c720e9f2951a536618127e43379c': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ab7b49cc28d3c720e9f2951a536618127e43379c} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -236,8 +236,8 @@ packages: '@appwrite.io/pink-legacy@1.0.0': resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==} - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b} + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c} version: 1.0.0-next.85 peerDependencies: react-dom: ^18.0.0 @@ -4090,7 +4090,7 @@ snapshots: dependencies: svelte: 4.2.19 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ab7b49cc28d3c720e9f2951a536618127e43379c(svelte@4.2.19)': dependencies: svelte: 4.2.19 @@ -4103,9 +4103,9 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f4dce2b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ab7b49c(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: - '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f4dce2bd27ae2f1eacaf6abdb61c1a359a7c869c(svelte@4.2.19) + '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ab7b49cc28d3c720e9f2951a536618127e43379c(svelte@4.2.19) '@floating-ui/dom': 1.6.13 '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19) '@melt-ui/svelte': 0.86.2(svelte@4.2.19) diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte b/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte index a43d4890b..0cc730248 100644 --- a/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte +++ b/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte @@ -4,7 +4,7 @@ import { protocol } from '$routes/(console)/store'; import type { Models } from '@appwrite.io/console'; import { IconExternalLink } from '@appwrite.io/pink-icons-svelte'; - import { ActionMenu, Icon, Layout, Popover, Tag } from '@appwrite.io/pink-svelte'; + import { ActionMenu, Icon, Layout, Popover, Tag, Typography } from '@appwrite.io/pink-svelte'; export let domains: Models.ProxyRuleList; @@ -13,7 +13,9 @@ - {domains.rules[0].domain} + + {domains.rules[0].domain} + diff --git a/src/routes/(console)/project-[project]/sites/(components)/screenshot-placeholder-dark.svg b/src/routes/(console)/project-[project]/sites/(components)/screenshot-placeholder-dark.svg new file mode 100644 index 000000000..e90ffae07 --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/(components)/screenshot-placeholder-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/routes/(console)/project-[project]/sites/(components)/screenshot-placeholder-light.svg b/src/routes/(console)/project-[project]/sites/(components)/screenshot-placeholder-light.svg new file mode 100644 index 000000000..b3771b58e --- /dev/null +++ b/src/routes/(console)/project-[project]/sites/(components)/screenshot-placeholder-light.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte index dc78a2037..2d42b7382 100644 --- a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte +++ b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte @@ -2,7 +2,7 @@ import { Card, Trim } from '$lib/components/index.js'; import Link from '$lib/elements/link.svelte'; import { humanFileSize } from '$lib/helpers/sizeConvertion'; - import { calculateTime } from '$lib/helpers/timeConversion'; + import { formatTimeDetailed } from '$lib/helpers/timeConversion'; import type { Models } from '@appwrite.io/console'; import { Divider, Icon, Image, Layout, Status, Typography } from '@appwrite.io/pink-svelte'; import DeploymentSource from './deploymentSource.svelte'; @@ -12,9 +12,13 @@ import OpenOnMobileModal from './openOnMobileModal.svelte'; import DeploymentDomains from './deploymentDomains.svelte'; import { protocol } from '$routes/(console)/store'; + import { app } from '$lib/stores/app'; + import PlaceholderLight from './screenshot-placeholder-light.svg'; + import PlaceholderDark from './screenshot-placeholder-dark.svg'; export let deployment: Models.Deployment; export let proxyRuleList: Models.ProxyRuleList = { total: 0, rules: [] }; + export let hideQRCode = false; let show = false; const siteUrl = @@ -23,63 +27,91 @@ $: totalSize = humanFileSize((deployment?.buildSize ?? 0) + (deployment?.size ?? 0)); - - - - Screenshot - + + + + {#if deployment?.preview} + Screenshot + {:else if $app.themeInUse === 'dark'} + Screenshot + {:else} + Screenshot + {/if} + {#if deployment.status === 'failed'} - + Status - + {:else} - + Deployed - + {/if} - {#if siteUrl} - {/if} {#if proxyRuleList?.total} - + Domains {:else if deployment.domain} - + Domains - {deployment.domain} + + {deployment.domain} + @@ -88,31 +120,33 @@ {/if} {#if deployment?.buildTime} - + Build time - - {calculateTime(deployment.buildTime)} + + {formatTimeDetailed(deployment.buildTime)} {/if} - + Total size - + {totalSize.value}{totalSize.unit} - + Source - + @@ -121,7 +155,7 @@ {#if $$slots.footer} + style="margin-left: calc(-1* var(--space-7));margin-right: calc(-1* var(--space-7));width:auto;"> diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte index e6f542769..6ac2f5ba2 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte @@ -13,6 +13,7 @@ import ConnectRepoModal from '../../(components)/connectRepoModal.svelte'; import { onMount } from 'svelte'; import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte'; + import { protocol } from '$routes/(console)/store'; export let data: PageData; @@ -34,104 +35,131 @@
- + + - + Congratulations! - - You deployed your Site successfully. + + You deployed your Site successfully - + + + + + - - - - {#if !data.deployment.providerCommitHash} - - {#if !data.site.installationId && !data.site.providerRepositoryId} +
+ + + {#if !data.deployment.providerCommitHash} + + {#if !data.site.installationId && !data.site.providerRepositoryId} + (showConnectRepositry = true)}> + + + + Connect to repository + + + + + Connect to a new repository or an existing one. + + + + {/if} + + + + Add domain + + + + Connect to an existing domain or purchase a new one. + + + (showConnectRepositry = true)}> + padding="s" + on:click={() => (showInviteCollaborator = true)}> Connect to repository - + >Add collaborators + - Connect to a new repository or an existing one. + Share your progress and start collaborating with your + team. - {/if} - - - - Add domain - + (showOpenOnMobile = true)}> + + + Open on mobile + + + + Open the preview of your site on any mobile or tablet + device. + - - Connect to an existing domain or purchase a new one. - - - - (showInviteCollaborator = true)}> - - - Add collaborators - - - - Share your progress and start collaborating with your team. - - - - (showOpenOnMobile = true)}> - - - Open on mobile - - - - Open the preview of your site on any mobile or tablet - device. - - - - - {/if} - - + + + {/if} + + +