moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'colors' into 'develop' 

Refactor colors

See merge request soapbox-pub/soapbox-fe!1330
This commit is contained in:
Alex Gleason 2022-05-09 12:42:40 +00:00
parent 4d898e1075 7d3a0a8ab9
commit 3b920e25c3
12 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/soapbox/components/landing-gradient.tsx Normal file
View File

@ -0,0 +1,8 @@
import React from 'react';
/** Fullscreen gradient used as a backdrop to public pages. */
const LandingGradient: React.FC = () => (
<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' />
);
export default LandingGradient;

4
app/soapbox/components/list.tsx
View File

@ -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/20 to-gradient-blue/20 dark:from-slate-900/25 dark:to-slate-900/50': true,
'cursor-pointer hover:from-gradient-purple/30 hover:to-gradient-blue/30 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}
>

3
app/soapbox/features/auth_layout/index.tsx
View File

@ -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 (
<div>
<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' />
<LandingGradient />
<main className='relative flex flex-col h-screen'>
<header className='py-10 flex justify-center relative'>

2
app/soapbox/features/landing_page/index.tsx
View File

@ -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'>

3
app/soapbox/features/onboarding/onboarding-wizard.tsx
View File

@ -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 (
<div data-testid='onboarding-wizard'>
<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' />
<LandingGradient />
<main className='h-screen flex flex-col overflow-x-hidden'>
<div className='flex flex-col justify-center items-center h-full'>

2
app/soapbox/features/public_layout/components/sonar.tsx
View File

@ -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>
);

3
app/soapbox/features/public_layout/index.js
View File

@ -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 (
<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' />
<LandingGradient />
<div className='flex flex-col h-screen'>
<div className='flex-shrink-0'>

4
app/soapbox/features/ui/components/background_shapes.tsx
View File

@ -25,8 +25,8 @@ const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) =
<use xlinkHref='#a' />
</mask>
<g mask='url(#b)'>
<path className='fill-bg-shape-1' 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)' opacity='.1' />
<path className='fill-bg-shape-2' 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)' opacity='.1' />
<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>

5
app/soapbox/features/verification/waitlist_page.js
View File

@ -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 (
<div className='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>
<LandingGradient />
<main className='relative flex flex-col h-screen max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
<header className='relative flex justify-between h-16'>
<div className='flex-1 flex items-stretch justify-center relative'>

6
app/soapbox/normalizers/soapbox/soapbox_config.ts
View File

@ -52,8 +52,6 @@ const DEFAULT_COLORS = ImmutableMap<string, any>({
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));

6
tailwind.config.js
View File

@ -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',

6
tailwind/__tests__/colors-test.js
View File

@ -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)');
});
});