Improve dark mode
This commit is contained in:
parent
ee691e0cc8
commit
ef0de13c91
4 changed files with 7 additions and 5 deletions
|
@ -4,6 +4,8 @@ import InlineSVG from 'react-inlinesvg';
|
|||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Text } from 'soapbox/components/ui';
|
||||
|
||||
const sizes = {
|
||||
md: 'p-4 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 };
|
||||
|
||||
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' />
|
||||
<span className='sr-only'>Back</span>
|
||||
</Comp>
|
||||
|
@ -72,7 +74,7 @@ interface ICardTitle {
|
|||
}
|
||||
|
||||
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 => (
|
||||
|
|
|
@ -120,7 +120,7 @@ const Search = (props: ISearch) => {
|
|||
|
||||
<div className='relative'>
|
||||
<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'
|
||||
id='search'
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
|
|
Binary file not shown.
|
@ -168,7 +168,7 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
@apply relative;
|
||||
|
@ -222,7 +222,7 @@
|
|||
// }
|
||||
|
||||
&__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 {
|
||||
@apply block;
|
||||
|
|
Loading…
Reference in a new issue