Icons lighter gray, no vertical scroll on 13" screens, no double shadow on end of animation

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",

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
 

src/routes/(console)/onboarding/create-project/+page.svelte

@@ -95,9 +95,9 @@
 <svelte:head>
     <title>Create project - Appwrite</title>
 </svelte:head>
-
 <div
-    class="page-container u-flex-vertical u-cross-child-center u-cross-center u-margin-block-start-96">
+    class="page-container u-flex-vertical u-cross-child-center u-cross-center"
+    class:u-margin-block-start-96={!isLoading}>
     {#if isLoading}
         <Loading {startAnimation} />
     {: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);
 

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);
         };
     });
 </script>
 
+<svelte:window on:resize={handleResize} />
 <div class="grid-container" class:start-animation={startAnimation}>
     <div class="static-loader">
         <Layout.Stack alignItems="center" gap="l">
@@ -54,7 +68,7 @@
     <div class="title-container">
         <Typography.Title size="l">Welcome to Appwrite</Typography.Title>
     </div>
-    <div class="grid">
+    <div class="grid" class:remove-shadow={removeShadow}>
         <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 1; " />
         <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 2; " />
         <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 3; " />
@@ -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;