From 426f419ba86c7a828b77fdd7ce21108aaf273f14 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 19 Aug 2025 12:11:12 +0530
Subject: [PATCH 01/12] feat: redesign custom 404 error page with Appwrite
 branding

---
 src/routes/+error.svelte | 78 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 69 insertions(+), 9 deletions(-)

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index ed25aafc47..cb1dde1edb 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,16 +1,76 @@
 <script>
     import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Button } from '$lib/elements/forms';
     import { Unauthenticated } from '$lib/layout';
-    import { Typography } from '@appwrite.io/pink-svelte';
+    import { Button } from '$lib/elements/forms';
 </script>
 
 <Unauthenticated>
-    <Typography.Title size="xl"
-        >{'status' in page.error
-            ? page.error.status || 'Invalid Argument'
-            : 'Invalid Argument'}</Typography.Title>
-    <Typography.Title>{page.error.message}</Typography.Title>
-    <Button href={base}>Back to the console</Button>
+    <div class="content">
+        <div class="center">
+            <span>404 Page not found</span>
+        </div>
+        <h1>The page you're looking for doesn't exist.</h1>
+        <div class="center">
+            <a href={base}>
+                <Button>Back to console</Button>
+            </a>
+        </div>
+    </div>
 </Unauthenticated>
+
+<style>
+    .content {
+        text-align: center;
+    }
+
+    span {
+        padding: var(--space-1, 2px) var(--space-3, 6px);
+        border-radius: var(--border-radius-XS, 6px);
+        background: rgba(0, 0, 0, 0.08);
+        color: #56565c;
+        text-align: center;
+        font-family: var(--font-family-sansSerif, Inter), sans-serif;
+        font-size: var(--font-size-S, 14px);
+        font-style: normal;
+        font-weight: 400;
+        line-height: 140%;
+        letter-spacing: -0.063px;
+        display: inline-block;
+    }
+
+    h1 {
+        color: #2d2d31;
+        text-align: center;
+        font-family: var(--font-family-sansSerif, Inter), sans-serif;
+        font-size: var(--font-size-XXXL, 32px);
+        font-style: normal;
+        font-weight: 400;
+        line-height: 140%;
+        letter-spacing: -0.144px;
+        margin-top: 8px;
+        margin-bottom: 32px;
+    }
+
+    .center {
+        display: flex;
+        justify-content: center;
+    }
+
+    :global(.theme-light) span {
+        background: rgba(0, 0, 0, 0.08);
+        color: #56565c;
+    }
+
+    :global(.theme-light) h1 {
+        color: #2d2d31;
+    }
+
+    :global(.theme-dark) span {
+        background: rgba(255, 255, 255, 0.2);
+        color: #c3c3c6;
+    }
+
+    :global(.theme-dark) h1 {
+        color: #ededf0;
+    }
+</style>

From 9c8d24542e6535b404d8c7c22623ce7418ce016a Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 00:06:47 +0530
Subject: [PATCH 02/12] fix: allignment issue in Unauthenticated pages

---
 src/lib/layout/unauthenticated.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 9d1afcb2b3..0d74dfbd9e 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -167,18 +167,18 @@
                 </ul>
             </div>
             <div
-                class="logo u-flex u-gap-16 u-margin-inline-auto is-only-mobile u-margin-block-start-32">
+                class="logo u-flex u-gap-16 u-margin-inline-auto is-only-mobile u-margin-block-start-32 mobile-logo">
                 <a href={base}>
                     {#if $app.themeInUse === 'dark'}
                         <img
                             src={AppwriteLogoDark}
-                            width="93"
+                            width="160"
                             class="u-block u-only-dark"
                             alt="Appwrite Logo" />
                     {:else}
                         <img
                             src={AppwriteLogoLight}
-                            width="93"
+                            width="160"
                             class="u-block u-only-light"
                             alt="Appwrite Logo" />
                     {/if}
@@ -359,4 +359,13 @@
             padding-block-start: 5rem;
         }
     }
+
+    .mobile-logo {
+        position: fixed;
+        bottom: 1rem;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10;
+        margin-block-start: 0 !important;
+    }
 </style>

From 06db3a196be736c67e048bbedfc7994269a153bb Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 12:41:08 +0530
Subject: [PATCH 03/12] fix:chnaged dimensions from 160 to 120

