matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'improve-dark-mode' into 'develop'

Browse Source 
Improve dark mode

See merge request soapbox-pub/soapbox-fe!1306
This commit is contained in:
Justin
2022-05-04 15:17:28 +00:00
parent 7e8a53c4cf 07070b1023
commit 716e9b952f
12 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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': true,
'cursor-pointer hover:from-gradient-purple/30 hover:to-gradient-blue/30': 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-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',
})}
{...linkProps}
>

2
app/soapbox/components/ui/button/useButtonStyles.ts
View File

@ -21,7 +21,7 @@ const useButtonStyles = ({
'border-transparent text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
secondary:
'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
ghost: 'shadow-none border-gray-200 text-gray-700 bg-white focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
ghost: 'shadow-none border-gray-200 text-gray-700 bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 focus:ring-primary-500 focus:ring-2 focus:ring-offset-2',
accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2',
danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2',
transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',

2
app/soapbox/components/ui/menu/menu.css
View File

@ -31,5 +31,5 @@ div:focus[data-reach-menu-list] {
}
[data-reach-menu-popover] hr {
@apply my-1 mx-2 border-t border-gray-100 dark:border-slate-600;
@apply my-1 mx-2 border-t border-gray-100 dark:border-slate-700;
}

2
app/soapbox/components/ui/select/select.tsx
View File

@ -7,7 +7,7 @@ const Select = React.forwardRef<HTMLSelectElement>((props, ref) => {
return (
<select
ref={ref}
className='pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 sm:text-sm rounded-md'
className='pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 sm:text-sm rounded-md'
{...filteredProps}
>
{children}

2
app/soapbox/components/ui/tabs/tabs.tsx
View File

@ -45,7 +45,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
ref={ref}
>
<div
className='w-full h-[3px] bg-primary-200 dark:bg-slate-600 absolute'
className='w-full h-[3px] bg-primary-200 dark:bg-slate-700 absolute'
style={{ top }}
/>
<div

10
app/soapbox/features/account/components/header.js
View File

@ -550,14 +550,14 @@ class Header extends ImmutablePureComponent {
return (
<div className='-mt-4 -mx-4'>
<div>
<div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200' />
<div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-slate-900/50' />
</div>
<div className='px-4 sm:px-6'>
<div className='-mt-12 flex items-end space-x-5'>
<div className='flex relative'>
<div
className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white'
className='h-24 w-24 bg-gray-400 rounded-full ring-4 ring-white dark:ring-slate-800'
/>
</div>
</div>
@ -578,7 +578,7 @@ class Header extends ImmutablePureComponent {
return (
<div className='-mt-4 -mx-4'>
<div>
<div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200'>
<div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-slate-900/50'>
{header && (
<a href={account.get('header')} onClick={this.handleHeaderClick} target='_blank'>
<StillImage
@ -603,7 +603,7 @@ class Header extends ImmutablePureComponent {
<a href={account.get('avatar')} onClick={this.handleAvatarClick} target='_blank'>
<Avatar
account={account}
className='h-24 w-24 rounded-full ring-4 ring-white'
className='h-24 w-24 rounded-full ring-4 ring-white dark:ring-slate-800'
/>
</a>
</div>
@ -615,7 +615,7 @@ class Header extends ImmutablePureComponent {
<MenuButton
as={IconButton}
src={require('@tabler/icons/icons/dots.svg')}
className='text-primary-700 bg-primary-100 hover:bg-primary-200 p-2'
className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
iconClassName='w-5 h-5'
/>

2
app/soapbox/features/notifications/index.js
View File

@ -35,7 +35,7 @@ const Footer = ({ context }) => (
);
const Item = ({ context, ...rest }) => (
<div className='border-solid border-b border-gray-200 dark:border-gray-600' {...rest} />
<div className='border-solid border-b border-gray-200 dark:border-slate-700' {...rest} />
);
const getNotifications = createSelector([

5
app/soapbox/features/security/mfa/enable_otp_form.tsx
View File

@ -20,7 +20,6 @@ interface IEnableOtpForm {
}
const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupProceedClick }) => {
const dispatch = useAppDispatch();
const intl = useIntl();
const history = useHistory();
@ -43,7 +42,7 @@ const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupPr
<FormattedMessage id='mfa.setup_warning' defaultMessage="Write these codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account." />
</Text>
<div className='bg-gray-100 dark:bg-slate-700 rounded-lg p-4'>
<div className='bg-gray-100 dark:bg-slate-900/50 rounded-lg p-4'>
<Stack space={3}>
<Text weight='medium' align='center'>
<FormattedMessage id='mfa.setup_recoverycodes' defaultMessage='Recovery codes' />
@ -85,4 +84,4 @@ const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupPr
);
};
export default EnableOtpForm;
export default EnableOtpForm;

4
app/soapbox/features/security/mfa/otp_confirm_form.tsx
View File

@ -65,7 +65,7 @@ const OtpConfirmForm: React.FC = () => {
return (
<Stack space={4}>
<hr className='mt-4' />
<hr className='mt-4 dark:border-slate-700' />
<Form onSubmit={handleSubmit}>
<Stack>
@ -137,4 +137,4 @@ const OtpConfirmForm: React.FC = () => {
);
};
export default OtpConfirmForm;
export default OtpConfirmForm;

7
app/soapbox/features/ui/components/navbar.tsx
View File

@ -23,6 +23,7 @@ const Navbar = () => {
// In demo mode, use the Soapbox logo
const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : soapboxConfig.logo;
const logoDarkMode = soapboxConfig.logoDarkMode;
const onOpenSidebar = () => dispatch(openSidebar());
@ -47,7 +48,11 @@ const Navbar = () => {
>
{logo ? (
<Link key='logo' to='/' data-preview-title-id='column.home' className='flex-shrink-0 flex items-center'>
<img alt='Logo' src={logo} className='h-5 lg:h-6 w-auto cursor-pointer' />
<img alt='Logo' src={logo} className={classNames('h-5 lg:h-6 w-auto cursor-pointer', { 'dark:hidden': logoDarkMode })} />
{logoDarkMode && (
<img alt='Logo' src={logoDarkMode} className='h-5 lg:h-6 w-auto cursor-pointer hidden dark:block' />
)}
<span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
</Link>
) : (

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

@ -82,6 +82,7 @@ export const CryptoAddressRecord = ImmutableRecord({
export const SoapboxConfigRecord = ImmutableRecord({
appleAppId: null,
logo: '',
logoDarkMode: null,
banner: '',
brandColor: '', // Empty
accentColor: '',

4
app/styles/emoji_picker.scss
View File

@ -13,7 +13,7 @@
}
.emoji-mart-bar {
border: 0 solid #e5e7eb;
@apply border-0 border-solid border-gray-200 dark:border-slate-700;
}
.emoji-mart-bar:first-child {
@ -77,7 +77,7 @@
}
.emoji-mart-search input {
@apply text-sm pr-9 block w-full border-gray-300 dark:border-gray-600 rounded-full focus:ring-primary-500 focus:border-primary-500;
@apply text-sm pr-9 block w-full border-gray-300 dark:bg-slate-800 dark:border-gray-600 rounded-full focus:ring-primary-500 focus:border-primary-500;
&::-moz-focus-inner {
border: 0;