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

Improve dark mode

Browse source
This commit is contained in:
Alex Gleason 2022-03-24 18:56:22 -05:00
parent ee691e0cc8
commit ef0de13c91
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/soapbox/components/ui/card/card.tsx
View file

@ -4,6 +4,8 @@ import InlineSVG from 'react-inlinesvg';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Text } from 'soapbox/components/ui';
const sizes = { const sizes = {
md: 'p-4 sm:rounded-xl', md: 'p-4 sm:rounded-xl',
lg: 'p-4 sm:p-6 sm:rounded-xl', lg: 'p-4 sm:p-6 sm:rounded-xl',
@ -51,7 +53,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick }; const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
return ( return (
<Comp {...backAttributes} className='mr-2' aria-label={intl.formatMessage(messages.back)}> <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
<InlineSVG src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' /> <InlineSVG src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
<span className='sr-only'>Back</span> <span className='sr-only'>Back</span>
</Comp> </Comp>
@ -72,7 +74,7 @@ interface ICardTitle {
} }
const CardTitle = ({ title }: ICardTitle): JSX.Element => ( const CardTitle = ({ title }: ICardTitle): JSX.Element => (
<h1 className='text-xl font-bold'>{title}</h1> <Text size='xl' weight='bold' tag='h1'>{title}</Text>
); );
const CardBody: React.FC = ({ children }): JSX.Element => ( const CardBody: React.FC = ({ children }): JSX.Element => (

2
app/soapbox/features/compose/components/search.tsx
View file

@ -120,7 +120,7 @@ const Search = (props: ISearch) => {
<div className='relative'> <div className='relative'>
<Component <Component
className='block w-full pl-3 pr-10 py-2 border border-gray-100 rounded-full leading-5 bg-gray-100 placeholder-gray-500 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' className='block w-full pl-3 pr-10 py-2 border border-gray-100 dark:border-slate-600 rounded-full leading-5 bg-gray-100 placeholder-gray-500 dark:bg-slate-900 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'
type='text' type='text'
id='search' id='search'
placeholder={intl.formatMessage(messages.placeholder)} placeholder={intl.formatMessage(messages.placeholder)}

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

Binary file not shown.

4
app/styles/components/detailed-status.scss
View file

@ -168,7 +168,7 @@
} }
.thread { .thread {
@apply sm:bg-white p-4 sm:shadow-xl sm:p-6 sm:rounded-xl; @apply sm:bg-white sm:dark:bg-slate-800 p-4 sm:shadow-xl sm:p-6 sm:rounded-xl;
&__status { &__status {
@apply relative; @apply relative;
@ -222,7 +222,7 @@
// } // }
&__connector { &__connector {
@apply bg-gray-200 absolute w-0.5 left-5 hidden; @apply bg-gray-200 dark:bg-gray-600 absolute w-0.5 left-5 hidden;
&--bottom { &--bottom {
@apply block; @apply block;