Add dark mode support to landing page

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;

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'
     />
   );
 });

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>

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>