From 2bec09ca19b789c85432f2670959ed346f99142e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 1 May 2023 00:07:26 +0100
Subject: [PATCH] refactor: cloud design review

---
 src/lib/layout/unauthenticated.svelte | 26 +++++++++++++++++---------
 src/routes/+layout.svelte             |  4 ++++
 src/routes/card/+layout.svelte        | 13 +++++++++++++
 src/routes/card/display.svelte        | 20 ++++++++++++++------
 4 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 src/routes/card/+layout.svelte

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index a4c75fc06..677d2dd00 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -144,7 +144,9 @@
         class="grid-1-1-col-2 u-flex u-main-center u-cross-center"
         class:is-cloud={isCloud}
         style:--url={`url(${AppwriteCloudBg})`}>
-        <div class="container u-flex u-flex-vertical u-main-center u-cross-center full-height">
+        <div
+            class="container u-flex u-flex-vertical u-cross-center full-height"
+            class:cloud-contents={isCloud}>
             {#if isCloud}
                 <a class="mobile-logo is-only-mobile" href={user ? '/console' : '/'}>
                     <img
@@ -154,6 +156,10 @@
                         class="u-block"
                         alt="Appwrite" />
                 </a>
+
+                <div class="is-only-mobile theme-dark">
+                    <div class="mobile-beta">Public <span>beta</span></div>
+                </div>
             {/if}
 
             <div class="u-max-width-500 u-width-full-line">
@@ -166,12 +172,6 @@
                     <slot name="links" />
                 </ul>
             </div>
-
-            {#if isCloud}
-                <div class="is-only-mobile u-margin-block-start-auto theme-dark">
-                    <div class="mobile-beta">Public <span>beta</span></div>
-                </div>
-            {/if}
         </div>
     </section>
 </main>
@@ -274,8 +274,8 @@
     }
 
     .mobile-logo {
-        margin-block-start: 6.25rem;
-        margin-block-end: 3rem;
+        margin-block-start: 5rem;
+        margin-block-end: 0.5rem;
     }
 
     .mobile-beta {
@@ -288,11 +288,19 @@
         }
     }
 
+    .cloud-contents {
+        justify-content: center;
+    }
+
     @media (max-width: 767px) {
         .main-cloud {
             background-color: hsl(var(--color-neutral-500));
         }
 
+        .cloud-contents {
+            justify-content: initial;
+        }
+
         .is-cloud {
             background: var(--url);
             background-position: center -150px;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 78564d2c4..4a075f587 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -172,4 +172,8 @@
             background: var(--separator-color);
         }
     }
+
+    [type='checkbox']:where(:checked)::before {
+        content: '\ea38';
+    }
 </style>
diff --git a/src/routes/card/+layout.svelte b/src/routes/card/+layout.svelte
new file mode 100644
index 000000000..9a0263a42
--- /dev/null
+++ b/src/routes/card/+layout.svelte
@@ -0,0 +1,13 @@
+<script>
+    import { Shell } from '$lib/layout';
+    import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
+    import Footer from '$lib/layout/footer.svelte';
+</script>
+
+<Shell>
+    <a class="logo" slot="header" href={`/console`}>
+        <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
+    </a>
+    <slot />
+    <Footer slot="footer" />
+</Shell>
diff --git a/src/routes/card/display.svelte b/src/routes/card/display.svelte
index 96fd48bdb..d16cc4bd9 100644
--- a/src/routes/card/display.svelte
+++ b/src/routes/card/display.svelte
@@ -129,6 +129,12 @@
                         Create your Cloud account and unlock your exclusive card!
                     {/if}
                 </p>
+                {#if variant === 'external'}
+                    <a
+                        href="/card"
+                        class="button u-width-full-line u-main-center u-margin-block-start-16"
+                        >Claim your card</a>
+                {/if}
             </div>
         </div>
         <img class="card-preview" src={frontImg} alt="The front of the card" />
@@ -160,8 +166,6 @@
         <div class="card-footer">
             {#if variant === 'owner'}
                 <a href="/console" class="button">Go to console</a>
-            {:else}
-                <a href="/card" class="button">Claim your card</a>
             {/if}
         </div>
     </div>
@@ -218,7 +222,6 @@
 <Modal bind:show={showEmbedCode}>
     <svelte:fragment slot="header">Get Embed Code</svelte:fragment>
     <div class="u-overflow-hidden">
-        HTML Code
         <Code language="html" code={embedCode} noMargin />
     </div>
     <svelte:fragment slot="footer">
@@ -234,6 +237,13 @@
         --sep-clr: hsl(var(--color-neutral-150));
     }
 
+    :global(.main-content) {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        flex-grow: 1;
+    }
+
     .wrapper {
         --glow: transparent;
         --beta-bg: rgba(240, 46, 101, 0.16);
@@ -250,8 +260,6 @@
         padding-block: 4rem;
         gap: max(4rem, 10vw);
         overflow: hidden;
-
-        min-height: 100vh;
     }
 
     .card {
@@ -392,7 +400,7 @@
         gap: 0.5rem;
 
         position: absolute;
-        top: 80%;
+        top: 75%;
         left: 50%;
         translate: -50% -50%;