kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Fixes, styles improvements, cleanup, enforce classes order for classNames
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>environments/review-cleanup-4am6ej/deployments/2543
marcin mikołajczak
rodzic
8bd175e0e4
commit
49ba4c7a9d
|
|
@ -265,8 +265,11 @@ module.exports = {
|
|||
|
||||
'react-hooks/rules-of-hooks': 'error',
|
||||
|
||||
'tailwindcss/classnames-order': 'error',
|
||||
'tailwindcss/classnames-order': ['error', {
|
||||
callees: ['classNames'],
|
||||
}],
|
||||
'tailwindcss/migration-from-tailwind-2': 'error',
|
||||
'tailwindcss/no-custom-classname': 'off',
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
|
|||
|
||||
return (
|
||||
<button
|
||||
className='h-4 w-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
|
||||
className='focus:ring-primary-500 h-4 w-4 flex-none focus:ring-2 focus:ring-offset-2'
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
|
|||
|
||||
return (
|
||||
<button
|
||||
className={classNames('flex shrink-0 items-center gap-1.5 bg-gray-100 dark:bg-primary-900 rounded-sm px-1.5 py-1 transition-colors', {
|
||||
className={classNames('dark:bg-primary-900 flex shrink-0 items-center gap-1.5 rounded-sm bg-gray-100 px-1.5 py-1 transition-colors', {
|
||||
'bg-gray-200 dark:bg-primary-800': hovered,
|
||||
'bg-primary-200 dark:bg-primary-500': reaction.me,
|
||||
})}
|
||||
|
|
@ -56,7 +56,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
|
|||
<span className='block h-4 w-4'>
|
||||
<Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} />
|
||||
</span>
|
||||
<span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>
|
||||
<span className='text-primary-600 block min-w-[9px] text-center text-xs font-medium dark:text-white'>
|
||||
<AnimatedNumber value={reaction.count} />
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
|||
|
||||
return menu.map((item, i) => (
|
||||
<a
|
||||
className={classNames('flex items-center space-x-2 px-4 py-2.5 text-sm cursor-pointer text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
|
||||
className={classNames('dark:focus:bg-primary-800 flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800', { selected: suggestions.size - selectedSuggestion === i })}
|
||||
href='#'
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
|
|
|
|||
|
|
@ -244,7 +244,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
|||
|
||||
<Textarea
|
||||
ref={this.setTextarea}
|
||||
className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-transparent px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
|
||||
className={classNames('w-full resize-none border-0 px-0 text-gray-800 transition-[min-height] placeholder:text-gray-600 focus:border-0 focus:shadow-none focus:ring-0 motion-reduce:transition-none dark:bg-transparent dark:text-white dark:placeholder:text-gray-600', {
|
||||
'min-h-[40px]': condensed,
|
||||
'min-h-[100px]': !condensed,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const Badge: React.FC<IBadge> = ({ title, slug }) => {
|
|||
return (
|
||||
<span
|
||||
data-testid='badge'
|
||||
className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
|
||||
className={classNames('inline-flex items-center rounded px-2 py-0.5 text-xs font-medium', {
|
||||
'bg-fuchsia-700 text-white': slug === 'patron',
|
||||
'bg-emerald-800 text-white': slug === 'badge:donor',
|
||||
'bg-black text-white': slug === 'admin',
|
||||
|
|
|
|||
|
|
@ -116,9 +116,9 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
|
|||
}));
|
||||
};
|
||||
|
||||
// const handleUnfocus: React.EventHandler<React.KeyboardEvent> = () => {
|
||||
// setFocused(false);
|
||||
// };
|
||||
const handleUnfocus: React.EventHandler<React.KeyboardEvent> = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const selector = (
|
||||
<div
|
||||
|
|
@ -132,8 +132,9 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
|
|||
<EmojiSelector
|
||||
emojis={soapboxConfig.allowedEmoji}
|
||||
onReact={handleReact}
|
||||
visible={visible}
|
||||
// focused={focused}
|
||||
// onUnfocus={handleUnfocus}
|
||||
onUnfocus={handleUnfocus}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -30,108 +30,21 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
|
|||
visible: false,
|
||||
};
|
||||
|
||||
node?: HTMLDivElement = undefined;
|
||||
|
||||
handleBlur: React.FocusEventHandler<HTMLDivElement> = e => {
|
||||
const { focused, onUnfocus } = this.props;
|
||||
|
||||
if (focused && (!e.currentTarget || !e.currentTarget.classList.contains('emoji-react-selector__emoji'))) {
|
||||
onUnfocus();
|
||||
}
|
||||
};
|
||||
|
||||
_selectPreviousEmoji = (i: number): void => {
|
||||
if (!this.node) return;
|
||||
|
||||
if (i !== 0) {
|
||||
const button: HTMLButtonElement | null = this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`);
|
||||
button?.focus();
|
||||
} else {
|
||||
const button: HTMLButtonElement | null = this.node.querySelector('.emoji-react-selector__emoji:last-child');
|
||||
button?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
_selectNextEmoji = (i: number) => {
|
||||
if (!this.node) return;
|
||||
|
||||
if (i !== this.props.allowedEmoji.size - 1) {
|
||||
const button: HTMLButtonElement | null = this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`);
|
||||
button?.focus();
|
||||
} else {
|
||||
const button: HTMLButtonElement | null = this.node.querySelector('.emoji-react-selector__emoji:first-child');
|
||||
button?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
handleKeyDown = (i: number): React.KeyboardEventHandler => e => {
|
||||
const { onUnfocus } = this.props;
|
||||
|
||||
switch (e.key) {
|
||||
case 'Tab':
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) this._selectPreviousEmoji(i);
|
||||
else this._selectNextEmoji(i);
|
||||
break;
|
||||
case 'Left':
|
||||
case 'ArrowLeft':
|
||||
this._selectPreviousEmoji(i);
|
||||
break;
|
||||
case 'Right':
|
||||
case 'ArrowRight':
|
||||
this._selectNextEmoji(i);
|
||||
break;
|
||||
case 'Escape':
|
||||
onUnfocus();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
handleReact = (emoji: string) => (): void => {
|
||||
const { onReact, focused, onUnfocus } = this.props;
|
||||
|
||||
onReact(emoji);
|
||||
|
||||
if (focused) {
|
||||
onUnfocus();
|
||||
}
|
||||
};
|
||||
|
||||
handlers = {
|
||||
open: () => { },
|
||||
};
|
||||
|
||||
setRef = (c: HTMLDivElement): void => {
|
||||
this.node = c;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { visible, focused, allowedEmoji, onReact } = this.props;
|
||||
const { visible, focused, allowedEmoji, onReact, onUnfocus } = this.props;
|
||||
|
||||
return (
|
||||
<HotKeys handlers={this.handlers}>
|
||||
{/*<div
|
||||
className={classNames('flex absolute bg-white dark:bg-gray-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', { 'opacity-100 pointer-events-auto z-[999]': visible || focused })}
|
||||
onBlur={this.handleBlur}
|
||||
ref={this.setRef}
|
||||
>
|
||||
{allowedEmoji.map((emoji, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className='emoji-react-selector__emoji'
|
||||
onClick={this.handleReact(emoji)}
|
||||
onKeyDown={this.handleKeyDown(i)}
|
||||
tabIndex={(visible || focused) ? 0 : -1}
|
||||
>
|
||||
<Emoji emoji={emoji} />
|
||||
</button>
|
||||
))}
|
||||
</div>*/}
|
||||
<RealEmojiSelector
|
||||
emojis={allowedEmoji.toArray()}
|
||||
onReact={onReact}
|
||||
visible={visible}
|
||||
focused={focused}
|
||||
onUnfocus={onUnfocus}
|
||||
/>
|
||||
</HotKeys>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
|
|||
const errorText = this.getErrorText();
|
||||
|
||||
return (
|
||||
<div className='flex h-screen flex-col bg-white pt-16 pb-12 dark:bg-primary-900'>
|
||||
<div className='dark:bg-primary-900 flex h-screen flex-col bg-white pt-16 pb-12'>
|
||||
<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'>
|
||||
<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)."
|
||||
values={{
|
||||
clearCookies: (
|
||||
<a href='/' onClick={this.clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
|
||||
<a href='/' onClick={this.clearCookies} className='text-primary-600 dark:text-accent-blue hover:underline'>
|
||||
<FormattedMessage
|
||||
id='alert.unexpected.clear_cookies'
|
||||
defaultMessage='clear cookies and browser data'
|
||||
|
|
@ -150,7 +150,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
|
|||
</Text>
|
||||
|
||||
<div className='mt-10'>
|
||||
<a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
|
||||
<a href='/' className='text-primary-600 dark:text-accent-blue text-base font-medium hover:underline'>
|
||||
<FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
|
||||
<span aria-hidden='true'> →</span>
|
||||
</a>
|
||||
|
|
@ -162,7 +162,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
|
|||
{errorText && (
|
||||
<textarea
|
||||
ref={this.setTextareaRef}
|
||||
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'
|
||||
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'
|
||||
value={errorText}
|
||||
onClick={this.handleCopy}
|
||||
readOnly
|
||||
|
|
|
|||
|
|
@ -51,11 +51,11 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
|
|||
));
|
||||
|
||||
return (
|
||||
<div className={classNames('w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
|
||||
<div className={classNames('dark:bg-primary-800 relative w-full overflow-hidden rounded-lg bg-gray-100', className)}>
|
||||
<div className='absolute top-28 right-3'>
|
||||
{floatingAction && action}
|
||||
</div>
|
||||
<div className='h-40 bg-primary-200 dark:bg-gray-600'>
|
||||
<div className='bg-primary-200 h-40 dark:bg-gray-600'>
|
||||
{banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
|
||||
</div>
|
||||
<Stack className='p-2.5' space={2}>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
|
|||
|
||||
return (
|
||||
<div className='overflow-hidden'>
|
||||
<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='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
|
||||
<Stack className='dark:border-primary-800 dark:bg-primary-900 rounded-lg border border-solid border-gray-300 bg-white 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'>
|
||||
{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'>
|
||||
<Avatar className='ring-2 ring-white dark:ring-primary-900' src={group.avatar} size={64} />
|
||||
<Avatar className='dark:ring-primary-900 ring-2 ring-white' src={group.avatar} size={64} />
|
||||
</div>
|
||||
</div>
|
||||
<Stack className='p-3 pt-9' alignItems='center' space={3}>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
|
||||
/** Fullscreen gradient used as a backdrop to public pages. */
|
||||
const LandingGradient: React.FC = () => (
|
||||
<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' />
|
||||
<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' />
|
||||
);
|
||||
|
||||
export default LandingGradient;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Link as Comp, LinkProps } from 'react-router-dom';
|
|||
const Link = (props: LinkProps) => (
|
||||
<Comp
|
||||
{...props}
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
|
|||
{children}
|
||||
|
||||
{isSelected ? (
|
||||
<Icon src={require('@tabler/icons/check.svg')} className='ml-1 text-primary-500 dark:text-primary-400' />
|
||||
<Icon src={require('@tabler/icons/check.svg')} className='text-primary-500 dark:text-primary-400 ml-1' />
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
|
|||
const OutlineBox: React.FC<IOutlineBox> = ({ children, className, ...rest }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames('p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800', className)}
|
||||
className={classNames('rounded-lg border border-solid border-gray-300 p-4 dark:border-gray-800', className)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -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 }) }}>
|
||||
{({ width }) => (
|
||||
<span
|
||||
className='absolute inset-0 inline-block h-full rounded-l-md bg-primary-100 dark:bg-primary-500'
|
||||
className='bg-primary-100 dark:bg-primary-500 absolute inset-0 inline-block h-full rounded-l-md'
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -46,7 +46,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
return (
|
||||
<label
|
||||
className={
|
||||
classNames('flex relative p-2 bg-white dark:bg-primary-900 cursor-pointer rounded-3xl border border-solid hover:bg-primary-50 dark:hover:bg-primary-800/50', {
|
||||
classNames('dark:bg-primary-900 hover:bg-primary-50 dark:hover:bg-primary-800/50 relative flex cursor-pointer rounded-3xl border border-solid bg-white p-2', {
|
||||
'border-primary-600 ring-1 ring-primary-600 bg-primary-50 dark:bg-primary-800/50 dark:border-primary-300 dark:ring-primary-300': active,
|
||||
'border-primary-300 dark:border-primary-500': !active,
|
||||
})
|
||||
|
|
@ -74,7 +74,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
|
||||
<div className='col-start-1 row-start-1 flex items-center justify-self-end'>
|
||||
<span
|
||||
className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
|
||||
className={classNames('flex h-6 w-6 flex-none items-center justify-center rounded-full border border-solid', {
|
||||
'bg-primary-600 border-primary-600 dark:bg-primary-300 dark:border-primary-300': active,
|
||||
'border-primary-300 bg-white dark:bg-primary-900 dark:border-primary-500': !active,
|
||||
})}
|
||||
|
|
@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
aria-label={option.title}
|
||||
>
|
||||
{active && (
|
||||
<Icon src={require('@tabler/icons/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
|
||||
<Icon src={require('@tabler/icons/check.svg')} className='dark:text-primary-900 h-4 w-4 text-white' />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -123,7 +123,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
|
|||
<HStack
|
||||
justifyContent='between'
|
||||
alignItems='center'
|
||||
className='relative w-full overflow-hidden rounded-md bg-white p-2 dark:bg-primary-800'
|
||||
className='dark:bg-primary-800 relative w-full overflow-hidden rounded-md bg-white p-2'
|
||||
>
|
||||
<PollPercentageBar percent={percent} leading={leading} />
|
||||
|
||||
|
|
@ -141,7 +141,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
|
|||
<Icon
|
||||
src={require('@tabler/icons/circle-check.svg')}
|
||||
alt={intl.formatMessage(messages.voted)}
|
||||
className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
|
||||
className='text-primary-600 dark:text-primary-800 h-4 w-4 dark:fill-white'
|
||||
/>
|
||||
) : (
|
||||
<div className='svg-icon' />
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
|
|||
checked={checked}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
|
||||
className='text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300'
|
||||
/>
|
||||
</ListItem>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
|
|||
|
||||
const visible = count > 0 && scrolled;
|
||||
|
||||
const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
|
||||
const classes = classNames('fixed left-1/2 top-20 z-50 -translate-x-1/2', {
|
||||
'hidden': !visible,
|
||||
});
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
|
|||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<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}>
|
||||
<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}>
|
||||
<Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
|
||||
|
||||
{(count > 0) && (
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@ interface ISidebarLink {
|
|||
const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
|
||||
const body = (
|
||||
<HStack space={2} alignItems='center'>
|
||||
<div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
|
||||
<Icon src={icon} className='h-5 w-5 text-primary-500' />
|
||||
<div className='bg-primary-50 relative inline-flex rounded-full p-2 dark:bg-gray-800'>
|
||||
<Icon src={icon} className='text-primary-500 h-5 w-5' />
|
||||
</div>
|
||||
|
||||
<Text tag='span' weight='medium' theme='inherit'>{text}</Text>
|
||||
|
|
@ -334,7 +334,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
|
||||
<Icon
|
||||
src={require('@tabler/icons/chevron-down.svg')}
|
||||
className={classNames('w-4 h-4 text-gray-900 dark:text-gray-100 transition-transform', {
|
||||
className={classNames('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
|
||||
'rotate-180': switcher,
|
||||
})}
|
||||
/>
|
||||
|
|
@ -346,7 +346,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
{otherAccounts.map(account => renderAccount(account))}
|
||||
|
||||
<NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
|
||||
<Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/plus.svg')} />
|
||||
<Icon className='text-primary-500 h-4 w-4' src={require('@tabler/icons/plus.svg')} />
|
||||
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,10 +79,10 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
|
|||
ref={ref}
|
||||
type='button'
|
||||
className={classNames(
|
||||
'flex items-center p-1 rounded-full rtl:space-x-reverse',
|
||||
'flex items-center rounded-full p-1 rtl:space-x-reverse',
|
||||
'text-gray-600 hover:text-gray-600 dark:hover:text-white',
|
||||
'bg-white dark:bg-transparent',
|
||||
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
|
||||
'focus:ring-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0',
|
||||
{
|
||||
'text-black dark:text-white': active && emoji,
|
||||
'hover:text-gray-600 dark:hover:text-white': !filteredProps.disabled,
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
|
|||
};
|
||||
|
||||
/** ClassNames shared between the `<img>` and `<canvas>` elements. */
|
||||
const baseClassName = classNames('w-full h-full block', {
|
||||
const baseClassName = classNames('block h-full w-full', {
|
||||
'object-contain': letterboxed,
|
||||
'object-cover': !letterboxed,
|
||||
});
|
||||
|
|
@ -47,7 +47,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
|
|||
return (
|
||||
<div
|
||||
data-testid='still-image-container'
|
||||
className={classNames(className, 'relative group overflow-hidden isolate')}
|
||||
className={classNames(className, 'group relative isolate overflow-hidden')}
|
||||
style={style}
|
||||
>
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
|
||||
<div className='dark:bg-primary-800 rounded-lg bg-white text-gray-900 shadow dark:text-gray-100 dark:shadow-none'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={handleToggle}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const Banner: React.FC<IBanner> = ({ theme, children, className }) => {
|
|||
return (
|
||||
<div
|
||||
data-testid='banner'
|
||||
className={classNames('fixed bottom-0 left-0 right-0 py-8 z-50', {
|
||||
className={classNames('fixed bottom-0 left-0 right-0 z-50 py-8', {
|
||||
'backdrop-blur bg-primary-800/80 dark:bg-primary-900/80': theme === 'frosted',
|
||||
'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-3xl dark:shadow-inset': theme === 'opaque',
|
||||
}, className)}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const themes = {
|
|||
tertiary:
|
||||
'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
|
||||
accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
|
||||
danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:bg-danger-800 dark:focus:bg-danger-600',
|
||||
danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:bg-danger-800 focus:text-gray-200 dark:focus:bg-danger-600 dark:focus:text-gray-100',
|
||||
transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
|
||||
outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
|
||||
muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
|
|||
const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
|
||||
|
||||
return (
|
||||
<Comp {...backAttributes} className='text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
|
||||
<Comp {...backAttributes} className='focus:ring-primary-500 text-gray-900 focus:ring-2 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' />
|
||||
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
|
||||
</Comp>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
|
|||
{...props}
|
||||
ref={ref}
|
||||
type='checkbox'
|
||||
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'
|
||||
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'
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ interface ICounter {
|
|||
/** A simple counter for notifications, etc. */
|
||||
const Counter: React.FC<ICounter> = ({ count, countMax }) => {
|
||||
return (
|
||||
<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'>
|
||||
<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'>
|
||||
{shortNumberFormat(count, countMax)}
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import classNames from 'clsx';
|
||||
import React from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
import { Emoji, HStack } from 'soapbox/components/ui';
|
||||
|
||||
|
|
@ -8,6 +8,8 @@ interface IEmojiButton {
|
|||
emoji: string,
|
||||
/** Event handler when the emoji is clicked. */
|
||||
onClick: React.EventHandler<React.MouseEvent>,
|
||||
/** Keyboard event handler. */
|
||||
onKeyDown?: React.EventHandler<React.KeyboardEvent>,
|
||||
/** Extra class name on the <button> element. */
|
||||
className?: string,
|
||||
/** Tab order of the button. */
|
||||
|
|
@ -15,10 +17,10 @@ interface IEmojiButton {
|
|||
}
|
||||
|
||||
/** Clickable emoji button that scales when hovered. */
|
||||
const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
|
||||
const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, onKeyDown, tabIndex }): JSX.Element => {
|
||||
return (
|
||||
<button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
|
||||
<Emoji className='h-8 w-8 duration-100 hover:scale-125' emoji={emoji} />
|
||||
<button className={classNames(className)} onClick={onClick} onKeyDown={onKeyDown} tabIndex={tabIndex}>
|
||||
<Emoji className='h-8 w-8 duration-100' emoji={emoji} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
@ -28,6 +30,8 @@ interface IEmojiSelector {
|
|||
emojis: Iterable<string>,
|
||||
/** Event handler when an emoji is clicked. */
|
||||
onReact: (emoji: string) => void,
|
||||
/** Event handler when selector is escaped. */
|
||||
onUnfocus: React.KeyboardEventHandler<HTMLDivElement>,
|
||||
/** Whether the selector should be visible. */
|
||||
visible?: boolean,
|
||||
/** Whether the selector should be focused. */
|
||||
|
|
@ -35,7 +39,9 @@ interface IEmojiSelector {
|
|||
}
|
||||
|
||||
/** Panel with a row of emoji buttons. */
|
||||
const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = false, focused = false }): JSX.Element => {
|
||||
const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, onUnfocus, visible = false, focused = false }): JSX.Element => {
|
||||
const emojiList = Array.from(emojis);
|
||||
const node = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleReact = (emoji: string): React.EventHandler<React.MouseEvent> => {
|
||||
return (e) => {
|
||||
|
|
@ -45,15 +51,66 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
|
|||
};
|
||||
};
|
||||
|
||||
const selectPreviousEmoji = (i: number): void => {
|
||||
if (!node.current) return;
|
||||
|
||||
if (i !== 0) {
|
||||
const button: HTMLButtonElement | null = node.current.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`);
|
||||
button?.focus();
|
||||
} else {
|
||||
const button: HTMLButtonElement | null = node.current.querySelector('.emoji-react-selector__emoji:last-child');
|
||||
button?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const selectNextEmoji = (i: number) => {
|
||||
if (!node.current) return;
|
||||
|
||||
if (i !== emojiList.length - 1) {
|
||||
const button: HTMLButtonElement | null = node.current.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`);
|
||||
button?.focus();
|
||||
} else {
|
||||
const button: HTMLButtonElement | null = node.current.querySelector('.emoji-react-selector__emoji:first-child');
|
||||
button?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (i: number): React.KeyboardEventHandler<HTMLDivElement> => e => {
|
||||
switch (e.key) {
|
||||
case 'Enter':
|
||||
handleReact(emojiList[i])(e as any);
|
||||
break;
|
||||
case 'Tab':
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) selectPreviousEmoji(i);
|
||||
else selectNextEmoji(i);
|
||||
break;
|
||||
case 'Left':
|
||||
case 'ArrowLeft':
|
||||
selectPreviousEmoji(i);
|
||||
break;
|
||||
case 'Right':
|
||||
case 'ArrowRight':
|
||||
selectNextEmoji(i);
|
||||
break;
|
||||
case 'Escape':
|
||||
onUnfocus(e);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<HStack
|
||||
className={classNames('gap-2 bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max max-w-[100vw] flex-wrap')}
|
||||
className={classNames('emoji-react-selector z-[999] w-max max-w-[100vw] flex-wrap gap-2 rounded-full bg-white p-3 shadow-md dark:bg-gray-900')}
|
||||
ref={node}
|
||||
>
|
||||
{Array.from(emojis).map((emoji, i) => (
|
||||
{emojiList.map((emoji, i) => (
|
||||
<EmojiButton
|
||||
className='emoji-react-selector__emoji hover:scale-125 focus:scale-125'
|
||||
key={i}
|
||||
emoji={emoji}
|
||||
onClick={handleReact(emoji)}
|
||||
onKeyDown={handleKeyDown(i)}
|
||||
tabIndex={(visible || focused) ? 0 : -1}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
<div>
|
||||
<p
|
||||
data-testid='form-group-error'
|
||||
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
|
||||
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
|
||||
>
|
||||
{errors.join(', ')}
|
||||
</p>
|
||||
|
|
@ -92,7 +92,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
{hasError && (
|
||||
<p
|
||||
data-testid='form-group-error'
|
||||
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
|
||||
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
|
||||
>
|
||||
{errors.join(', ')}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
|
|||
<button
|
||||
ref={ref}
|
||||
type='button'
|
||||
className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
|
||||
className={classNames('focus:ring-primary-500 flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0', {
|
||||
'bg-white dark:bg-transparent': !transparent,
|
||||
'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
|
||||
'opacity-50': filteredProps.disabled,
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
|||
type='button'
|
||||
onClick={togglePassword}
|
||||
tabIndex={-1}
|
||||
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'
|
||||
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'
|
||||
>
|
||||
<SvgIcon
|
||||
src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const MenuList: React.FC<IMenuList> = (props) => {
|
|||
<MenuItems
|
||||
onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
|
||||
className={
|
||||
classNames(className, 'py-1 bg-white dark:bg-primary-900 rounded-lg shadow-menu')
|
||||
classNames(className, 'dark:bg-primary-900 shadow-menu rounded-lg bg-white py-1')
|
||||
}
|
||||
{...filteredProps}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -87,12 +87,12 @@ const Modal: React.FC<IModal> = ({
|
|||
}, [skipFocus, buttonRef]);
|
||||
|
||||
return (
|
||||
<div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-start align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
|
||||
<div data-testid='modal' className={classNames('dark:bg-primary-900 pointer-events-auto mx-auto block w-full transform rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:text-gray-100', widths[width])}>
|
||||
<div className='w-full justify-between sm:flex sm:items-start'>
|
||||
<div className='w-full'>
|
||||
{title && (
|
||||
<div
|
||||
className={classNames('w-full flex items-center gap-2', {
|
||||
className={classNames('flex w-full items-center gap-2', {
|
||||
'flex-row-reverse': closePosition === 'left',
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onCh
|
|||
return (
|
||||
<select
|
||||
value={countryCode}
|
||||
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'
|
||||
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'
|
||||
onChange={(event) => onChange(event.target.value as any)}
|
||||
>
|
||||
{COUNTRY_CODES.map((code) => (
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ interface IProgressBar {
|
|||
|
||||
/** A horizontal meter filled to the given percentage. */
|
||||
const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
|
||||
<div className='h-2.5 w-full overflow-hidden rounded-full bg-gray-300 dark:bg-primary-800'>
|
||||
<div className='h-full bg-secondary-500' style={{ width: `${Math.floor(progress * 100)}%` }} />
|
||||
<div className='dark:bg-primary-800 h-2.5 w-full overflow-hidden rounded-full bg-gray-300'>
|
||||
<div className='bg-secondary-500 h-full' style={{ width: `${Math.floor(progress * 100)}%` }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
|
|||
value={value}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
|
||||
className='text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300'
|
||||
/>
|
||||
|
||||
<label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
|
|||
return (
|
||||
<select
|
||||
ref={ref}
|
||||
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}`}
|
||||
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}`}
|
||||
{...filteredProps}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -57,10 +57,10 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
|
|||
onMouseDown={handleMouseDown}
|
||||
ref={node}
|
||||
>
|
||||
<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='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
|
||||
<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='bg-accent-500 absolute top-1/2 h-1 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
|
||||
<span
|
||||
className='absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
|
||||
className='bg-accent-500 absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full shadow'
|
||||
tabIndex={0}
|
||||
style={{ left: `${value * 100}%` }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
|
|||
ref={ref}
|
||||
>
|
||||
<div
|
||||
className='absolute h-[3px] w-full bg-primary-200 dark:bg-primary-700'
|
||||
className='bg-primary-200 dark:bg-primary-700 absolute h-[3px] w-full'
|
||||
style={{ top }}
|
||||
/>
|
||||
<div
|
||||
className={classNames('absolute h-[3px] bg-primary-500 transition-all duration-200', {
|
||||
className={classNames('bg-primary-500 absolute h-[3px] transition-all duration-200', {
|
||||
'hidden': top <= 0,
|
||||
})}
|
||||
style={{ left, top, width }}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
|
|||
return (
|
||||
<div className='relative mt-1 grow shadow-sm'>
|
||||
<HStack
|
||||
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'
|
||||
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'
|
||||
space={2}
|
||||
wrap
|
||||
>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ interface ITag {
|
|||
/** A single editable Tag (used by TagInput). */
|
||||
const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
|
||||
return (
|
||||
<div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
|
||||
<div className='bg-primary-500 inline-flex items-center whitespace-nowrap rounded p-1'>
|
||||
<Text theme='white'>{tag}</Text>
|
||||
|
||||
<IconButton
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/circle-check.svg')}
|
||||
className='h-6 w-6 text-success-500 dark:text-success-400'
|
||||
className='text-success-500 dark:text-success-400 h-6 w-6'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -48,7 +48,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/info-circle.svg')}
|
||||
className='h-6 w-6 text-primary-600 dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue h-6 w-6'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -56,7 +56,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/alert-circle.svg')}
|
||||
className='h-6 w-6 text-danger-600'
|
||||
className='text-danger-600 h-6 w-6'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -129,7 +129,7 @@ const Toast = (props: IToast) => {
|
|||
<div className='flex shrink-0 pt-0.5'>
|
||||
<button
|
||||
type='button'
|
||||
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'
|
||||
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'
|
||||
onClick={dismissToast}
|
||||
data-testid='toast-dismiss'
|
||||
>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
|
|||
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
|
||||
{({ width }) =>
|
||||
(<div
|
||||
className='absolute left-0 top-0 h-1.5 rounded-lg bg-primary-600'
|
||||
className='bg-primary-600 absolute left-0 top-0 h-1.5 rounded-lg'
|
||||
style={{ width: `${width}%` }}
|
||||
/>)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
|
|||
|
||||
return (
|
||||
<span className='verified-icon' data-testid='verified-badge'>
|
||||
<Element className={classNames('w-4 text-accent-500', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
|
||||
<Element className={classNames('text-accent-500 w-4', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
|
|||
const darkMode = useTheme() === 'dark';
|
||||
const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
|
||||
|
||||
const bodyClass = classNames('bg-white dark:bg-gray-800 text-base h-full', {
|
||||
const bodyClass = classNames('h-full bg-white text-base dark:bg-gray-800', {
|
||||
'no-reduce-motion': !settings.get('reduceMotion'),
|
||||
'underline-links': settings.get('underlineLinks'),
|
||||
'demetricator': settings.get('demetricator'),
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const AboutPage: React.FC = () => {
|
|||
);
|
||||
|
||||
return (
|
||||
<div className='prose mx-auto py-20 dark:prose-invert'>
|
||||
<div className='prose dark:prose-invert mx-auto py-20'>
|
||||
<div dangerouslySetInnerHTML={{ __html: pageHtml }} />
|
||||
|
||||
{alsoAvailable}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
|
|||
<HStack className='mb-2' alignItems='center' space={1.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/briefcase.svg')}
|
||||
className='flex-none text-primary-600 dark:text-primary-400'
|
||||
className='text-primary-600 dark:text-primary-400 flex-none'
|
||||
/>
|
||||
|
||||
<div className='truncate'>
|
||||
|
|
|
|||
|
|
@ -610,7 +610,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
|
|||
<Avatar
|
||||
src={account.avatar}
|
||||
size={96}
|
||||
className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
|
||||
className='dark:bg-primary-900 dark:ring-primary-900 relative h-24 w-24 rounded-full bg-white ring-4 ring-white'
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ const Report: React.FC<IReport> = ({ id }) => {
|
|||
<Link
|
||||
to={`/@${reporterAcct}`}
|
||||
title={reporterAcct}
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
>
|
||||
@{reporterAcct}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,8 @@ import { defineMessages, useIntl } from 'react-intl';
|
|||
|
||||
import { expandUserIndex, fetchUserIndex, setUserIndexQuery } from 'soapbox/actions/admin';
|
||||
import ScrollableList from 'soapbox/components/scrollable-list';
|
||||
import { Column } from 'soapbox/components/ui';
|
||||
import { Column, Input } from 'soapbox/components/ui';
|
||||
import AccountContainer from 'soapbox/containers/account-container';
|
||||
import { SimpleForm, TextInput } from 'soapbox/features/forms';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
const messages = defineMessages({
|
||||
|
|
@ -22,7 +21,7 @@ const UserIndex: React.FC = () => {
|
|||
const { isLoading, items, total, query, next } = useAppSelector((state) => state.admin_user_index);
|
||||
|
||||
const handleLoadMore = () => {
|
||||
dispatch(expandUserIndex());
|
||||
if (!isLoading) dispatch(expandUserIndex());
|
||||
};
|
||||
|
||||
const updateQuery = useCallback(debounce(() => {
|
||||
|
|
@ -31,25 +30,25 @@ const UserIndex: React.FC = () => {
|
|||
|
||||
const handleQueryChange: React.ChangeEventHandler<HTMLInputElement> = e => {
|
||||
dispatch(setUserIndexQuery(e.target.value));
|
||||
updateQuery();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
updateQuery();
|
||||
}, [query]);
|
||||
}, []);
|
||||
|
||||
const hasMore = items.count() < total && next !== null;
|
||||
|
||||
const hasMore = items.count() < total && !!next;
|
||||
|
||||
const showLoading = isLoading && items.isEmpty();
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)}>
|
||||
<SimpleForm style={{ paddingBottom: 0 }}>
|
||||
<TextInput
|
||||
value={query}
|
||||
onChange={handleQueryChange}
|
||||
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
||||
/>
|
||||
</SimpleForm>
|
||||
<Input
|
||||
value={query}
|
||||
onChange={handleQueryChange}
|
||||
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
||||
/>
|
||||
<ScrollableList
|
||||
scrollKey='user-index'
|
||||
hasMore={hasMore}
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ const Ad: React.FC<IAd> = ({ ad }) => {
|
|||
</Text>
|
||||
|
||||
<Icon
|
||||
className='h-5 w-5 stroke-accent-500'
|
||||
className='stroke-accent-500 h-5 w-5'
|
||||
src={require('@tabler/icons/timeline.svg')}
|
||||
/>
|
||||
</HStack>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const Search: React.FC = () => {
|
|||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
|
||||
|
||||
<input
|
||||
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'
|
||||
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'
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
|
|
|
|||
|
|
@ -581,4 +581,4 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
export default Audio;
|
||||
export default Audio;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
|
|||
|
||||
if (providers.size > 0) {
|
||||
return (
|
||||
<Card className='bg-gray-50 p-4 dark:bg-primary-800 sm:rounded-xl'>
|
||||
<Card className='dark:bg-primary-800 bg-gray-50 p-4 sm:rounded-xl'>
|
||||
<Text size='xs' theme='muted'>
|
||||
<FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<div className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<Stack space={2}>
|
||||
<Stack>
|
||||
<Text size='md' weight='medium'>{token.app_name}</Text>
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
|
|||
|
||||
if (isBlocking) {
|
||||
return (
|
||||
<div className='mt-auto p-6 shadow-3xl dark:border-t-2 dark:border-solid dark:border-gray-800'>
|
||||
<div className='shadow-3xl mt-auto p-6 dark:border-t-2 dark:border-solid dark:border-gray-800'>
|
||||
<Stack space={3} alignItems='center'>
|
||||
<Text align='center' theme='muted'>
|
||||
{intl.formatMessage(messages.blocked)}
|
||||
|
|
@ -150,7 +150,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='mt-auto px-4 shadow-3xl'>
|
||||
<div className='shadow-3xl mt-auto px-4'>
|
||||
{/* Spacer */}
|
||||
<div className='h-5' />
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
|
|||
role='button'
|
||||
key={chat.id}
|
||||
onClick={() => onClick(chat)}
|
||||
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'
|
||||
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'
|
||||
data-testid='chat-list-item'
|
||||
>
|
||||
<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 && (
|
||||
<div
|
||||
className='h-2 w-2 rounded-full bg-secondary-500'
|
||||
className='bg-secondary-500 h-2 w-2 rounded-full'
|
||||
data-testid='chat-unread-indicator'
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -74,13 +74,13 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
|
|||
|
||||
<>
|
||||
<div
|
||||
className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
|
||||
className={classNames('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
|
||||
'opacity-0': isNearTop,
|
||||
'opacity-100': !isNearTop,
|
||||
})}
|
||||
/>
|
||||
<div
|
||||
className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
|
||||
className={classNames('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pt-12 pb-8 transition-opacity duration-500 dark:from-gray-900', {
|
||||
'opacity-0': isNearBottom,
|
||||
'opacity-100': !isNearBottom,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -379,11 +379,11 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
|
|||
{(isMyMessage && features.chatsReadReceipts) ? (
|
||||
<>
|
||||
{isRead ? (
|
||||
<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'>
|
||||
<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'>
|
||||
<Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
|
||||
</span>
|
||||
) : (
|
||||
<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'>
|
||||
<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'>
|
||||
<Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
|
|||
<div
|
||||
ref={containerRef}
|
||||
style={{ height }}
|
||||
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'
|
||||
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'
|
||||
>
|
||||
{isOnboarded ? (
|
||||
<div
|
||||
|
|
@ -68,7 +68,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
|
|||
data-testid='chat-page'
|
||||
>
|
||||
<Stack
|
||||
className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
|
||||
className={classNames('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none sm:col-span-3', {
|
||||
'hidden sm:block': isSidebarHidden,
|
||||
})}
|
||||
>
|
||||
|
|
@ -76,7 +76,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
|
|||
</Stack>
|
||||
|
||||
<Stack
|
||||
className={classNames('col-span-9 sm:col-span-6 h-full overflow-hidden', {
|
||||
className={classNames('col-span-9 h-full overflow-hidden sm:col-span-6', {
|
||||
'hidden sm:block': !isSidebarHidden,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -212,7 +212,7 @@ const ChatPageMain = () => {
|
|||
onSelect={isBlocking ? handleUnblockUser : handleBlockUser}
|
||||
className='!px-0 hover:!bg-transparent'
|
||||
>
|
||||
<div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
|
||||
<div className='text-primary-500 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -224,7 +224,7 @@ const ChatPageMain = () => {
|
|||
onSelect={handleLeaveChat}
|
||||
className='!px-0 hover:!bg-transparent'
|
||||
>
|
||||
<div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
|
||||
<div className='text-danger-600 dark:text-danger-500 flex w-full items-center space-x-2 text-sm font-bold'>
|
||||
<Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
|
||||
<span>{intl.formatMessage(messages.leaveChat)}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,13 +63,13 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
|
|||
|
||||
<>
|
||||
<div
|
||||
className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
|
||||
className={classNames('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
|
||||
'opacity-0': isNearTop,
|
||||
'opacity-100': !isNearTop,
|
||||
})}
|
||||
/>
|
||||
<div
|
||||
className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
|
||||
className={classNames('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pt-12 pb-8 transition-opacity duration-500 dark:from-gray-900', {
|
||||
'opacity-0': isNearBottom,
|
||||
'opacity-100': !isNearBottom,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
|
|||
({unreadCount})
|
||||
</Text>
|
||||
|
||||
<div className='h-2.5 w-2.5 rounded-full bg-accent-300' />
|
||||
<div className='bg-accent-300 h-2.5 w-2.5 rounded-full' />
|
||||
</HStack>
|
||||
)}
|
||||
</ButtonComp>
|
||||
|
|
|
|||
|
|
@ -135,13 +135,13 @@ const ChatSettings = () => {
|
|||
)}
|
||||
|
||||
<Stack space={5}>
|
||||
<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'>
|
||||
<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'>
|
||||
<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>
|
||||
</button>
|
||||
|
||||
{features.chatsDelete && (
|
||||
<button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
|
||||
<button onClick={handleLeaveChat} className='text-danger-600 flex w-full items-center space-x-2 text-sm font-bold'>
|
||||
<Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
|
||||
<span>{intl.formatMessage(messages.leaveChat)}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
|
|||
}, [chat.id, inputRef?.current]);
|
||||
|
||||
return (
|
||||
<Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
|
||||
<Stack className={classNames('flex flex-grow overflow-hidden', className)} onMouseOver={handleMouseOver}>
|
||||
<div className='flex h-full grow justify-center overflow-hidden'>
|
||||
<ChatMessageList chat={chat} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const Pane: React.FC<IPane> = ({ isOpen = false, index, children, main = false }
|
|||
|
||||
return (
|
||||
<div
|
||||
className={classNames('flex flex-col shadow-3xl bg-white dark:bg-gray-900 rounded-t-lg fixed bottom-0 right-1 w-96 z-[99]', {
|
||||
className={classNames('shadow-3xl fixed bottom-0 right-1 z-[99] flex w-96 flex-col rounded-t-lg bg-white dark:bg-gray-900', {
|
||||
'h-[550px] max-h-[100vh]': isOpen,
|
||||
'h-16': !isOpen,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -242,7 +242,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
|
|||
<div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
|
||||
<div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
|
||||
<IconButton
|
||||
className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
|
||||
className={classNames({
|
||||
'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !open,
|
||||
'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': open,
|
||||
})}
|
||||
src={valueOption?.icon}
|
||||
title={intl.formatMessage(messages.change_privacy)}
|
||||
onClick={handleToggle}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
|
||||
|
|
@ -8,12 +9,13 @@ import { isRtl } from 'soapbox/rtl';
|
|||
import type { Status } from 'soapbox/types/entities';
|
||||
|
||||
interface IReplyIndicator {
|
||||
className?: string,
|
||||
status?: Status,
|
||||
onCancel?: () => void,
|
||||
hideActions: boolean,
|
||||
}
|
||||
|
||||
const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCancel }) => {
|
||||
const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActions, onCancel }) => {
|
||||
const handleClick = () => {
|
||||
onCancel!();
|
||||
};
|
||||
|
|
@ -33,7 +35,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
|
|||
}
|
||||
|
||||
return (
|
||||
<Stack space={2} className='rounded-lg bg-gray-100 p-4 dark:bg-gray-800'>
|
||||
<Stack space={2} className={classNames('rounded-lg bg-gray-100 p-4 dark:bg-gray-800', className)}>
|
||||
<AccountContainer
|
||||
{...actions}
|
||||
id={status.getIn(['account', 'id']) as string}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
|
|||
const followedBy = me !== account.id && account.relationship?.followed_by;
|
||||
|
||||
return (
|
||||
<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='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='relative'>
|
||||
{followedBy && (
|
||||
<div className='absolute top-2.5 left-2.5'>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
|
|||
|
||||
return (
|
||||
<a
|
||||
className='block bg-white dark:bg-primary-900'
|
||||
className='dark:bg-primary-900 block bg-white'
|
||||
href={status?.url || '#'}
|
||||
onClick={e => e.stopPropagation()}
|
||||
target='_blank'
|
||||
|
|
|
|||
|
|
@ -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(', ')}
|
||||
{tileServer && event.location.get('latitude') && (<>
|
||||
<br />
|
||||
<a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
|
||||
<a href='#' className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleShowMap}>
|
||||
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
|
||||
</a>
|
||||
</>)}
|
||||
|
|
@ -143,7 +143,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
|
|||
{status.event.links.map(link => (
|
||||
<HStack space={2} alignItems='center'>
|
||||
<Icon src={require('@tabler/icons/link.svg')} />
|
||||
<a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
|
||||
<a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
|
||||
{(link.remote_url || link.url).replace(/^https?:\/\//, '')}
|
||||
</a>
|
||||
</HStack>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const CarouselItem = React.forwardRef((
|
|||
<Stack className='h-auto w-14' space={3}>
|
||||
<div className='relative mx-auto block h-12 w-12 rounded-full'>
|
||||
{isSelected && (
|
||||
<div className='absolute inset-0 flex items-center justify-center rounded-full bg-primary-600/50'>
|
||||
<div className='bg-primary-600/50 absolute inset-0 flex items-center justify-center rounded-full'>
|
||||
<Icon src={require('@tabler/icons/check.svg')} className='h-6 w-6 text-white' />
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -159,11 +159,11 @@ const FeedCarousel = () => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className='overflow-hidden rounded-xl bg-white shadow-lg dark:bg-primary-900 dark:shadow-none'
|
||||
className='dark:bg-primary-900 overflow-hidden rounded-xl bg-white shadow-lg dark:shadow-none'
|
||||
data-testid='feed-carousel'
|
||||
>
|
||||
<HStack alignItems='stretch'>
|
||||
<div className='z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white dark:bg-primary-900'>
|
||||
<div className='dark:bg-primary-900 z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white'>
|
||||
<button
|
||||
data-testid='prev-page'
|
||||
onClick={handlePrevPage}
|
||||
|
|
@ -177,7 +177,7 @@ const FeedCarousel = () => {
|
|||
<div className='relative w-full overflow-hidden'>
|
||||
{pinnedAvatar ? (
|
||||
<div
|
||||
className='absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white dark:bg-primary-900'
|
||||
className='dark:bg-primary-900 absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white'
|
||||
style={{
|
||||
width: widthPerAvatar || 'auto',
|
||||
}}
|
||||
|
|
@ -248,7 +248,7 @@ const FeedCarousel = () => {
|
|||
</HStack>
|
||||
</div>
|
||||
|
||||
<div className='z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white dark:bg-primary-900'>
|
||||
<div className='dark:bg-primary-900 z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white'>
|
||||
<button
|
||||
data-testid='next-page'
|
||||
onClick={handleNextPage}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const FeedSuggestions = () => {
|
|||
|
||||
<Link
|
||||
to='/suggestions'
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
>
|
||||
{intl.formatMessage(messages.viewAll)}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -103,63 +103,6 @@ export const SimpleInput: React.FC<ISimpleInput> = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
interface ISimpleTextarea {
|
||||
label?: React.ReactNode,
|
||||
hint?: React.ReactNode,
|
||||
value?: string,
|
||||
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,
|
||||
rows?: number,
|
||||
name?: string,
|
||||
maxLength?: number,
|
||||
required?: boolean,
|
||||
}
|
||||
|
||||
export const SimpleTextarea: React.FC<ISimpleTextarea> = (props) => {
|
||||
const { hint, label, ...rest } = props;
|
||||
const Input = label ? LabelTextarea : 'textarea';
|
||||
|
||||
return (
|
||||
<InputContainer {...props}>
|
||||
<Input {...rest} />
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
interface ISimpleForm {
|
||||
className?: string,
|
||||
onSubmit?: React.FormEventHandler,
|
||||
acceptCharset?: string,
|
||||
style?: React.CSSProperties,
|
||||
children: React.ReactNode,
|
||||
}
|
||||
|
||||
export const SimpleForm: React.FC<ISimpleForm> = (props) => {
|
||||
const {
|
||||
className,
|
||||
children,
|
||||
onSubmit = () => {},
|
||||
acceptCharset = 'UTF-8',
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const handleSubmit: React.FormEventHandler = e => {
|
||||
onSubmit(e);
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<form
|
||||
className={classNames('simple_form', className)}
|
||||
method='post'
|
||||
onSubmit={handleSubmit}
|
||||
acceptCharset={acceptCharset}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
interface IFieldsGroup {
|
||||
children: React.ReactNode,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
|
|||
</div>
|
||||
<div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
|
||||
<a href={group.avatar} onClick={handleAvatarClick} target='_blank'>
|
||||
<Avatar className='ring-[3px] ring-white dark:ring-primary-900' src={group.avatar} size={72} />
|
||||
<Avatar className='dark:ring-primary-900 ring-[3px] ring-white' src={group.avatar} size={72} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ const HomeTimeline: React.FC = () => {
|
|||
defaultMessage='Or you can visit {public} to get started and meet other users.'
|
||||
values={{
|
||||
public: (
|
||||
<Link to='/timeline/local' className='text-primary-600 hover:underline dark:text-primary-400'>
|
||||
<Link to='/timeline/local' className='text-primary-600 dark:text-primary-400 hover:underline'>
|
||||
<FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: instance.title }} />
|
||||
</Link>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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='w-full'>
|
||||
<Stack space={3}>
|
||||
<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'>
|
||||
<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'>
|
||||
{instance.title}
|
||||
</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ const Migration = () => {
|
|||
values={{
|
||||
link: (
|
||||
<Link
|
||||
className='text-primary-600 hover:text-primary-800 hover:underline dark:text-primary-400 dark:hover:text-primary-500'
|
||||
className='text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-500 hover:underline'
|
||||
to='/settings/aliases'
|
||||
>
|
||||
<FormattedMessage
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
||||
interface IClearColumnButton {
|
||||
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
const ClearColumnButton: React.FC<IClearColumnButton> = ({ onClick }) => (
|
||||
<button className='text-btn column-header__setting-btn' tabIndex={0} onClick={onClick}>
|
||||
<Icon src={require('@tabler/icons/eraser.svg')} />
|
||||
{' '}
|
||||
<FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' />
|
||||
</button>
|
||||
);
|
||||
|
||||
export default ClearColumnButton;
|
||||
|
|
@ -276,7 +276,7 @@ const Notification: React.FC<INotificaton> = (props) => {
|
|||
return (
|
||||
<Icon
|
||||
src={icons[type]}
|
||||
className='flex-none text-primary-600 dark:text-primary-400'
|
||||
className='text-primary-600 dark:text-primary-400 flex-none'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|||
)}
|
||||
|
||||
{isSubmitting && (
|
||||
<div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
|
||||
<div className='dark:bg-primary-900/80 absolute inset-0 flex items-center justify-center rounded-full bg-white/80'>
|
||||
<Spinner withText={false} />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
|
||||
<Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='text-primary-600 dark:text-primary-400 mx-auto h-16 w-16' />
|
||||
|
||||
<Text size='2xl' align='center' weight='bold'>
|
||||
<FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|||
|
||||
{isSubmitting && (
|
||||
<div
|
||||
className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
|
||||
className='dark:bg-primary-900/80 absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80'
|
||||
>
|
||||
<Spinner withText={false} />
|
||||
</div>
|
||||
|
|
@ -122,7 +122,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|||
|
||||
<div className='flex flex-col px-4 pb-4'>
|
||||
{account && (
|
||||
<Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
|
||||
<Avatar src={account.avatar} size={64} className='dark:ring-primary-800 -mt-8 mb-2 ring-2 ring-white' />
|
||||
)}
|
||||
|
||||
<Text weight='bold' size='sm'>{account?.display_name}</Text>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
|
|||
<Card variant='rounded' size='xl'>
|
||||
<CardBody>
|
||||
<Stack space={2}>
|
||||
<Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
|
||||
<Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='text-primary-600 dark:text-primary-400 mx-auto h-16 w-16' />
|
||||
|
||||
<Text size='2xl' weight='bold'>
|
||||
<FormattedMessage
|
||||
|
|
@ -49,7 +49,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
|
|||
</Stack>
|
||||
</div>
|
||||
|
||||
<div className='rounded-lg bg-primary-50 p-4 text-center dark:bg-gray-800'>
|
||||
<div className='bg-primary-50 rounded-lg p-4 text-center dark:bg-gray-800'>
|
||||
<Account account={account} />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
|
|||
|
||||
const renderEmpty = () => {
|
||||
return (
|
||||
<div className='my-2 rounded-lg bg-primary-50 p-8 text-center dark:bg-gray-800'>
|
||||
<div className='bg-primary-50 my-2 rounded-lg p-8 text-center dark:bg-gray-800'>
|
||||
<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.' />
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
|
|||
return (
|
||||
<Stack space={2} className='animate-pulse py-3 text-center'>
|
||||
<div
|
||||
className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800'
|
||||
className='bg-primary-50 dark:bg-primary-800 mx-auto block rounded-full'
|
||||
style={style}
|
||||
/>
|
||||
|
||||
{withText && (
|
||||
<div style={{ width: size, height: 15 }} className='mx-auto rounded-full bg-primary-50 dark:bg-primary-800' />
|
||||
<div style={{ width: size, height: 15 }} className='bg-primary-50 dark:bg-primary-800 mx-auto rounded-full' />
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const PlaceholderCard: React.FC = () => (
|
|||
>
|
||||
<div className='primary-500 w-2/5 rounded-l'> </div>
|
||||
|
||||
<div className='flex w-3/5 flex-col justify-between break-words p-4 text-primary-50'>
|
||||
<div className='text-primary-50 flex w-3/5 flex-col justify-between break-words p-4'>
|
||||
<p>{generateText(randomIntFromInterval(5, 25))}</p>
|
||||
<p>{generateText(randomIntFromInterval(5, 75))}</p>
|
||||
<p>{generateText(randomIntFromInterval(5, 15))}</p>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
|
|||
})
|
||||
}
|
||||
>
|
||||
<div style={{ width: messageLength, height: 20 }} className='rounded-full bg-primary-50 dark:bg-primary-800' />
|
||||
<div style={{ width: messageLength, height: 20 }} className='bg-primary-50 dark:bg-primary-800 rounded-full' />
|
||||
</div>
|
||||
|
||||
<div className={classNames({ 'order-1': !isMyMessage })}>
|
||||
|
|
@ -56,7 +56,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
|
|||
'order-2': !isMyMessage,
|
||||
})}
|
||||
>
|
||||
<span style={{ width: 50, height: 12 }} className='block rounded-full bg-primary-50 dark:bg-primary-800' />
|
||||
<span style={{ width: 50, height: 12 }} className='bg-primary-50 dark:bg-primary-800 block rounded-full' />
|
||||
</Text>
|
||||
|
||||
<div className={classNames({ 'order-1': !isMyMessage })}>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength,
|
|||
const acctLength = randomIntFromInterval(maxLength, minLength);
|
||||
|
||||
return (
|
||||
<div className='flex flex-col text-primary-50 dark:text-primary-800'>
|
||||
<div className='text-primary-50 dark:text-primary-800 flex flex-col'>
|
||||
<p>{generateText(length)}</p>
|
||||
{withSuffix && <p>{generateText(acctLength)}</p>}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const PlaceholderEventHeader = () => {
|
|||
const locationLength = randomIntFromInterval(5, 30);
|
||||
|
||||
return (
|
||||
<Stack className='animate-pulse text-primary-50 dark:text-primary-800' space={2}>
|
||||
<Stack className='text-primary-50 dark:text-primary-800 animate-pulse' space={2}>
|
||||
<p className='text-lg'>{generateText(eventNameLength)}</p>
|
||||
|
||||
<Stack space={1}>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ const PlaceholderEventPreview = () => {
|
|||
const nameLength = randomIntFromInterval(5, 15);
|
||||
|
||||
return (
|
||||
<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='h-40 bg-primary-200 dark:bg-gray-600' />
|
||||
<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='bg-primary-200 h-40 dark:bg-gray-600' />
|
||||
<Stack className='p-2.5' space={2}>
|
||||
<Text weight='semibold'>{generateText(eventNameLength)}</Text>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ const PlaceholderGroupCard = () => {
|
|||
|
||||
return (
|
||||
<div className='animate-pulse overflow-hidden'>
|
||||
<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='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
|
||||
<Stack className='dark:border-primary-800 dark:bg-primary-900 rounded-lg border border-solid border-gray-300 bg-white 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='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
|
||||
<div className='h-16 w-16 rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900' />
|
||||
<div className='bg-primary-500 dark:ring-primary-900 h-16 w-16 rounded-full ring-2 ring-white' />
|
||||
</div>
|
||||
</div>
|
||||
<Stack className='p-3 pt-9' alignItems='center' space={3}>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const PlaceholderHashtag: React.FC = () => {
|
|||
const length = randomIntFromInterval(15, 30);
|
||||
|
||||
return (
|
||||
<div className='animate-pulse text-primary-200 dark:text-primary-700'>
|
||||
<div className='text-primary-200 dark:text-primary-700 animate-pulse'>
|
||||
<p>{generateText(length)}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ const PlaceholderMediaGallery: React.FC<IPlaceholderMediaGallery> = ({ media, de
|
|||
const float = dimensions.float as any || 'left';
|
||||
const position = dimensions.pos as any || 'relative';
|
||||
|
||||
return <div key={i} className='media-gallery__item' style={{ position, float, left, top, right, bottom, height, width }} />;
|
||||
return <div key={i} className='media-gallery__item bg-primary-200 animate-pulse' style={{ position, float, left, top, right, bottom, height, width }} />;
|
||||
};
|
||||
|
||||
const sizeData = getSizeData(media.size);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import PlaceholderStatusContent from './placeholder-status-content';
|
|||
|
||||
/** Fake notification to display while data is loading. */
|
||||
const PlaceholderNotification = () => (
|
||||
<div className='bg-white px-4 py-6 dark:bg-primary-900 sm:p-6'>
|
||||
<div className='dark:bg-primary-900 bg-white px-4 py-6 sm:p-6'>
|
||||
<div className='w-full animate-pulse'>
|
||||
<div className='mb-2'>
|
||||
<PlaceholderStatusContent minLength={20} maxLength={20} />
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default ({ limit }: { limit: number }) => {
|
|||
<HStack key={idx} alignItems='center' space={2} className='animate-pulse'>
|
||||
<Stack space={3} className='text-center'>
|
||||
<div
|
||||
className='mx-auto block h-9 w-9 rounded-full bg-primary-200 dark:bg-primary-700'
|
||||
className='bg-primary-200 dark:bg-primary-700 mx-auto block h-9 w-9 rounded-full'
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default ({ limit }: { limit: number }) => {
|
|||
return (
|
||||
<>
|
||||
{new Array(limit).fill(undefined).map((_, idx) => (
|
||||
<Stack key={idx} className='animate-pulse text-primary-200 dark:text-primary-700'>
|
||||
<Stack key={idx} className='text-primary-200 dark:text-primary-700 animate-pulse'>
|
||||
<p>{generateText(trend)}</p>
|
||||
<p>{generateText(stat)}</p>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const PlaceholderStatusContent: React.FC<IPlaceholderStatusContent> = ({ minLeng
|
|||
const length = randomIntFromInterval(maxLength, minLength);
|
||||
|
||||
return (
|
||||
<div className='flex flex-col text-primary-50 dark:text-primary-800'>
|
||||
<div className='text-primary-50 dark:text-primary-800 flex flex-col'>
|
||||
<p className='break-words'>{generateText(length)}</p>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const Footer = () => {
|
|||
|
||||
return (
|
||||
<div key={idx} className='px-5 py-2'>
|
||||
<Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
|
||||
<Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'>
|
||||
<Text tag='span' theme='inherit' size='sm'>
|
||||
{(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import React from 'react';
|
|||
const Sonar = () => (
|
||||
<div className='relative'>
|
||||
<div className='relative h-48 w-48'>
|
||||
<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='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='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='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='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='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='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='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='absolute top-0 left-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' />
|
||||
<div className='dark:bg-primary-900 absolute top-0 left-0 h-48 w-48 rounded-full bg-white' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Ładowanie…
Reference in New Issue