Merge pull request #2231 from appwrite/feat-SER-125-New-404-page

Author: ItzNotABug

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,26 +160,25 @@
                 <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}>
                     <slot name="links" />
                 </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="120"
                             class="u-block u-only-dark"
                             alt="Appwrite Logo" />
                     {:else}
                         <img
                             src={AppwriteLogoLight}
-                            width="93"
+                            width="120"
                             class="u-block u-only-light"
                             alt="Appwrite Logo" />
                     {/if}
@@ -359,4 +359,13 @@
             padding-block-start: 5rem;
         }
     }
+
+    .mobile-logo {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
+        margin-block-start: 0 !important;
+    }
 </style>

src/routes/+error.svelte

@@ -1,16 +1,16 @@
 <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';
+    import { Badge, Typography, Layout } from '@appwrite.io/pink-svelte';
 </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>
+    <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>

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%);
 }