Use gradient colors on PublicLayout

app/soapbox/features/landing_page/index.tsx

@@ -72,7 +72,7 @@ const LandingPage = () => {
           <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-pink-600 via-primary-500 to-blue-600 sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
+                <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'>

app/soapbox/features/public_layout/components/sonar.tsx

@@ -8,7 +8,7 @@ const Sonar = () => (
       <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
       <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
 
-      <div className='absolute top-0 left-0 w-48 h-48 bg-white rounded-full' />
+      <div className='absolute top-0 left-0 w-48 h-48 bg-white dark:bg-slate-900 rounded-full' />
     </div>
   </div>
 );

app/soapbox/features/public_layout/index.js

@@ -35,7 +35,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-cyan-50 dark:to-cyan-900' />
+        <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='flex flex-col h-screen'>
           <div className='flex-shrink-0'>