From 7d3a0a8ab94608582bfdce66391cac2e7e7b77a1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 15:52:01 -0500
Subject: [PATCH] Break out LandingGradient into its own component

---
 app/soapbox/components/landing-gradient.tsx           | 8 ++++++++
 app/soapbox/features/auth_layout/index.tsx            | 3 ++-
 app/soapbox/features/onboarding/onboarding-wizard.tsx | 3 ++-
 app/soapbox/features/public_layout/index.js           | 3 ++-
 app/soapbox/features/verification/waitlist_page.js    | 5 ++++-
 5 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 app/soapbox/components/landing-gradient.tsx

diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx
new file mode 100644
index 000000000..53e500d28
--- /dev/null
+++ b/app/soapbox/components/landing-gradient.tsx
@@ -0,0 +1,8 @@
+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' />
+);
+
+export default LandingGradient;
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index 7a0d39c71..adc436f6c 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link, Redirect, Route, Switch } from 'react-router-dom';
 
+import LandingGradient from 'soapbox/components/landing-gradient';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
@@ -20,7 +21,7 @@ const AuthLayout = () => {
 
   return (
     <div>
-      <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-cyan-50 dark:to-cyan-900' />
+      <LandingGradient />
 
       <main className='relative flex flex-col h-screen'>
         <header className='py-10 flex justify-center relative'>
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 0b530fd2a..4087e4f03 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux';
 import ReactSwipeableViews from 'react-swipeable-views';
 
 import { endOnboarding } from 'soapbox/actions/onboarding';
+import LandingGradient from 'soapbox/components/landing-gradient';
 import { HStack } from 'soapbox/components/ui';
 
 import AvatarSelectionStep from './steps/avatar-selection-step';
@@ -68,7 +69,7 @@ const OnboardingWizard = () => {
 
   return (
     <div data-testid='onboarding-wizard'>
-      <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-cyan-50 dark:to-cyan-900' />
+      <LandingGradient />
 
       <main className='h-screen flex flex-col overflow-x-hidden'>
         <div className='flex flex-col justify-center items-center h-full'>
diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js
index fa62567aa..30c206838 100644
--- a/app/soapbox/features/public_layout/index.js
+++ b/app/soapbox/features/public_layout/index.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { Switch, Route, Redirect } from 'react-router-dom';
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import LandingGradient from 'soapbox/components/landing-gradient';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
   NotificationsContainer,
@@ -35,7 +36,7 @@ class PublicLayout extends ImmutablePureComponent {
 
     return (
       <div className='h-full'>
-        <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' />
+        <LandingGradient />
 
         <div className='flex flex-col h-screen'>
           <div className='flex-shrink-0'>
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js
index a40e62835..ef2d573ae 100644
--- a/app/soapbox/features/verification/waitlist_page.js
+++ b/app/soapbox/features/verification/waitlist_page.js
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import LandingGradient from 'soapbox/components/landing-gradient';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
 
@@ -23,7 +24,9 @@ const WaitlistPage = ({ account }) => {
   };
 
   return (
-    <div className='h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900'>
+    <div>
+      <LandingGradient />
+
       <main className='relative flex flex-col h-screen max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <header className='relative flex justify-between h-16'>
           <div className='flex-1 flex items-stretch justify-center relative'>