From 4d5f1d236d19f3660005312a83314a2b2949d894 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 15:23:43 -0500
Subject: [PATCH] gradient-purple, gradient-blue --> gradient-start,
 gradient-end

---
 app/soapbox/components/list.tsx                          | 4 ++--
 app/soapbox/features/ui/components/background_shapes.tsx | 4 ++--
 app/soapbox/normalizers/soapbox/soapbox_config.ts        | 4 ++--
 tailwind.config.js                                       | 4 ++--
 tailwind/__tests__/colors-test.js                        | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 862bf1456..e7d858334 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -37,8 +37,8 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
   return (
     <Comp
       className={classNames({
-        'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-purple/10 to-gradient-blue/10 dark:from-slate-900/25 dark:to-slate-900/50': true,
-        'cursor-pointer hover:from-gradient-purple/20 hover:to-gradient-blue/20 dark:hover:from-slate-900/40 dark:hover:to-slate-900/75': typeof onClick !== 'undefined',
+        'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/10 to-gradient-end/10 dark:from-slate-900/25 dark:to-slate-900/50': true,
+        'cursor-pointer hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-slate-900/40 dark:hover:to-slate-900/75': typeof onClick !== 'undefined',
       })}
       {...linkProps}
     >
diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index 85b0d4cb0..2f9427eba 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -25,8 +25,8 @@ const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) =
             <use xlinkHref='#a' />
           </mask>
           <g mask='url(#b)'>
-            <path className='fill-gradient-blue opacity-10 dark:fill-gradient-blue 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-purple opacity-10 dark:fill-gradient-purple 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)' />
+            <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>
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index 76d1bfdd9..cab8dc44c 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -156,8 +156,8 @@ const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMa
   const colors = soapboxConfig.get('colors');
 
   const missing = ImmutableMap({
-    'gradient-purple': colors.getIn(['primary', '500']),
-    'gradient-blue': colors.getIn(['accent', '500']),
+    'gradient-start': colors.getIn(['primary', '500']),
+    'gradient-end': colors.getIn(['accent', '500']),
   });
 
   return soapboxConfig.set('colors', missing.mergeDeep(colors));
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b9c1526a..0aa665e2e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,8 +41,8 @@ module.exports = {
         success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
         danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
         accent: [300, 500],
-        'gradient-purple': true,
-        'gradient-blue': true,
+        'gradient-start': true,
+        'gradient-end': true,
         'sea-blue': true,
       }),
       animation: {
diff --git a/tailwind/__tests__/colors-test.js b/tailwind/__tests__/colors-test.js
index cf11f1461..89836edb7 100644
--- a/tailwind/__tests__/colors-test.js
+++ b/tailwind/__tests__/colors-test.js
@@ -40,14 +40,14 @@ describe('parseColorMatrix()', () => {
       success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
       danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
       accent: [300, 500],
-      'gradient-purple': true,
-      'gradient-blue': true,
+      'gradient-start': true,
+      'gradient-end': true,
       'sea-blue': true,
     };
 
     const result = parseColorMatrix(colorMatrix);
 
     expect(result['sea-blue']({})).toEqual('rgb(var(--color-sea-blue))');
-    expect(result['gradient-purple']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-purple) / 0.7)');
+    expect(result['gradient-start']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-start) / 0.7)');
   });
 });