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

Add Dark Mode support to landing page header

Browse source
This commit is contained in:
Justin 2022-05-10 15:51:36 -04:00
parent c879f82b48
commit 23e20568e1
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import classNames from 'classnames';
import React from 'react'; import React from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
@ -27,10 +28,10 @@ const Header = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const intl = useIntl(); const intl = useIntl();
const { logo } = useSoapboxConfig(); const { logo, logoDarkMode } = useSoapboxConfig();
const features = useFeatures(); const features = useFeatures();
const instance = useAppSelector((state) => state.instance); 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 pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
const [isLoading, setLoading] = React.useState(false); const [isLoading, setLoading] = React.useState(false);
@ -76,7 +77,11 @@ const Header = () => {
<Sonar /> <Sonar />
</div> </div>
<Link to='/' className='z-10'> <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> <span className='hidden'>{intl.formatMessage(messages.home)}</span>
</Link> </Link>
</div> </div>

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

@ -3,10 +3,10 @@ import React from 'react';
const Sonar = () => ( const Sonar = () => (
<div className='relative'> <div className='relative'>
<div className='relative w-48 h-48'> <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-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 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 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 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 className='absolute top-0 left-0 w-48 h-48 bg-white dark:bg-slate-900 rounded-full' />
</div> </div>