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

Fix imports 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-02-06 23:48:44 +01:00
parent 227f28d013
commit bfe1401a34
92 changed files with 139 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/account.tsx
View File

@ -43,7 +43,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
return ( return (
<button <button
className='focus:ring-primary-500 h-4 w-4 flex-none focus:ring-2 focus:ring-offset-2' className='h-4 w-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
onClick={handleClick} onClick={handleClick}
disabled={disabled} disabled={disabled}
> >

2
app/soapbox/components/announcements/reaction.tsx
View File

@ -56,7 +56,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
<span className='block h-4 w-4'> <span className='block h-4 w-4'>
<Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} /> <Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} />
</span> </span>
<span className='text-primary-600 block min-w-[9px] text-center text-xs font-medium dark:text-white'> <span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>
<AnimatedNumber value={reaction.count} /> <AnimatedNumber value={reaction.count} />
</span> </span>
</button> </button>

1
app/soapbox/components/emoji-selector.tsx
View File

@ -1,4 +1,3 @@
// import clsx from 'clsx';
import React from 'react'; import React from 'react';
import { HotKeys } from 'react-hotkeys'; import { HotKeys } from 'react-hotkeys';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';

8
app/soapbox/components/error-boundary.tsx
View File

@ -113,7 +113,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
const errorText = this.getErrorText(); const errorText = this.getErrorText();
return ( return (
<div className='dark:bg-primary-900 flex h-screen flex-col bg-white pt-16 pb-12'> <div className='flex h-screen flex-col bg-white pt-16 pb-12 dark:bg-primary-900'>
<main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'> <main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
<div className='flex shrink-0 justify-center'> <div className='flex shrink-0 justify-center'>
<a href='/' className='inline-flex'> <a href='/' className='inline-flex'>
@ -132,7 +132,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
defaultMessage="We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out)." defaultMessage="We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out)."
values={{ values={{
clearCookies: ( clearCookies: (
<a href='/' onClick={this.clearCookies} className='text-primary-600 dark:text-accent-blue hover:underline'> <a href='/' onClick={this.clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
<FormattedMessage <FormattedMessage
id='alert.unexpected.clear_cookies' id='alert.unexpected.clear_cookies'
defaultMessage='clear cookies and browser data' defaultMessage='clear cookies and browser data'
@ -150,7 +150,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
</Text> </Text>
<div className='mt-10'> <div className='mt-10'>
<a href='/' className='text-primary-600 dark:text-accent-blue text-base font-medium hover:underline'> <a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
<FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' /> <FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
<span aria-hidden='true'> &rarr;</span> <span aria-hidden='true'> &rarr;</span>
</a> </a>
@ -162,7 +162,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
{errorText && ( {errorText && (
<textarea <textarea
ref={this.setTextareaRef} ref={this.setTextareaRef}
className='focus:border-primary-500 focus:ring-primary-500 block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:ring-2 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm' className='block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm'
value={errorText} value={errorText}
onClick={this.handleCopy} onClick={this.handleCopy}
readOnly readOnly

2
app/soapbox/components/event-preview.tsx
View File

@ -55,7 +55,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
<div className='absolute top-28 right-3'> <div className='absolute top-28 right-3'>
{floatingAction && action} {floatingAction && action}
</div> </div>
<div className='bg-primary-200 h-40 dark:bg-gray-600'> <div className='h-40 bg-primary-200 dark:bg-gray-600'>
{banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />} {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
</div> </div>
<Stack className='p-2.5' space={2}> <Stack className='p-2.5' space={2}>

6
app/soapbox/components/group-card.tsx
View File

@ -18,11 +18,11 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
return ( return (
<div className='overflow-hidden'> <div className='overflow-hidden'>
<Stack className='dark:border-primary-800 dark:bg-primary-900 rounded-lg border border-solid border-gray-300 bg-white sm:rounded-xl'> <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
<div className='bg-primary-100 relative -m-[1px] mb-0 h-[120px] rounded-t-lg dark:bg-gray-800 sm:rounded-t-xl'> <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
{group.header && <img className='h-full w-full rounded-t-lg object-cover sm:rounded-t-xl' src={group.header} alt={intl.formatMessage(messages.groupHeader)} />} {group.header && <img className='h-full w-full rounded-t-lg object-cover sm:rounded-t-xl' src={group.header} alt={intl.formatMessage(messages.groupHeader)} />}
<div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'> <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
<Avatar className='dark:ring-primary-900 ring-2 ring-white' src={group.avatar} size={64} /> <Avatar className='ring-2 ring-white dark:ring-primary-900' src={group.avatar} size={64} />
</div> </div>
</div> </div>
<Stack className='p-3 pt-9' alignItems='center' space={3}> <Stack className='p-3 pt-9' alignItems='center' space={3}>

2
app/soapbox/components/landing-gradient.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
/** Fullscreen gradient used as a backdrop to public pages. */ /** Fullscreen gradient used as a backdrop to public pages. */
const LandingGradient: React.FC = () => ( const LandingGradient: React.FC = () => (
<div className='from-primary-50 to-gradient-end/10 dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50 fixed h-screen w-full bg-gradient-to-tr via-white' /> <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
); );
export default LandingGradient; export default LandingGradient;

2
app/soapbox/components/link.tsx
View File

@ -4,7 +4,7 @@ import { Link as Comp, LinkProps } from 'react-router-dom';
const Link = (props: LinkProps) => ( const Link = (props: LinkProps) => (
<Comp <Comp
{...props} {...props}
className='text-primary-600 dark:text-accent-blue hover:underline' className='text-primary-600 hover:underline dark:text-accent-blue'
/> />
); );

2
app/soapbox/components/list.tsx
View File

@ -84,7 +84,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
{children} {children}
{isSelected ? ( {isSelected ? (
<Icon src={require('@tabler/icons/check.svg')} className='text-primary-500 dark:text-primary-400 ml-1' /> <Icon src={require('@tabler/icons/check.svg')} className='ml-1 text-primary-500 dark:text-primary-400' />
) : null} ) : null}
</div> </div>
) : null} ) : null}

8
app/soapbox/components/polls/poll-option.tsx
View File

@ -20,7 +20,7 @@ const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ pe
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}> <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
{({ width }) => ( {({ width }) => (
<span <span
className='bg-primary-100 dark:bg-primary-500 absolute inset-0 inline-block h-full rounded-l-md' className='absolute inset-0 inline-block h-full rounded-l-md bg-primary-100 dark:bg-primary-500'
style={{ width: `${width}%` }} style={{ width: `${width}%` }}
/> />
)} )}
@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
aria-label={option.title} aria-label={option.title}
> >
{active && ( {active && (
<Icon src={require('@tabler/icons/check.svg')} className='dark:text-primary-900 h-4 w-4 text-white' /> <Icon src={require('@tabler/icons/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
)} )}
</span> </span>
</div> </div>
@ -123,7 +123,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
<HStack <HStack
justifyContent='between' justifyContent='between'
alignItems='center' alignItems='center'
className='dark:bg-primary-800 relative w-full overflow-hidden rounded-md bg-white p-2' className='relative w-full overflow-hidden rounded-md bg-white p-2 dark:bg-primary-800'
> >
<PollPercentageBar percent={percent} leading={leading} /> <PollPercentageBar percent={percent} leading={leading} />
@ -141,7 +141,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
<Icon <Icon
src={require('@tabler/icons/circle-check.svg')} src={require('@tabler/icons/circle-check.svg')}
alt={intl.formatMessage(messages.voted)} alt={intl.formatMessage(messages.voted)}
className='text-primary-600 dark:text-primary-800 h-4 w-4 dark:fill-white' className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
/> />
) : ( ) : (
<div className='svg-icon' /> <div className='svg-icon' />

2
app/soapbox/components/radio.tsx
View File

@ -31,7 +31,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
checked={checked} checked={checked}
onChange={onChange} onChange={onChange}
value={value} value={value}
className='text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300' className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
/> />
</ListItem> </ListItem>
); );

2
app/soapbox/components/scroll-top-button.tsx
View File

@ -83,7 +83,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
return ( return (
<div className={classes}> <div className={classes}>
<a className='bg-primary-600 hover:bg-primary-700 flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full px-4 py-2 text-white transition-transform hover:scale-105 active:scale-100' onClick={handleClick}> <a className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100' onClick={handleClick}>
<Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} /> <Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
{(count > 0) && ( {(count > 0) && (

6
app/soapbox/components/sidebar-menu.tsx
View File

@ -53,8 +53,8 @@ interface ISidebarLink {
const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => { const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
const body = ( const body = (
<HStack space={2} alignItems='center'> <HStack space={2} alignItems='center'>
<div className='bg-primary-50 relative inline-flex rounded-full p-2 dark:bg-gray-800'> <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
<Icon src={icon} className='text-primary-500 h-5 w-5' /> <Icon src={icon} className='h-5 w-5 text-primary-500' />
</div> </div>
<Text tag='span' weight='medium' theme='inherit'>{text}</Text> <Text tag='span' weight='medium' theme='inherit'>{text}</Text>
@ -346,7 +346,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{otherAccounts.map(account => renderAccount(account))} {otherAccounts.map(account => renderAccount(account))}
<NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}> <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
<Icon className='text-primary-500 h-4 w-4' src={require('@tabler/icons/plus.svg')} /> <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/plus.svg')} />
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text> <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink> </NavLink>
</div> </div>

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

@ -36,7 +36,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
}; };
return ( return (
<div className='dark:bg-primary-800 rounded-lg bg-white text-gray-900 shadow dark:text-gray-100 dark:shadow-none'> <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
<button <button
type='button' type='button'
onClick={handleToggle} onClick={handleToggle}

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

@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick }; const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
return ( return (
<Comp {...backAttributes} className='focus:ring-primary-500 text-gray-900 focus:ring-2 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}> <Comp {...backAttributes} className='text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
<SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' /> <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span> <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
</Comp> </Comp>

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

@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
{...props} {...props}
ref={ref} ref={ref}
type='checkbox' type='checkbox'
className='text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900' className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900'
/> />
); );
}); });

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

@ -12,7 +12,7 @@ interface ICounter {
/** A simple counter for notifications, etc. */ /** A simple counter for notifications, etc. */
const Counter: React.FC<ICounter> = ({ count, countMax }) => { const Counter: React.FC<ICounter> = ({ count, countMax }) => {
return ( return (
<span className='bg-secondary-500 flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'> <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'>
{shortNumberFormat(count, countMax)} {shortNumberFormat(count, countMax)}
</span> </span>
); );

2
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx'; import clsx from 'clsx';
import React from 'react'; import React, { useRef } from 'react';
import { Emoji, HStack } from 'soapbox/components/ui'; import { Emoji, HStack } from 'soapbox/components/ui';

4
app/soapbox/components/ui/form-group/form-group.tsx
View File

@ -55,7 +55,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
<div> <div>
<p <p
data-testid='form-group-error' data-testid='form-group-error'
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs' className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
> >
{errors.join(', ')} {errors.join(', ')}
</p> </p>
@ -92,7 +92,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{hasError && ( {hasError && (
<p <p
data-testid='form-group-error' data-testid='form-group-error'
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs' className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
> >
{errors.join(', ')} {errors.join(', ')}
</p> </p>

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

@ -113,7 +113,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
type='button' type='button'
onClick={togglePassword} onClick={togglePassword}
tabIndex={-1} tabIndex={-1}
className='focus:ring-primary-500 h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 dark:text-gray-600 dark:hover:text-gray-400' className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
> >
<SvgIcon <SvgIcon
src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')} src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}

2
app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
View File

@ -12,7 +12,7 @@ const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onCh
return ( return (
<select <select
value={countryCode} value={countryCode}
className='focus:ring-primary-500 h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-base focus:outline-none dark:text-white sm:text-sm' className='h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-base focus:outline-none focus:ring-primary-500 dark:text-white sm:text-sm'
onChange={(event) => onChange(event.target.value as any)} onChange={(event) => onChange(event.target.value as any)}
> >
{COUNTRY_CODES.map((code) => ( {COUNTRY_CODES.map((code) => (

4
app/soapbox/components/ui/progress-bar/progress-bar.tsx
View File

@ -6,8 +6,8 @@ interface IProgressBar {
/** A horizontal meter filled to the given percentage. */ /** A horizontal meter filled to the given percentage. */
const ProgressBar: React.FC<IProgressBar> = ({ progress }) => ( const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
<div className='dark:bg-primary-800 h-2.5 w-full overflow-hidden rounded-full bg-gray-300'> <div className='h-2.5 w-full overflow-hidden rounded-full bg-gray-300 dark:bg-primary-800'>
<div className='bg-secondary-500 h-full' style={{ width: `${Math.floor(progress * 100)}%` }} /> <div className='h-full bg-secondary-500' style={{ width: `${Math.floor(progress * 100)}%` }} />
</div> </div>
); );

2
app/soapbox/components/ui/radio-button/radio-button.tsx
View File

@ -26,7 +26,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
value={value} value={value}
checked={checked} checked={checked}
onChange={onChange} onChange={onChange}
className='text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300' className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
/> />
<label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'> <label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>

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

@ -11,7 +11,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
return ( return (
<select <select
ref={ref} ref={ref}
className={`focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 sm:text-sm ${className}`} className={`w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm ${className}`}
{...filteredProps} {...filteredProps}
> >
{children} {children}

6
app/soapbox/components/ui/slider/slider.tsx
View File

@ -57,10 +57,10 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
ref={node} ref={node}
> >
<div className='bg-primary-200 dark:bg-primary-700 absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full' /> <div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
<div className='bg-accent-500 absolute top-1/2 h-1 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} /> <div className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
<span <span
className='bg-accent-500 absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full shadow' className='absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
tabIndex={0} tabIndex={0}
style={{ left: `${value * 100}%` }} style={{ left: `${value * 100}%` }}
/> />

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

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

2
app/soapbox/components/ui/tag-input/tag-input.tsx
View File

@ -45,7 +45,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
return ( return (
<div className='relative mt-1 grow shadow-sm'> <div className='relative mt-1 grow shadow-sm'>
<HStack <HStack
className='focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 sm:text-sm' className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
space={2} space={2}
wrap wrap
> >

2
app/soapbox/components/ui/tag-input/tag.tsx
View File

@ -13,7 +13,7 @@ interface ITag {
/** A single editable Tag (used by TagInput). */ /** A single editable Tag (used by TagInput). */
const Tag: React.FC<ITag> = ({ tag, onDelete }) => { const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
return ( return (
<div className='bg-primary-500 inline-flex items-center whitespace-nowrap rounded p-1'> <div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
<Text theme='white'>{tag}</Text> <Text theme='white'>{tag}</Text>
<IconButton <IconButton

8
app/soapbox/components/ui/toast/toast.tsx
View File

@ -40,7 +40,7 @@ const Toast = (props: IToast) => {
return ( return (
<Icon <Icon
src={require('@tabler/icons/circle-check.svg')} src={require('@tabler/icons/circle-check.svg')}
className='text-success-500 dark:text-success-400 h-6 w-6' className='h-6 w-6 text-success-500 dark:text-success-400'
aria-hidden aria-hidden
/> />
); );
@ -48,7 +48,7 @@ const Toast = (props: IToast) => {
return ( return (
<Icon <Icon
src={require('@tabler/icons/info-circle.svg')} src={require('@tabler/icons/info-circle.svg')}
className='text-primary-600 dark:text-accent-blue h-6 w-6' className='h-6 w-6 text-primary-600 dark:text-accent-blue'
aria-hidden aria-hidden
/> />
); );
@ -56,7 +56,7 @@ const Toast = (props: IToast) => {
return ( return (
<Icon <Icon
src={require('@tabler/icons/alert-circle.svg')} src={require('@tabler/icons/alert-circle.svg')}
className='text-danger-600 h-6 w-6' className='h-6 w-6 text-danger-600'
aria-hidden aria-hidden
/> />
); );
@ -129,7 +129,7 @@ const Toast = (props: IToast) => {
<div className='flex shrink-0 pt-0.5'> <div className='flex shrink-0 pt-0.5'>
<button <button
type='button' type='button'
className='focus:ring-primary-500 inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500' className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
onClick={dismissToast} onClick={dismissToast}
data-testid='toast-dismiss' data-testid='toast-dismiss'
> >

2
app/soapbox/components/upload-progress.tsx
View File

@ -28,7 +28,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}> <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
{({ width }) => {({ width }) =>
(<div (<div
className='bg-primary-600 absolute left-0 top-0 h-1.5 rounded-lg' className='absolute left-0 top-0 h-1.5 rounded-lg bg-primary-600'
style={{ width: `${width}%` }} style={{ width: `${width}%` }}
/>) />)
} }

2
app/soapbox/features/about/index.tsx
View File

@ -60,7 +60,7 @@ const AboutPage: React.FC = () => {
); );
return ( return (
<div className='prose dark:prose-invert mx-auto py-20'> <div className='prose mx-auto py-20 dark:prose-invert'>
<div dangerouslySetInnerHTML={{ __html: pageHtml }} /> <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
{alsoAvailable} {alsoAvailable}

2
app/soapbox/features/account-timeline/components/moved-note.tsx
View File

@ -17,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
<HStack className='mb-2' alignItems='center' space={1.5}> <HStack className='mb-2' alignItems='center' space={1.5}>
<Icon <Icon
src={require('@tabler/icons/briefcase.svg')} src={require('@tabler/icons/briefcase.svg')}
className='text-primary-600 dark:text-primary-400 flex-none' className='flex-none text-primary-600 dark:text-primary-400'
/> />
<div className='truncate'> <div className='truncate'>

2
app/soapbox/features/account/components/header.tsx
View File

@ -610,7 +610,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
<Avatar <Avatar
src={account.avatar} src={account.avatar}
size={96} size={96}
className='dark:bg-primary-900 dark:ring-primary-900 relative h-24 w-24 rounded-full bg-white ring-4 ring-white' className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
/> />
</a> </a>
</div> </div>

2
app/soapbox/features/admin/components/report.tsx
View File

@ -135,7 +135,7 @@ const Report: React.FC<IReport> = ({ id }) => {
<Link <Link
to={`/@${reporterAcct}`} to={`/@${reporterAcct}`}
title={reporterAcct} title={reporterAcct}
className='text-primary-600 dark:text-accent-blue hover:underline' className='text-primary-600 hover:underline dark:text-accent-blue'
> >
@{reporterAcct} @{reporterAcct}
</Link> </Link>

2
app/soapbox/features/ads/components/ad.tsx
View File

@ -85,7 +85,7 @@ const Ad: React.FC<IAd> = ({ ad }) => {
</Text> </Text>
<Icon <Icon
className='stroke-accent-500 h-5 w-5' className='h-5 w-5 stroke-accent-500'
src={require('@tabler/icons/timeline.svg')} src={require('@tabler/icons/timeline.svg')}
/> />
</HStack> </HStack>

2
app/soapbox/features/aliases/components/search.tsx
View File

@ -44,7 +44,7 @@ const Search: React.FC = () => {
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span> <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
<input <input
className='focus:border-primary-500 focus:ring-primary-500 block w-full rounded-full dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm' className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
type='text' type='text'
value={value} value={value}
onChange={handleChange} onChange={handleChange}

2
app/soapbox/features/auth-login/components/consumers-list.tsx
View File

@ -17,7 +17,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
if (providers.size > 0) { if (providers.size > 0) {
return ( return (
<Card className='dark:bg-primary-800 bg-gray-50 p-4 sm:rounded-xl'> <Card className='bg-gray-50 p-4 dark:bg-primary-800 sm:rounded-xl'>
<Text size='xs' theme='muted'> <Text size='xs' theme='muted'>
<FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' /> <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
</Text> </Text>

2
app/soapbox/features/auth-token-list/index.tsx
View File

@ -41,7 +41,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
}; };
return ( return (
<div className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'> <div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
<Stack space={2}> <Stack space={2}>
<Stack> <Stack>
<Text size='md' weight='medium'>{token.app_name}</Text> <Text size='md' weight='medium'>{token.app_name}</Text>

4
app/soapbox/features/chats/components/chat-composer.tsx
View File

@ -131,7 +131,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
if (isBlocking) { if (isBlocking) {
return ( return (
<div className='shadow-3xl mt-auto p-6 dark:border-t-2 dark:border-solid dark:border-gray-800'> <div className='mt-auto p-6 shadow-3xl dark:border-t-2 dark:border-solid dark:border-gray-800'>
<Stack space={3} alignItems='center'> <Stack space={3} alignItems='center'>
<Text align='center' theme='muted'> <Text align='center' theme='muted'>
{intl.formatMessage(messages.blocked)} {intl.formatMessage(messages.blocked)}
@ -150,7 +150,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
} }
return ( return (
<div className='shadow-3xl mt-auto px-4'> <div className='mt-auto px-4 shadow-3xl'>
{/* Spacer */} {/* Spacer */}
<div className='h-5' /> <div className='h-5' />

4
app/soapbox/features/chats/components/chat-list-item.tsx
View File

@ -68,7 +68,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
role='button' role='button'
key={chat.id} key={chat.id}
onClick={() => onClick(chat)} onClick={() => onClick(chat)}
className='focus:shadow-inset-ring group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 dark:hover:bg-gray-800' className='group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800'
data-testid='chat-list-item' data-testid='chat-list-item'
> >
<HStack alignItems='center' justifyContent='between' space={2} className='w-full'> <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
@ -130,7 +130,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
<> <>
{chat.last_message.unread && ( {chat.last_message.unread && (
<div <div
className='bg-secondary-500 h-2 w-2 rounded-full' className='h-2 w-2 rounded-full bg-secondary-500'
data-testid='chat-unread-indicator' data-testid='chat-unread-indicator'
/> />
)} )}

4
app/soapbox/features/chats/components/chat-message-list.tsx
View File

@ -379,11 +379,11 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
{(isMyMessage && features.chatsReadReceipts) ? ( {(isMyMessage && features.chatsReadReceipts) ? (
<> <>
{isRead ? ( {isRead ? (
<span className='border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900 flex flex-col items-center justify-center rounded-full border border-solid p-0.5 text-white'> <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
<Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' /> <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
</span> </span>
) : ( ) : (
<span className='border-primary-500 text-primary-500 dark:border-primary-400 dark:text-primary-400 flex flex-col items-center justify-center rounded-full border border-solid bg-transparent p-0.5'> <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
<Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' /> <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
</span> </span>
)} )}

2
app/soapbox/features/chats/components/chat-page/chat-page.tsx
View File

@ -60,7 +60,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
<div <div
ref={containerRef} ref={containerRef}
style={{ height }} style={{ height }}
className='dark:bg-primary-900 h-screen overflow-hidden bg-white text-gray-900 shadow-lg dark:text-gray-100 dark:shadow-none sm:rounded-t-xl' className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
> >
{isOnboarded ? ( {isOnboarded ? (
<div <div

4
app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
View File

@ -212,7 +212,7 @@ const ChatPageMain = () => {
onSelect={isBlocking ? handleUnblockUser : handleBlockUser} onSelect={isBlocking ? handleUnblockUser : handleBlockUser}
className='!px-0 hover:!bg-transparent' className='!px-0 hover:!bg-transparent'
> >
<div className='text-primary-500 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'> <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
<Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' /> <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
<span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span> <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
</div> </div>
@ -224,7 +224,7 @@ const ChatPageMain = () => {
onSelect={handleLeaveChat} onSelect={handleLeaveChat}
className='!px-0 hover:!bg-transparent' className='!px-0 hover:!bg-transparent'
> >
<div className='text-danger-600 dark:text-danger-500 flex w-full items-center space-x-2 text-sm font-bold'> <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
<Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' /> <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
<span>{intl.formatMessage(messages.leaveChat)}</span> <span>{intl.formatMessage(messages.leaveChat)}</span>
</div> </div>

2
app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
View File

@ -47,7 +47,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
({unreadCount}) ({unreadCount})
</Text> </Text>
<div className='bg-accent-300 h-2.5 w-2.5 rounded-full' /> <div className='h-2.5 w-2.5 rounded-full bg-accent-300' />
</HStack> </HStack>
)} )}
</ButtonComp> </ButtonComp>

4
app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
View File

@ -135,13 +135,13 @@ const ChatSettings = () => {
)} )}
<Stack space={5}> <Stack space={5}>
<button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='text-primary-600 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'> <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
<Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' /> <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
<span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span> <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
</button> </button>
{features.chatsDelete && ( {features.chatsDelete && (
<button onClick={handleLeaveChat} className='text-danger-600 flex w-full items-center space-x-2 text-sm font-bold'> <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
<Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' /> <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
<span>{intl.formatMessage(messages.leaveChat)}</span> <span>{intl.formatMessage(messages.leaveChat)}</span>
</button> </button>

2
app/soapbox/features/directory/components/account-card.tsx
View File

@ -28,7 +28,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
const followedBy = me !== account.id && account.relationship?.followed_by; const followedBy = me !== account.id && account.relationship?.followed_by;
return ( return (
<div className='dark:divide-primary-700 dark:bg-primary-800 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow'> <div className='flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow dark:divide-primary-700 dark:bg-primary-800'>
<div className='relative'> <div className='relative'>
{followedBy && ( {followedBy && (
<div className='absolute top-2.5 left-2.5'> <div className='absolute top-2.5 left-2.5'>

2
app/soapbox/features/embedded-status/index.tsx
View File

@ -62,7 +62,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
return ( return (
<a <a
className='dark:bg-primary-900 block bg-white' className='block bg-white dark:bg-primary-900'
href={status?.url || '#'} href={status?.url || '#'}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
target='_blank' target='_blank'

4
app/soapbox/features/event/event-information.tsx
View File

@ -76,7 +76,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
{[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')} {[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')}
{tileServer && event.location.get('latitude') && (<> {tileServer && event.location.get('latitude') && (<>
<br /> <br />
<a href='#' className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleShowMap}> <a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' /> <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</a> </a>
</>)} </>)}
@ -143,7 +143,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
{status.event.links.map(link => ( {status.event.links.map(link => (
<HStack space={2} alignItems='center'> <HStack space={2} alignItems='center'>
<Icon src={require('@tabler/icons/link.svg')} /> <Icon src={require('@tabler/icons/link.svg')} />
<a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'> <a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
{(link.remote_url || link.url).replace(/^https?:\/\//, '')} {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
</a> </a>
</HStack> </HStack>

10
app/soapbox/features/feed-filtering/feed-carousel.tsx
View File

@ -61,7 +61,7 @@ const CarouselItem = React.forwardRef((
<Stack className='h-auto w-14' space={3}> <Stack className='h-auto w-14' space={3}>
<div className='relative mx-auto block h-12 w-12 rounded-full'> <div className='relative mx-auto block h-12 w-12 rounded-full'>
{isSelected && ( {isSelected && (
<div className='bg-primary-600/50 absolute inset-0 flex items-center justify-center rounded-full'> <div className='absolute inset-0 flex items-center justify-center rounded-full bg-primary-600/50'>
<Icon src={require('@tabler/icons/check.svg')} className='h-6 w-6 text-white' /> <Icon src={require('@tabler/icons/check.svg')} className='h-6 w-6 text-white' />
</div> </div>
)} )}
@ -159,11 +159,11 @@ const FeedCarousel = () => {
return ( return (
<div <div
className='dark:bg-primary-900 overflow-hidden rounded-xl bg-white shadow-lg dark:shadow-none' className='overflow-hidden rounded-xl bg-white shadow-lg dark:bg-primary-900 dark:shadow-none'
data-testid='feed-carousel' data-testid='feed-carousel'
> >
<HStack alignItems='stretch'> <HStack alignItems='stretch'>
<div className='dark:bg-primary-900 z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white'> <div className='z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white dark:bg-primary-900'>
<button <button
data-testid='prev-page' data-testid='prev-page'
onClick={handlePrevPage} onClick={handlePrevPage}
@ -177,7 +177,7 @@ const FeedCarousel = () => {
<div className='relative w-full overflow-hidden'> <div className='relative w-full overflow-hidden'>
{pinnedAvatar ? ( {pinnedAvatar ? (
<div <div
className='dark:bg-primary-900 absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white' className='absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white dark:bg-primary-900'
style={{ style={{
width: widthPerAvatar || 'auto', width: widthPerAvatar || 'auto',
}} }}
@ -248,7 +248,7 @@ const FeedCarousel = () => {
</HStack> </HStack>
</div> </div>
<div className='dark:bg-primary-900 z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white'> <div className='z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white dark:bg-primary-900'>
<button <button
data-testid='next-page' data-testid='next-page'
onClick={handleNextPage} onClick={handleNextPage}

2
app/soapbox/features/feed-suggestions/feed-suggestions.tsx
View File

@ -71,7 +71,7 @@ const FeedSuggestions = () => {
<Link <Link
to='/suggestions' to='/suggestions'
className='text-primary-600 dark:text-accent-blue hover:underline' className='text-primary-600 hover:underline dark:text-accent-blue'
> >
{intl.formatMessage(messages.viewAll)} {intl.formatMessage(messages.viewAll)}
</Link> </Link>

2
app/soapbox/features/group/components/group-header.tsx
View File

@ -164,7 +164,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
</div> </div>
<div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'> <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
<a href={group.avatar} onClick={handleAvatarClick} target='_blank'> <a href={group.avatar} onClick={handleAvatarClick} target='_blank'>
<Avatar className='dark:ring-primary-900 ring-[3px] ring-white' src={group.avatar} size={72} /> <Avatar className='ring-[3px] ring-white dark:ring-primary-900' src={group.avatar} size={72} />
</a> </a>
</div> </div>
</div> </div>

2
app/soapbox/features/home-timeline/index.tsx
View File

@ -115,7 +115,7 @@ const HomeTimeline: React.FC = () => {
defaultMessage='Or you can visit {public} to get started and meet other users.' defaultMessage='Or you can visit {public} to get started and meet other users.'
values={{ values={{
public: ( public: (
<Link to='/timeline/local' className='text-primary-600 dark:text-primary-400 hover:underline'> <Link to='/timeline/local' className='text-primary-600 hover:underline dark:text-primary-400'>
<FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: instance.title }} /> <FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: instance.title }} />
</Link> </Link>
), ),

2
app/soapbox/features/landing-page/index.tsx
View File

@ -107,7 +107,7 @@ const LandingPage = () => {
<div className='px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:text-start'> <div className='px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:text-start'>
<div className='w-full'> <div className='w-full'>
<Stack space={3}> <Stack space={3}>
<h1 className='from-accent-500 via-primary-500 to-gradient-end overflow-hidden text-ellipsis bg-gradient-to-br bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'> <h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
{instance.title} {instance.title}
</h1> </h1>

2
app/soapbox/features/migration/index.tsx
View File

@ -68,7 +68,7 @@ const Migration = () => {
values={{ values={{
link: ( link: (
<Link <Link
className='text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-500 hover:underline' className='text-primary-600 hover:text-primary-800 hover:underline dark:text-primary-400 dark:hover:text-primary-500'
to='/settings/aliases' to='/settings/aliases'
> >
<FormattedMessage <FormattedMessage

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

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

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

@ -87,7 +87,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
)} )}
{isSubmitting && ( {isSubmitting && (
<div className='dark:bg-primary-900/80 absolute inset-0 flex items-center justify-center rounded-full bg-white/80'> <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
<Spinner withText={false} /> <Spinner withText={false} />
</div> </div>
)} )}

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'> <Card variant='rounded' size='xl'>
<CardBody> <CardBody>
<Stack space={2}> <Stack space={2}>
<Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='text-primary-600 dark:text-primary-400 mx-auto h-16 w-16' /> <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='mx-auto h-16 w-16 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' />

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

@ -99,7 +99,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
{isSubmitting && ( {isSubmitting && (
<div <div
className='dark:bg-primary-900/80 absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80' className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
> >
<Spinner withText={false} /> <Spinner withText={false} />
</div> </div>
@ -122,7 +122,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
<div className='flex flex-col px-4 pb-4'> <div className='flex flex-col px-4 pb-4'>
{account && ( {account && (
<Avatar src={account.avatar} size={64} className='dark:ring-primary-800 -mt-8 mb-2 ring-2 ring-white' /> <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
)} )}
<Text weight='bold' size='sm'>{account?.display_name}</Text> <Text weight='bold' size='sm'>{account?.display_name}</Text>

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

@ -15,7 +15,7 @@ const FediverseStep = ({ onNext }: { onNext: () => 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/affiliate.svg')} className='text-primary-600 dark:text-primary-400 mx-auto h-16 w-16' /> <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
<Text size='2xl' weight='bold'> <Text size='2xl' weight='bold'>
<FormattedMessage <FormattedMessage
@ -49,7 +49,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
</Stack> </Stack>
</div> </div>
<div className='bg-primary-50 rounded-lg p-4 text-center dark:bg-gray-800'> <div className='rounded-lg bg-primary-50 p-4 text-center dark:bg-gray-800'>
<Account account={account} /> <Account account={account} />
</div> </div>

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

@ -49,7 +49,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
const renderEmpty = () => { const renderEmpty = () => {
return ( return (
<div className='bg-primary-50 my-2 rounded-lg p-8 text-center dark:bg-gray-800'> <div className='my-2 rounded-lg bg-primary-50 p-8 text-center dark:bg-gray-800'>
<Text> <Text>
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' /> <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
</Text> </Text>

4
app/soapbox/features/placeholder/components/placeholder-avatar.tsx
View File

@ -23,12 +23,12 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
return ( return (
<Stack space={2} className='animate-pulse py-3 text-center'> <Stack space={2} className='animate-pulse py-3 text-center'>
<div <div
className='bg-primary-50 dark:bg-primary-800 mx-auto block rounded-full' className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800'
style={style} style={style}
/> />
{withText && ( {withText && (
<div style={{ width: size, height: 15 }} className='bg-primary-50 dark:bg-primary-800 mx-auto rounded-full' /> <div style={{ width: size, height: 15 }} className='mx-auto rounded-full bg-primary-50 dark:bg-primary-800' />
)} )}
</Stack> </Stack>
); );

2
app/soapbox/features/placeholder/components/placeholder-card.tsx
View File

@ -11,7 +11,7 @@ const PlaceholderCard: React.FC = () => (
> >
<div className='primary-500 w-2/5 rounded-l'>&nbsp;</div> <div className='primary-500 w-2/5 rounded-l'>&nbsp;</div>
<div className='text-primary-50 flex w-3/5 flex-col justify-between break-words p-4'> <div className='flex w-3/5 flex-col justify-between break-words p-4 text-primary-50'>
<p>{generateText(randomIntFromInterval(5, 25))}</p> <p>{generateText(randomIntFromInterval(5, 25))}</p>
<p>{generateText(randomIntFromInterval(5, 75))}</p> <p>{generateText(randomIntFromInterval(5, 75))}</p>
<p>{generateText(randomIntFromInterval(5, 15))}</p> <p>{generateText(randomIntFromInterval(5, 15))}</p>

4
app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
View File

@ -33,7 +33,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
}) })
} }
> >
<div style={{ width: messageLength, height: 20 }} className='bg-primary-50 dark:bg-primary-800 rounded-full' /> <div style={{ width: messageLength, height: 20 }} className='rounded-full bg-primary-50 dark:bg-primary-800' />
</div> </div>
<div className={clsx({ 'order-1': !isMyMessage })}> <div className={clsx({ 'order-1': !isMyMessage })}>
@ -56,7 +56,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
'order-2': !isMyMessage, 'order-2': !isMyMessage,
})} })}
> >
<span style={{ width: 50, height: 12 }} className='bg-primary-50 dark:bg-primary-800 block rounded-full' /> <span style={{ width: 50, height: 12 }} className='block rounded-full bg-primary-50 dark:bg-primary-800' />
</Text> </Text>
<div className={clsx({ 'order-1': !isMyMessage })}> <div className={clsx({ 'order-1': !isMyMessage })}>

2
app/soapbox/features/placeholder/components/placeholder-display-name.tsx
View File

@ -14,7 +14,7 @@ const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength,
const acctLength = randomIntFromInterval(maxLength, minLength); const acctLength = randomIntFromInterval(maxLength, minLength);
return ( return (
<div className='text-primary-50 dark:text-primary-800 flex flex-col'> <div className='flex flex-col text-primary-50 dark:text-primary-800'>
<p>{generateText(length)}</p> <p>{generateText(length)}</p>
{withSuffix && <p>{generateText(acctLength)}</p>} {withSuffix && <p>{generateText(acctLength)}</p>}
</div> </div>

2
app/soapbox/features/placeholder/components/placeholder-event-header.tsx
View File

@ -11,7 +11,7 @@ const PlaceholderEventHeader = () => {
const locationLength = randomIntFromInterval(5, 30); const locationLength = randomIntFromInterval(5, 30);
return ( return (
<Stack className='text-primary-50 dark:text-primary-800 animate-pulse' space={2}> <Stack className='animate-pulse text-primary-50 dark:text-primary-800' space={2}>
<p className='text-lg'>{generateText(eventNameLength)}</p> <p className='text-lg'>{generateText(eventNameLength)}</p>
<Stack space={1}> <Stack space={1}>

4
app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
View File

@ -9,8 +9,8 @@ const PlaceholderEventPreview = () => {
const nameLength = randomIntFromInterval(5, 15); const nameLength = randomIntFromInterval(5, 15);
return ( return (
<div className='text-primary-50 dark:bg-primary-800 dark:text-primary-800 relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100'> <div className='relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100 text-primary-50 dark:bg-primary-800 dark:text-primary-800'>
<div className='bg-primary-200 h-40 dark:bg-gray-600' /> <div className='h-40 bg-primary-200 dark:bg-gray-600' />
<Stack className='p-2.5' space={2}> <Stack className='p-2.5' space={2}>
<Text weight='semibold'>{generateText(eventNameLength)}</Text> <Text weight='semibold'>{generateText(eventNameLength)}</Text>

6
app/soapbox/features/placeholder/components/placeholder-group-card.tsx
View File

@ -11,10 +11,10 @@ const PlaceholderGroupCard = () => {
return ( return (
<div className='animate-pulse overflow-hidden'> <div className='animate-pulse overflow-hidden'>
<Stack className='dark:border-primary-800 dark:bg-primary-900 rounded-lg border border-solid border-gray-300 bg-white sm:rounded-xl'> <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
<div className='bg-primary-100 relative -m-[1px] mb-0 h-[120px] rounded-t-lg dark:bg-gray-800 sm:rounded-t-xl'> <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
<div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'> <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
<div className='bg-primary-500 dark:ring-primary-900 h-16 w-16 rounded-full ring-2 ring-white' /> <div className='h-16 w-16 rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900' />
</div> </div>
</div> </div>
<Stack className='p-3 pt-9' alignItems='center' space={3}> <Stack className='p-3 pt-9' alignItems='center' space={3}>

2
app/soapbox/features/placeholder/components/placeholder-hashtag.tsx
View File

@ -7,7 +7,7 @@ const PlaceholderHashtag: React.FC = () => {
const length = randomIntFromInterval(15, 30); const length = randomIntFromInterval(15, 30);
return ( return (
<div className='text-primary-200 dark:text-primary-700 animate-pulse'> <div className='animate-pulse text-primary-200 dark:text-primary-700'>
<p>{generateText(length)}</p> <p>{generateText(length)}</p>
</div> </div>
); );

2
app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
View File

@ -78,7 +78,7 @@ const PlaceholderMediaGallery: React.FC<IPlaceholderMediaGallery> = ({ media, de
const float = dimensions.float as any || 'left'; const float = dimensions.float as any || 'left';
const position = dimensions.pos as any || 'relative'; const position = dimensions.pos as any || 'relative';
return <div key={i} className='media-gallery__item bg-primary-200 animate-pulse' style={{ position, float, left, top, right, bottom, height, width }} />; return <div key={i} className='media-gallery__item animate-pulse bg-primary-200' style={{ position, float, left, top, right, bottom, height, width }} />;
}; };
const sizeData = getSizeData(media.size); const sizeData = getSizeData(media.size);

2
app/soapbox/features/placeholder/components/placeholder-notification.tsx
View File

@ -8,7 +8,7 @@ import PlaceholderStatusContent from './placeholder-status-content';
/** Fake notification to display while data is loading. */ /** Fake notification to display while data is loading. */
const PlaceholderNotification = () => ( const PlaceholderNotification = () => (
<div className='dark:bg-primary-900 bg-white px-4 py-6 sm:p-6'> <div className='bg-white px-4 py-6 dark:bg-primary-900 sm:p-6'>
<div className='w-full animate-pulse'> <div className='w-full animate-pulse'>
<div className='mb-2'> <div className='mb-2'>
<PlaceholderStatusContent minLength={20} maxLength={20} /> <PlaceholderStatusContent minLength={20} maxLength={20} />

2
app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
View File

@ -14,7 +14,7 @@ export default ({ limit }: { limit: number }) => {
<HStack key={idx} alignItems='center' space={2} className='animate-pulse'> <HStack key={idx} alignItems='center' space={2} className='animate-pulse'>
<Stack space={3} className='text-center'> <Stack space={3} className='text-center'>
<div <div
className='bg-primary-200 dark:bg-primary-700 mx-auto block h-9 w-9 rounded-full' className='mx-auto block h-9 w-9 rounded-full bg-primary-200 dark:bg-primary-700'
/> />
</Stack> </Stack>

2
app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx
View File

@ -11,7 +11,7 @@ export default ({ limit }: { limit: number }) => {
return ( return (
<> <>
{new Array(limit).fill(undefined).map((_, idx) => ( {new Array(limit).fill(undefined).map((_, idx) => (
<Stack key={idx} className='text-primary-200 dark:text-primary-700 animate-pulse'> <Stack key={idx} className='animate-pulse text-primary-200 dark:text-primary-700'>
<p>{generateText(trend)}</p> <p>{generateText(trend)}</p>
<p>{generateText(stat)}</p> <p>{generateText(stat)}</p>
</Stack> </Stack>

2
app/soapbox/features/placeholder/components/placeholder-status-content.tsx
View File

@ -12,7 +12,7 @@ const PlaceholderStatusContent: React.FC<IPlaceholderStatusContent> = ({ minLeng
const length = randomIntFromInterval(maxLength, minLength); const length = randomIntFromInterval(maxLength, minLength);
return ( return (
<div className='text-primary-50 dark:text-primary-800 flex flex-col'> <div className='flex flex-col text-primary-50 dark:text-primary-800'>
<p className='break-words'>{generateText(length)}</p> <p className='break-words'>{generateText(length)}</p>
</div> </div>
); );

2
app/soapbox/features/public-layout/components/footer.tsx
View File

@ -31,7 +31,7 @@ const Footer = () => {
return ( return (
<div key={idx} className='px-5 py-2'> <div key={idx} className='px-5 py-2'>
<Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'> <Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
<Text tag='span' theme='inherit' size='sm'> <Text tag='span' theme='inherit' size='sm'>
{(link.getIn(['titleLocales', locale]) || link.get('title')) as string} {(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
</Text> </Text>

10
app/soapbox/features/public-layout/components/sonar.tsx
View File

@ -3,12 +3,12 @@ import React from 'react';
const Sonar = () => ( const Sonar = () => (
<div className='relative'> <div className='relative'>
<div className='relative h-48 w-48'> <div className='relative h-48 w-48'>
<div className='animate-sonar-scale-4 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' /> <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-4 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
<div className='animate-sonar-scale-3 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' /> <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-3 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
<div className='animate-sonar-scale-2 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' /> <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-2 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
<div className='animate-sonar-scale-1 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' /> <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-1 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
<div className='dark:bg-primary-900 absolute top-0 left-0 h-48 w-48 rounded-full bg-white' /> <div className='absolute top-0 left-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' />
</div> </div>
</div> </div>
); );

2
app/soapbox/features/soapbox-config/components/site-preview.tsx
View File

@ -39,7 +39,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
<style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style> <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
<BackgroundShapes position='absolute' /> <BackgroundShapes position='absolute' />
<div className='bg-accent-500 absolute z-20 self-center overflow-hidden rounded-lg p-2 text-white'> <div className='absolute z-20 self-center overflow-hidden rounded-lg bg-accent-500 p-2 text-white'>
<FormattedMessage id='site_preview.preview' defaultMessage='Preview' /> <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
</div> </div>

4
app/soapbox/features/status/index.tsx
View File

@ -483,7 +483,7 @@ const Thread: React.FC<IThread> = (props) => {
{!isUnderReview ? ( {!isUnderReview ? (
<> <>
<hr className='dark:border-primary-800 mb-2 border-t-2' /> <hr className='mb-2 border-t-2 dark:border-primary-800' />
<StatusActionBar <StatusActionBar
status={status} status={status}
@ -497,7 +497,7 @@ const Thread: React.FC<IThread> = (props) => {
</HotKeys> </HotKeys>
{hasDescendants && ( {hasDescendants && (
<hr className='dark:border-primary-800 mt-2 border-t-2' /> <hr className='mt-2 border-t-2 dark:border-primary-800' />
)} )}
</div> </div>
); );

2
app/soapbox/features/ui/components/floating-action-button.tsx
View File

@ -27,7 +27,7 @@ const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
onClick={handleOpenComposeModal} onClick={handleOpenComposeModal}
className={clsx( className={clsx(
'inline-flex appearance-none items-center rounded-full border p-4 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2', 'inline-flex appearance-none items-center rounded-full border p-4 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',
'bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300 border-transparent text-gray-100', 'border-transparent bg-secondary-500 text-gray-100 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300',
)} )}
aria-label={intl.formatMessage(messages.publish)} aria-label={intl.formatMessage(messages.publish)}
> >

2
app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
View File

@ -214,7 +214,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
<FormGroup <FormGroup
labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />} labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
> >
<div className='dark:sm:shadow-inset bg-primary-100 text-primary-500 relative flex h-24 items-center justify-center overflow-hidden rounded-lg dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'> <div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
{banner ? ( {banner ? (
<> <>
<img className='h-full w-full object-cover' src={banner.url} alt='' /> <img className='h-full w-full object-cover' src={banner.url} alt='' />

2
app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
View File

@ -27,7 +27,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
}; };
return ( return (
<HStack className='text-primary-500 dark:text-accent-blue h-full w-full cursor-pointer' space={3} alignItems='center' justifyContent='center' element='label'> <HStack className='h-full w-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
<Icon <Icon
src={require('@tabler/icons/photo-plus.svg')} src={require('@tabler/icons/photo-plus.svg')}
className='h-7 w-7' className='h-7 w-7'

2
app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
View File

@ -9,7 +9,7 @@ interface IHotkeysModal {
} }
const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => ( const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<kbd className='border-primary-200 bg-primary-50 rounded-md border border-solid px-1.5 py-1 font-sans text-xs dark:border-gray-700 dark:bg-gray-800'> <kbd className='rounded-md border border-solid border-primary-200 bg-primary-50 px-1.5 py-1 font-sans text-xs dark:border-gray-700 dark:bg-gray-800'>
{children} {children}
</kbd> </kbd>
); );

4
app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
View File

@ -30,7 +30,7 @@ const messages = defineMessages({
const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => { const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
return ( return (
<label <label
className='dark:sm:shadow-inset bg-primary-100 text-primary-500 dark:text-accent-blue relative h-24 w-full cursor-pointer overflow-hidden rounded-lg dark:bg-gray-800 sm:h-36 sm:shadow' className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
> >
{src && <img className='h-full w-full object-cover' src={src} alt='' />} {src && <img className='h-full w-full object-cover' src={src} alt='' />}
<HStack <HStack
@ -65,7 +65,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => { const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
return ( return (
<label className='bg-primary-500 dark:ring-primary-900 absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full ring-2 ring-white'> <label className='absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
{src && <Avatar src={src} size={72} />} {src && <Avatar src={src} size={72} />}
<HStack <HStack
alignItems='center' alignItems='center'

12
app/soapbox/features/ui/components/modals/policy-modal.tsx
View File

@ -15,7 +15,7 @@ const DirectMessageUpdates = () => {
return ( return (
<Stack space={3}> <Stack space={3}>
<Stack space={4} className='border-primary-200 dark:border-primary-800 rounded-lg border-2 border-solid p-4'> <Stack space={4} className='rounded-lg border-2 border-solid border-primary-200 p-4 dark:border-primary-800'>
<HStack alignItems='center' space={3}> <HStack alignItems='center' space={3}>
<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'> <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M0 22.5306C0 10.0873 10.0873 0 22.5306 0H26.4828C38.3664 0 48 9.6336 48 21.5172V21.5172C48 36.1433 36.1433 48 21.5172 48H18.4615C8.26551 48 0 39.7345 0 29.5385V22.5306Z' fill='url(#paint0_linear_2190_131524)' fillOpacity='0.2' /> <path d='M0 22.5306C0 10.0873 10.0873 0 22.5306 0H26.4828C38.3664 0 48 9.6336 48 21.5172V21.5172C48 36.1433 36.1433 48 21.5172 48H18.4615C8.26551 48 0 39.7345 0 29.5385V22.5306Z' fill='url(#paint0_linear_2190_131524)' fillOpacity='0.2' />
@ -43,7 +43,7 @@ const DirectMessageUpdates = () => {
</Text> </Text>
</Stack> </Stack>
<Stack space={4} className='border-primary-200 dark:border-primary-800 rounded-lg border-2 border-solid p-4'> <Stack space={4} className='rounded-lg border-2 border-solid border-primary-200 p-4 dark:border-primary-800'>
<HStack alignItems='center' space={3}> <HStack alignItems='center' space={3}>
<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'> <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M0 25.7561C0 22.2672 0 20.5228 0.197492 19.0588C1.52172 9.24259 9.24259 1.52172 19.0588 0.197492C20.5228 0 22.2672 0 25.7561 0H30.1176C39.9938 0 48 8.0062 48 17.8824C48 34.5159 34.5159 48 17.8824 48H15.3192C15.0228 48 14.8747 48 14.7494 47.9979C6.66132 47.8627 0.137263 41.3387 0.0020943 33.2506C0 33.1253 0 32.9772 0 32.6808V25.7561Z' fill='url(#paint0_linear_2190_131532)' fillOpacity='0.2' /> <path d='M0 25.7561C0 22.2672 0 20.5228 0.197492 19.0588C1.52172 9.24259 9.24259 1.52172 19.0588 0.197492C20.5228 0 22.2672 0 25.7561 0H30.1176C39.9938 0 48 8.0062 48 17.8824C48 34.5159 34.5159 48 17.8824 48H15.3192C15.0228 48 14.8747 48 14.7494 47.9979C6.66132 47.8627 0.137263 41.3387 0.0020943 33.2506C0 33.1253 0 32.9772 0 32.6808V25.7561Z' fill='url(#paint0_linear_2190_131532)' fillOpacity='0.2' />
@ -61,21 +61,21 @@ const DirectMessageUpdates = () => {
<ul className='space-y-2'> <ul className='space-y-2'>
<li className='flex items-center space-x-2'> <li className='flex items-center space-x-2'>
<span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'> <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
1 1
</span> </span>
<Text theme='muted'>Consolidates previously-separate policies</Text> <Text theme='muted'>Consolidates previously-separate policies</Text>
</li> </li>
<li className='flex items-center space-x-2'> <li className='flex items-center space-x-2'>
<span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'> <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
2 2
</span> </span>
<Text theme='muted'>Reaffirms jurisdiction-specific requirements</Text> <Text theme='muted'>Reaffirms jurisdiction-specific requirements</Text>
</li> </li>
<li className='flex items-center space-x-2'> <li className='flex items-center space-x-2'>
<span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'> <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
3 3
</span> </span>
@ -85,7 +85,7 @@ const DirectMessageUpdates = () => {
{links.get('privacyPolicy') ? ( {links.get('privacyPolicy') ? (
<a <a
className='text-primary-600 dark:text-accent-blue text-center font-bold hover:underline' className='text-center font-bold text-primary-600 hover:underline dark:text-accent-blue'
href={links.get('privacyPolicy')} href={links.get('privacyPolicy')}
target='_blank' target='_blank'
> >

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

@ -195,7 +195,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
<Avatar src={account.avatar} className='h-8 w-8' /> <Avatar src={account.avatar} className='h-8 w-8' />
</div> </div>
<div className='dark:bg-primary-800 grow rounded-md bg-gray-200 p-4'> <div className='grow rounded-md bg-gray-200 p-4 dark:bg-primary-800'>
<Text dangerouslySetInnerHTML={{ __html: selectedChatMessage?.content as string }} /> <Text dangerouslySetInnerHTML={{ __html: selectedChatMessage?.content as string }} />
</div> </div>
</HStack> </HStack>

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

@ -25,7 +25,7 @@ const renderTermsOfServiceLink = (href: string) => (
<a <a
href={href} href={href}
target='_blank' target='_blank'
className='text-primary-600 hover:text-primary-800 dark:text-accent-blue dark:hover:text-accent-blue hover:underline' className='text-primary-600 hover:text-primary-800 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
> >
{termsOfServiceText} {termsOfServiceText}
</a> </a>

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

@ -131,7 +131,7 @@ const ReasonStep = (_props: IReasonStep) => {
value={rule.id} value={rule.id}
checked={isSelected} checked={isSelected}
readOnly readOnly
className='text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:checked:bg-primary-500 dark:focus:ring-primary-500 h-4 w-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900' className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:checked:bg-primary-500 dark:focus:ring-primary-500'
/> />
</button> </button>
); );

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

@ -63,7 +63,7 @@ const Navbar = () => {
if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />; if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
return ( return (
<nav className='dark:bg-primary-900 sticky top-0 z-50 bg-white shadow' ref={node} data-testid='navbar'> <nav className='sticky top-0 z-50 bg-white shadow dark:bg-primary-900' ref={node} data-testid='navbar'>
<div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'> <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
<div className='relative flex h-12 justify-between lg:h-16'> <div className='relative flex h-12 justify-between lg:h-16'>
{account && ( {account && (

2
app/soapbox/features/ui/components/profile-info-panel.tsx
View File

@ -218,7 +218,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
<div className='max-w-[300px]'> <div className='max-w-[300px]'>
<Text size='sm' truncate> <Text size='sm' truncate>
{isSafeUrl(account.website) ? ( {isSafeUrl(account.website) ? (
<a className='text-primary-600 dark:text-accent-blue hover:underline' href={account.website} target='_blank'>{account.website}</a> <a className='text-primary-600 hover:underline dark:text-accent-blue' href={account.website} target='_blank'>{account.website}</a>
) : ( ) : (
account.website account.website
)} )}

8
app/soapbox/features/verification/email-passthru.tsx
View File

@ -49,7 +49,7 @@ const Success = () => {
return ( return (
<Stack space={4} alignItems='center'> <Stack space={4} alignItems='center'>
<Icon src={require('@tabler/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' /> <Icon src={require('@tabler/icons/circle-check.svg')} className='h-10 w-10 text-primary-600 dark:text-primary-400' />
<Text size='3xl' weight='semibold' align='center'> <Text size='3xl' weight='semibold' align='center'>
{intl.formatMessage(messages.emailConfirmedHeading)} {intl.formatMessage(messages.emailConfirmedHeading)}
</Text> </Text>
@ -65,7 +65,7 @@ const GenericFail = () => {
return ( return (
<Stack space={4} alignItems='center'> <Stack space={4} alignItems='center'>
<Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' /> <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
<Text size='3xl' weight='semibold' align='center'> <Text size='3xl' weight='semibold' align='center'>
{intl.formatMessage(messages.genericFailHeading)} {intl.formatMessage(messages.genericFailHeading)}
</Text> </Text>
@ -81,7 +81,7 @@ const TokenNotFound = () => {
return ( return (
<Stack space={4} alignItems='center'> <Stack space={4} alignItems='center'>
<Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' /> <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
<Text size='3xl' weight='semibold' align='center'> <Text size='3xl' weight='semibold' align='center'>
{intl.formatMessage(messages.tokenNotFoundHeading)} {intl.formatMessage(messages.tokenNotFoundHeading)}
</Text> </Text>
@ -98,7 +98,7 @@ const TokenExpired = () => {
return ( return (
<Stack space={4} alignItems='center'> <Stack space={4} alignItems='center'>
<Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' /> <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
<Text size='3xl' weight='semibold' align='center'> <Text size='3xl' weight='semibold' align='center'>
{intl.formatMessage(messages.tokenExpiredHeading)} {intl.formatMessage(messages.tokenExpiredHeading)}
</Text> </Text>

4
app/soapbox/features/verification/registration.tsx
View File

@ -132,7 +132,7 @@ const Registration = () => {
defaultMessage='By registering, you agree to the {terms} and {privacy}.' defaultMessage='By registering, you agree to the {terms} and {privacy}.'
values={{ values={{
terms: ( terms: (
<a href={links.get('termsOfService')} target='_blank' className='text-primary-600 dark:text-primary-400 hover:underline'> <a href={links.get('termsOfService')} target='_blank' className='text-primary-600 hover:underline dark:text-primary-400'>
<FormattedMessage <FormattedMessage
id='registration.tos' id='registration.tos'
defaultMessage='Terms of Service' defaultMessage='Terms of Service'
@ -140,7 +140,7 @@ const Registration = () => {
</a> </a>
), ),
privacy: ( privacy: (
<a href={links.get('privacyPolicy')} target='_blank' className='text-primary-600 dark:text-primary-400 hover:underline'> <a href={links.get('privacyPolicy')} target='_blank' className='text-primary-600 hover:underline dark:text-primary-400'>
<FormattedMessage <FormattedMessage
id='registration.privacy' id='registration.privacy'
defaultMessage='Privacy Policy' defaultMessage='Privacy Policy'

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

@ -45,7 +45,7 @@ const EmailSent: React.FC<IEmailSent> = ({ handleSubmit }) => {
return ( return (
<div className='mx-auto flex flex-col items-center justify-center sm:pt-10'> <div className='mx-auto flex flex-col items-center justify-center sm:pt-10'>
<Icon src={require('@tabler/icons/send.svg')} className='text-primary-600 dark:text-primary-400 mb-5 h-12 w-12' /> <Icon src={require('@tabler/icons/send.svg')} className='mb-5 h-12 w-12 text-primary-600 dark:text-primary-400' />
<div className='mb-4 space-y-2 text-center'> <div className='mb-4 space-y-2 text-center'>
<Text weight='bold' size='3xl'>We sent you an email</Text> <Text weight='bold' size='3xl'>We sent you an email</Text>

1
app/styles/application.scss
View File

@ -1,4 +1,3 @@
@import 'mixins';
@import 'variables'; @import 'variables';
@import 'fonts'; @import 'fonts';
@import 'basics'; @import 'basics';