From 326d0bc2bef3a4dedb3b17da3ebbdb25b0b3be4f Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sun, 14 Aug 2022 23:58:17 -0500
Subject: [PATCH] fix: sections now looking good on mobile and tablet

---
 .../LaunchWeek/LaunchSection/index.tsx        | 150 ++++++++++--------
 1 file changed, 84 insertions(+), 66 deletions(-)

diff --git a/apps/www/components/LaunchWeek/LaunchSection/index.tsx b/apps/www/components/LaunchWeek/LaunchSection/index.tsx
index 001b58d79b4..1ddcc2321ea 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/index.tsx
+++ b/apps/www/components/LaunchWeek/LaunchSection/index.tsx
@@ -15,10 +15,78 @@ export const LaunchSection = (props: WeekDayProps) => {
   const nextDayNotShipped = props.shipped && !days[props.index + 1]?.shipped
   const [videoVisible, setVideoVisible] = useState(false)
 
+  interface ClassNameComponent {
+    className?: string
+  }
+
+  const Header = ({ className }: ClassNameComponent) => (
+    <div className={['flex flex-col gap-3', className].join(' ')}>
+      {/* START timeline dot */}
+      <div
+        className={[
+          'absolute mt-[4px] -ml-[21px] h-3 w-3 rounded-full border md:-ml-[37px] lg:-ml-[37.5px]',
+          props.shipped ? 'border-brand-900 bg-brand-400' : 'border-purple-900 bg-purple-300',
+        ].join(' ')}
+      ></div>
+      {/* END timeline dot */}
+      <div className="flex items-center gap-3">
+        <span className="text-scale-1100 text-sm">{props.date}</span>
+        {props.shipped ? (
+          <Badge>
+            <div className="flex items-center gap-2">
+              <div className="w-4">
+                <TruckIcon />
+              </div>{' '}
+              Shipped
+            </div>
+          </Badge>
+        ) : (
+          <Badge color="purple">Not shipped yet</Badge>
+        )}
+      </div>
+      <h4 className="text-scale-1200 text-2xl md:text-3xl lg:text-4xl">
+        {props.shipped ? props.title : props.dd + ' 08:00 PT | 11:00 ET'}
+      </h4>
+
+      {/* {props.shipped && props.announcements && (
+      <div>
+        {props.announcements.map((announcement: Announcement) => (
+          <Announcement {...announcement} />
+        ))}
+      </div>
+    )} */}
+      {props.shipped && <p className="text-scale-1100 text-base">{props.description}</p>}
+    </div>
+  )
+
+  const TimelineLine = ({ className }: ClassNameComponent) => {
+    return (
+      <>
+        {/* START timeline line */}
+        {props.index !== days.length - 1 && (
+          <div
+            className={[
+              'launch-week-timeline-border absolute left-0 top-[4px] h-full border-l',
+              nextDayNotShipped
+                ? 'launch-week-timeline-border--approaching'
+                : props.shipped
+                ? 'border-brand-900'
+                : 'border-purple-700',
+              className,
+            ].join(' ')}
+          ></div>
+        )}
+        {/* END timeline line */}
+      </>
+    )
+  }
+
   return (
-    <div className="grid grid-cols-12" id={`launch-week-5-day-${props.d}`}>
+    <div className="relative grid grid-cols-12" id={`launch-week-5-day-${props.d}`}>
+      <TimelineLine className="block lg:hidden" />
       {props.shippingHasStarted && (
-        <div className="col-span-12 pb-16 lg:col-span-6 lg:pr-8">
+        <div className="col-span-12 pb-8 pl-4 md:pl-8 lg:col-span-6 lg:pb-16 lg:pl-0 lg:pr-8">
+          <Header className="mb-8 flex lg:hidden" />
           {!props.shipped ? (
             <div className="relative overflow-hidden rounded-xl">
               <img
@@ -38,15 +106,15 @@ export const LaunchSection = (props: WeekDayProps) => {
                 <div
                   onClick={() => setVideoVisible(true)}
                   className="
-                      absolute    
-                      top-0
-                      left-0
-                      flex
-                          h-full
-                          w-full
-                          items-center
-                          justify-center
-                        "
+                    absolute    
+                    top-0
+                    left-0
+                    flex
+                    h-full
+                    w-full
+                    items-center
+                    justify-center
+                  "
                 >
                   <PlayIcon
                     strokeWidth={1.5}
@@ -63,7 +131,6 @@ export const LaunchSection = (props: WeekDayProps) => {
                 header={
                   <div className="flex items-center justify-between">
                     <span className="text-scale-1200">{props.title}</span>
-
                     <XIcon
                       className="text-scale-900 hover:text-scale-1200 w-4 cursor-pointer transition"
                       onClick={() => setVideoVisible(false)}
@@ -91,66 +158,17 @@ export const LaunchSection = (props: WeekDayProps) => {
         className={[
           `relative col-span-12 flex flex-col
               gap-8
+              pl-4
+              md:pl-8
               lg:pl-8
         `,
           props.shipped ? 'border-brand-900' : 'border-purple-700',
           props.shippingHasStarted && 'lg:col-span-6',
-          !lastIndex && 'pb-16',
+          !lastIndex && 'pb-8 lg:pb-16',
         ].join(' ')}
       >
-        {/* START timeline line */}
-        {props.index !== days.length - 1 && (
-          <div
-            className={[
-              'launch-week-timeline-border absolute left-0 top-[4px] h-full border-l',
-              nextDayNotShipped
-                ? 'launch-week-timeline-border--approaching'
-                : props.shipped
-                ? 'border-brand-900'
-                : 'border-purple-700',
-            ].join(' ')}
-          ></div>
-        )}
-        {/* END timeline line */}
-
-        <div className="flex flex-col gap-4 pl-4 lg:pl-0">
-          {/* START timeline dot */}
-          <div
-            className={[
-              'absolute mt-[4px] -ml-[21px] h-3 w-3 rounded-full border lg:-ml-[37.5px]',
-              props.shipped ? 'border-brand-900 bg-brand-400' : 'border-purple-900 bg-purple-300',
-            ].join(' ')}
-          ></div>
-          {/* END timeline dot */}
-
-          <div className="flex items-center gap-3">
-            <span className="text-scale-1100 text-sm">{props.date}</span>
-            {props.shipped ? (
-              <Badge>
-                <div className="flex items-center gap-2">
-                  <div className="w-4">
-                    <TruckIcon />
-                  </div>{' '}
-                  Shipped
-                </div>
-              </Badge>
-            ) : (
-              <Badge color="purple">Not shipped yet</Badge>
-            )}
-          </div>
-          <h4 className="text-scale-1200 text-2xl md:text-3xl lg:text-4xl">
-            {props.shipped ? props.title : props.dd + ' 08:00 PT | 11:00 ET'}
-          </h4>
-
-          {/* {props.shipped && props.announcements && (
-              <div>
-                {props.announcements.map((announcement: Announcement) => (
-                  <Announcement {...announcement} />
-                ))}
-              </div>
-            )} */}
-          {props.shipped && <p className="text-scale-1100 text-base">{props.description}</p>}
-        </div>
+        <TimelineLine className="hidden lg:block" />
+        <Header className="hidden lg:flex" />
         {props.shipped && (
           <div className="flex flex-col gap-12">
             {props.articles &&