kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge remote-tracking branch 'origin/develop' into chat-composer
Alex Gleason
commit
e3f168f050
|
|
@ -0,0 +1,42 @@
|
|||
import sharedConfig from '../webpack/shared';
|
||||
|
||||
import type { StorybookConfig } from '@storybook/core-common';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: [
|
||||
'../stories/**/*.stories.mdx',
|
||||
'../stories/**/*.stories.@(js|jsx|ts|tsx)'
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
{
|
||||
name: '@storybook/addon-postcss',
|
||||
options: {
|
||||
postcssLoaderOptions: {
|
||||
implementation: require('postcss'),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
framework: '@storybook/react',
|
||||
core: {
|
||||
builder: '@storybook/builder-webpack5',
|
||||
},
|
||||
webpackFinal: async (config) => {
|
||||
config.resolve!.alias = {
|
||||
...sharedConfig.resolve!.alias,
|
||||
...config.resolve!.alias,
|
||||
};
|
||||
|
||||
config.resolve!.modules = [
|
||||
...sharedConfig.resolve!.modules!,
|
||||
...config.resolve!.modules!,
|
||||
];
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import '../app/styles/tailwind.css';
|
||||
import '../stories/theme.css';
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -77,12 +77,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
|
|||
>
|
||||
<SvgIcon
|
||||
src={require('@tabler/icons/search.svg')}
|
||||
className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
|
||||
className={clsx('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
|
||||
/>
|
||||
|
||||
<SvgIcon
|
||||
src={require('@tabler/icons/x.svg')}
|
||||
className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
|
||||
className={clsx('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
|
||||
aria-label={intl.formatMessage(messages.placeholder)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
||||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
|
@ -52,7 +52,7 @@ const AnnouncementsPanel = () => {
|
|||
key={i}
|
||||
tabIndex={0}
|
||||
onClick={() => setIndex(i)}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'w-2 h-2 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
|
||||
'bg-gray-200 hover:bg-gray-300': i !== index,
|
||||
'bg-primary-600': i === index,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import AnimatedNumber from 'soapbox/components/animated-number';
|
||||
|
|
@ -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={clsx('flex shrink-0 items-center gap-1.5 rounded-sm bg-gray-100 px-1.5 py-1 transition-colors dark:bg-primary-900', {
|
||||
'bg-gray-200 dark:bg-primary-800': hovered,
|
||||
'bg-primary-200 dark:bg-primary-500': reaction.me,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { TransitionMotion, spring } from 'react-motion';
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
|
|||
return (
|
||||
<TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
|
||||
{items => (
|
||||
<div className={classNames('flex flex-wrap items-center gap-1', { 'reactions-bar--empty': visibleReactions.isEmpty() })}>
|
||||
<div className={clsx('flex flex-wrap items-center gap-1', { 'reactions-bar--empty': visibleReactions.isEmpty() })}>
|
||||
{items.map(({ key, data, style }) => (
|
||||
<Reaction
|
||||
key={key}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Portal } from '@reach/portal';
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import React from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
|
@ -199,7 +199,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
|||
tabIndex={0}
|
||||
key={key}
|
||||
data-index={i}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'px-4 py-2.5 text-sm 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 group': true,
|
||||
'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
|
||||
})}
|
||||
|
|
@ -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={clsx('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 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
|
||||
href='#'
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
|
|
@ -302,7 +302,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
|||
<Portal key='portal'>
|
||||
<div
|
||||
style={this.setPortalPosition()}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'fixed w-full z-[1001] shadow bg-white dark:bg-gray-900 rounded-lg py-1 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
|
||||
hidden: !visible,
|
||||
block: visible,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Portal } from '@reach/portal';
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Textarea from 'react-textarea-autosize';
|
||||
|
|
@ -201,7 +201,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
|||
tabIndex={0}
|
||||
key={key}
|
||||
data-index={i}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'px-4 py-2.5 text-sm 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 group': true,
|
||||
'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
|
||||
})}
|
||||
|
|
@ -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={clsx('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,
|
||||
})}
|
||||
|
|
@ -271,7 +271,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
|
|||
<Portal key='portal'>
|
||||
<div
|
||||
style={this.setPortalPosition()}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'fixed z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
|
||||
hidden: suggestionsHidden || suggestions.isEmpty(),
|
||||
block: !suggestionsHidden && !suggestions.isEmpty(),
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
interface IBadge {
|
||||
|
|
@ -12,13 +12,13 @@ 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={clsx('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',
|
||||
'bg-cyan-600 text-white': slug === 'moderator',
|
||||
'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': fallback,
|
||||
'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
|
||||
'bg-white/75 text-gray-900': slug === 'opaque',
|
||||
})}
|
||||
>
|
||||
{title}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import React from 'react';
|
||||
import { spring } from 'react-motion';
|
||||
|
|
@ -182,7 +182,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
|
|||
const { text, href, to, newTab, isLogout, icon, count, destructive } = option;
|
||||
|
||||
return (
|
||||
<li className={classNames('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
|
||||
<li className={clsx('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
|
||||
<a
|
||||
href={href || to || '#'}
|
||||
role='button'
|
||||
|
|
@ -392,7 +392,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
|
|||
) : (
|
||||
<IconButton
|
||||
disabled={disabled}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
|
||||
'text-gray-700 dark:text-gray-500': open,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { usePopper } from 'react-popper';
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
|
|||
|
||||
const selector = (
|
||||
<div
|
||||
className={classNames('z-50 transition-opacity duration-100', {
|
||||
className={clsx('z-50 transition-opacity duration-100', {
|
||||
'opacity-0 pointer-events-none': !visible,
|
||||
})}
|
||||
ref={setPopperElement}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// import classNames from 'clsx';
|
||||
// import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
|
@ -111,7 +111,7 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
|
|||
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 })}
|
||||
className={clsx('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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ 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={clsx('relative w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-primary-800', className)}>
|
||||
<div className='absolute top-28 right-3'>
|
||||
{floatingAction && action}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* @see soapbox/components/icon
|
||||
*/
|
||||
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
|
||||
|
|
@ -25,7 +25,7 @@ const ForkAwesomeIcon: React.FC<IForkAwesomeIcon> = ({ id, className, fixedWidth
|
|||
<i
|
||||
role='img'
|
||||
// alt={alt}
|
||||
className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
|
||||
className={clsx('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ const GdprBanner: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<Banner theme='opaque' className={classNames('transition-transform', { 'translate-y-full': slideout })}>
|
||||
<Banner theme='opaque' className={clsx('transition-transform', { 'translate-y-full': slideout })}>
|
||||
<div className='flex flex-col space-y-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:space-x-4'>
|
||||
<Stack space={2}>
|
||||
<Text size='xl' weight='bold'>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ export const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, childre
|
|||
return (
|
||||
<Elem
|
||||
ref={ref}
|
||||
className={classNames('hover-ref-wrapper', className)}
|
||||
className={clsx('hover-ref-wrapper', className)}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useRef } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
|
@ -45,7 +45,7 @@ export const HoverStatusWrapper: React.FC<IHoverStatusWrapper> = ({ statusId, ch
|
|||
return (
|
||||
<Elem
|
||||
ref={ref}
|
||||
className={classNames('hover-status-wrapper', className)}
|
||||
className={clsx('hover-status-wrapper', className)}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
|
@ -66,7 +66,7 @@ const IconButton: React.FC<IIconButton> = ({
|
|||
}
|
||||
};
|
||||
|
||||
const classes = classNames(className, 'icon-button', {
|
||||
const classes = clsx(className, 'icon-button', {
|
||||
active,
|
||||
disabled,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @module soapbox/components/icon
|
||||
*/
|
||||
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
|
|||
const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames('svg-icon', className)}
|
||||
className={clsx('svg-icon', className)}
|
||||
{...rest}
|
||||
>
|
||||
<InlineSVG src={src} title={alt} loader={<></>} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
|
|||
|
||||
return React.cloneElement(child, {
|
||||
id: domId,
|
||||
className: classNames({
|
||||
className: clsx({
|
||||
'w-auto': isSelect,
|
||||
}, child.props.className),
|
||||
});
|
||||
|
|
@ -57,7 +57,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
|
|||
|
||||
return (
|
||||
<Comp
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/10 to-gradient-end/10': true,
|
||||
'cursor-pointer hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import throttle from 'lodash/throttle';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
|
@ -100,8 +100,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
|
|||
renderSuggestion={AutosuggestLocation}
|
||||
/>
|
||||
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
|
||||
<Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
|
||||
<Icon src={require('@tabler/icons/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
|
||||
<Icon src={require('@tabler/icons/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState, useRef, useLayoutEffect } from 'react';
|
||||
|
||||
import Blurhash from 'soapbox/components/blurhash';
|
||||
|
|
@ -152,7 +152,7 @@ const Item: React.FC<IItem> = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<div className={classNames('media-gallery__item', { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<div className={clsx('media-gallery__item', { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<a className='media-gallery__item-thumbnail' href={attachment.url} target='_blank' style={{ cursor: 'pointer' }}>
|
||||
<Blurhash hash={attachment.blurhash} className='media-gallery__preview' />
|
||||
<span className='media-gallery__item__icons'>{attachmentIcon}</span>
|
||||
|
|
@ -189,7 +189,7 @@ const Item: React.FC<IItem> = ({
|
|||
}
|
||||
|
||||
thumbnail = (
|
||||
<div className={classNames('media-gallery__gifv', { autoplay: autoPlayGif })}>
|
||||
<div className={clsx('media-gallery__gifv', { autoplay: autoPlayGif })}>
|
||||
<video
|
||||
className='media-gallery__item-gifv-thumbnail'
|
||||
aria-label={attachment.description}
|
||||
|
|
@ -211,7 +211,7 @@ const Item: React.FC<IItem> = ({
|
|||
const ext = attachment.url.split('.').pop()?.toUpperCase();
|
||||
thumbnail = (
|
||||
<a
|
||||
className={classNames('media-gallery__item-thumbnail')}
|
||||
className={clsx('media-gallery__item-thumbnail')}
|
||||
href={attachment.url}
|
||||
onClick={handleClick}
|
||||
target='_blank'
|
||||
|
|
@ -225,7 +225,7 @@ const Item: React.FC<IItem> = ({
|
|||
const ext = attachment.url.split('.').pop()?.toUpperCase();
|
||||
thumbnail = (
|
||||
<a
|
||||
className={classNames('media-gallery__item-thumbnail')}
|
||||
className={clsx('media-gallery__item-thumbnail')}
|
||||
href={attachment.url}
|
||||
onClick={handleClick}
|
||||
target='_blank'
|
||||
|
|
@ -245,7 +245,7 @@ const Item: React.FC<IItem> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={classNames('media-gallery__item', `media-gallery__item--${attachment.type}`, { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<div className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
{last && total > ATTACHMENT_LIMIT && (
|
||||
<div className='media-gallery__item-overflow'>
|
||||
+{total - ATTACHMENT_LIMIT + 1}
|
||||
|
|
@ -546,7 +546,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
|
|||
}, [node.current]);
|
||||
|
||||
return (
|
||||
<div className={classNames('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.style} ref={node}>
|
||||
<div className={clsx('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.style} ref={node}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import 'wicg-inert';
|
||||
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||
|
|
@ -232,7 +232,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
|
|||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'fixed top-0 left-0 z-[100] w-full h-full overflow-x-hidden overflow-y-auto': true,
|
||||
'pointer-events-none': !visible,
|
||||
})}
|
||||
|
|
@ -247,7 +247,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
|
|||
|
||||
<div
|
||||
role='dialog'
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'my-2 mx-auto relative pointer-events-none flex items-center min-h-[calc(100%-3.5rem)]': true,
|
||||
'p-4 md:p-0': type !== 'MEDIA',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
|
||||
|
|
@ -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={clsx('rounded-lg border border-solid border-gray-300 p-4 dark:border-gray-800', className)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { Motion, presets, spring } from 'react-motion';
|
||||
|
|
@ -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', {
|
||||
clsx('relative flex cursor-pointer rounded-3xl border border-solid bg-white p-2 hover:bg-primary-50 dark:bg-primary-900 dark:hover:bg-primary-800/50', {
|
||||
'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={clsx('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,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useIntl, FormattedMessage } from 'react-intl';
|
||||
import { usePopper } from 'react-popper';
|
||||
|
|
@ -95,7 +95,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
|
|||
|
||||
return (
|
||||
<div
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'absolute transition-opacity w-[320px] z-[101] top-0 left-0': true,
|
||||
'opacity-100': visible,
|
||||
'opacity-0 pointer-events-none': !visible,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
interface IProgressCircle {
|
||||
|
|
@ -30,7 +30,7 @@ const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stro
|
|||
strokeWidth={stroke}
|
||||
/>
|
||||
<circle
|
||||
className={classNames('stroke-primary-500', {
|
||||
className={clsx('stroke-primary-500', {
|
||||
'stroke-secondary-500': progress > 1,
|
||||
})}
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
|
@ -94,7 +94,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|||
return (
|
||||
<OutlineBox
|
||||
data-testid='quoted-status'
|
||||
className={classNames('cursor-pointer', {
|
||||
className={clsx('cursor-pointer', {
|
||||
'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import throttle from 'lodash/throttle';
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useIntl, MessageDescriptor } from 'react-intl';
|
||||
|
|
@ -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 = clsx('fixed left-1/2 top-20 z-50 -translate-x-1/2', {
|
||||
'hidden': !visible,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* eslint-disable jsx-a11y/interactive-supports-focus */
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
import { Link, NavLink } from 'react-router-dom';
|
||||
|
|
@ -138,7 +138,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
<div
|
||||
aria-expanded={sidebarOpen}
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'z-[1000]': sidebarOpen,
|
||||
hidden: !sidebarOpen,
|
||||
})
|
||||
|
|
@ -153,7 +153,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
<div className='fixed inset-0 z-[1000] flex'>
|
||||
<div
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'flex flex-col flex-1 bg-white dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs': true,
|
||||
'!translate-x-0': sidebarOpen,
|
||||
})
|
||||
|
|
@ -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={clsx('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
|
||||
'rotate-180': switcher,
|
||||
})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
|
|||
to={to}
|
||||
ref={ref}
|
||||
onClick={handleClick}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rtl:space-x-reverse rounded-full group text-gray-600 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900': true,
|
||||
'dark:text-gray-100 text-gray-900': isActive,
|
||||
})}
|
||||
|
|
@ -48,7 +48,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
|
|||
src={icon}
|
||||
count={count}
|
||||
countMax={countMax}
|
||||
className={classNames('h-5 w-5', {
|
||||
className={clsx('h-5 w-5', {
|
||||
'text-gray-600 dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400': !isActive,
|
||||
'text-primary-500 dark:text-primary-400': isActive,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
|
||||
|
|
@ -36,7 +36,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
|
|||
return (
|
||||
// eslint-disable-next-line jsx-a11y/alt-text
|
||||
<img
|
||||
className={classNames('object-contain', className)}
|
||||
className={clsx('object-contain', className)}
|
||||
src={getSrc()}
|
||||
{...rest}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { Text, Icon, Emoji } from 'soapbox/components/ui';
|
||||
|
|
@ -49,7 +49,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
|
|||
return (
|
||||
<Icon
|
||||
src={icon}
|
||||
className={classNames(
|
||||
className={clsx(
|
||||
{
|
||||
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
|
||||
},
|
||||
|
|
@ -78,11 +78,11 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
|
|||
<button
|
||||
ref={ref}
|
||||
type='button'
|
||||
className={classNames(
|
||||
'flex items-center p-1 rounded-full rtl:space-x-reverse',
|
||||
className={clsx(
|
||||
'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:outline-none focus:ring-2 focus:ring-primary-500 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,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
|
@ -153,7 +153,7 @@ const StatusContent: React.FC<IStatusContent> = ({
|
|||
|
||||
const content = { __html: parsedHtml };
|
||||
const direction = isRtl(status.search_index) ? 'rtl' : 'ltr';
|
||||
const className = classNames(baseClassName, {
|
||||
const className = clsx(baseClassName, {
|
||||
'cursor-pointer': onClick,
|
||||
'whitespace-normal': withSpoiler,
|
||||
'max-h-[300px]': collapsed,
|
||||
|
|
@ -183,14 +183,14 @@ const StatusContent: React.FC<IStatusContent> = ({
|
|||
output.push(<Poll id={status.poll} key='poll' status={status.url} />);
|
||||
}
|
||||
|
||||
return <div className={classNames({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</div>;
|
||||
return <div className={clsx({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</div>;
|
||||
} else {
|
||||
const output = [
|
||||
<Markup
|
||||
ref={node}
|
||||
tabIndex={0}
|
||||
key='content'
|
||||
className={classNames(baseClassName, {
|
||||
className={clsx(baseClassName, {
|
||||
'leading-normal big-emoji': onlyEmoji,
|
||||
})}
|
||||
direction={direction}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { usePopper } from 'react-popper';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
|
@ -79,7 +79,7 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
|
|||
|
||||
return (
|
||||
<div
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'absolute transition-opacity w-[500px] z-50 top-0 left-0': true,
|
||||
'opacity-100': visible,
|
||||
'opacity-0 pointer-events-none': !visible,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useRef, useCallback } from 'react';
|
||||
|
|
@ -244,10 +244,10 @@ const StatusList: React.FC<IStatusList> = ({
|
|||
placeholderComponent={PlaceholderStatus}
|
||||
placeholderCount={20}
|
||||
ref={node}
|
||||
className={classNames('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
|
||||
className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
|
||||
'divide-none': divideType !== 'border',
|
||||
})}
|
||||
itemClassName={classNames({
|
||||
itemClassName={clsx({
|
||||
'pb-3': divideType !== 'border',
|
||||
})}
|
||||
{...other}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
|
||||
|
|
@ -289,7 +289,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
|
||||
return (
|
||||
<HotKeys handlers={minHandlers}>
|
||||
<div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
|
||||
<div className={clsx('status__wrapper', 'status__wrapper--filtered', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
|
||||
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />
|
||||
</div>
|
||||
</HotKeys>
|
||||
|
|
@ -339,7 +339,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
return (
|
||||
<HotKeys handlers={handlers} data-testid='status'>
|
||||
<div
|
||||
className={classNames('status cursor-pointer', { focusable })}
|
||||
className={clsx('status cursor-pointer', { focusable })}
|
||||
tabIndex={focusable && !muted ? 0 : undefined}
|
||||
data-featured={featured ? 'true' : null}
|
||||
aria-label={textForScreenReader(intl, actualStatus, rebloggedByText)}
|
||||
|
|
@ -349,7 +349,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
>
|
||||
<Card
|
||||
variant={variant}
|
||||
className={classNames('status__wrapper space-y-4', `status-${actualStatus.visibility}`, {
|
||||
className={clsx('status__wrapper space-y-4', `status-${actualStatus.visibility}`, {
|
||||
'py-6 sm:p-5': variant === 'rounded',
|
||||
'status-reply': !!status.in_reply_to_id,
|
||||
muted,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -91,7 +91,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
|
|||
|
||||
return (
|
||||
<div
|
||||
className={classNames('absolute z-40', {
|
||||
className={clsx('absolute z-40', {
|
||||
'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center': !visible,
|
||||
'bg-gray-800/75 inset-0': !visible,
|
||||
'bottom-1 right-1': visible,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
import { useSettings } from 'soapbox/hooks';
|
||||
|
|
@ -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 = clsx('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={clsx(className, 'group relative isolate overflow-hidden')}
|
||||
style={style}
|
||||
>
|
||||
<img
|
||||
|
|
@ -55,7 +55,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
|
|||
alt={alt}
|
||||
ref={img}
|
||||
onLoad={handleImageLoad}
|
||||
className={classNames(baseClassName, {
|
||||
className={clsx(baseClassName, {
|
||||
'invisible group-hover:visible': hoverToPlay,
|
||||
})}
|
||||
/>
|
||||
|
|
@ -63,7 +63,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
|
|||
{hoverToPlay && (
|
||||
<canvas
|
||||
ref={canvas}
|
||||
className={classNames(baseClassName, {
|
||||
className={clsx(baseClassName, {
|
||||
'group-hover:invisible': hoverToPlay,
|
||||
})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
|
|||
{count !== undefined ? (
|
||||
<IconWithCounter
|
||||
src={src}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'h-5 w-5': true,
|
||||
'text-gray-600': !active,
|
||||
'text-primary-500': active,
|
||||
|
|
@ -44,7 +44,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
|
|||
) : (
|
||||
<Icon
|
||||
src={src}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'h-5 w-5': true,
|
||||
'text-gray-600': !active,
|
||||
'text-primary-500': active,
|
||||
|
|
@ -56,7 +56,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
|
|||
tag='span'
|
||||
size='xs'
|
||||
weight='medium'
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'text-gray-600': !active,
|
||||
'text-primary-500': active,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
|
|||
|
||||
<div
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900': true,
|
||||
'h-0 hidden': !expanded,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import StillImage from 'soapbox/components/still-image';
|
||||
|
|
@ -25,7 +25,7 @@ const Avatar = (props: IAvatar) => {
|
|||
|
||||
return (
|
||||
<StillImage
|
||||
className={classNames('rounded-full', className)}
|
||||
className={clsx('rounded-full', className)}
|
||||
style={style}
|
||||
src={src}
|
||||
alt='Avatar'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
interface IBanner {
|
||||
|
|
@ -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={clsx('fixed inset-x-0 bottom-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)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
|
|||
|
||||
const renderButton = () => (
|
||||
<button
|
||||
className={classNames('space-x-2 rtl:space-x-reverse', themeClass, className)}
|
||||
className={clsx('space-x-2 rtl:space-x-reverse', themeClass, className)}
|
||||
disabled={disabled}
|
||||
onClick={handleClick}
|
||||
ref={ref}
|
||||
|
|
@ -100,4 +100,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
|
|||
return renderButton();
|
||||
});
|
||||
|
||||
export default Button;
|
||||
export {
|
||||
Button as default,
|
||||
Button,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const themes = {
|
||||
primary:
|
||||
|
|
@ -38,7 +38,7 @@ const useButtonStyles = ({
|
|||
disabled,
|
||||
size,
|
||||
}: IButtonStyles) => {
|
||||
const buttonStyle = classNames({
|
||||
const buttonStyle = clsx({
|
||||
'inline-flex items-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all': true,
|
||||
'select-none disabled:opacity-75 disabled:cursor-default': disabled,
|
||||
[`${themes[theme]}`]: true,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
|
@ -32,7 +32,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
|
|||
<div
|
||||
ref={ref}
|
||||
{...filteredProps}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
|
||||
[sizes[size]]: variant === 'rounded',
|
||||
}, className)}
|
||||
|
|
@ -72,7 +72,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
|
|||
};
|
||||
|
||||
return (
|
||||
<HStack alignItems='center' space={2} className={classNames('mb-4', className)}>
|
||||
<HStack alignItems='center' space={2} className={clsx('mb-4', className)}>
|
||||
{renderBackButton()}
|
||||
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
|
|||
<ColumnHeader
|
||||
label={label}
|
||||
backHref={backHref}
|
||||
className={classNames({ 'px-4 pt-4 sm:p-0': transparent })}
|
||||
className={clsx({ 'px-4 pt-4 sm:p-0': transparent })}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { Emoji, HStack } from 'soapbox/components/ui';
|
||||
|
|
@ -17,7 +17,7 @@ interface IEmojiButton {
|
|||
/** Clickable emoji button that scales when hovered. */
|
||||
const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
|
||||
return (
|
||||
<button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
|
||||
<button className={clsx(className)} onClick={onClick} tabIndex={tabIndex}>
|
||||
<Emoji className='h-8 w-8 duration-100 hover:scale-125' emoji={emoji} />
|
||||
</button>
|
||||
);
|
||||
|
|
@ -47,7 +47,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
|
|||
|
||||
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={clsx('z-[999] w-max max-w-[100vw] flex-wrap gap-2 rounded-full bg-white p-3 shadow-md dark:bg-gray-900')}
|
||||
>
|
||||
{Array.from(emojis).map((emoji, i) => (
|
||||
<EmojiButton
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { forwardRef } from 'react';
|
||||
|
||||
const justifyContentOptions = {
|
||||
|
|
@ -61,14 +61,14 @@ const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
|
|||
<Elem
|
||||
{...filteredProps}
|
||||
ref={ref}
|
||||
className={classNames('flex rtl:space-x-reverse', {
|
||||
className={clsx('flex rtl:space-x-reverse', {
|
||||
// @ts-ignore
|
||||
[alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
|
||||
// @ts-ignore
|
||||
[justifyContentOptions[justifyContent]]: typeof justifyContent !== 'undefined',
|
||||
// @ts-ignore
|
||||
[spaces[space]]: typeof space !== 'undefined',
|
||||
'flex-grow': grow,
|
||||
'grow': grow,
|
||||
'flex-wrap': wrap,
|
||||
}, className)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import SvgIcon from '../icon/svg-icon';
|
||||
|
|
@ -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={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 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,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
|||
return (
|
||||
<div
|
||||
className={
|
||||
classNames('relative', {
|
||||
clsx('relative', {
|
||||
'rounded-md': theme !== 'search',
|
||||
'rounded-full': theme === 'search',
|
||||
'mt-1': !String(outerClassName).includes('mt-'),
|
||||
|
|
@ -83,7 +83,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
|||
{...filteredProps}
|
||||
type={revealed ? 'text' : type}
|
||||
ref={ref}
|
||||
className={classNames('text-base placeholder:text-gray-600 dark:placeholder:text-gray-600', {
|
||||
className={clsx('text-base placeholder:text-gray-600 dark:placeholder:text-gray-600', {
|
||||
'text-gray-900 dark:text-gray-100 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
|
||||
['normal', 'search'].includes(theme),
|
||||
'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import StickyBox from 'react-sticky-box';
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ const Sidebar: React.FC<ISidebar> = ({ children }) => (
|
|||
/** Center column container in the UI. */
|
||||
const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, className }) => (
|
||||
<main
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'md:col-span-12 lg:col-span-9 xl:col-span-6 pb-36': true,
|
||||
}, className)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {
|
|||
MenuListProps,
|
||||
} from '@reach/menu-button';
|
||||
import { positionDefault, positionRight } from '@reach/popover';
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import './menu.css';
|
||||
|
|
@ -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')
|
||||
clsx(className, 'shadow-menu rounded-lg bg-white py-1 dark:bg-primary-900')
|
||||
}
|
||||
{...filteredProps}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -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={clsx('pointer-events-auto mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:bg-primary-900 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={clsx('flex w-full items-center gap-2', {
|
||||
'flex-row-reverse': closePosition === 'left',
|
||||
})}
|
||||
>
|
||||
|
|
@ -121,7 +121,7 @@ const Modal: React.FC<IModal> = ({
|
|||
|
||||
{confirmationAction && (
|
||||
<HStack className='mt-5' justifyContent='between' data-testid='modal-actions'>
|
||||
<div className={classNames({ 'flex-grow': !confirmationFullWidth })}>
|
||||
<div className={clsx({ 'grow': !confirmationFullWidth })}>
|
||||
{cancelAction && (
|
||||
<Button
|
||||
theme='tertiary'
|
||||
|
|
@ -132,7 +132,7 @@ const Modal: React.FC<IModal> = ({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<HStack space={2} className={classNames({ 'flex-grow': confirmationFullWidth })}>
|
||||
<HStack space={2} className={clsx({ 'grow': confirmationFullWidth })}>
|
||||
{secondaryAction && (
|
||||
<Button
|
||||
theme='secondary'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
const spaces = {
|
||||
|
|
@ -52,14 +52,14 @@ const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.Legacy
|
|||
<Elem
|
||||
{...filteredProps}
|
||||
ref={ref}
|
||||
className={classNames('flex flex-col', {
|
||||
className={clsx('flex flex-col', {
|
||||
// @ts-ignore
|
||||
[spaces[space]]: typeof space !== 'undefined',
|
||||
// @ts-ignore
|
||||
[alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
|
||||
// @ts-ignore
|
||||
[justifyContentOptions[justifyContent]]: typeof justifyContent !== 'undefined',
|
||||
'flex-grow': grow,
|
||||
'grow': grow,
|
||||
}, className)}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
Tab as ReachTab,
|
||||
useTabsContext,
|
||||
} from '@reach/tabs';
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
|
|||
style={{ top }}
|
||||
/>
|
||||
<div
|
||||
className={classNames('absolute h-[3px] bg-primary-500 transition-all duration-200', {
|
||||
className={clsx('absolute h-[3px] bg-primary-500 transition-all duration-200', {
|
||||
'hidden': top <= 0,
|
||||
})}
|
||||
style={{ left, top, width }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
const themes = {
|
||||
|
|
@ -115,7 +115,7 @@ const Text = React.forwardRef<any, IText>(
|
|||
textDecoration: tag === 'abbr' ? 'underline dotted' : undefined,
|
||||
direction,
|
||||
}}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'cursor-default': tag === 'abbr',
|
||||
truncate: truncate,
|
||||
[sizes[size]]: true,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
|
||||
|
|
@ -75,7 +75,7 @@ const Textarea = React.forwardRef(({
|
|||
ref={ref}
|
||||
rows={rows}
|
||||
onChange={handleChange}
|
||||
className={classNames('block w-full rounded-md sm:text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600', {
|
||||
className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm', {
|
||||
'bg-white dark:bg-transparent shadow-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
|
||||
theme === 'default',
|
||||
'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import toast, { Toast as RHToast } from 'react-hot-toast';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
|
@ -102,7 +102,7 @@ const Toast = (props: IToast) => {
|
|||
<div
|
||||
data-testid='toast'
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'p-4 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-900 shadow-lg dark:ring-2 dark:ring-gray-800': true,
|
||||
'animate-enter': t.visible,
|
||||
'animate-leave': !t.visible,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import React, { useState } from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
|
|
@ -152,13 +152,13 @@ const Upload: React.FC<IUpload> = ({
|
|||
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
|
||||
{({ scale }) => (
|
||||
<div
|
||||
className={classNames('compose-form__upload-thumbnail', mediaType)}
|
||||
className={clsx('compose-form__upload-thumbnail', mediaType)}
|
||||
style={{
|
||||
transform: `scale(${scale})`,
|
||||
backgroundImage: mediaType === 'image' ? `url(${media.preview_url})` : undefined,
|
||||
backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined }}
|
||||
>
|
||||
<div className={classNames('compose-form__upload__actions', { active })}>
|
||||
<div className={clsx('compose-form__upload__actions', { active })}>
|
||||
{onDelete && (
|
||||
<IconButton
|
||||
onClick={handleUndoClick}
|
||||
|
|
@ -178,7 +178,7 @@ const Upload: React.FC<IUpload> = ({
|
|||
</div>
|
||||
|
||||
{onDescriptionChange && (
|
||||
<div className={classNames('compose-form__upload-description', { active })}>
|
||||
<div className={clsx('compose-form__upload-description', { active })}>
|
||||
<label>
|
||||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { HStack, Icon, Text } from 'soapbox/components/ui';
|
||||
|
|
@ -13,7 +13,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
|
|||
<HStack alignItems='center' space={2} data-testid='validation-checkmark'>
|
||||
<Icon
|
||||
src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'w-4 h-4': true,
|
||||
'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,
|
||||
'text-success-500': isValid,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { useIntl, defineMessages } from 'react-intl';
|
||||
|
||||
|
|
@ -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={clsx('w-4 text-accent-500', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
import { QueryClientProvider } from '@tanstack/react-query';
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
|
|
@ -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 = clsx('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'),
|
||||
|
|
@ -280,7 +280,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
|
|||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<html lang={locale} className={classNames('h-full', { dark: darkMode })} />
|
||||
<html lang={locale} className={clsx('h-full', { dark: darkMode })} />
|
||||
<body className={bodyClass} dir={direction} />
|
||||
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
|
||||
{darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Blurhash from 'soapbox/components/blurhash';
|
||||
|
|
@ -83,7 +83,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
|
|||
conditionalAttributes.autoPlay = true;
|
||||
}
|
||||
thumbnail = (
|
||||
<div className={classNames('media-gallery__gifv', { autoplay: autoPlayGif })}>
|
||||
<div className={clsx('media-gallery__gifv', { autoplay: autoPlayGif })}>
|
||||
<video
|
||||
className='media-gallery__item-gifv-thumbnail'
|
||||
aria-label={attachment.description}
|
||||
|
|
@ -125,7 +125,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
|
|||
<a className='media-gallery__item-thumbnail aspect-square' href={status.get('url')} target='_blank' onClick={handleClick} title={title}>
|
||||
<Blurhash
|
||||
hash={attachment.get('blurhash')}
|
||||
className={classNames('media-gallery__preview', {
|
||||
className={clsx('media-gallery__preview', {
|
||||
'media-gallery__preview--hidden': visible,
|
||||
})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ const Search: React.FC = () => {
|
|||
/>
|
||||
|
||||
<div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
|
||||
<Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
|
||||
</div>
|
||||
</label>
|
||||
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import debounce from 'lodash/debounce';
|
||||
import throttle from 'lodash/throttle';
|
||||
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
||||
|
|
@ -437,7 +437,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={classNames('audio-player', { editable })}
|
||||
className={clsx('audio-player', { editable })}
|
||||
ref={player}
|
||||
style={{
|
||||
backgroundColor: _getBackgroundColor(),
|
||||
|
|
@ -503,7 +503,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
/>
|
||||
|
||||
<span
|
||||
className={classNames('video-player__seek__handle', { active: dragging })}
|
||||
className={clsx('video-player__seek__handle', { active: dragging })}
|
||||
tabIndex={0}
|
||||
style={{ left: `${progress}%`, backgroundColor: _getAccentColor() }}
|
||||
onKeyDown={handleAudioKeyDown}
|
||||
|
|
@ -535,7 +535,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
</button>
|
||||
|
||||
<div
|
||||
className={classNames('video-player__volume', { active: hovered })}
|
||||
className={clsx('video-player__volume', { active: hovered })}
|
||||
ref={slider}
|
||||
onMouseDown={handleVolumeMouseDown}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
|
||||
|
|
@ -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={clsx('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={clsx('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,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
|
@ -60,7 +60,7 @@ const ChatMessageListIntro = () => {
|
|||
alignItems='center'
|
||||
space={4}
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'w-3/4 mx-auto': needsAcceptance,
|
||||
'py-6': true, // needs to be padding to prevent Virtuoso bugs
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useMutation } from '@tanstack/react-query';
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
||||
import escape from 'lodash/escape';
|
||||
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
||||
|
|
@ -280,20 +280,20 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
|
|||
<div key={chatMessage.id} className='group' data-testid='chat-message'>
|
||||
<Stack
|
||||
space={1.5}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'ml-auto': isMyMessage,
|
||||
})}
|
||||
>
|
||||
<HStack
|
||||
alignItems='center'
|
||||
justifyContent={isMyMessage ? 'end' : 'start'}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'opacity-50': chatMessage.pending,
|
||||
})}
|
||||
>
|
||||
{menu.length > 0 && (
|
||||
<div
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'hidden focus:block group-hover:block text-gray-500': true,
|
||||
'mr-2 order-1': isMyMessage,
|
||||
'ml-2 order-2': !isMyMessage,
|
||||
|
|
@ -313,7 +313,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
|
|||
|
||||
<Stack
|
||||
space={0.5}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'max-w-[85%]': true,
|
||||
'flex-1': !!chatMessage.media_attachments.size,
|
||||
'order-2': isMyMessage,
|
||||
|
|
@ -328,7 +328,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
|
|||
<div
|
||||
title={getFormattedTimestamp(chatMessage)}
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
|
||||
'rounded-tr-sm': (!!chatMessage.media_attachments.size) && isMyMessage,
|
||||
'rounded-tl-sm': (!!chatMessage.media_attachments.size) && !isMyMessage,
|
||||
|
|
@ -357,12 +357,12 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
|
|||
<HStack
|
||||
alignItems='center'
|
||||
space={2}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'ml-auto': isMyMessage,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'text-right': isMyMessage,
|
||||
'order-2': !isMyMessage,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
||||
import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
|
||||
|
||||
|
|
@ -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={clsx('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={clsx('col-span-9 h-full overflow-hidden sm:col-span-6', {
|
||||
'hidden sm:block': !isSidebarHidden,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
|
||||
|
|
@ -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={clsx('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={clsx('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,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { AxiosError } from 'axios';
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { MutableRefObject, useEffect, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -157,7 +157,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={clsx('flex grow overflow-hidden', className)} onMouseOver={handleMouseOver}>
|
||||
<div className='flex h-full grow justify-center overflow-hidden'>
|
||||
<ChatMessageList chat={chat} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
interface IPane {
|
||||
|
|
@ -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={clsx('fixed bottom-0 right-1 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900', {
|
||||
'h-[550px] max-h-[100vh]': isOpen,
|
||||
'h-16': !isOpen,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { IconButton } from 'soapbox/components/ui';
|
||||
|
|
@ -22,7 +22,7 @@ const ComposeFormButton: React.FC<IComposeFormButton> = ({
|
|||
<div>
|
||||
<IconButton
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !active,
|
||||
'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': active,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
|
|
@ -334,7 +334,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
|||
<QuotedStatusContainer composeId={id} />
|
||||
|
||||
<div
|
||||
className={classNames('flex flex-wrap items-center justify-between', {
|
||||
className={clsx('flex flex-wrap items-center justify-between', {
|
||||
'hidden': condensed,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
|
@ -180,7 +180,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, butt
|
|||
tabIndex={0}
|
||||
>
|
||||
{button || <IconButton
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
|
||||
'pulse-loading': active && loading,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
|
@ -136,7 +136,7 @@ const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
|
|||
const title = intl.formatMessage(messages.emoji);
|
||||
|
||||
return (
|
||||
<div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={node}>
|
||||
<div className={clsx('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={node}>
|
||||
<EmojiPicker
|
||||
perLine={8}
|
||||
emojiSize={22}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useIntl, defineMessages } from 'react-intl';
|
||||
|
|
@ -122,7 +122,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
|
|||
// react-overlays
|
||||
<div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
|
||||
{items.map(item => (
|
||||
<div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
|
||||
<div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
|
||||
<div className='privacy-dropdown__option__icon'>
|
||||
<Icon src={item.icon} />
|
||||
</div>
|
||||
|
|
@ -239,8 +239,8 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
|
|||
const valueOption = options.find(item => item.value === value);
|
||||
|
||||
return (
|
||||
<div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
|
||||
<div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
|
||||
<div className={clsx('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
|
||||
<div className={clsx('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
|
||||
<IconButton
|
||||
className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
|
||||
src={valueOption?.icon}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
|
|||
placeholderText={intl.formatMessage(messages.schedule)}
|
||||
filterDate={isCurrentOrFutureDate}
|
||||
filterTime={isFiveMinutesFromNow}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'has-error': !isFiveMinutesFromNow(scheduledAt),
|
||||
})}
|
||||
/>)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -260,10 +260,10 @@ const SearchResults = () => {
|
|||
onLoadMore={handleLoadMore}
|
||||
placeholderComponent={placeholderComponent}
|
||||
placeholderCount={20}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'divide-gray-200 dark:divide-gray-800 divide-solid divide-y': selectedFilter === 'statuses',
|
||||
})}
|
||||
itemClassName={classNames({
|
||||
itemClassName={clsx({
|
||||
'pb-4': selectedFilter === 'accounts',
|
||||
'pb-3': selectedFilter === 'hashtags',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useCallback } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
|
@ -154,12 +154,12 @@ const Search = (props: ISearch) => {
|
|||
>
|
||||
<SvgIcon
|
||||
src={require('@tabler/icons/search.svg')}
|
||||
className={classNames('h-4 w-4 text-gray-600', { hidden: hasValue })}
|
||||
className={clsx('h-4 w-4 text-gray-600', { hidden: hasValue })}
|
||||
/>
|
||||
|
||||
<SvgIcon
|
||||
src={require('@tabler/icons/x.svg')}
|
||||
className={classNames('h-4 w-4 text-gray-600', { hidden: !hasValue })}
|
||||
className={clsx('h-4 w-4 text-gray-600', { hidden: !hasValue })}
|
||||
aria-label={intl.formatMessage(messages.placeholder)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
|
|||
return (
|
||||
<Stack
|
||||
space={4}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'relative transition-height': true,
|
||||
'hidden': !compose.spoiler,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { length } from 'stringz';
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ const TextCharacterCounter: React.FC<ITextCharacterCounter> = ({ text, max }) =>
|
|||
const checkRemainingText = (diff: number) => {
|
||||
return (
|
||||
<span
|
||||
className={classNames('text-sm font-medium', {
|
||||
className={clsx('text-sm font-medium', {
|
||||
'text-gray-700': diff >= 0,
|
||||
'text-secondary-600': diff < 0,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { useCompose } from 'soapbox/hooks';
|
||||
|
|
@ -14,7 +14,7 @@ interface IUploadForm {
|
|||
|
||||
const UploadForm: React.FC<IUploadForm> = ({ composeId }) => {
|
||||
const mediaIds = useCompose(composeId).media_attachments.map((item: AttachmentEntity) => item.id);
|
||||
const classes = classNames('compose-form__uploads-wrapper', {
|
||||
const classes = clsx('compose-form__uploads-wrapper', {
|
||||
'contains-media': mediaIds.size !== 0,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
interface IIndicator {
|
||||
|
|
@ -10,7 +10,7 @@ interface IIndicator {
|
|||
const Indicator: React.FC<IIndicator> = ({ state = 'inactive', size = 'sm' }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames('rounded-full outline-double', {
|
||||
className={clsx('rounded-full outline-double', {
|
||||
'w-1.5 h-1.5 shadow-sm': size === 'sm',
|
||||
'bg-green-500 outline-green-400': state === 'active',
|
||||
'bg-yellow-500 outline-yellow-400': state === 'pending',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
|
|||
<Text
|
||||
truncate
|
||||
align='left'
|
||||
className={classNames('[&_br]:hidden [&_p]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate')}
|
||||
className={clsx('[&_br]:hidden [&_p]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate')}
|
||||
dangerouslySetInnerHTML={{ __html: account.note_emojified || ' ' }}
|
||||
/>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
|
@ -79,7 +79,7 @@ const Directory = () => {
|
|||
|
||||
<div
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'grid grid-cols-1 sm:grid-cols-2 gap-2.5': true,
|
||||
'opacity-30': isLoading,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
|
@ -27,12 +27,12 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
|
|||
<div>
|
||||
<a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
|
||||
<Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
|
||||
<div className={classNames({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
|
||||
<div className={clsx({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
|
||||
{remoteInstance.get('host')}
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'h-0 overflow-hidden': !expanded,
|
||||
'h-auto': expanded,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ const CarouselItem = React.forwardRef((
|
|||
|
||||
<img
|
||||
src={avatar.account_avatar}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'w-12 h-12 min-w-[48px] rounded-full ring-2 ring-offset-4 dark:ring-offset-primary-900': true,
|
||||
'ring-transparent': !isSelected && seen,
|
||||
'ring-primary-600': isSelected,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState } from 'react';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ interface IInputContainer {
|
|||
}
|
||||
|
||||
export const InputContainer: React.FC<IInputContainer> = (props) => {
|
||||
const containerClass = classNames('input', {
|
||||
const containerClass = clsx('input', {
|
||||
'with_label': props.label,
|
||||
'required': props.required,
|
||||
'boolean': props.type === 'checkbox',
|
||||
|
|
@ -149,7 +149,7 @@ export const SimpleForm: React.FC<ISimpleForm> = (props) => {
|
|||
|
||||
return (
|
||||
<form
|
||||
className={classNames('simple_form', className)}
|
||||
className={clsx('simple_form', className)}
|
||||
method='post'
|
||||
onSubmit={handleSubmit}
|
||||
acceptCharset={acceptCharset}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ const Search = () => {
|
|||
placeholder={intl.formatMessage(messages.search)}
|
||||
/>
|
||||
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
|
||||
<Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
|
||||
</div>
|
||||
</label>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
|
|
@ -164,7 +164,7 @@ const Notifications = () => {
|
|||
onLoadMore={handleLoadOlder}
|
||||
onScrollToTop={handleScrollToTop}
|
||||
onScroll={handleScroll}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'divide-y divide-gray-200 dark:divide-primary-800 divide-solid': notifications.size > 0,
|
||||
'space-y-2': notifications.size === 0,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import ReactSwipeableViews from 'react-swipeable-views';
|
||||
|
||||
|
|
@ -84,7 +84,7 @@ const OnboardingWizard = () => {
|
|||
{steps.map((step, i) => (
|
||||
<div key={i} className='w-full max-w-[100vw] py-6 sm:mx-auto sm:max-w-lg md:max-w-2xl'>
|
||||
<div
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'transition-opacity ease-linear': true,
|
||||
'opacity-0 duration-500': currentStep !== i,
|
||||
'opacity-100 duration-75': currentStep === i,
|
||||
|
|
@ -102,7 +102,7 @@ const OnboardingWizard = () => {
|
|||
key={i}
|
||||
tabIndex={0}
|
||||
onClick={() => handleDotClick(i)}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
|
||||
'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
|
||||
'bg-primary-600': i === currentStep,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, FormattedMessage } from 'react-intl';
|
||||
|
||||
|
|
@ -95,7 +95,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|||
<button
|
||||
onClick={openFilePicker}
|
||||
type='button'
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
|
||||
'opacity-50 pointer-events-none': isSubmitting,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|||
<button
|
||||
onClick={openFilePicker}
|
||||
type='button'
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
|
||||
'opacity-50 pointer-events-none': isSubmitting,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { randomIntFromInterval, generateText } from '../utils';
|
||||
|
||||
/** Fake link preview to display while data is loading. */
|
||||
const PlaceholderCard: React.FC = () => (
|
||||
<div className={classNames('status-card', {
|
||||
<div className={clsx('status-card', {
|
||||
'animate-pulse': true,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
|
|
@ -15,7 +15,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
|
|||
<Stack
|
||||
data-testid='placeholder-chat-message'
|
||||
space={1}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'max-w-[85%] animate-pulse': true,
|
||||
'ml-auto': isMyMessage,
|
||||
})}
|
||||
|
|
@ -26,7 +26,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
|
|||
>
|
||||
<div
|
||||
className={
|
||||
classNames({
|
||||
clsx({
|
||||
'text-ellipsis break-words relative rounded-md p-2': true,
|
||||
'mr-2': isMyMessage,
|
||||
'order-2 ml-2': !isMyMessage,
|
||||
|
|
@ -36,7 +36,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
|
|||
<div style={{ width: messageLength, height: 20 }} className='rounded-full bg-primary-50 dark:bg-primary-800' />
|
||||
</div>
|
||||
|
||||
<div className={classNames({ 'order-1': !isMyMessage })}>
|
||||
<div className={clsx({ 'order-1': !isMyMessage })}>
|
||||
<PlaceholderAvatar size={34} />
|
||||
</div>
|
||||
</HStack>
|
||||
|
|
@ -44,14 +44,14 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
|
|||
<HStack
|
||||
alignItems='center'
|
||||
space={2}
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'ml-auto': isMyMessage,
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
theme='muted'
|
||||
size='xs'
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'text-right': isMyMessage,
|
||||
'order-2': !isMyMessage,
|
||||
})}
|
||||
|
|
@ -59,7 +59,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
|
|||
<span style={{ width: 50, height: 12 }} className='block rounded-full bg-primary-50 dark:bg-primary-800' />
|
||||
</Text>
|
||||
|
||||
<div className={classNames({ 'order-1': !isMyMessage })}>
|
||||
<div className={clsx({ 'order-1': !isMyMessage })}>
|
||||
<div className='ml-2 w-[34px]' />
|
||||
</div>
|
||||
</HStack>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { HStack } from 'soapbox/components/ui';
|
||||
|
|
@ -14,7 +14,7 @@ interface IPlaceholderStatus {
|
|||
/** Fake status to display while data is loading. */
|
||||
const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => (
|
||||
<div
|
||||
className={classNames({
|
||||
className={clsx({
|
||||
'status-placeholder bg-white dark:bg-primary-900': true,
|
||||
'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': !thread,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import Account from 'soapbox/components/account';
|
||||
|
|
@ -32,8 +32,8 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
|
|||
const account = status.account as AccountEntity;
|
||||
|
||||
return (
|
||||
<div className={classNames('status__wrapper', `status__wrapper-${status.visibility}`, { 'status__wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
|
||||
<div className={classNames('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
|
||||
<div className={clsx('status__wrapper', `status__wrapper-${status.visibility}`, { 'status__wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
|
||||
<div className={clsx('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
|
||||
<div className='mb-4'>
|
||||
<HStack justifyContent='between' alignItems='start'>
|
||||
<Account
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import classNames from 'clsx';
|
||||
import clsx from 'clsx';
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
// @ts-ignore
|
||||
import Picker from 'emoji-mart/dist-es/components/picker/picker';
|
||||
|
|
@ -105,7 +105,7 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ customEmojis, onClose, onPi
|
|||
const title = intl.formatMessage(messages.emoji);
|
||||
|
||||
return (
|
||||
<div className={classNames('font-icon-picker emoji-picker-dropdown__menu')} style={style} ref={setRef}>
|
||||
<div className={clsx('font-icon-picker emoji-picker-dropdown__menu')} style={style} ref={setRef}>
|
||||
<Picker
|
||||
perLine={8}
|
||||
emojiSize={22}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Ładowanie…
Reference in New Issue