bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'landing-page-dark-mode' into 'develop'

Browse source 
Add "dark mode" support to Landing Page

See merge request soapbox-pub/soapbox-fe!1344
This commit is contained in:
Justin 2022-05-11 11:19:18 +00:00
commit 4e47ee1bea
12 changed files with 16 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/soapbox/actions/beta.js
View file

Binary file not shown.

2
app/soapbox/components/landing-gradient.tsx
View file

@ -2,7 +2,7 @@ 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' />
<div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-900/50 via-white dark:via-slate-900 to-gradient-end/10 dark:to-slate-900/50' />
);
export default LandingGradient;

2
app/soapbox/components/ui/checkbox/checkbox.tsx
View file

@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
{...props}
ref={ref}
type='checkbox'
className='focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'
className='dark:bg-slate-800 dark:border-gray-600 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'
/>
);
});

1
app/soapbox/containers/soapbox.tsx
View file

@ -183,7 +183,6 @@ const SoapboxMount = () => {
{!me && <Route exact path='/' component={PublicLayout} />}
<Route exact path='/about/:slug?' component={PublicLayout} />
<Route exact path='/beta/:slug?' component={PublicLayout} />
<Route exact path='/mobile/:slug?' component={PublicLayout} />
<Route path='/login' component={AuthLayout} />
{(features.accountCreation && instance.registrations) && (

BIN
app/soapbox/features/beta/index.js
View file

Binary file not shown.

3
app/soapbox/features/landing_page/index.tsx
View file

@ -68,13 +68,14 @@ const LandingPage = () => {
return (
<main className='mt-16 sm:mt-24' data-testid='homepage'>
<div className='mx-auto max-w-7xl'>
<div className='lg:grid lg:grid-cols-12 lg:gap-8 py-12'>
<div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
<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-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'>
{instance.description}
</Text>

11
app/soapbox/features/public_layout/components/header.tsx
View file

@ -1,3 +1,4 @@
import classNames from 'classnames';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
@ -27,10 +28,10 @@ const Header = () => {
const dispatch = useDispatch();
const intl = useIntl();
const { logo } = useSoapboxConfig();
const { logo, logoDarkMode } = useSoapboxConfig();
const features = useFeatures();
const instance = useAppSelector((state) => state.instance);
const isOpen = instance.get('registrations', false) === true;
const isOpen = instance.get('registrations', false) === true;
const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
const [isLoading, setLoading] = React.useState(false);
@ -76,7 +77,11 @@ const Header = () => {
<Sonar />
</div>
<Link to='/' className='z-10'>
<img alt='Logo' src={logo} className='h-6 w-auto cursor-pointer' />
<img alt='Logo' src={logo} className={classNames('h-6 w-auto cursor-pointer', { 'dark:hidden': logoDarkMode })} />
{logoDarkMode && (
<img alt='Logo' src={logoDarkMode} className='h-6 w-auto cursor-pointer hidden dark:block' />
)}
<span className='hidden'>{intl.formatMessage(messages.home)}</span>
</Link>
</div>

8
app/soapbox/features/public_layout/components/sonar.tsx
View file

@ -3,10 +3,10 @@ import React from 'react';
const Sonar = () => (
<div className='relative'>
<div className='relative w-48 h-48'>
<div className='animate-sonar-scale-4 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-3 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-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='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
<div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
<div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/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 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
<div className='absolute top-0 left-0 w-48 h-48 bg-white dark:bg-slate-900 rounded-full' />
</div>

BIN
app/soapbox/features/public_layout/index.js
View file

Binary file not shown.

1
app/soapbox/normalizers/soapbox/soapbox_config.ts
View file

@ -110,7 +110,6 @@ export const SoapboxConfigRecord = ImmutableRecord({
limit: 1,
}),
aboutPages: ImmutableMap(),
betaPages: ImmutableMap(),
mobilePages: ImmutableMap(),
authenticatedProfile: true,
singleUserMode: false,

152
app/styles/about.scss
View file

@ -234,158 +234,6 @@ $fluid-breakpoint: $maximum-width + 20px;
}
}
.beta-page {
.app-cta {
display: flex;
align-items: center;
margin: 40px auto;
@media screen and (max-width: 768px) {
flex-direction: column;
}
.copy {
flex: 2;
background: white;
border: 1px solid #eee;
padding: 80px;
border-radius: 10px;
@media screen and (max-width: 768px) {
padding: 60px 20px 20px 20px;
order: 1;
text-align: center;
}
}
.icon {
border-radius: 10px;
transform: scale(1.25);
display: flex;
align-items: center;
justify-content: center;
flex: 1;
padding: 40px;
background: linear-gradient(to bottom, $color-4-light, $color-4);
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
@media screen and (max-width: 768px) {
order: 0;
transform: scale(0.75);
margin-bottom: -60px;
}
img {
border-radius: 16px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
}
}
h1 {
margin: 0 0 20px 0;
font-size: 80px;
line-height: 90px;
font-weight: 600;
background: -webkit-linear-gradient(135deg, $color-9, $color-4-light, $color-2-light);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@media screen and (max-width: 767px) {
margin-bottom: 30px;
text-align: center;
font-size: 50px;
line-height: 55px;
}
}
}
}
.beta-header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.hand-wave {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
margin-bottom: 20px;
@media screen and (max-width: $fluid-breakpoint) {
width: 120px;
height: 120px;
}
img {
animation: 1s ease-in wave;
max-width: 140px;
@media screen and (max-width: $fluid-breakpoint) {
width: 80px;
height: 80px;
}
}
}
.message {
margin: 40px 0;
padding: 20px;
width: 100%;
background: lighten($color-4-light, 30%);
border-radius: 10px;
p {
color: $color-4;
text-align: center;
font-size: 20px;
font-weight: 500;
}
span {
font-style: italic;
font-weight: 600;
}
}
.group {
display: flex;
align-items: center;
@media screen and (max-width: $fluid-breakpoint) {
display: block;
}
.logo {
padding: 0 40px;
border-right: 10px solid transparentize($color-3, 0.9);
@media screen and (max-width: $fluid-breakpoint) {
border-right: none;
}
}
.text {
padding: 0 40px;
font-weight: 600;
font-size: 80px;
font-style: italic;
color: $color-4-dark;
@media screen and (max-width: $fluid-breakpoint) {
padding: 0;
font-weight: 600;
font-size: 40px;
text-align: center;
}
}
}
}
.faq {
margin-bottom: 80px;

BIN
tailwind.config.js
View file

Binary file not shown.