chore(styles): improve mobile layout in footer, modify spacing, and enhance support documentation link appearance

Author: partyparrotgreg

apps/insights/src/components/Root/footer.module.scss

@@ -7,6 +7,10 @@
   // XL
   padding: theme.spacing(8) 0;
 
+  @include theme.mobile {
+    padding-bottom: theme.spacing(20);
+  }
+
   // bg-beige-100 sm:border-t sm:border-stone-300
 
   .topContent {
@@ -84,6 +88,7 @@
       justify-content: flex-end;
       gap: theme.spacing(2);
 
+
       // justify-between
     }
   }
@@ -96,11 +101,6 @@
     flex-flow: row nowrap;
     justify-content: space-between;
 
-    @media screen and (max-width: theme.breakpoint("sm")) {
-      flex-flow: column nowrap;
-      align-items: flex-start;
-    }
-
     // "flex-col
 
     @include theme.max-width;

apps/insights/src/components/Root/footer.tsx

@@ -1,3 +1,4 @@
+import { ArrowSquareOut } from "@phosphor-icons/react/dist/ssr/ArrowSquareOut";
 import {
   type Props as ButtonProps,
   Button,
@@ -21,10 +22,10 @@ export const Footer = () => (
         <div className={styles.divider} />
         <div className={styles.help}>
           <SupportDrawer>
-            <Link>Help</Link>
+            <Link>Support</Link>
           </SupportDrawer>
           <Link href="https://docs.pyth.network" target="_blank">
-            Documentation
+            Documentation <ArrowSquareOut />
           </Link>
         </div>
       </div>

apps/insights/src/components/Root/header.module.scss

@@ -25,11 +25,10 @@
       .logoLink {
         padding: theme.spacing(3);
         color: theme.color("foreground");
-        position: absolute;
-        left: -#{theme.spacing(16)};
-        @include theme.mobile {
-          left: 0;
-          position: relative;
+        
+        @include theme.desktop {
+          position: absolute;
+          left: -#{theme.spacing(16)};
         }
 
         .logoWrapper {
@@ -65,12 +64,15 @@
       @include theme.row;
 
       .themeSwitch {
-        position: absolute;
-        right: -#{theme.spacing(16)};
-        top: 0;
+        position: relative;
         @include theme.mobile {
           display: none;
         }
+        @include theme.desktop {
+          display: block;
+          position: absolute;
+          right: -#{theme.spacing(16)};
+        }
       }
     }
     // Reason: you can absolute position relatively to a container and disable this behavior on mobile

packages/component-library/src/Drawer/index.module.scss

@@ -27,6 +27,11 @@
       border-radius: 0;
       border: none;
       padding-bottom: 0;
+      // Remove if we don't want a gap on the top
+      // Will require to change the animation direction
+      // top: 5rem;
+      // border-top-left-radius: theme.border-radius("2xl");
+      // border-top-right-radius: theme.border-radius("2xl");
     }
 
     .heading {

packages/component-library/src/MainNavTabs/index.module.scss

@@ -5,9 +5,28 @@
 
   @include theme.row;
 
+  @include theme.mobile {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 900;
+    padding: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 3rem;
+    border-top: 1px solid theme.color("border");
+    background: theme.color("background", "primary");
+  }
+
   .tab {
     position: relative;
     outline: none;
+    @include theme.mobile {
+flex-grow: 1;
+    text-align: center;
+    }
 
     .bubble {
       position: absolute;
@@ -59,25 +78,3 @@
     }
   }
 }
-
-
-@include theme.mobile {
-  .mainNavTabs {
-    background: red;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 900;
-    padding: 0.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 3rem;
-    border-top: 1px solid theme.color("border");
-  }
-  .tab {
-    flex-grow: 1;
-    text-align: center;
-  }
-}

packages/component-library/src/theme.scss

@@ -83,10 +83,11 @@ $border-radius: (
 $brakpoints: (
   "xs": 480px,
   "sm": 720px,
-  "md": 768px,
+  "md": 960px,
   "lg": 1024px,
   "xl": 1280px,
   "2xl": 1536px,
+  "3xl": 1720px,
 );
 
 @function breakpoint($breakpoint) {
@@ -95,7 +96,7 @@ $brakpoints: (
 
 
 @mixin mobile() {
-  @media screen and (max-width: breakpoint("sm")) {
+  @media screen and (max-width: breakpoint("md")) {
     @content;
   }
 }
@@ -107,7 +108,7 @@ $brakpoints: (
 }
 
 @mixin desktop() {
-  @media screen and (min-width: breakpoint("xl")) {
+  @media screen and (min-width: breakpoint("3xl")) {
     @content;
   }
 }