moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix primary text on dark

This commit is contained in:
Justin 2022-05-09 08:55:53 -04:00
parent 3b920e25c3
commit 03381c8fb2
14 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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',
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',
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 = {

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

@ -13,7 +13,7 @@ type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' |
const themes = {
default: 'text-gray-900 dark:text-gray-100',
danger: 'text-danger-600',
primary: 'text-primary-600',
primary: 'text-primary-600 dark:text-primary-400',
muted: 'text-gray-500 dark:text-gray-400',
subtle: 'text-gray-400 dark:text-gray-500',
success: 'text-success-600',

2
app/soapbox/features/compose/components/compose_form_button.tsx
View File

@ -21,7 +21,7 @@ const ComposeFormButton: React.FC<IComposeFormButton> = ({
return (
<div>
<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}
title={title}
disabled={disabled}

2
app/soapbox/features/directory/components/account_card.js
View File

@ -76,7 +76,7 @@ class AccountCard extends ImmutablePureComponent {
<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('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>
);

2
app/soapbox/features/notifications/components/notification.tsx
View File

@ -204,7 +204,7 @@ const Notification: React.FC<INotificaton> = (props) => {
return (
<Icon
src={icons[type]}
className='text-primary-600 flex-none'
className='text-primary-600 dark:text-primary-400 flex-none'
/>
);
} else {

4
app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
View File

@ -73,7 +73,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
<Card variant='rounded' size='xl'>
<CardBody>
<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}>
<Text size='2xl' align='center' weight='bold'>
<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
@ -102,7 +102,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
onClick={openFilePicker}
type='button'
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,
})}
disabled={isSubmitting}

2
app/soapbox/features/onboarding/steps/completed-step.tsx
View File

@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
<Card variant='rounded' size='xl'>
<CardBody>
<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'>
<FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />

2
app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
View File

@ -120,7 +120,7 @@ const ReasonStep = (_props: IReasonStep) => {
value={rule.id}
checked={isSelected}
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>
);

2
app/soapbox/features/verification/email_passthru.js
View File

@ -31,7 +31,7 @@ const Success = () => {
return (
<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'>
{intl.formatMessage(messages.emailConfirmedHeading)}
</Text>

2
app/soapbox/features/verification/steps/email-verification.js
View File

@ -34,7 +34,7 @@ const EmailSent = ({ handleSubmit }) => {
return (
<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'>
<Text weight='bold' size='3xl'>We sent you an email</Text>

2
app/styles/components/columns.scss
View File

@ -771,7 +771,7 @@
}
a {
@apply text-primary-600 no-underline hover:underline;
@apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
}
}

2
app/styles/components/datepicker.scss
View File

@ -113,5 +113,5 @@
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-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;
}

2
app/styles/polls.scss
View File

@ -193,7 +193,7 @@
}
.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 {

2
app/styles/utilities.scss
View File

@ -13,5 +13,5 @@
}
.mention {
@apply text-primary-600 hover:underline;
@apply text-primary-600 dark:text-primary-400 hover:underline;
}