sforkowany z mirror/soapbox
Fix primary text on dark
rodzic
3b920e25c3
commit
03381c8fb2
|
@ -25,7 +25,7 @@ const useButtonStyles = ({
|
||||||
accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-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',
|
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',
|
transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
|
||||||
link: 'border-transparent text-primary-600 hover:bg-gray-100 hover:text-primary-700',
|
link: 'border-transparent text-primary-600 dark:text-primary-400 hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-slate-900/50',
|
||||||
};
|
};
|
||||||
|
|
||||||
const sizes = {
|
const sizes = {
|
||||||
|
|
|
@ -13,7 +13,7 @@ type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' |
|
||||||
const themes = {
|
const themes = {
|
||||||
default: 'text-gray-900 dark:text-gray-100',
|
default: 'text-gray-900 dark:text-gray-100',
|
||||||
danger: 'text-danger-600',
|
danger: 'text-danger-600',
|
||||||
primary: 'text-primary-600',
|
primary: 'text-primary-600 dark:text-primary-400',
|
||||||
muted: 'text-gray-500 dark:text-gray-400',
|
muted: 'text-gray-500 dark:text-gray-400',
|
||||||
subtle: 'text-gray-400 dark:text-gray-500',
|
subtle: 'text-gray-400 dark:text-gray-500',
|
||||||
success: 'text-success-600',
|
success: 'text-success-600',
|
||||||
|
|
|
@ -21,7 +21,7 @@ const ComposeFormButton: React.FC<IComposeFormButton> = ({
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<IconButton
|
<IconButton
|
||||||
className={classNames('text-gray-400 hover:text-gray-600', { 'text-primary-600 hover:text-primary-500': active })}
|
className={classNames('text-gray-400 hover:text-gray-600', { 'text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300': active })}
|
||||||
src={icon}
|
src={icon}
|
||||||
title={title}
|
title={title}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
|
|
@ -76,7 +76,7 @@ class AccountCard extends ImmutablePureComponent {
|
||||||
<div className='directory__card__extra'>
|
<div className='directory__card__extra'>
|
||||||
<div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('statuses_count'))}</Text> <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
|
<div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('statuses_count'))}</Text> <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
|
||||||
<div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('followers_count'))}</Text> <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
|
<div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('followers_count'))}</Text> <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
|
||||||
<div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
|
<div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600 dark:text-primary-400' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -204,7 +204,7 @@ const Notification: React.FC<INotificaton> = (props) => {
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
src={icons[type]}
|
src={icons[type]}
|
||||||
className='text-primary-600 flex-none'
|
className='text-primary-600 dark:text-primary-400 flex-none'
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -73,7 +73,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
||||||
<Card variant='rounded' size='xl'>
|
<Card variant='rounded' size='xl'>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<div>
|
<div>
|
||||||
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
|
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-slate-900/50 border-solid -mx-4 sm:-mx-10'>
|
||||||
<Stack space={2}>
|
<Stack space={2}>
|
||||||
<Text size='2xl' align='center' weight='bold'>
|
<Text size='2xl' align='center' weight='bold'>
|
||||||
<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
|
<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
|
||||||
|
@ -102,7 +102,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
||||||
onClick={openFilePicker}
|
onClick={openFilePicker}
|
||||||
type='button'
|
type='button'
|
||||||
className={classNames({
|
className={classNames({
|
||||||
'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white hover:bg-primary-700': true,
|
'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-slate-800 hover:bg-primary-700': true,
|
||||||
'opacity-50 pointer-events-none': isSubmitting,
|
'opacity-50 pointer-events-none': isSubmitting,
|
||||||
})}
|
})}
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { FormattedMessage } from'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
|
import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
|
||||||
<Card variant='rounded' size='xl'>
|
<Card variant='rounded' size='xl'>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<Stack space={2}>
|
<Stack space={2}>
|
||||||
<Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600' />
|
<Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600 dark:text-primary-400' />
|
||||||
|
|
||||||
<Text size='2xl' align='center' weight='bold'>
|
<Text size='2xl' align='center' weight='bold'>
|
||||||
<FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
|
<FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
|
||||||
|
|
|
@ -120,7 +120,7 @@ const ReasonStep = (_props: IReasonStep) => {
|
||||||
value={rule.id}
|
value={rule.id}
|
||||||
checked={isSelected}
|
checked={isSelected}
|
||||||
readOnly
|
readOnly
|
||||||
className='h-4 w-4 cursor-pointer text-primary-600 border-gray-300 rounded focus:ring-primary-500'
|
className='h-4 w-4 cursor-pointer text-primary-600 dark:text-primary-400 border-gray-300 rounded focus:ring-primary-500'
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|
|
@ -31,7 +31,7 @@ const Success = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack space={4} alignItems='center'>
|
<Stack space={4} alignItems='center'>
|
||||||
<Icon src={require('@tabler/icons/icons/circle-check.svg')} className='text-primary-600 h-10 w-10' />
|
<Icon src={require('@tabler/icons/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' />
|
||||||
<Text size='3xl' weight='semibold' align='center'>
|
<Text size='3xl' weight='semibold' align='center'>
|
||||||
{intl.formatMessage(messages.emailConfirmedHeading)}
|
{intl.formatMessage(messages.emailConfirmedHeading)}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -34,7 +34,7 @@ const EmailSent = ({ handleSubmit }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='sm:pt-10 mx-auto flex flex-col items-center justify-center'>
|
<div className='sm:pt-10 mx-auto flex flex-col items-center justify-center'>
|
||||||
<Icon src={require('@tabler/icons/icons/send.svg')} className='text-primary-600 h-12 w-12 mb-5' />
|
<Icon src={require('@tabler/icons/icons/send.svg')} className='text-primary-600 dark:text-primary-400 h-12 w-12 mb-5' />
|
||||||
|
|
||||||
<div className='space-y-1 text-center mb-4'>
|
<div className='space-y-1 text-center mb-4'>
|
||||||
<Text weight='bold' size='3xl'>We sent you an email</Text>
|
<Text weight='bold' size='3xl'>We sent you an email</Text>
|
||||||
|
|
|
@ -771,7 +771,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@apply text-primary-600 no-underline hover:underline;
|
@apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -113,5 +113,5 @@
|
||||||
.react-datepicker__month-text--keyboard-selected,
|
.react-datepicker__month-text--keyboard-selected,
|
||||||
.react-datepicker__quarter-text--keyboard-selected,
|
.react-datepicker__quarter-text--keyboard-selected,
|
||||||
.react-datepicker__year-text--keyboard-selected {
|
.react-datepicker__year-text--keyboard-selected {
|
||||||
@apply bg-primary-50 hover:bg-primary-100 text-primary-600;
|
@apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400;
|
||||||
}
|
}
|
||||||
|
|
|
@ -193,7 +193,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.button-secondary {
|
.button.button-secondary {
|
||||||
@apply h-auto py-1.5 px-2.5 text-primary-600 border-primary-600;
|
@apply h-auto py-1.5 px-2.5 text-primary-600 dark:text-primary-400 border-primary-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
|
@ -13,5 +13,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mention {
|
.mention {
|
||||||
@apply text-primary-600 hover:underline;
|
@apply text-primary-600 dark:text-primary-400 hover:underline;
|
||||||
}
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue