From 405f656f98e8beaf4666c8e950ea14ca6bb2ea80 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 22 Apr 2024 11:51:50 -0700
Subject: [PATCH] fix(layout): move logo to bottom on mobile to match design

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

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 81719b189..1ceb0057c 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -14,7 +14,7 @@
     <section
         class="u-flex u-flex-vertical"
         style:--url={`url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
-        <div class="logo u-flex u-gap-16">
+        <div class="logo u-flex u-gap-16 is-not-mobile">
             <a href={user ? '/console' : '/'}>
                 {#if $app.themeInUse === 'dark'}
                     <img
@@ -38,7 +38,7 @@
             <p>Build like a team of hundreds<span class="underscore">_</span></p>
         </div>
     </section>
-    <section class="grid-1-1-col-2 u-flex">
+    <section class="grid-1-1-col-2 u-flex u-flex-vertical u-cross-center u-main-center">
         <slot name="top" />
         <div class="container u-flex u-flex-vertical u-cross-center u-main-center">
             <div class="form-container u-width-full-line">
@@ -52,10 +52,30 @@
                     <slot />
                 </div>
 
-                <ul class="inline-links is-center is-with-sep u-margin-block-start-32">
+                <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">
+                <a href={user ? '/console' : '/'}>
+                    {#if $app.themeInUse === 'dark'}
+                        <img
+                            src={AppwriteLogoDark}
+                            width="93"
+                            class="u-block u-only-dark"
+                            alt="Appwrite Logo" />
+                    {:else}
+                        <img
+                            src={AppwriteLogoLight}
+                            width="93"
+                            class="u-block u-only-light"
+                            alt="Appwrite Logo" />
+                    {/if}
+                </a>
+            </div>
         </div>
     </section>
 </main>