layout fixes

apps/www/components/LaunchWeek/Ticket/TicketContainer.tsx

@@ -35,11 +35,7 @@ export default function Conf({
     >
       <ConfContainer>
         {pageState === 'registration' && !sharePage ? (
-          <>
-            {/* <Hero /> */}
-            <Form />
-            {/* <LearnMore /> */}
-          </>
+          <Form />
         ) : (
           <Ticket
             username={userData.username}

apps/www/components/LaunchWeek/Ticket/conf-container.module.css

@@ -1,4 +1,4 @@
-.container {
+/* .container {
   margin: auto 0;
   padding: 0 var(--space-4x);
 }
@@ -8,4 +8,4 @@
     margin: auto;
     padding: 0 var(--space-8x);
   }
-}
+} */

apps/www/components/LaunchWeek/Ticket/conf-container.tsx

@@ -1,5 +1,5 @@
 import styles from './conf-container.module.css'
 
 export default function ConfContainer({ children }: { children: React.ReactNode }) {
-  return <div className={styles.container}>{children}</div>
+  return <div>{children}</div>
 }

apps/www/components/LaunchWeek/Ticket/form.tsx

@@ -155,12 +155,12 @@ export default function Form({ sharePage, align = 'Center' }: Props) {
   useEmailQueryParam('email', setEmail)
 
   return (
-    <div className="xs:mt-8 lw_mid:mt-16">
+    <div className="flex flex-col gap-8">
       <div
         className={cn(
           styleUtils['appear-fifth'],
           [styles[`formInfo${align}`]].join(' '),
-          `flex flex-col gap-2 sm:items-center lw_mid:items-start !pb-4`
+          `flex flex-col gap-2 items-center xl:items-start`
         )}
       >
         <p className="text-scale-1200 text-base w-full">Coming soon</p>
@@ -188,15 +188,14 @@ export default function Form({ sharePage, align = 'Center' }: Props) {
           </div>
         </div>
       ) : (
-        <form className="relative max-w-[380px] xs:m-auto lw_mid:ml-0" onSubmit={onSubmit}>
+        <form className="relative max-w-[380px] min-w-[320px] mx-auto xl:mx-0" onSubmit={onSubmit}>
           <input
             className={`
-            transition-all
-
-            border border-scale-300 bg-scaleA-200 h-10
-            focus:border-scale-500 focus:ring-scaleA-300
-
-            text-scale-1000 text-sm rounded-full w-full px-5`}
+              transition-all
+              border border-scale-300 bg-scaleA-200 h-10
+              focus:border-scale-500 focus:ring-scaleA-300
+              text-scale-1000 text-sm rounded-full w-full px-5
+            `}
             type="email"
             id="email-input-field"
             value={email}

apps/www/components/LaunchWeek/Ticket/ticket-form.tsx

@@ -69,20 +69,11 @@ export default function Form({ defaultUsername = '', setTicketGenerationState }:
           type="submit"
           className="rounded-full bg-scale-300 py-1 px-3 border border-scale-400 dark:text-white text-sm mb-1 transition-all hover:bg-scale-400"
           disabled={formState === 'loading' || Boolean(username)}
-          onClick={() => {
-            // if (formRef && formRef.current && isMobileOrTablet()) {
-            //   scrollTo(formRef.current, formRef.current.offsetHeight);
-            // }
-          }}
         >
           <span className={`${username && 'text-scale-900'}`}>
             {username ? 'Done!' : 'Connect with GitHub'}
           </span>
-          {username ? (
-            <span className={ticketFormStyles.checkIcon}>
-              {/* <CheckIcon color="#fff" size={24} /> */}
-            </span>
-          ) : null}
+          {username ? <span className={ticketFormStyles.checkIcon}></span> : null}
         </button>
         {!username && (
           <p className={'text-xs text-scale-700 dark:text-scale-900 pl-1'}>

apps/www/components/LaunchWeek/Ticket/ticket.module.css

@@ -53,10 +53,10 @@
   }
 }
 
-.ticket-share-layout {
+/* .ticket-share-layout {
   align-items: center;
   margin-bottom: auto;
-}
+} */
 
 .ticket-visual {
   position: relative;

apps/www/components/LaunchWeek/Ticket/ticket.tsx

@@ -46,6 +46,7 @@ export default function Ticket({ username, name, ticketNumber, sharePage, golden
   //   }
   // }, [divRef, sharePage])
   // golden = true
+
   return (
     <div
       className={cn(styles['ticket-layout'], {
@@ -54,7 +55,16 @@ export default function Ticket({ username, name, ticketNumber, sharePage, golden
     >
       <div ref={divRef}>
         <div
-          className={`${styles['ticket-text']} text-scale-1200 flex flex-col items-center lw_mid:items-start xl:block`}
+          className={`${styles['ticket-text']} 
+          text-scale-1200 
+          flex flex-col 
+
+          
+          items-center 
+          xl:items-start
+
+          gap-3
+          `}
         >
           <h1
             className={cn(
@@ -66,23 +76,23 @@ export default function Ticket({ username, name, ticketNumber, sharePage, golden
           >
             {sharePage ? (
               name ? (
-                <p className="text-2xl dark:text-white mb-4 tracking-[0.02rem]">{name}’s Ticket</p>
+                <p className="text-3xl dark:text-scale-1200 tracking-[0.02rem]">{name}’s Ticket</p>
               ) : (
-                <p className="text-2xl dark:text-white mb-4 tracking-[0.02rem]">{SITE_NAME}</p>
+                <p className="text-3xl dark:text-scale-1200 tracking-[0.02rem]">{SITE_NAME}</p>
               )
             ) : golden ? (
-              <p className="text-2xl dark:text-white mb-4 tracking-[0.02rem]">
+              <p className="text-xl dark:text-scale-1200 tracking-[0.02rem]">
                 You won a golden ticket! <br /> Claim it now!
               </p>
             ) : (
-              <p className="text-2xl dark:text-white mb-4 tracking-[0.02rem]">
+              <p className="text-xl dark:text-scale-1200 tracking-[0.02rem]">
                 Congratulations, you have a ticket!
               </p>
             )}
           </h1>
-          <h2 className="text-sm dark:text-scale-900 text-[#7E868C] max-w-[380px]">
+          <h2 className="text-base dark:text-scale-1000">
             {sharePage ? (
-              <p className="xs:mb-12 lw_mid:mb-24">
+              <p>
                 Join {name ?? 'us'} on {DATE}.
               </p>
             ) : golden ? (

apps/www/pages/launch-week/index.tsx

@@ -1,19 +1,12 @@
 import { NextSeo } from 'next-seo'
+import _days from '~/components/LaunchWeek/days.json'
+import { WeekDayProps } from '~/components/LaunchWeek/types'
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import _days from '~/components/LaunchWeek/days.json'
-import HackathonSection from '~/components/LaunchWeek/HackathonSection'
-import LaunchHero from '~/components/LaunchWeek/LaunchHero'
-import { LaunchSection } from '~/components/LaunchWeek/LaunchSection'
-import PreLaunchTeaser from '~/components/LaunchWeek/PreLaunchTeaser'
-import ScheduleInfo from '~/components/LaunchWeek/ScheduleInfo'
-import { WeekDayProps } from '~/components/LaunchWeek/types'
 
-import { ArrowRightIcon } from '@heroicons/react/outline'
-import { Badge, Modal } from 'ui'
-import { useEffect, useState } from 'react'
 import { createClient, Session } from '@supabase/supabase-js'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 import TicketContainer from '~/components/LaunchWeek/Ticket/TicketContainer'
 import { useTheme } from '~/components/Providers'
 
@@ -77,26 +70,8 @@ export default function launchweek() {
             className="md:40 hidden w-40 dark:block lg:w-80"
           />
           <p className="text-scale-1100 text-sm">Dec 12 – 16 at 8 AM PT | 11 AM ET</p>
-          {/* <LaunchHero /> */}
-          {/* {!shippingHasStarted && <PreLaunchTeaser />} */}
         </SectionContainer>
-        {/* <SectionContainer className="flex flex-col gap-2 items-center max-w-[420px] text-center !pb-4"> */}
-        {/* <span className="text-scale-1200">Coming soon</span>
-          <p className="text-scale-1000 text-sm">
-            Register to get your ticket and stay tuned all week for daily announcements
-          </p> */}
-        {/* </SectionContainer> */}
         <SectionContainer className="flex flex-col items-center xs:!p-0">
-          {/* TODO: FIX CRESCENT TO NOT BREAK MOBILE VIEWS... */}
-          {/* <form className="m-4 flex bg-scale-200 border-scale-600 border-2 rounded-full p-0.5 pl-1 min-w-[260px]">
-            <input
-              className="mr-0 text-scale-1200 text-xs bg-scale-200 p-1 rounded-full w-full"
-              placeholder="Enter email"
-            />
-            <button className="px-4 py-1 rounded-full bg-scale-300 text-scale-1200 border border-scale-600 text-xs hover:bg-scale-400">
-              Submit
-            </button>
-          </form> */}
           <TicketContainer
             supabase={supabase}
             session={session}
@@ -104,13 +79,13 @@ export default function launchweek() {
             defaultPageState={query.ticketNumber ? 'ticket' : 'registration'}
           />
         </SectionContainer>
-        {/* <div className="gradient-container">
+        <div className="gradient-container">
           <div className="gradient-mask"></div>
           <div className="gradient-mask--masked bottom-of-the-circle"></div>
 
           <div className="flair-mask-a the-stroke-of-the-circle"></div>
           <div className="flair-mask-b inside-the-circle"></div>
-        </div> */}
+        </div>
         {/* <div>
           <div className="flex justify-between pt-80 mx-6 md:mx-16 lg:mx-40 overflow-hidden"> */}
         {/* <div className="flex-1 relative overflow-hidden radial-mask">

apps/www/pages/launch-week/tickets/[username].tsx

@@ -6,8 +6,9 @@ import SectionContainer from '~/components/Layouts/SectionContainer'
 import TicketContainer from '~/components/LaunchWeek/Ticket/TicketContainer'
 import { SITE_URL, SAMPLE_TICKET_NUMBER } from '~/lib/constants'
 import { createClient } from '@supabase/supabase-js'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { FastGlobOptionsWithoutCwd } from 'globby'
+import { useTheme } from '~/components/Providers'
 
 type Props = {
   username: string | null
@@ -22,6 +23,8 @@ const supabaseAdmin = createClient(
 )
 
 export default function TicketShare({ username, ticketNumber, name, golden }: Props) {
+  const { isDarkMode } = useTheme()
+
   const [supabase] = useState(() =>
     createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
   )
@@ -35,6 +38,10 @@ export default function TicketShare({ username, ticketNumber, name, golden }: Pr
     username ?? ''
   )}`
 
+  useEffect(() => {
+    document.body.className = isDarkMode ? 'dark bg-[#121212]' : 'light bg-[#fff]'
+  }, [isDarkMode])
+
   return (
     <>
       <NextSeo
@@ -50,9 +57,8 @@ export default function TicketShare({ username, ticketNumber, name, golden }: Pr
           ],
         }}
       />
-      <div className="launch-week-gradientBg"></div>
       <DefaultLayout>
-        <SectionContainer className="flex flex-col gap-8 !pb-0 md:gap-16 lg:gap-16">
+        <SectionContainer className="flex flex-col gap-0 pb-0 md:gap-16 lg:gap-16">
           <img
             src="/images/launchweek/launchweek-logo--light.svg"
             className="md:40 w-40 dark:hidden lg:w-80"

apps/www/pages/launch-week/tickets/index.tsx

@@ -6,8 +6,11 @@ import { SITE_URL } from '~/lib/constants'
 import { useRouter } from 'next/router'
 import { createClient, Session } from '@supabase/supabase-js'
 import { useState, useEffect } from 'react'
+import { useTheme } from '~/components/Providers'
 
 export default function TicketHome() {
+  const { isDarkMode } = useTheme()
+
   const [supabase] = useState(() =>
     createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
   )
@@ -28,6 +31,10 @@ export default function TicketHome() {
     })
   }, [])
 
+  useEffect(() => {
+    document.body.className = isDarkMode ? 'dark bg-[#121212]' : 'light bg-[#fff]'
+  }, [isDarkMode])
+
   return (
     <>
       <NextSeo
@@ -43,9 +50,8 @@ export default function TicketHome() {
           ],
         }}
       />
-      <div className="launch-week-gradientBg"></div>
       <DefaultLayout>
-        <SectionContainer className="flex flex-col gap-8 !pb-0 md:gap-16 lg:gap-16">
+        <SectionContainer>
           <div>
             <img
               src="/images/launchweek/launchweek-logo--light.svg"

packages/config/tailwind.config.js

@@ -168,10 +168,6 @@ module.exports = ui({
           },
         },
       }),
-      screens: {
-        xs: '320px',
-        lw_mid: '1200px',
-      },
       // screens: {
       //   sm: '640px',
       //   // => @media (min-width: 640px) { ... }