---
 src/lib/layout/unauthenticated.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 0d74dfbd9e..bd7bc48f2d 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -59,13 +59,13 @@
                 {#if $app.themeInUse === 'dark'}
                     <img
                         src={AppwriteLogoDark}
-                        width="160"
+                        width="120"
                         class="u-block u-only-dark"
                         alt="Appwrite Logo" />
                 {:else}
                     <img
                         src={AppwriteLogoLight}
-                        width="160"
+                        width="120"
                         class="u-block u-only-light"
                         alt="Appwrite Logo" />
                 {/if}

From 7db339169354d48253b148fd543632ac592937ed Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 12:46:29 +0530
Subject: [PATCH 04/12] fix:chnaged dimensions from 160 to 120

---
 src/lib/layout/unauthenticated.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index bd7bc48f2d..bc958abcc9 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -172,13 +172,13 @@
                     {#if $app.themeInUse === 'dark'}
                         <img
                             src={AppwriteLogoDark}
-                            width="160"
+                            width="120"
                             class="u-block u-only-dark"
                             alt="Appwrite Logo" />
                     {:else}
                         <img
                             src={AppwriteLogoLight}
-                            width="160"
+                            width="120"
                             class="u-block u-only-light"
                             alt="Appwrite Logo" />
                     {/if}

From 869c6e2cc6b4062f79835a2223fce60f08c45c51 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 13:30:51 +0530
Subject: [PATCH 05/12] fix: layout issues

---
 src/lib/layout/unauthenticated.svelte | 11 ++++++++---
 src/routes/+error.svelte              | 16 ++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index bc958abcc9..1994d260c1 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -197,7 +197,8 @@
         z-index: 1;
         height: 100%;
         width: 100%;
-        padding-block: 2rem;
+        padding-block-start: 0;
+        padding-block-end: 2rem;
         padding-inline: 1rem;
         background-color: #ededf0 !important;
 
@@ -269,7 +270,7 @@
 
     /* Default (including mobile) */
     .side-default {
-        padding-block-start: 2.25rem;
+        padding-block-start: 0;
         padding-block-end: 2rem;
 
         div {
@@ -299,7 +300,7 @@
             background-position: top;
             background-size: cover;
 
-            padding-block-start: 6.25rem;
+            padding-block-start: 0;
             padding-block-end: 6.875rem;
 
             div {
@@ -353,6 +354,10 @@
         }
     }
 
+    .logo:not(.mobile-logo) {
+        padding-block-end: 20px;
+    }
+
     .review-footer-container {
         padding-block-start: 10rem;
         @media #{devices.$break1} {
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index cb1dde1edb..ae7713cc95 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -7,9 +7,9 @@
 <Unauthenticated>
     <div class="content">
         <div class="center">
-            <span>404 Page not found</span>
+            <span class="error-badge">404 Page not found</span>
         </div>
-        <h1>The page you're looking for doesn't exist.</h1>
+        <h1 class="error-title">The page you're looking for doesn't exist.</h1>
         <div class="center">
             <a href={base}>
                 <Button>Back to console</Button>
@@ -23,7 +23,7 @@
         text-align: center;
     }
 
-    span {
+    .error-badge {
         padding: var(--space-1, 2px) var(--space-3, 6px);
         border-radius: var(--border-radius-XS, 6px);
         background: rgba(0, 0, 0, 0.08);
@@ -38,7 +38,7 @@
         display: inline-block;
     }
 
-    h1 {
+    .error-title {
         color: #2d2d31;
         text-align: center;
         font-family: var(--font-family-sansSerif, Inter), sans-serif;
@@ -56,21 +56,21 @@
         justify-content: center;
     }
 
-    :global(.theme-light) span {
+    :global(.theme-light) .error-badge {
         background: rgba(0, 0, 0, 0.08);
         color: #56565c;
     }
 
-    :global(.theme-light) h1 {
+    :global(.theme-light) .error-title {
         color: #2d2d31;
     }
 
-    :global(.theme-dark) span {
+    :global(.theme-dark) .error-badge {
         background: rgba(255, 255, 255, 0.2);
         color: #c3c3c6;
     }
 
-    :global(.theme-dark) h1 {
+    :global(.theme-dark) .error-title {
         color: #ededf0;
     }
 </style>

From 229116177d3e77b36e0d635e692d0f664acd50a1 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 13:46:37 +0530
Subject: [PATCH 06/12] fix: added pink components instead of normal components

---
 src/routes/+error.svelte | 76 +++++-----------------------------------
 1 file changed, 8 insertions(+), 68 deletions(-)

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index ae7713cc95..9892099a1d 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -2,75 +2,15 @@
     import { base } from '$app/paths';
     import { Unauthenticated } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
+    import { Badge, Typography, Layout } from '@appwrite.io/pink-svelte';
 </script>
 
 <Unauthenticated>
-    <div class="content">
-        <div class="center">
-            <span class="error-badge">404 Page not found</span>
-        </div>
-        <h1 class="error-title">The page you're looking for doesn't exist.</h1>
-        <div class="center">
-            <a href={base}>
-                <Button>Back to console</Button>
-            </a>
-        </div>
-    </div>
+    <Layout.Stack gap="l" alignItems="center">
+        <Badge variant="secondary" content="404 Page not found" />
+        <Typography.Title size="l" align="center">
+            The page you're looking for doesn't exist.
+        </Typography.Title>
+        <Button href={base}>Back to console</Button>
+    </Layout.Stack>
 </Unauthenticated>
-
-<style>
-    .content {
-        text-align: center;
-    }
-
-    .error-badge {
-        padding: var(--space-1, 2px) var(--space-3, 6px);
-        border-radius: var(--border-radius-XS, 6px);
-        background: rgba(0, 0, 0, 0.08);
-        color: #56565c;
-        text-align: center;
-        font-family: var(--font-family-sansSerif, Inter), sans-serif;
-        font-size: var(--font-size-S, 14px);
-        font-style: normal;
-        font-weight: 400;
-        line-height: 140%;
-        letter-spacing: -0.063px;
-        display: inline-block;
-    }
-
-    .error-title {
-        color: #2d2d31;
-        text-align: center;
-        font-family: var(--font-family-sansSerif, Inter), sans-serif;
-        font-size: var(--font-size-XXXL, 32px);
-        font-style: normal;
-        font-weight: 400;
-        line-height: 140%;
-        letter-spacing: -0.144px;
-        margin-top: 8px;
-        margin-bottom: 32px;
-    }
-
-    .center {
-        display: flex;
-        justify-content: center;
-    }
-
-    :global(.theme-light) .error-badge {
-        background: rgba(0, 0, 0, 0.08);
-        color: #56565c;
-    }
-
-    :global(.theme-light) .error-title {
-        color: #2d2d31;
-    }
-
-    :global(.theme-dark) .error-badge {
-        background: rgba(255, 255, 255, 0.2);
-        color: #c3c3c6;
-    }
-
-    :global(.theme-dark) .error-title {
-        color: #ededf0;
-    }
-</style>

From acf44eb671683541da2f2a68f483c69cc329baca Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 13:54:48 +0530
Subject: [PATCH 07/12] fix: reverted block start padding chnage

---
 src/lib/layout/unauthenticated.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 1994d260c1..a115df4fe6 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -270,7 +270,7 @@
 
     /* Default (including mobile) */
     .side-default {
-        padding-block-start: 0;
+        padding-block-start: 2.25rem;
         padding-block-end: 2rem;
 
         div {
@@ -300,7 +300,7 @@
             background-position: top;
             background-size: cover;
 
-            padding-block-start: 0;
+            padding-block-start: 6.25rem;
             padding-block-end: 6.875rem;
 
             div {

From 1d42aa79b5421830a5176eada09f14fad68e4bab Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 14:13:30 +0530
Subject: [PATCH 08/12] fix: spacing removbal from top in mobile

---
 src/lib/layout/unauthenticated.svelte | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index a115df4fe6..c9eafadb01 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -292,6 +292,13 @@
         }
     }
 
+    /* mobile only: remove top padding toeliminate extra space */
+    @media #{devices.$break1} {
+        .side-default {
+            padding-block-start: 0;
+        }
+    }
+
     /* for smaller screens */
     @media #{devices.$break2open} {
         .side-default {

From cd370e96fc2df783798cdbac890a9cf5f75447cb Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 20 Aug 2025 14:38:22 +0530
Subject: [PATCH 09/12] fix:added spacing of 1.25

---
 src/lib/layout/unauthenticated.svelte | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index c9eafadb01..e45caa35c6 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -197,8 +197,7 @@
         z-index: 1;
         height: 100%;
         width: 100%;
-        padding-block-start: 0;
-        padding-block-end: 2rem;
+        padding-block: 2rem;
         padding-inline: 1rem;
         background-color: #ededf0 !important;
 
@@ -361,10 +360,6 @@
         }
     }
 
-    .logo:not(.mobile-logo) {
-        padding-block-end: 20px;
-    }
-
     .review-footer-container {
         padding-block-start: 10rem;
         @media #{devices.$break1} {
@@ -374,7 +369,7 @@
 
     .mobile-logo {
         position: fixed;
-        bottom: 1rem;
+        bottom: 1.25rem;
         left: 50%;
         transform: translateX(-50%);
         z-index: 10;

From 7c9f8ae7218f320d33db5bf126d14fe65e5d2cbf Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Thu, 21 Aug 2025 12:11:54 +0530
Subject: [PATCH 10/12] fix: Apply the same spacing on all devices

---
 src/lib/layout/unauthenticated.svelte | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index e45caa35c6..7e9d3c14fe 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -10,6 +10,7 @@
     import type { Campaign } from '$lib/stores/campaigns';
     import { Typography, Layout, Avatar } from '@appwrite.io/pink-svelte';
     import { getCampaignImageUrl } from '$routes/(public)/card/helpers';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     export const imgLight = LoginLight;
     export const imgDark = LoginDark;
@@ -44,7 +45,7 @@
 
 <main class="grid-1-1 is-full-page" id="main">
     <section
-        class={`u-flex u-flex-vertical ${variation !== 'default' ? 'u-cross-center u-main-center u-height-100-percent u-width-full-line side-bg' : 'side-default'}`}
+        class={`u-flex u-flex-vertical ${variation !== 'default' ? 'u-cross-center u-main-center u-height-100-percent u-width-full-line side-bg' : !$isSmallViewport ? 'side-default' : ''}`}
         style:--url={variation !== 'default'
             ? ''
             : `url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
@@ -159,7 +160,6 @@
                 <div class="u-margin-block-start-24">
                     <slot />
                 </div>
-
                 <ul
                     class="inline-links is-center is-with-sep u-margin-block-start-32"
                     class:u-hide={!$$slots?.links}>
@@ -291,13 +291,6 @@
         }
     }
 
-    /* mobile only: remove top padding toeliminate extra space */
-    @media #{devices.$break1} {
-        .side-default {
-            padding-block-start: 0;
-        }
-    }
-
     /* for smaller screens */
     @media #{devices.$break2open} {
         .side-default {
@@ -368,11 +361,11 @@
     }
 
     .mobile-logo {
-        position: fixed;
-        bottom: 1.25rem;
+        position: absolute;
+        bottom: 20px;
         left: 50%;
-        transform: translateX(-50%);
-        z-index: 10;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
         margin-block-start: 0 !important;
     }
 </style>

From 0b29335f36737c329a235905f9daec402bf62601 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Thu, 21 Aug 2025 12:22:14 +0530
Subject: [PATCH 11/12] fix: Apply the same width for desktop logo

---
 src/lib/layout/unauthenticated.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 7e9d3c14fe..6b64f61f75 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -60,13 +60,13 @@
                 {#if $app.themeInUse === 'dark'}
                     <img
                         src={AppwriteLogoDark}
-                        width="120"
+                        width="160"
                         class="u-block u-only-dark"
                         alt="Appwrite Logo" />
                 {:else}
                     <img
                         src={AppwriteLogoLight}
-                        width="120"
+                        width="160"
                         class="u-block u-only-light"
                         alt="Appwrite Logo" />
                 {/if}
@@ -362,7 +362,7 @@
 
     .mobile-logo {
         position: absolute;
-        bottom: 20px;
+        bottom: 60px;
         left: 50%;
         transform: translate(-50%, -50%);
         max-width: 100%;

From 332512e6682a21cab3cd6d693c351e5b86e2cfc4 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Thu, 21 Aug 2025 12:54:06 +0530
Subject: [PATCH 12/12] fix: chnaged loader bottom

---
 src/lib/layout/unauthenticated.svelte | 2 +-
 static/css/loading.css                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 6b64f61f75..e48f9e6e60 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -362,7 +362,7 @@
 
     .mobile-logo {
         position: absolute;
-        bottom: 60px;
+        bottom: 20px;
         left: 50%;
         transform: translate(-50%, -50%);
         max-width: 100%;
diff --git a/static/css/loading.css b/static/css/loading.css
index aa2b8324af..f4b2929858 100644
--- a/static/css/loading.css
+++ b/static/css/loading.css
@@ -38,7 +38,7 @@ body {
     visibility: hidden;
     position: absolute;
     max-width: 100%;
-    bottom: 60px;
+    bottom: 20px;
     left: 50%;
     transform: translate(-50%, -50%);
 }