From c86282597032f4cfeec4c371ef43f65bd459218f Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 10 May 2022 15:52:12 -0400
Subject: [PATCH] Add dark mode support to landing page

---
 app/soapbox/components/landing-gradient.tsx     |  2 +-
 app/soapbox/components/ui/checkbox/checkbox.tsx |  2 +-
 app/soapbox/features/landing_page/index.tsx     |  3 ++-
 app/soapbox/features/public_layout/index.js     | 14 ++++++--------
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx
index 53e500d28..28be27373 100644
--- a/app/soapbox/components/landing-gradient.tsx
+++ b/app/soapbox/components/landing-gradient.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
-  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-gradient-end/10 dark:to-slate-900' />
+  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-900/50 via-white dark:via-slate-900 to-gradient-end/10 dark:to-slate-900/50' />
 );
 
 export default LandingGradient;
diff --git a/app/soapbox/components/ui/checkbox/checkbox.tsx b/app/soapbox/components/ui/checkbox/checkbox.tsx
index dc7a4e370..3199d4a33 100644
--- a/app/soapbox/components/ui/checkbox/checkbox.tsx
+++ b/app/soapbox/components/ui/checkbox/checkbox.tsx
@@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
       {...props}
       ref={ref}
       type='checkbox'
-      className='focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'
+      className='dark:bg-slate-800 dark:border-gray-600 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'
     />
   );
 });
diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index 4d408666d..586f198e2 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/app/soapbox/features/landing_page/index.tsx
@@ -68,13 +68,14 @@ const LandingPage = () => {
   return (
     <main className='mt-16 sm:mt-24' data-testid='homepage'>
       <div className='mx-auto max-w-7xl'>
-        <div className='lg:grid lg:grid-cols-12 lg:gap-8 py-12'>
+        <div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
           <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex'>
             <div>
               <Stack space={3}>
                 <h1 className='text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
                   {instance.title}
                 </h1>
+
                 <Text size='lg'>
                   {instance.description}
                 </Text>
diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js
index 99d7f48e3..a7cb641eb 100644
--- a/app/soapbox/features/public_layout/index.js
+++ b/app/soapbox/features/public_layout/index.js
@@ -41,14 +41,12 @@ class PublicLayout extends ImmutablePureComponent {
           <div className='flex-shrink-0'>
             <Header />
 
-            <div className='public-layout__top'>
-              <div className='container'>
-                <Switch>
-                  <Route exact path='/' component={LandingPage} />
-                  <Route exact path='/about/:slug?' component={AboutPage} />
-                  <Route exact path='/mobile/:slug?' component={MobilePage} />
-                </Switch>
-              </div>
+            <div className='relative'>
+              <Switch>
+                <Route exact path='/' component={LandingPage} />
+                <Route exact path='/about/:slug?' component={AboutPage} />
+                <Route exact path='/mobile/:slug?' component={MobilePage} />
+              </Switch>
             </div>
           </div>