enforce dark mode in lw pages

apps/www/components/LaunchWeek/LaunchSection/TicketBrickWall.tsx

@@ -37,7 +37,12 @@ export default function TicketBrickWall({ users }: Props) {
         <div className="flex justify-center w-full mx-auto mt-2 lg:mt-4">
           <Link href="/launch-week/tickets">
             <a>
-              <Button type="outline" size="medium" onClick={() => window.scrollTo(0, 0)}>
+              <Button
+                type="outline"
+                size="medium"
+                onClick={() => window.scrollTo(0, 0)}
+                className="text-white"
+              >
                 View all tickets
               </Button>
             </a>

apps/www/components/LaunchWeek/Releases/LW7/LW7Releases.tsx

@@ -133,15 +133,13 @@ export default function LW7Releases() {
                 </svg>
               </div>
               <div className="flex flex-col lg:flex-row ml-2 sm:ml-4">
-                <span className="text-black dark:text-white mr-2">
-                  Supabase AI Hackathon has begun. Join now!
-                </span>
+                <span className="text-white mr-2">Supabase AI Hackathon has begun. Join now!</span>
               </div>
             </div>
             <div className="flex w-full sm:w-auto justify-center gap-2 z-10">
               <ChipLink href={'/blog/launch-week-7-hackathon'}>
                 Blog post
-                <div className="bg-[#eeeeee] dark:bg-[#313131] rounded-full inline-block p-1 ml-2">
+                <div className="bg-[#313131] rounded-full inline-block p-1 ml-2">
                   <PencilSvg />
                 </div>
               </ChipLink>
@@ -175,7 +173,7 @@ export default function LW7Releases() {
                 </svg>
               </div>
               <div className="flex flex-col lg:flex-row ml-2 sm:ml-4">
-                <span className="text-black dark:text-white mr-2">Join the prize draw</span>
+                <span className="text-white mr-2">Join the prize draw</span>
               </div>
             </div>
             <div className="flex w-full sm:w-auto justify-center gap-2 z-10">
@@ -191,13 +189,13 @@ export default function LW7Releases() {
           type="default"
           openBehaviour="multiple"
           size="large"
-          className="text-scale-900 dark:text-white"
+          className="text-white"
           justified={false}
           // bordered={false}
           chevronAlign="right"
           defaultValue={publishedSections}
         >
-          <div className="border-b pb-3">
+          <div className="border-b border-[#232323] pb-3">
             <Accordion.Item
               header={
                 <AccordionHeader
@@ -217,7 +215,7 @@ export default function LW7Releases() {
                   <motion.div
                     className={`
                       relative overflow-hidden group/2 flex-1 flex flex-col items-center gap-5 lg:items-start justify-between
-                      basis-1/2 lg:flex-shrink xl:basis-2/3 border rounded-xl h-full py-10 sm:py-14 px-4 sm:px-8 lg:px-10 xs:text-2xl text-xl text-center shadow-lg
+                      basis-1/2 lg:flex-shrink xl:basis-2/3 border border-[#232323] rounded-xl h-full py-10 sm:py-14 px-4 sm:px-8 lg:px-10 xs:text-2xl text-xl text-center shadow-lg
                     `}
                     initial="default"
                     animate="default"
@@ -229,7 +227,7 @@ export default function LW7Releases() {
                         background: `radial-gradient(90% 130px at 80% 0px, #4635A7, transparent)`,
                       }}
                     />
-                    <div className="flex items-center text-center lg:text-left lg: justify-between flex-col-reverse lg:flex-row lg:justify-start gap-2 text-black dark:text-white">
+                    <div className="flex items-center text-center lg:text-left lg: justify-between flex-col-reverse lg:flex-row lg:justify-start gap-2 text-white">
                       <CartTitle>{preRelease.steps[0].title}</CartTitle>
                       <StyledArticleBadge className="lg:ml-2">Guide</StyledArticleBadge>
                     </div>
@@ -282,7 +280,7 @@ export default function LW7Releases() {
                   <motion.div
                     className={`
                       relative overflow-hidden group/3 flex-1 flex flex-col items-center justify-between
-                      basis-1/2 lg:basis-1/3 border rounded-xl h-full bg-no-repeat py-10 sm:py-14 px-4 sm:px-8 lg:px-10 text-2xl bg-contain shadow-lg
+                      basis-1/2 lg:basis-1/3 border border-[#232323] rounded-xl h-full bg-no-repeat py-10 sm:py-14 px-4 sm:px-8 lg:px-10 text-2xl bg-contain shadow-lg
                       `}
                     initial="default"
                     animate="default"
@@ -334,7 +332,7 @@ export default function LW7Releases() {
               )}
             </Accordion.Item>
           </div>
-          <div className="border-b pb-3">
+          <div className="border-b border-[#232323] pb-3">
             <Accordion.Item
               header={
                 <AccordionHeader
@@ -353,13 +351,13 @@ export default function LW7Releases() {
                   <motion.div
                     className={`
                       relative overflow-hidden group/2 flex-1 flex flex-col items-center gap-5 lg:items-start justify-between
-                      w-full border rounded-xl h-full p-14 xs:text-2xl text-xl text-center shadow-lg
+                      w-full border border-[#232323] rounded-xl h-full p-14 xs:text-2xl text-xl text-center shadow-lg
                     `}
                     initial="default"
                     animate="default"
                     whileHover="hover"
                   >
-                    <div className="flex items-center text-center lg:text-left lg: justify-between flex-col-reverse lg:flex-row lg:justify-start gap-2 text-black dark:text-white">
+                    <div className="flex items-center text-center lg:text-left lg: justify-between flex-col-reverse lg:flex-row lg:justify-start gap-2 text-white">
                       <CartTitle>{day1.steps[0].title}</CartTitle>
                       <StyledArticleBadge className="lg:ml-2">New</StyledArticleBadge>
                     </div>
@@ -417,7 +415,7 @@ export default function LW7Releases() {
               )}
             </Accordion.Item>
           </div>
-          <div className="border-b pb-3">
+          <div className="border-b border-[#232323] pb-3">
             <Accordion.Item
               header={
                 <AccordionHeader
@@ -434,7 +432,7 @@ export default function LW7Releases() {
               <div></div>
             </Accordion.Item>
           </div>
-          <div className="border-b pb-3">
+          <div className="border-b border-[#232323] pb-3">
             <Accordion.Item
               header={
                 <AccordionHeader
@@ -451,7 +449,7 @@ export default function LW7Releases() {
               <div></div>
             </Accordion.Item>
           </div>
-          <div className="border-b pb-3">
+          <div className="border-b border-[#232323] pb-3">
             <Accordion.Item
               header={
                 <AccordionHeader
@@ -468,7 +466,7 @@ export default function LW7Releases() {
               <div></div>
             </Accordion.Item>
           </div>
-          <div className="border-b pb-3" id="currentDay">
+          <div className="border-b border-[#232323] pb-3" id="currentDay">
             <Accordion.Item
               header={
                 <AccordionHeader

apps/www/components/LaunchWeek/Releases/LW7/components/index.tsx

@@ -159,7 +159,7 @@ export const ChipLink = ({
       target={target ?? '_self'}
       rel="noopener"
       className={[
-        'flex justify-between w-full min-h-[43px] sm:w-auto items-center border border-slate-400 bg-gradient-to-r text-black dark:text-white from-[#46444480] to-[#19191980] hover:from-[#4e4e4e80] hover:to-[#19191980] backdrop-blur-sm rounded-full text-sm py-2 pl-3 pr-2',
+        'flex justify-between w-full min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444480] to-[#19191980] hover:from-[#4e4e4e80] hover:to-[#19191980] backdrop-blur-sm rounded-full text-sm py-2 pl-3 pr-2',
         className,
       ].join(' ')}
     >
@@ -188,7 +188,7 @@ export const SectionButtons = ({
       {!!blog && (
         <ChipLink href={blog}>
           Blog post
-          <div className="bg-[#eeeeee] dark:bg-[#313131] rounded-full inline-block p-1 ml-2">
+          <div className="bg-[#313131] rounded-full inline-block p-1 ml-2">
             <PencilSvg />
           </div>
         </ChipLink>
@@ -196,7 +196,7 @@ export const SectionButtons = ({
       {!!docs && (
         <ChipLink href={docs}>
           Docs
-          <div className="bg-[#eeeeee] dark:bg-[#313131] rounded-full inline-block p-1 ml-2">
+          <div className="bg-[#313131] rounded-full inline-block p-1 ml-2">
             <DocsSvg />
           </div>
         </ChipLink>
@@ -204,7 +204,7 @@ export const SectionButtons = ({
       {!!video && (
         <ChipLink href={video}>
           Video
-          <div className="bg-[#eeeeee] dark:bg-[#313131] rounded-full inline-block p-1 ml-2">
+          <div className="bg-[#313131] rounded-full inline-block p-1 ml-2">
             <PlaySvg />
           </div>
         </ChipLink>
@@ -212,7 +212,7 @@ export const SectionButtons = ({
       {!!github && (
         <ChipLink href={github} target="_blank">
           View on Github
-          <div className="bg-[#eeeeee] dark:bg-[#313131] rounded-full inline-block p-1 ml-2">
+          <div className="bg-[#313131] rounded-full inline-block p-1 ml-2">
             <GithubSvg />
           </div>
         </ChipLink>
@@ -220,7 +220,7 @@ export const SectionButtons = ({
       {!!url && (
         <ChipLink href={url}>
           Read
-          <div className="bg-[#eeeeee] dark:bg-[#313131] rounded-full inline-block p-1 ml-2">
+          <div className="bg-[#313131] rounded-full inline-block p-1 ml-2">
             <LinkSvg />
           </div>
         </ChipLink>
@@ -228,7 +228,7 @@ export const SectionButtons = ({
       {hackernews && (
         <ChipLink href={hackernews} target="_blank">
           Read more
-          <div className="bg-[#eeeeee] dark:bg-[#313131] rounded-full inline-block p-1 ml-2">
+          <div className="bg-[#313131] rounded-full inline-block p-1 ml-2">
             <HackernewsSvg />
           </div>
         </ChipLink>

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

@@ -12,6 +12,7 @@ import SectionContainer from '~/components/Layouts/SectionContainer'
 import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/LaunchSection/LaunchWeekLogoHeader'
 import { UserData } from '~/components/LaunchWeek/Ticket/hooks/use-conf-data'
 import LW7BgGraphic from '~/components/LaunchWeek/LW7BgGraphic'
+import { useTheme } from 'common'
 
 const TicketContainer = dynamic(() => import('~/components/LaunchWeek/Ticket/TicketContainer'))
 const LW7Releases = dynamic(() => import('~/components/LaunchWeek/Releases/LW7/LW7Releases'))
@@ -39,6 +40,7 @@ export default function TicketHome({ users }: Props) {
   const [supabase, setSupabase] = useState<SupabaseClient | null>(null)
   const [session, setSession] = useState<Session | null>(null)
   const [isGolden, setIsGolden] = useState(false)
+  const { isDarkMode } = useTheme()
 
   const TITLE = 'Supabase LaunchWeek 7'
   const DESCRIPTION = 'Supabase Launch Week 7 | 10–14 April 2023'
@@ -80,10 +82,14 @@ export default function TicketHome({ users }: Props) {
   }, [supabase])
 
   useEffect(() => {
-    document.body.className = 'dark bg-[#1C1C1C]'
+    document.body.className = '!dark bg-[#1C1C1C]'
     if (typeof window !== 'undefined') {
       setIsGolden(localStorage?.getItem('isGolden') === 'true' ?? false)
     }
+
+    return () => {
+      document.body.className = isDarkMode ? 'dark' : 'light'
+    }
   }, [])
 
   const Ticket = () =>

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

@@ -14,6 +14,7 @@ import TicketBrickWall from '~/components/LaunchWeek/LaunchSection/TicketBrickWa
 import { UserData } from '~/components/LaunchWeek/Ticket/hooks/use-conf-data'
 import LW7BgGraphic from '../../../components/LaunchWeek/LW7BgGraphic'
 import CTABanner from '../../../components/CTABanner'
+import { useTheme } from 'common'
 
 interface Props {
   user: UserData
@@ -29,6 +30,7 @@ const supabaseAdmin = createClient(
 )
 
 export default function UsernamePage({ user, users, ogImageUrl }: Props) {
+  const { isDarkMode } = useTheme()
   const { username, ticketNumber, name, golden, referrals, bg_image_id } = user
   const TITLE = `${name ? name + '’s' : 'Get your'} #SupaLaunchWeek Ticket`
   const DESCRIPTION = 'Supabase Launch Week 7 | 10–14 April 2023 | Generate your ticket. Win swag.'
@@ -43,7 +45,11 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
   }
 
   useEffect(() => {
-    document.body.className = 'dark bg-[#1C1C1C]'
+    document.body.className = '!dark bg-[#1C1C1C]'
+
+    return () => {
+      document.body.className = isDarkMode ? 'dark' : 'light'
+    }
   }, [])
 
   return (

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

@@ -14,6 +14,7 @@ import { debounce } from 'lodash'
 import TicketsGrid from '../../../components/LaunchWeek/Ticket/TicketsGrid'
 import { Button } from 'ui'
 import Link from 'next/link'
+import { useTheme } from 'common'
 
 interface Props {
   users: UserData[]
@@ -42,6 +43,7 @@ export default function TicketsPage({ users }: Props) {
   const DESCRIPTION = 'Supabase Launch Week 7 | 10–14 April 2023'
   const OG_IMAGE = `${SITE_ORIGIN}/images/launchweek/seven/launch-week-7-teaser.jpg`
 
+  const { isDarkMode } = useTheme()
   const [isLoading, setIsLoading] = useState(false)
   const [offset, setOffset] = useState(1)
   const [isLast, setIsLast] = useState(false)
@@ -71,10 +73,6 @@ export default function TicketsPage({ users }: Props) {
     setIsLoading(false)
   }
 
-  useEffect(() => {
-    document.body.className = 'dark bg-[#1C1C1C]'
-  }, [])
-
   const handleScroll = () => {
     if (ref.current && typeof window !== 'undefined') {
       const rect = (ref.current as HTMLDivElement)?.getBoundingClientRect()
@@ -84,11 +82,13 @@ export default function TicketsPage({ users }: Props) {
   }
 
   useEffect(() => {
-    const handleDebouncedScroll = debounce(() => !isLast && handleScroll(), 200)
+    document.body.className = '!dark bg-[#1C1C1C]'
 
+    const handleDebouncedScroll = debounce(() => !isLast && handleScroll(), 200)
     window.addEventListener('scroll', handleDebouncedScroll)
 
     return () => {
+      document.body.className = isDarkMode ? 'dark' : 'light'
       window.removeEventListener('scroll', handleDebouncedScroll)
     }
   }, [])