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/components/list.tsx b/app/soapbox/components/list.tsx index 3adc81c38..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/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/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/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/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..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/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx index bc4e3694c..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/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 ( -
+
+ +
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index aad2a13da..cab8dc44c 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-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 70278445b..0aa665e2e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -41,11 +41,9 @@ 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, - 'bg-shape-1': true, - 'bg-shape-2': true, }), animation: { 'sonar-scale-4': 'sonar-scale-4 3s linear infinite', 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)'); }); });