diff --git a/package.json b/package.json index d4136ff28..4d99d6eb3 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ }, "devDependencies": { "@melt-ui/pp": "^0.3.2", - "@melt-ui/svelte": "^0.83.0", + "@melt-ui/svelte": "^0.86.2", "@playwright/test": "^1.49.0", "@sveltejs/adapter-static": "^3.0.6", "@sveltejs/kit": "^2.8.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bb2bb4618..02d5b92ed 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ importers: specifier: 0.25.0 version: 0.25.0 '@appwrite.io/pink-icons-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678 - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678(svelte@4.2.19) + specifier: 1.0.0-next.7 + version: 1.0.0-next.7(svelte@4.2.19) '@appwrite.io/pink-svelte': specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@250 version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@250(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) @@ -218,14 +218,13 @@ packages: resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193} version: 1.2.1 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1bd98c8df871e8e63e34afd298abc33107638469': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1bd98c8df871e8e63e34afd298abc33107638469} - version: 1.0.0-next.7 + '@appwrite.io/pink-icons-svelte@1.0.0-next.7': + resolution: {integrity: sha512-Bmff3YGEliIetqc3UyjzJNLg88FIC6UXYwTzGqHm+0QLCRJxwAFpTkfTCLIqMe5PUqGshq6jM9SPyCCSVVS3aw==} peerDependencies: svelte: ^4.0.0 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1bd98c8df871e8e63e34afd298abc33107638469': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1bd98c8df871e8e63e34afd298abc33107638469} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -4041,11 +4040,11 @@ snapshots: '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {} - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1bd98c8df871e8e63e34afd298abc33107638469(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@1.0.0-next.7(svelte@4.2.19)': dependencies: svelte: 4.2.19 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1bd98c8df871e8e63e34afd298abc33107638469(svelte@4.2.19)': dependencies: svelte: 4.2.19 diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte index ee7ae04f2..bc1cf4557 100644 --- a/src/routes/(console)/onboarding/create-project/+page.svelte +++ b/src/routes/(console)/onboarding/create-project/+page.svelte @@ -95,9 +95,9 @@ Create project - Appwrite -
+ class="page-container u-flex-vertical u-cross-child-center u-cross-center" + class:u-margin-block-start-96={!isLoading}> {#if isLoading} {:else} @@ -176,7 +176,6 @@ .page-container { width: calc(100% - 2rem); margin: 0 1rem; - min-height: 100vh; gap: 4.5rem; background: var(--color-bgcolor-neutral-default, #19191c); diff --git a/src/routes/(console)/onboarding/create-project/loading.svelte b/src/routes/(console)/onboarding/create-project/loading.svelte index 33de6527a..5cdbb8bab 100644 --- a/src/routes/(console)/onboarding/create-project/loading.svelte +++ b/src/routes/(console)/onboarding/create-project/loading.svelte @@ -12,16 +12,29 @@ ]; let currentSentenceIndex = 0; let visible = true; + let removeShadow = false; + let removeShadowTimeout; function handleResize() { startAnimation = false; + removeShadow = false; setTimeout(() => { startAnimation = true; + handleRemoveShadow(); }, 1500); } + function handleRemoveShadow() { + removeShadowTimeout = setTimeout(() => { + removeShadow = true; + }, 2000); // wait for transition animation to be started + } + + $: if (startAnimation) { + handleRemoveShadow(); + } + onMount(() => { - window.addEventListener('resize', handleResize); const interval = setInterval(() => { visible = false; currentSentenceIndex = (currentSentenceIndex + 1) % loadingSentences.length; @@ -32,11 +45,12 @@ return () => { clearInterval(interval); - window.removeEventListener('resize', handleResize); + clearTimeout(removeShadowTimeout); }; }); +
@@ -54,7 +68,7 @@
Welcome to Appwrite
-
+
@@ -321,7 +335,7 @@ display: flex; justify-content: center; align-items: center; - filter: grayscale(100%); + filter: grayscale(100%) brightness(150%) contrast(90%); transition: all var(--icon-colorize-animation-duration) var(--animation-type) var(--show-icon-color-delay); @@ -343,8 +357,8 @@ @keyframes grayscale-animation { 100% { - -webkit-filter: grayscale(0%); - filter: grayscale(0%); + -webkit-filter: grayscale(0%) brightness(100%) contrast(100%); + filter: grayscale(0%) brightness(100%) contrast(100%); } } @@ -450,6 +464,11 @@ translateX(var(--negative-double-cell-dimension)); } + .remove-shadow :not(.icon8) .icon-container { + transition: box-shadow var(--icon-move-to-center-animation-duration) var(--animation-type); + box-shadow: 0 12.973px 12.973px 0 rgba(0, 0, 0, 0); + } + .icon1 { grid-row-start: 2; grid-column-start: 2;