Merge pull request #426 from appwrite/fix/console-design-review

refactor: small design review changes

Author: christyjacob4

src/lib/layout/notifications.svelte

@@ -26,4 +26,12 @@
         right: 24px;
         z-index: 1000;
     }
+
+    @media (max-width: 512px) {
+        section {
+            top: calc(var(--main-header-height) + 16px);
+            right: 16px;
+            left: 16px;
+        }
+    }
 </style>

src/lib/layout/unauthenticated.svelte

@@ -146,9 +146,7 @@
         class:is-cloud={isCloud}
         style:--url={`url(${AppwriteCloudBg})`}
         style:--url-mobile={`url(${AppwriteCloudBgMobile})`}>
-        <div
-            class="container u-flex u-flex-vertical u-cross-center full-height"
-            class:cloud-contents={isCloud}>
+        <div class="container u-flex u-flex-vertical u-cross-center" class:cloud-contents={isCloud}>
             {#if isCloud}
                 <a class="mobile-logo is-only-mobile" href={user ? '/console' : '/'}>
                     <img
@@ -185,6 +183,10 @@
 </main>
 
 <style lang="scss">
+    :global(body) {
+        --main-header-height: 0px !important;
+    }
+
     @media (prefers-reduced-motion: reduce) {
         main * {
             animation: none !important;
@@ -203,11 +205,6 @@
         }
     }
 
-    .full-height {
-        block-size: 100vh;
-        block-size: 100lvh;
-    }
-
     .cloud-section {
         background: var(--url);
         background-repeat: no-repeat;
@@ -282,7 +279,7 @@
     }
 
     .mobile-logo {
-        margin-block-start: 3rem;
+        margin-block-start: 1rem;
         margin-block-end: 0.5rem;
     }
 
@@ -345,6 +342,10 @@
         .cloud-section {
             display: none;
         }
+
+        section:last-child {
+            padding-block-end: 32px;
+        }
     }
 
     @media (min-width: 530px) and (max-width: 767px) {

src/routes/card/[uid]/+page.svelte

@@ -83,7 +83,7 @@
 
 <div class="wrapper">
     <div class="card">
-        <h3 class="heading-level-3 u-flex u-cross-center u-gap-8 no-text-select">
+        <h3 class="heading-level-3 no-text-select">
             {title}
             <button class="confetti-btn" on:click={() => triggerConfettiKey++}>
                 🎉
@@ -390,7 +390,7 @@
     .confetti-btn {
         animation: shake 2000ms ease infinite;
         user-select: none;
-        display: grid;
+        display: inline-flex;
         place-items: center;
         position: relative;