From a447f41e28b6a6c0ebb61c04e9a9abba3f4debca Mon Sep 17 00:00:00 2001
From: Joshua Melville <joshua.melville@northwestern.edu>
Date: Mon, 18 Mar 2024 18:58:44 +0200
Subject: [PATCH] better responsiveness

---
 apps/documentation/components/Hero.tsx             | 14 ++++++++------
 .../components/MobileSidebarDialog.tsx             |  4 ++--
 .../components/SharedNav/SharedNav.tsx             |  4 ++--
 packages/ui/src/Divider.tsx                        |  2 +-
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/documentation/components/Hero.tsx b/apps/documentation/components/Hero.tsx
index 38e6365..c1e5fe3 100644
--- a/apps/documentation/components/Hero.tsx
+++ b/apps/documentation/components/Hero.tsx
@@ -31,7 +31,9 @@ function ProjectCard({
       >
         <div className="flex shrink-0 items-center gap-4">
           <img src={icon} className="h-16 w-auto" alt={title} />
-          <FancyHeading variant="h2">{title}</FancyHeading>
+          <FancyHeading variant="h2" margin="none">
+            {title}
+          </FancyHeading>
         </div>
         <Paragraph>{description}</Paragraph>
       </motion.div>
@@ -46,12 +48,12 @@ export function Hero() {
   return (
     <>
       <motion.div
-        className="m-4 flex max-w-5xl flex-col items-center gap-10 sm:m-8 md:-mt-8 md:flex-1 md:justify-center lg:gap-20"
+        className="mx-4 flex max-w-5xl flex-col items-center gap-10 sm:mx-8 md:-mt-8 md:flex-1 md:justify-center lg:gap-16"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
       >
-        <div className="flex flex-col-reverse md:flex-row">
-          <div className="flex flex-col items-center justify-center md:basis-3/5">
+        <div className="flex flex-col-reverse items-center justify-center text-center md:flex-row md:justify-start md:text-left">
+          <div className="flex flex-col items-center justify-center md:basis-1/2 lg:basis-3/5">
             <FancyHeading variant="h1" className="text-4xl">
               {t('Hero.title')}
             </FancyHeading>
@@ -62,7 +64,7 @@ export function Hero() {
             />
           </div>
           {resolvedTheme !== 'dark' && (
-            <div className="hidden shrink-0 items-center justify-center md:flex md:basis-2/5">
+            <div className="basis-auto items-center justify-center md:flex md:basis-1/2 lg:basis-2/5">
               <motion.div
                 initial={{ opacity: 0, y: 200, scale: 0.8 }}
                 animate={{ opacity: 1, y: 0, scale: 1 }}
@@ -74,7 +76,7 @@ export function Hero() {
               >
                 <img
                   src="images/robot.svg"
-                  className="h-auto w-full"
+                  className="h-auto w-36 md:w-full"
                   alt="Robot"
                 />
               </motion.div>
diff --git a/apps/documentation/components/MobileSidebarDialog.tsx b/apps/documentation/components/MobileSidebarDialog.tsx
index aa5e818..c919276 100644
--- a/apps/documentation/components/MobileSidebarDialog.tsx
+++ b/apps/documentation/components/MobileSidebarDialog.tsx
@@ -31,10 +31,10 @@ export default function MobileSidebarDialog({
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetContent
-        className="flex h-[100vh] w-full flex-col overflow-y-auto bg-background"
+        className="flex h-[100vh] w-full flex-col overflow-y-auto bg-background p-0"
         side={'left'}
       >
-        <div className="sticky top-2 flex items-center justify-between bg-background">
+        <div className="sticky top-0 z-10 flex items-center justify-between bg-background">
           <LogoComponent className="mx-4 my-2 block w-fit" />
           <Button
             size={'sm'}
diff --git a/apps/documentation/components/SharedNav/SharedNav.tsx b/apps/documentation/components/SharedNav/SharedNav.tsx
index 7de6c3f..5783b47 100644
--- a/apps/documentation/components/SharedNav/SharedNav.tsx
+++ b/apps/documentation/components/SharedNav/SharedNav.tsx
@@ -8,8 +8,8 @@ export default function SharedNav() {
   return (
     <motion.nav
       className={cn(
-        'sticky top-0 z-50 mx-auto flex w-full flex-auto grow-0 items-center justify-between gap-4 bg-background/80 px-4 py-2 shadow-md backdrop-blur-sm',
-        'lg:relative lg:flex lg:bg-transparent lg:px-6 lg:py-4 lg:shadow-none lg:backdrop-blur-0',
+        'sticky top-0 z-50 mx-auto flex w-full flex-auto grow-0 items-center justify-between gap-4 border-b border-border bg-background/50 px-4 py-2 backdrop-blur-sm',
+        'lg:relative lg:flex lg:border-none lg:bg-transparent lg:px-6 lg:py-4 lg:backdrop-blur-0',
       )}
       initial={{ y: -100 }}
       animate={{ y: 0 }}
diff --git a/packages/ui/src/Divider.tsx b/packages/ui/src/Divider.tsx
index df81d3f..e47d4f0 100644
--- a/packages/ui/src/Divider.tsx
+++ b/packages/ui/src/Divider.tsx
@@ -3,7 +3,7 @@ import { cn } from './utils';
 export const Divider = ({ className }: { className?: string }) => (
   <hr
     className={cn(
-      'mx-auto w-full rounded-full border-[1.5px] border-border',
+      'mx-auto w-full rounded-full border-[1.5px] border-foreground',
       className,
     )}
   />