From 4d79c1b3fee71a968d9d7ea44a8b3a1a05bb3080 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 14:54:37 -0500 Subject: [PATCH 1/6] Simplify gradient colors Remove bg-color-1, bg-color-2, prefer values from gradient-blue and gradient-purple --- app/soapbox/features/ui/components/background_shapes.tsx | 4 ++-- app/soapbox/normalizers/soapbox/soapbox_config.ts | 6 ++---- tailwind.config.js | 2 -- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx index bc4e3694c..2f77d4e9c 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 = ({ position = 'fixed' }) = - - + + diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index aad2a13da..9bc0fddea 100644 --- a/app/soapbox/normalizers/soapbox/soapbox_config.ts +++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts @@ -52,8 +52,6 @@ const DEFAULT_COLORS = ImmutableMap({ 800: '#991b1b', 900: '#7f1d1d', }), - 'gradient-purple': '#b8a3f9', - 'gradient-blue': '#9bd5ff', 'sea-blue': '#2feecc', }); @@ -158,8 +156,8 @@ const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMa const colors = soapboxConfig.get('colors'); const missing = ImmutableMap({ - 'bg-shape-1': colors.getIn(['accent', '500']), - 'bg-shape-2': colors.getIn(['primary', '500']), + 'gradient-purple': colors.getIn(['accent', '300']), + 'gradient-blue': colors.getIn(['primary', '300']), }); return soapboxConfig.set('colors', missing.mergeDeep(colors)); diff --git a/tailwind.config.js b/tailwind.config.js index 70278445b..0b9c1526a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -44,8 +44,6 @@ module.exports = { 'gradient-purple': true, 'gradient-blue': true, 'sea-blue': true, - 'bg-shape-1': true, - 'bg-shape-2': true, }), animation: { 'sonar-scale-4': 'sonar-scale-4 3s linear infinite', From 02616fc312eaf8c254b82b9945ad99345de8500d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:02:00 -0500 Subject: [PATCH 2/6] Tweak gradient colors --- app/soapbox/components/list.tsx | 4 ++-- app/soapbox/features/ui/components/background_shapes.tsx | 4 ++-- app/soapbox/normalizers/soapbox/soapbox_config.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx index 3adc81c38..862bf1456 100644 --- a/app/soapbox/components/list.tsx +++ b/app/soapbox/components/list.tsx @@ -37,8 +37,8 @@ const ListItem: React.FC = ({ label, hint, children, onClick }) => { return ( diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx index 2f77d4e9c..eb97386dd 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 = ({ position = 'fixed' }) = - - + + diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index 9bc0fddea..76d1bfdd9 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(['accent', '300']), - 'gradient-blue': colors.getIn(['primary', '300']), + 'gradient-purple': colors.getIn(['primary', '500']), + 'gradient-blue': colors.getIn(['accent', '500']), }); return soapboxConfig.set('colors', missing.mergeDeep(colors)); From e0701bd4432768f2b8e7a6595e376a48935f6f60 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:21:23 -0500 Subject: [PATCH 3/6] BackgroundShapes: actually, set element opacity instead of color opacity to reduce banding --- app/soapbox/features/ui/components/background_shapes.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx index eb97386dd..85b0d4cb0 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 = ({ position = 'fixed' }) = - - + + From 4d5f1d236d19f3660005312a83314a2b2949d894 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:23:43 -0500 Subject: [PATCH 4/6] 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 = ({ label, hint, children, onClick }) => { return ( 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 = ({ position = 'fixed' }) = - - + + 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)'); }); }); From 45f95bd533fddb230f814ba327bdf817a75efabd Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:45:29 -0500 Subject: [PATCH 5/6] Use gradient colors on PublicLayout --- app/soapbox/features/landing_page/index.tsx | 2 +- app/soapbox/features/public_layout/components/sonar.tsx | 2 +- app/soapbox/features/public_layout/index.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx index a33b9e871..226438d03 100644 --- a/app/soapbox/features/landing_page/index.tsx +++ b/app/soapbox/features/landing_page/index.tsx @@ -72,7 +72,7 @@ const LandingPage = () => {
-

+

{instance.title}

diff --git a/app/soapbox/features/public_layout/components/sonar.tsx b/app/soapbox/features/public_layout/components/sonar.tsx index 62c50a42d..f6a8ce21e 100644 --- a/app/soapbox/features/public_layout/components/sonar.tsx +++ b/app/soapbox/features/public_layout/components/sonar.tsx @@ -8,7 +8,7 @@ const Sonar = () => (
-
+
); diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js index a96e269e3..fa62567aa 100644 --- a/app/soapbox/features/public_layout/index.js +++ b/app/soapbox/features/public_layout/index.js @@ -35,7 +35,7 @@ class PublicLayout extends ImmutablePureComponent { return (
-
+
From 7d3a0a8ab94608582bfdce66391cac2e7e7b77a1 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:52:01 -0500 Subject: [PATCH 6/6] 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 = () => ( +
+); + +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 (
-
+
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 (
-
+
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 (
-
+
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 ( -
+
+ +