From b0b418d699eaf0666be5d15c110863e9e127e92c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 28 Jun 2022 10:47:41 -0500
Subject: [PATCH 1/3] BackgroundShapes: use a CSS linear gradient

---
 .../ui/components/background_shapes.tsx       | 23 +------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index 2f9427eba..69bf29072 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -9,28 +9,7 @@ interface IBackgroundShapes {
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
   <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
-    <div className='flex-none flex justify-center'>
-      <svg width='1754' height='1336' xmlns='http://www.w3.org/2000/svg'>
-        <defs>
-          <filter x='-18.1%' y='-15.3%' width='136.3%' height='130.7%' filterUnits='objectBoundingBox' id='c'>
-            <feGaussianBlur stdDeviation='50' in='SourceGraphic' />
-          </filter>
-          <filter x='-16.5%' y='-11.7%' width='133%' height='123.3%' filterUnits='objectBoundingBox' id='d'>
-            <feGaussianBlur stdDeviation='50' in='SourceGraphic' />
-          </filter>
-          <path id='a' d='M0 0h1754v1336H0z' />
-        </defs>
-        <g fill='none' fillRule='evenodd'>
-          <mask id='b' fill='#fff'>
-            <use xlinkHref='#a' />
-          </mask>
-          <g mask='url(#b)'>
-            <path className='fill-gradient-end opacity-10 dark:fill-gradient-end dark:opacity-5' d='M1257.79 335.852C1262 527.117 897.55 530.28 792.32 977.19 600.48 981.41 435.29 545.31 431.08 354.046 426.871 162.782 578.976 4.31 770.815.088c191.844-4.222 482.764 144.5 486.974 335.764Z' fillRule='nonzero' filter='url(#c)' transform='translate(309.54 -367.538)' />
-            <path className='fill-gradient-start opacity-10 dark:fill-gradient-start dark:opacity-5' d='M71.127 1126.654c206.164 179.412 502.452 211.232 661.777 71.072 159.325-140.163 295.165-510.155 8.23-504.412-320.079 6.405-381.35-817.422-540.675-677.258-31 368-335.497 931.182-129.332 1110.598Z' fillRule='nonzero' filter='url(#d)' transform='translate(309.54 -141.056)' />
-          </g>
-        </g>
-      </svg>
-    </div>
+    <div className='w-screen h-screen' style={{ background: 'linear-gradient(112deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(84,72,238,0.1) 30%, rgba(20,156,255,0.1) 70%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%)' }} />
   </div>
 );
 

From 825f5566a01d996c201f16ec902ef680c1a5a303 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 28 Jun 2022 14:18:15 -0400
Subject: [PATCH 2/3] Add CSS class with variables

---
 .../features/ui/components/background_shapes.tsx     |  2 +-
 app/styles/application.scss                          | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index 69bf29072..af9393f3b 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -9,7 +9,7 @@ interface IBackgroundShapes {
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
   <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
-    <div className='w-screen h-screen' style={{ background: 'linear-gradient(112deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(84,72,238,0.1) 30%, rgba(20,156,255,0.1) 70%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%)' }} />
+    <div className='w-screen h-screen bg-gradient' />
   </div>
 );
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 73622665e..9bed26cec 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -93,6 +93,18 @@
     /* stylelint-disable-next-line unit-no-unknown */
     height: 100dvh;
   }
+
+  .bg-gradient {
+    background: linear-gradient(
+      112deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 20%,
+      rgba(var(--color-gradient-start) / 0.1) 30%,
+      rgba(var(--color-gradient-end) / 0.1) 70%,
+      rgba(0, 0, 0, 0) 80%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
 }
 
 @import 'forms';

From e3d976a2e708758707ef8ad38beb45e70b2fd84b Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 28 Jun 2022 14:26:59 -0400
Subject: [PATCH 3/3] Account for smaller screens

---
 .../features/ui/components/background_shapes.tsx       |  2 +-
 app/styles/application.scss                            | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index af9393f3b..50bdef350 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -9,7 +9,7 @@ interface IBackgroundShapes {
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
   <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
-    <div className='w-screen h-screen bg-gradient' />
+    <div className='w-screen h-screen bg-gradient-sm lg:bg-gradient-lg' />
   </div>
 );
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 9bed26cec..1dcd2efd5 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -94,7 +94,7 @@
     height: 100dvh;
   }
 
-  .bg-gradient {
+  .bg-gradient-lg {
     background: linear-gradient(
       112deg,
       rgba(0, 0, 0, 0) 0%,
@@ -105,6 +105,14 @@
       rgba(0, 0, 0, 0) 100%
     );
   }
+
+  .bg-gradient-sm {
+    background: linear-gradient(
+      112deg,
+      rgba(var(--color-gradient-start) / 0.1) 0%,
+      rgba(var(--color-gradient-end) / 0.1) 50%
+    );
+  }
 }
 
 @import 'forms';