pl-fe: optimize initial js size
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
parent
4c0bd101c5
commit
4ff23c77e8
158 changed files with 242 additions and 242 deletions
|
|
@ -124,7 +124,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
|
|||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<Card variant='rounded' className='relative isolate overflow-hidden black:rounded-xl black:border black:border-gray-800'>
|
||||
<Card variant='rounded' className='black:rounded-xl black:border black:border-gray-800 relative isolate overflow-hidden'>
|
||||
<CardBody>
|
||||
<Stack space={2}>
|
||||
<UserPanel
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
|
|||
|
||||
return (
|
||||
<button
|
||||
className='size-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
|
||||
className='focus:ring-primary-500 size-4 flex-none focus:ring-2 focus:ring-offset-2'
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const AnnouncementsPanel = () => {
|
|||
|
||||
return (
|
||||
<Widget title={<FormattedMessage id='announcements.title' defaultMessage='Announcements' />}>
|
||||
<Card className='relative black:rounded-xl black:border black:border-gray-800' size='md' variant='rounded'>
|
||||
<Card className='black:rounded-xl black:border black:border-gray-800 relative' size='md' variant='rounded'>
|
||||
<ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}>
|
||||
{announcements.map((announcement) => (
|
||||
<Announcement
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
|
|||
|
||||
return (
|
||||
<button
|
||||
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', {
|
||||
className={clsx('dark:bg-primary-900 flex shrink-0 items-center gap-1.5 rounded-sm bg-gray-100 px-1.5 py-1 transition-colors', {
|
||||
'bg-gray-200 dark:bg-primary-800': hovered,
|
||||
'bg-primary-200 dark:bg-primary-500': reaction.me,
|
||||
})}
|
||||
|
|
@ -56,7 +56,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
|
|||
<span className='block size-4'>
|
||||
<Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} />
|
||||
</span>
|
||||
<span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>
|
||||
<span className='text-primary-600 block min-w-[9px] text-center text-xs font-medium dark:text-white'>
|
||||
<AnimatedNumber value={reaction.count} />
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ const AutosuggestInput: React.FC<IAutosuggestInput> = ({
|
|||
|
||||
return menu.map((item, i) => (
|
||||
<a
|
||||
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', {
|
||||
className={clsx('dark:focus:bg-primary-800 flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800', {
|
||||
selected: suggestions.length - selectedSuggestion === i,
|
||||
})}
|
||||
href='#'
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
|
|||
style={{ zIndex: limit - i }}
|
||||
>
|
||||
<Avatar
|
||||
className='ring-1 ring-white dark:ring-primary-900'
|
||||
className='dark:ring-primary-900 ring-1 ring-white'
|
||||
src={account.avatar}
|
||||
alt={account.avatar_description}
|
||||
size={20}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ interface IBigCard {
|
|||
const BigCard: React.FC<IBigCard> = ({ title, subtitle, children }) => (
|
||||
<Card variant='rounded' size='xl'>
|
||||
<CardBody>
|
||||
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
|
||||
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
|
||||
<Stack space={2}>
|
||||
<Text size='2xl' align='center' weight='bold'>{title}</Text>
|
||||
{subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
|
|||
}
|
||||
|
||||
return (
|
||||
<li className='truncate focus-visible:ring-2 focus-visible:ring-primary-500'>
|
||||
<li className='focus-visible:ring-primary-500 truncate focus-visible:ring-2'>
|
||||
<a
|
||||
href={item.href || item.to || '#'}
|
||||
role='button'
|
||||
|
|
@ -113,7 +113,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
|
|||
target={item.target}
|
||||
title={item.text}
|
||||
className={
|
||||
clsx('mx-2 my-1 flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
|
||||
clsx('black:hover:bg-gray-900 black:focus:bg-gray-900 mx-2 my-1 flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
|
||||
'text-danger-600 dark:text-danger-400': item.destructive,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -311,7 +311,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
|
|||
}
|
||||
|
||||
const getClassName = () => {
|
||||
const className = clsx('z-[1001] bg-white py-1 shadow-lg ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', {
|
||||
const className = clsx('black:bg-black no-reduce-motion:transition-all dark:ring-primary-700 z-[1001] bg-white py-1 shadow-lg ease-in-out focus:outline-none dark:bg-gray-900 dark:ring-2', {
|
||||
'rounded-md min-w-56 max-w-sm duration-100': true,
|
||||
'no-reduce-motion:scale-0': !(isDisplayed && isOpen),
|
||||
'scale-100': isDisplayed && isOpen,
|
||||
|
|
@ -371,7 +371,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
|
|||
<div
|
||||
ref={arrowRef}
|
||||
style={arrowProps}
|
||||
className='pointer-events-none absolute z-[-1] size-3 bg-white black:bg-black dark:bg-gray-900'
|
||||
className='black:bg-black pointer-events-none absolute z-[-1] size-3 bg-white dark:bg-gray-900'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,11 +54,11 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
|
|||
));
|
||||
|
||||
return (
|
||||
<div className={clsx('relative w-full overflow-hidden rounded-lg bg-gray-100 black:border black:border-gray-800 black:bg-black dark:bg-primary-800', className)}>
|
||||
<div className={clsx('black:border black:border-gray-800 black:bg-black dark:bg-primary-800 relative w-full overflow-hidden rounded-lg bg-gray-100', className)}>
|
||||
<div className='absolute right-3 top-28'>
|
||||
{floatingAction && action}
|
||||
</div>
|
||||
<div className='h-40 bg-primary-200 dark:bg-gray-600'>
|
||||
<div className='bg-primary-200 h-40 dark:bg-gray-600'>
|
||||
{banner && <img className='size-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
|
||||
</div>
|
||||
<Stack className='p-2.5' space={2}>
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@ interface IGroupCard {
|
|||
|
||||
const GroupCard: React.FC<IGroupCard> = ({ group }) => (
|
||||
<Stack
|
||||
className='relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white black:bg-black dark:border-primary-800 dark:bg-primary-900'
|
||||
className='black:bg-black dark:border-primary-800 dark:bg-primary-900 relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white'
|
||||
data-testid='group-card'
|
||||
>
|
||||
{/* Group Cover Image */}
|
||||
<Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
|
||||
<Stack grow className='bg-primary-100 relative basis-1/2 rounded-t-lg dark:bg-gray-800'>
|
||||
<GroupHeaderImage
|
||||
group={group}
|
||||
className='absolute inset-0 size-full rounded-t-lg object-cover'
|
||||
|
|
|
|||
|
|
@ -51,11 +51,11 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
|
|||
content={
|
||||
<Stack space={4} className='w-80 pb-4'>
|
||||
<Stack
|
||||
className='relative h-60 rounded-lg bg-white black:bg-white dark:border-primary-800 dark:bg-primary-900'
|
||||
className='black:bg-white dark:border-primary-800 dark:bg-primary-900 relative h-60 rounded-lg bg-white'
|
||||
data-testid='group-card'
|
||||
>
|
||||
{/* Group Cover Image */}
|
||||
<Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
|
||||
<Stack grow className='bg-primary-100 relative basis-1/2 rounded-t-lg dark:bg-gray-800'>
|
||||
{group.header && (
|
||||
<img
|
||||
className='absolute inset-0 size-full rounded-t-lg object-cover'
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const HashtagsBar: React.FC<IHashtagsBar> = ({ hashtags }) => {
|
|||
key={hashtag}
|
||||
to={`/tags/${hashtag}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className='flex items-center rounded-sm bg-gray-100 px-1.5 py-1 text-center text-xs font-medium text-primary-600 black:bg-primary-900 dark:bg-primary-700 dark:text-white'
|
||||
className='text-primary-600 black:bg-primary-900 dark:bg-primary-700 flex items-center rounded-sm bg-gray-100 px-1.5 py-1 text-center text-xs font-medium dark:text-white'
|
||||
>
|
||||
<Text size='xs' weight='semibold' theme='inherit'>
|
||||
#<span>{hashtag}</span>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
|
||||
/** Fullscreen gradient used as a backdrop to public pages. */
|
||||
const LandingGradient: React.FC = () => (
|
||||
<div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
|
||||
<div className='from-primary-50 to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50 fixed h-screen w-full bg-gradient-to-tr via-white' />
|
||||
);
|
||||
|
||||
export { LandingGradient as default };
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Link as Comp, LinkProps } from 'react-router-dom';
|
|||
const Link = (props: LinkProps) => (
|
||||
<Comp
|
||||
{...props}
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const ListItem: React.FC<IListItem> = ({ className, label, hint, children, to, h
|
|||
return null;
|
||||
}), [children, domId]);
|
||||
|
||||
const classNames = clsx('flex items-center justify-between overflow-hidden bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 first:rounded-t-lg last:rounded-b-lg dark:from-gradient-start/10 dark:to-gradient-end/10',
|
||||
const classNames = clsx('from-gradient-start/20 to-gradient-end/20 dark:from-gradient-start/10 dark:to-gradient-end/10 flex items-center justify-between overflow-hidden bg-gradient-to-r first:rounded-t-lg last:rounded-b-lg',
|
||||
className,
|
||||
{
|
||||
'px-4 py-2': size === 'md',
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled })
|
|||
<Tooltip text={`@${acct}`}>
|
||||
<Link
|
||||
to={`/@${acct}`}
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
onClick={handleClick}
|
||||
dir='ltr'
|
||||
>
|
||||
|
|
|
|||
|
|
@ -205,7 +205,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
|
|||
<div
|
||||
role='presentation'
|
||||
id='modal-overlay'
|
||||
className={clsx('fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90', {
|
||||
className={clsx('black:bg-gray-900/90 fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90', {
|
||||
'opacity-60': type === 'DROPDOWN_MENU',
|
||||
})}
|
||||
onClick={handleOnClose}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const Navlinks: React.FC<INavlinks> = ({ type }) => {
|
|||
|
||||
return (
|
||||
<div key={idx} className='px-5 py-2'>
|
||||
<Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
|
||||
<Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'>
|
||||
<Text tag='span' theme='inherit' size='sm'>
|
||||
{link.titleLocales[locale] || link.title}
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ function parseContent({ html, mentions, hasQuote, emojis }: IParsedContent, extr
|
|||
<HoverAccountWrapper accountId={mention.id} element='span'>
|
||||
<Link
|
||||
to={`/@${mention.acct}`}
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
dir='ltr'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
|
|||
<Link to={to} className='group' data-testid='pending-items-row'>
|
||||
<HStack alignItems='center' justifyContent='between'>
|
||||
<HStack alignItems='center' space={2}>
|
||||
<div className={clsx('rounded-full bg-primary-200 text-primary-500 dark:bg-primary-800 dark:text-primary-200', {
|
||||
<div className={clsx('bg-primary-200 text-primary-500 dark:bg-primary-800 dark:text-primary-200 rounded-full', {
|
||||
'p-3': size === 'lg',
|
||||
'p-2.5': size === 'md',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const PollPercentageBar: React.FC<{ percent: number; leading: boolean }> = ({ pe
|
|||
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
|
||||
{({ width }) => (
|
||||
<span
|
||||
className='absolute inset-0 inline-block h-full rounded-l-md bg-primary-100 dark:bg-primary-500'
|
||||
className='bg-primary-100 dark:bg-primary-500 absolute inset-0 inline-block h-full rounded-l-md'
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -45,7 +45,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
return (
|
||||
<label
|
||||
className={
|
||||
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', {
|
||||
clsx('hover:bg-primary-50 dark:bg-primary-900 dark:hover:bg-primary-800/50 relative flex cursor-pointer rounded-3xl border border-solid bg-white p-2', {
|
||||
'border-primary-600 ring-1 ring-primary-600 bg-primary-50 dark:bg-primary-800/50 dark:border-primary-300 dark:ring-primary-300': active,
|
||||
'border-primary-300 dark:border-primary-500': !active,
|
||||
})
|
||||
|
|
@ -86,7 +86,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
aria-label={option.title}
|
||||
>
|
||||
{active && (
|
||||
<Icon src={require('@tabler/icons/outline/check.svg')} className='size-4 text-white dark:text-primary-900' />
|
||||
<Icon src={require('@tabler/icons/outline/check.svg')} className='dark:text-primary-900 size-4 text-white' />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -128,7 +128,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
|
|||
<HStack
|
||||
justifyContent='between'
|
||||
alignItems='center'
|
||||
className='relative w-full overflow-hidden rounded-md bg-white p-2 dark:bg-primary-800'
|
||||
className='dark:bg-primary-800 relative w-full overflow-hidden rounded-md bg-white p-2'
|
||||
>
|
||||
<PollPercentageBar percent={percent} leading={leading} />
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
|
|||
<Icon
|
||||
src={require('@tabler/icons/outline/circle-check.svg')}
|
||||
alt={intl.formatMessage(messages.voted)}
|
||||
className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
|
||||
className='text-primary-600 dark:text-primary-800 size-4 dark:fill-white'
|
||||
/>
|
||||
) : (
|
||||
<div className='svg-icon' />
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
|
|||
checked={checked}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
className='size-4 border-gray-300 text-primary-600 focus:ring-primary-500'
|
||||
className='text-primary-600 focus:ring-primary-500 size-4 border-gray-300'
|
||||
/>
|
||||
</ListItem>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
|
|||
return (
|
||||
<div className='fixed left-1/2 top-2 z-50 -translate-x-1/2'>
|
||||
<button
|
||||
className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100'
|
||||
className='bg-primary-600 hover:bg-primary-700 flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full px-4 py-2 text-white transition-transform hover:scale-105 active:scale-100'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Icon
|
||||
|
|
|
|||
|
|
@ -62,8 +62,8 @@ interface ISidebarLink {
|
|||
const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
|
||||
const body = (
|
||||
<HStack space={2} alignItems='center'>
|
||||
<div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
|
||||
<Icon src={icon} className='size-5 text-primary-500' />
|
||||
<div className='bg-primary-50 relative inline-flex rounded-full p-2 dark:bg-gray-800'>
|
||||
<Icon src={icon} className='text-primary-500 size-5' />
|
||||
</div>
|
||||
|
||||
<Text tag='span' weight='medium' theme='inherit'>{text}</Text>
|
||||
|
|
@ -187,7 +187,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
onTouchEnd={handleTouchEnd}
|
||||
>
|
||||
<div
|
||||
className={clsx('fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
|
||||
className={clsx('black:bg-gray-900 no-reduce-motion:transition-opacity fixed inset-0 cursor-default bg-gray-500 dark:bg-gray-700', {
|
||||
'no-reduce-motion:opacity-0': !(sidebarVisible && isSidebarOpen),
|
||||
'opacity-40': (sidebarVisible && isSidebarOpen),
|
||||
})}
|
||||
|
|
@ -197,7 +197,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
|
||||
<div
|
||||
className={
|
||||
clsx('fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white shadow-lg ease-in-out black:bg-black no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900 dark:shadow-none rtl:right-2 rtl:origin-bottom-right', {
|
||||
clsx('black:bg-black no-reduce-motion:transition-transform dark:bg-primary-900 fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white shadow-lg ease-in-out rtl:right-2 rtl:origin-bottom-right dark:border dark:border-gray-800 dark:shadow-none', {
|
||||
'scale-100': sidebarVisible && isSidebarOpen,
|
||||
'no-reduce-motion:scale-0': !(sidebarVisible && isSidebarOpen),
|
||||
})
|
||||
|
|
@ -419,11 +419,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
</button>
|
||||
|
||||
{switcher && (
|
||||
<div className='border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800'>
|
||||
<div className='black:border-t border-t-2 border-solid border-gray-100 dark:border-gray-800'>
|
||||
{otherAccounts.map(account => renderAccount(account))}
|
||||
|
||||
<NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
|
||||
<Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
|
||||
<Icon className='text-primary-500 size-4' src={require('@tabler/icons/outline/plus.svg')} />
|
||||
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
|
|||
};
|
||||
|
||||
const fallback = (
|
||||
<div className='flex h-screen flex-col bg-white pb-12 pt-16 black:bg-black dark:bg-primary-900'>
|
||||
<div className='black:bg-black dark:bg-primary-900 flex h-screen flex-col bg-white pb-12 pt-16'>
|
||||
<main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
|
||||
{logoSrc && (
|
||||
<div className='flex shrink-0 justify-center'>
|
||||
|
|
@ -91,7 +91,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
|
|||
|
||||
<div className='py-8'>
|
||||
<div className='mx-auto max-w-xl space-y-2 text-center'>
|
||||
<h1 className='text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-500 sm:text-4xl'>
|
||||
<h1 className='text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-500'>
|
||||
<FormattedMessage id='alert.unexpected.message' defaultMessage='Something went wrong.' />
|
||||
</h1>
|
||||
<p className='text-lg text-gray-700 dark:text-gray-600'>
|
||||
|
|
@ -100,7 +100,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
|
|||
defaultMessage="We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out)."
|
||||
values={{
|
||||
clearCookies: (
|
||||
<a href='/' onClick={clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
|
||||
<a href='/' onClick={clearCookies} className='text-primary-600 dark:text-accent-blue hover:underline'>
|
||||
<FormattedMessage
|
||||
id='alert.unexpected.clear_cookies'
|
||||
defaultMessage='clear cookies and browser data'
|
||||
|
|
@ -118,7 +118,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
|
|||
</Text>
|
||||
|
||||
<div className='mt-10'>
|
||||
<a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
|
||||
<a href='/' className='text-primary-600 dark:text-accent-blue text-base font-medium hover:underline'>
|
||||
<FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
|
||||
{' '}
|
||||
<span className='inline-block rtl:rotate-180' aria-hidden='true'>→</span>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
|
|||
type='button'
|
||||
className={clsx(
|
||||
'-m-1 flex items-center rounded-full p-2 rtl:space-x-reverse',
|
||||
'transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0',
|
||||
'focus:ring-primary-500 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0',
|
||||
{
|
||||
'text-gray-600 hover:text-gray-800 dark:hover:text-white bg-transparent hover:bg-primary-100 dark:hover:bg-primary-800 black:hover:bg-gray-800': theme === 'default',
|
||||
'text-white/80 hover:text-white bg-transparent dark:bg-transparent': theme === 'inverse',
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
|
|||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<Card className='relative overflow-hidden black:rounded-xl black:border black:border-gray-800'>
|
||||
<Card className='black:rounded-xl black:border black:border-gray-800 relative overflow-hidden'>
|
||||
<CardBody>
|
||||
{renderStatus(statusId)}
|
||||
</CardBody>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
|
|||
<HoverAccountWrapper accountId={accountId} element='span'>
|
||||
<Link
|
||||
to={`/@${account.acct}`}
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
dir='ltr'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ const StatusReactionsBar: React.FC<IStatusReactionsBar> = ({ status, collapsed }
|
|||
{me && (
|
||||
<EmojiPickerDropdown onPickEmoji={handlePickEmoji}>
|
||||
<button
|
||||
className='emoji-picker-dropdown cursor-pointer rounded-md border border-gray-400 bg-transparent p-1.5 transition-colors hover:bg-gray-50 black:border-primary-800 black:bg-primary-800 hover:black:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 hover:dark:border-primary-600 hover:dark:bg-primary-600'
|
||||
className='emoji-picker-dropdown black:border-primary-800 black:bg-primary-800 hover:black:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 hover:dark:border-primary-600 hover:dark:bg-primary-600 cursor-pointer rounded-md border border-gray-400 bg-transparent p-1.5 transition-colors hover:bg-gray-50'
|
||||
title={intl.formatMessage(messages.addEmoji)}
|
||||
>
|
||||
<Icon
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
|
|||
<Link
|
||||
key={account.id}
|
||||
to={`/@${account.acct}`}
|
||||
className='inline-block max-w-[200px] truncate align-bottom text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
|
||||
className='text-primary-600 hover:text-primary-700 dark:text-accent-blue dark:hover:text-accent-blue inline-block max-w-[200px] truncate align-bottom no-underline [direction:ltr] hover:underline'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
@{account.username}
|
||||
|
|
|
|||
|
|
@ -273,7 +273,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
return (
|
||||
<StatusInfo
|
||||
avatarSize={avatarSize}
|
||||
icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
|
||||
icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='text-primary-600 dark:text-accent-blue size-4' />}
|
||||
text={
|
||||
<FormattedMessage
|
||||
id='status.group'
|
||||
|
|
@ -314,7 +314,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
<Text theme='muted'>
|
||||
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
|
||||
{' '}
|
||||
<button className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleUnfilter}>
|
||||
<button className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleUnfilter}>
|
||||
<FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
|
||||
</button>
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const StatusInfo = (props: IStatusInfo) => {
|
|||
<HStack
|
||||
space={3}
|
||||
alignItems='center'
|
||||
className='cursor-default text-xs font-medium text-gray-700 dark:text-gray-600 rtl:space-x-reverse'
|
||||
className='cursor-default text-xs font-medium text-gray-700 rtl:space-x-reverse dark:text-gray-600'
|
||||
>
|
||||
<div
|
||||
className='flex justify-end'
|
||||
|
|
|
|||
|
|
@ -58,13 +58,13 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
|
|||
>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/square-rounded-plus.svg')}
|
||||
className='size-6 text-gray-600 black:text-white'
|
||||
className='black:text-white size-6 text-gray-600'
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden'>
|
||||
<div className='black:bg-black/80 dark:bg-primary-900/90 fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md lg:hidden dark:border-gray-800'>
|
||||
<button
|
||||
className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600'
|
||||
onClick={openSidebar}
|
||||
|
|
@ -72,7 +72,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
|
|||
>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/menu-2.svg')}
|
||||
className='size-5 text-gray-600 black:text-white'
|
||||
className='black:text-white size-5 text-gray-600'
|
||||
/>
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const TrendingLink: React.FC<ITrendingLink> = ({ trendingLink }) => {
|
|||
|
||||
return (
|
||||
<a
|
||||
className='flex cursor-pointer gap-4 overflow-hidden rounded-lg border border-solid border-gray-200 p-4 text-sm text-gray-800 no-underline hover:bg-gray-100 hover:no-underline dark:border-gray-800 dark:text-gray-200 dark:hover:bg-primary-800/30'
|
||||
className='dark:hover:bg-primary-800/30 flex cursor-pointer gap-4 overflow-hidden rounded-lg border border-solid border-gray-200 p-4 text-sm text-gray-800 no-underline hover:bg-gray-100 hover:no-underline dark:border-gray-800 dark:text-gray-200'
|
||||
href={trendingLink.url}
|
||||
target='_blank'
|
||||
rel='noopener'
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
|
||||
<div className='dark:bg-primary-800 rounded-lg bg-white text-gray-900 shadow dark:text-gray-100 dark:shadow-none'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={handleToggle}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
|
|||
const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
|
||||
|
||||
return (
|
||||
<Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
|
||||
<Comp {...backAttributes} className='focus:ring-primary-500 rounded-full text-gray-900 focus:ring-2 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
|
||||
<SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
|
||||
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
|
||||
</Comp>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => (
|
|||
{...props}
|
||||
ref={ref}
|
||||
type='checkbox'
|
||||
className='size-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
|
||||
className='text-primary-600 focus:ring-primary-500 black:bg-black size-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900'
|
||||
/>
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface ICounter {
|
|||
|
||||
/** A simple counter for notifications, etc. */
|
||||
const Counter: React.FC<ICounter> = ({ count, countMax }) => (
|
||||
<span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
|
||||
<span className='bg-secondary-500 black:ring-black flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'>
|
||||
<AnimatedNumber value={count} max={countMax} />
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ interface IDivider {
|
|||
const Divider = ({ text, textSize = 'md' }: IDivider) => (
|
||||
<div className='relative' data-testid='divider'>
|
||||
<div className='absolute inset-0 flex items-center' aria-hidden='true'>
|
||||
<div className='w-full border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800' />
|
||||
<div className='black:border-t w-full border-t-2 border-solid border-gray-100 dark:border-gray-800' />
|
||||
</div>
|
||||
|
||||
{text && (
|
||||
<div className='relative flex justify-center'>
|
||||
<span className='bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
|
||||
<span className='black:bg-black bg-white px-2 text-gray-700 dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
|
||||
<Text size={textSize} tag='span' theme='inherit'>{text}</Text>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
<div>
|
||||
<p
|
||||
data-testid='form-group-error'
|
||||
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
|
||||
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
|
||||
>
|
||||
{errors.join(', ')}
|
||||
</p>
|
||||
|
|
@ -100,7 +100,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
{hasError && (
|
||||
<p
|
||||
data-testid='form-group-error'
|
||||
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
|
||||
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
|
||||
>
|
||||
{errors.join(', ')}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
|
|||
<Component
|
||||
ref={ref}
|
||||
type='button'
|
||||
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', {
|
||||
className={clsx('focus:ring-primary-500 flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0', {
|
||||
'bg-white dark:bg-transparent': theme === 'seamless',
|
||||
'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',
|
||||
'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200': theme === 'secondary',
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@ interface IInlineMultiselect<T extends string> {
|
|||
|
||||
/** Allows to select many of available options. */
|
||||
const InlineMultiselect = <T extends string>({ items, value, onChange, disabled }: IInlineMultiselect<T>) => (
|
||||
<div className='flex w-fit overflow-auto rounded-md border border-gray-400 bg-white black:bg-black dark:border-gray-800 dark:bg-gray-900'>
|
||||
<div className='black:bg-black flex w-fit overflow-auto rounded-md border border-gray-400 bg-white dark:border-gray-800 dark:bg-gray-900'>
|
||||
{Object.entries(items).map(([key, label], i) => {
|
||||
const checked = value?.includes(key as T);
|
||||
|
||||
return (
|
||||
<label
|
||||
className={clsx('whitespace-nowrap px-3 py-2 text-white transition-colors hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700', {
|
||||
className={clsx('hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700 whitespace-nowrap px-3 py-2 text-white transition-colors', {
|
||||
'cursor-pointer': !disabled,
|
||||
'opacity-75': disabled,
|
||||
'bg-gray-500': !checked,
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
|||
{...filteredProps}
|
||||
type={revealed ? 'text' : type}
|
||||
ref={ref}
|
||||
className={clsx('block w-full text-base placeholder:text-gray-600 focus:border-primary-500 dark:placeholder:text-gray-600 dark:focus:border-primary-500 sm:text-sm', {
|
||||
className={clsx('focus:border-primary-500 dark:focus:border-primary-500 block w-full text-base placeholder:text-gray-600 sm:text-sm dark:placeholder:text-gray-600', {
|
||||
'ring-1 focus:ring-primary-500 dark:ring-gray-800 dark:focus:ring-primary-500': ['search', 'normal'].includes(theme),
|
||||
'px-0 border-none !ring-0': theme === 'transparent',
|
||||
'text-gray-900 dark:text-gray-100': !props.disabled,
|
||||
|
|
@ -120,7 +120,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
|
|||
type='button'
|
||||
onClick={togglePassword}
|
||||
tabIndex={-1}
|
||||
className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
|
||||
className='focus:ring-primary-500 h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 dark:text-gray-600 dark:hover:text-gray-400'
|
||||
>
|
||||
<SvgIcon
|
||||
src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ interface LayoutComponent extends React.FC<ILayout> {
|
|||
|
||||
/** Layout container, to hold Sidebar, Main, and Aside. */
|
||||
const Layout: LayoutComponent = ({ children }) => (
|
||||
<div className='relative flex grow flex-col black:pt-0 sm:pt-4'>
|
||||
<div className='black:pt-0 relative flex grow flex-col sm:pt-4'>
|
||||
<div className='mx-auto w-full max-w-3xl grow sm:px-6 md:grid md:max-w-7xl md:grid-cols-12 md:gap-8 md:px-8 xl:max-w-[1440px]'>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -100,13 +100,13 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
|
|||
<div
|
||||
ref={ref}
|
||||
data-testid='modal'
|
||||
className={clsx(className, 'pointer-events-auto relative mx-auto flex max-h-[90vh] w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out black:bg-black dark:bg-primary-900 dark:text-gray-100 md:max-h-[80vh]', widths[width], {
|
||||
className={clsx(className, 'black:bg-black dark:bg-primary-900 pointer-events-auto relative mx-auto flex max-h-[90vh] w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out md:max-h-[80vh] dark:text-gray-100', widths[width], {
|
||||
'bottom-0': !firstRender,
|
||||
'no-reduce-motion:-bottom-32': firstRender,
|
||||
})}
|
||||
>
|
||||
{title && (
|
||||
<div className='sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur black:bg-black/80 dark:bg-primary-900/75'>
|
||||
<div className='black:bg-black/80 dark:bg-primary-900/75 sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur'>
|
||||
<div
|
||||
className={clsx('flex w-full items-center gap-2', {
|
||||
'flex-row-reverse': closePosition === 'left',
|
||||
|
|
@ -117,7 +117,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
|
|||
src={require('@tabler/icons/outline/arrow-left.svg')}
|
||||
title={intl.formatMessage(messages.back)}
|
||||
onClick={onBack}
|
||||
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
|
||||
className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -130,7 +130,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
|
|||
src={closeIcon}
|
||||
title={intl.formatMessage(messages.close)}
|
||||
onClick={onClose}
|
||||
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
|
||||
className='text-gray-500 hover:text-gray-700 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
|
|||
<div
|
||||
className={
|
||||
clsx(
|
||||
'overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
|
||||
'dark:ring-primary-700 overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2',
|
||||
{ 'p-6': !isFlush },
|
||||
)
|
||||
}
|
||||
|
|
@ -119,7 +119,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
|
|||
<FloatingArrow
|
||||
ref={arrowRef}
|
||||
context={context}
|
||||
className='fill-white dark:fill-primary-700'
|
||||
className='dark:fill-primary-700 fill-white'
|
||||
tipRadius={3}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ interface IProgressBar {
|
|||
/** A horizontal meter filled to the given percentage. */
|
||||
const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => (
|
||||
<div
|
||||
className={clsx('h-2.5 w-full overflow-hidden rounded-lg bg-gray-300 dark:bg-primary-800', {
|
||||
className={clsx('dark:bg-primary-800 h-2.5 w-full overflow-hidden rounded-lg bg-gray-300', {
|
||||
'h-2.5': size === 'md',
|
||||
'h-[6px]': size === 'sm',
|
||||
})}
|
||||
|
|
@ -22,7 +22,7 @@ const ProgressBar: React.FC<IProgressBar> = ({ progress, size = 'md' }) => (
|
|||
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress * 100) }}>
|
||||
{({ width }) => (
|
||||
<div
|
||||
className='h-full bg-secondary-500'
|
||||
className='bg-secondary-500 h-full'
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
|
|||
<select
|
||||
ref={ref}
|
||||
className={clsx(
|
||||
'truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm',
|
||||
'focus:border-primary-500 focus:ring-primary-500 black:bg-black dark:focus:border-primary-500 dark:focus:ring-primary-500 truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none disabled:opacity-50 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800',
|
||||
className,
|
||||
{
|
||||
'w-full': full,
|
||||
|
|
|
|||
|
|
@ -57,10 +57,10 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
|
|||
onMouseDown={handleMouseDown}
|
||||
ref={node}
|
||||
>
|
||||
<div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
|
||||
<div className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
|
||||
<div className='bg-primary-200 dark:bg-primary-700 absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full' />
|
||||
<div className='bg-accent-500 absolute top-1/2 h-1 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
|
||||
<span
|
||||
className='absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
|
||||
className='bg-accent-500 absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full shadow'
|
||||
tabIndex={0}
|
||||
style={{ left: `${value * 100}%` }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
|
|||
ref={ref}
|
||||
>
|
||||
<div
|
||||
className='absolute h-[3px] w-full bg-primary-200 dark:bg-gray-800'
|
||||
className='bg-primary-200 absolute h-[3px] w-full dark:bg-gray-800'
|
||||
style={{ top }}
|
||||
/>
|
||||
<div
|
||||
className={clsx('absolute h-[3px] bg-primary-500 transition-all duration-200', {
|
||||
className={clsx('bg-primary-500 absolute h-[3px] transition-all duration-200', {
|
||||
'hidden': top <= 0,
|
||||
})}
|
||||
style={{ left, top, width }}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
|
|||
return (
|
||||
<div className='relative mt-1 grow shadow-sm'>
|
||||
<HStack
|
||||
className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
|
||||
className='focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600'
|
||||
space={2}
|
||||
wrap
|
||||
>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ interface ITag {
|
|||
|
||||
/** A single editable Tag (used by TagInput). */
|
||||
const Tag: React.FC<ITag> = ({ tag, onDelete }) => (
|
||||
<div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
|
||||
<div className='bg-primary-500 inline-flex items-center whitespace-nowrap rounded p-1'>
|
||||
<Text theme='white'>{tag}</Text>
|
||||
|
||||
<IconButton
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ const Textarea = React.forwardRef(({
|
|||
ref={ref}
|
||||
rows={rows}
|
||||
onChange={handleChange}
|
||||
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', {
|
||||
className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 sm:text-sm dark:text-gray-100 dark:placeholder:text-gray-600', {
|
||||
'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',
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/circle-check.svg')}
|
||||
className='size-6 text-success-500 dark:text-success-400'
|
||||
className='text-success-500 dark:text-success-400 size-6'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -51,7 +51,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/info-circle.svg')}
|
||||
className='size-6 text-primary-600 dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue size-6'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -59,7 +59,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/alert-circle.svg')}
|
||||
className='size-6 text-danger-600'
|
||||
className='text-danger-600 size-6'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -138,7 +138,7 @@ const Toast = (props: IToast) => {
|
|||
<div className='flex shrink-0 pt-0.5'>
|
||||
<button
|
||||
type='button'
|
||||
className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
|
||||
className='focus:ring-primary-500 inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
|
||||
onClick={dismissToast}
|
||||
data-testid='toast-dismiss'
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked = false, onC
|
|||
|
||||
return (
|
||||
<button
|
||||
className={clsx('flex-none rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500', {
|
||||
className={clsx('focus:ring-primary-500 dark:focus:ring-primary-500 flex-none rounded-full focus:ring-2 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0', {
|
||||
'bg-gray-500': !checked && !disabled,
|
||||
'bg-primary-600': checked && !disabled,
|
||||
'bg-gray-200': !checked && disabled,
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const Widget: React.FC<IWidget> = ({
|
|||
{title && <WidgetTitle title={title} />}
|
||||
{action || (onActionClick && (
|
||||
<IconButton
|
||||
className='ml-2 size-6 text-black dark:text-white rtl:rotate-180'
|
||||
className='ml-2 size-6 text-black rtl:rotate-180 dark:text-white'
|
||||
src={actionIcon}
|
||||
onClick={onActionClick}
|
||||
title={actionTitle}
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
|
|||
const Element = icon.endsWith('.svg') ? Icon : 'img';
|
||||
|
||||
return (
|
||||
<span className='rounded-full bg-accent-500' data-testid='verified-badge'>
|
||||
<Element className={clsx('size-[16px] rounded-full bg-accent-500 stroke-[4] p-px text-white', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
|
||||
<span className='bg-accent-500 rounded-full' data-testid='verified-badge'>
|
||||
<Element className={clsx('bg-accent-500 size-[16px] rounded-full stroke-[4] p-px text-white', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const AboutPage: React.FC = () => {
|
|||
return (
|
||||
<div>
|
||||
<Card variant='rounded'>
|
||||
<div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
|
||||
<div className='prose dark:prose-invert mx-auto py-4 sm:p-6'>
|
||||
{pageHtml && <div dangerouslySetInnerHTML={{ __html: pageHtml }} />}
|
||||
{alsoAvailable}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
|
|||
<HStack className='mb-2' alignItems='center' space={1.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/briefcase.svg')}
|
||||
className='flex-none text-primary-600 dark:text-primary-400'
|
||||
className='text-primary-600 dark:text-primary-400 flex-none'
|
||||
/>
|
||||
|
||||
<div className='truncate'>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
|
|||
return (
|
||||
<div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
|
||||
<div>
|
||||
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
|
||||
<div className='black:rounded-t-none relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
|
||||
</div>
|
||||
|
||||
<div className='px-4 sm:px-6'>
|
||||
|
|
@ -634,7 +634,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
|
|||
)}
|
||||
|
||||
<div>
|
||||
<div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
|
||||
<div className='black:rounded-t-none relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
|
||||
{renderHeader()}
|
||||
|
||||
<div className='absolute left-2 top-2'>
|
||||
|
|
@ -653,12 +653,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
|
|||
src={account.avatar}
|
||||
alt={account.avatar_description}
|
||||
size={96}
|
||||
className='relative size-24 rounded-lg bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
|
||||
className='black:ring-black dark:bg-primary-900 dark:ring-primary-900 relative size-24 rounded-lg bg-white ring-4 ring-white'
|
||||
/>
|
||||
</a>
|
||||
{account.verified && (
|
||||
<div className='absolute -bottom-2 -right-2'>
|
||||
<VerificationBadge className='!size-[24px] rounded-full !p-[2px] ring-2 ring-white black:ring-black dark:ring-primary-900' />
|
||||
<VerificationBadge className='black:ring-black dark:ring-primary-900 !size-[24px] rounded-full !p-[2px] ring-2 ring-white' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div key={announcement.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<div key={announcement.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<Stack space={2}>
|
||||
<Text>
|
||||
<ParsedContent html={announcement.content} emojis={announcement.emojis} />
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ const Report: React.FC<IReport> = ({ id }) => {
|
|||
<Link
|
||||
to={`/@${reporterAcct}`}
|
||||
title={reporterAcct}
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
>
|
||||
@{reporterAcct}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
|
|||
}) : undefined;
|
||||
|
||||
return (
|
||||
<div key={domain.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<div key={domain.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<Stack space={2}>
|
||||
<HStack alignItems='center' space={4} wrap>
|
||||
<Text size='sm'>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const Relay: React.FC<IRelay> = ({ relay }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div key={relay.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<div key={relay.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<Stack space={2}>
|
||||
<HStack alignItems='center' space={4} wrap>
|
||||
<Text size='sm'>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const Rule: React.FC<IRule> = ({ rule }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div key={rule.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<div key={rule.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<Stack space={2}>
|
||||
<Text>{rule.text}</Text>
|
||||
<Text tag='span' theme='muted' size='sm'>{rule.hint}</Text>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const Search: React.FC = () => {
|
|||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
|
||||
|
||||
<input
|
||||
className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
|
||||
className='focus:border-primary-500 focus:ring-primary-500 block w-full rounded-full sm:text-sm dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500'
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
|
|
|
|||
|
|
@ -466,7 +466,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
<img
|
||||
src={poster}
|
||||
alt=''
|
||||
className='pointer-events-none absolute aspect-1 -translate-x-1/2 -translate-y-1/2 rounded-full object-cover'
|
||||
className='aspect-1 pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full object-cover'
|
||||
width={(_getRadius() - TICK_SIZE) * 2}
|
||||
height={(_getRadius() - TICK_SIZE) * 2}
|
||||
style={{
|
||||
|
|
@ -481,7 +481,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
<div className='absolute top-0 block h-1 rounded bg-white/20' style={{ width: `${buffer}%` }} />
|
||||
|
||||
<div
|
||||
className='absolute top-0 block h-1 rounded bg-accent-500'
|
||||
className='bg-accent-500 absolute top-0 block h-1 rounded'
|
||||
style={{ width: `${progress}%`, backgroundColor: accentColor }}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
|
|||
|
||||
if (providers.length > 0) {
|
||||
return (
|
||||
<Card className='bg-gray-50 p-2 black:bg-black black:p-0 dark:bg-primary-800 sm:rounded-xl'>
|
||||
<Card className='black:bg-black black:p-0 dark:bg-primary-800 bg-gray-50 p-2 sm:rounded-xl'>
|
||||
<Stack space={2}>
|
||||
<Text size='xs' theme='muted'>
|
||||
<FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<div className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<Stack space={2}>
|
||||
<Stack>
|
||||
<Text size='md' weight='medium'>{token.app_name}</Text>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const Backup: React.FC<IBackup> = ({ backup }) => {
|
|||
);
|
||||
|
||||
return (
|
||||
<div key={backup.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<div key={backup.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<Stack space={2}>
|
||||
<Stack>
|
||||
<Text size='md'>
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
|
|||
|
||||
if (isBlocking) {
|
||||
return (
|
||||
<div className='mt-auto p-6 shadow-3xl dark:border-t-2 dark:border-solid dark:border-gray-800'>
|
||||
<div className='shadow-3xl mt-auto p-6 dark:border-t-2 dark:border-solid dark:border-gray-800'>
|
||||
<Stack space={3} alignItems='center'>
|
||||
<Text align='center' theme='muted'>
|
||||
{intl.formatMessage(messages.blocked)}
|
||||
|
|
@ -171,7 +171,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='mt-auto px-4 shadow-3xl'>
|
||||
<div className='shadow-3xl mt-auto px-4'>
|
||||
{/* Spacer */}
|
||||
<div className='h-5' />
|
||||
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
|
|||
key={chat.id}
|
||||
onClick={() => onClick(chat)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className='group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800'
|
||||
className='focus:shadow-inset-ring group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 dark:hover:bg-gray-800'
|
||||
data-testid='chat-list-item'
|
||||
tabIndex={0}
|
||||
>
|
||||
|
|
@ -152,7 +152,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
|
|||
<>
|
||||
{chat.last_message.unread && (
|
||||
<div
|
||||
className='size-2 rounded-full bg-secondary-500'
|
||||
className='bg-secondary-500 size-2 rounded-full'
|
||||
data-testid='chat-unread-indicator'
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, parentRef, topOffset }) =>
|
|||
|
||||
</div>
|
||||
<div
|
||||
className={clsx('pointer-events-none absolute inset-x-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 black:from-black dark:from-gray-900', {
|
||||
className={clsx('black:from-black pointer-events-none absolute inset-x-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 black:opacity-50': !isNearTop,
|
||||
})}
|
||||
|
|
@ -79,7 +79,7 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, parentRef, topOffset }) =>
|
|||
}}
|
||||
/>
|
||||
<div
|
||||
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 pb-8 pt-12 transition-opacity duration-500 black:from-black dark:from-gray-900', {
|
||||
className={clsx('black:from-black pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 dark:from-gray-900', {
|
||||
'opacity-0': isNearBottom,
|
||||
'opacity-100 black:opacity-50': !isNearBottom,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -55,14 +55,14 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
|
|||
<div
|
||||
ref={containerRef}
|
||||
style={{ height }}
|
||||
className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg black:bg-transparent dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
|
||||
className='black:bg-transparent dark:bg-primary-900 h-screen overflow-hidden bg-white text-gray-900 shadow-lg sm:rounded-t-xl dark:text-gray-100 dark:shadow-none'
|
||||
>
|
||||
<div
|
||||
className='grid h-full grid-cols-9 overflow-hidden dark:divide-solid dark:divide-gray-800 sm:black:divide-x sm:dark:divide-x-2'
|
||||
className='sm:black:divide-x grid h-full grid-cols-9 overflow-hidden dark:divide-solid dark:divide-gray-800 sm:dark:divide-x-2'
|
||||
data-testid='chat-page'
|
||||
>
|
||||
<Stack
|
||||
className={clsx('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 black:bg-black dark:bg-gray-900 dark:bg-none sm:col-span-3', {
|
||||
className={clsx('dark:inset black:bg-black col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 sm:col-span-3 dark:bg-gray-900 dark:bg-none', {
|
||||
'hidden sm:block': isSidebarHidden,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface IChatPendingUpload {
|
|||
|
||||
/** Displays a loading thumbnail for an upload in the chat composer. */
|
||||
const ChatPendingUpload: React.FC<IChatPendingUpload> = ({ progress }) => (
|
||||
<div className='relative isolate inline-flex size-24 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-primary-900'>
|
||||
<div className='dark:bg-primary-900 relative isolate inline-flex size-24 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-4'>
|
||||
<ProgressBar progress={progress} size='sm' />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -73,13 +73,13 @@ const Results = ({ accountSearchResult, onSelect, parentRef }: IResults) => {
|
|||
</ScrollableList>
|
||||
|
||||
<div
|
||||
className={clsx('pointer-events-none absolute inset-x-0 top-[58px] flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 black:from-black dark:from-gray-900', {
|
||||
className={clsx('black:from-black pointer-events-none absolute inset-x-0 top-[58px] 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={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 black:from-black dark:from-gray-900', {
|
||||
className={clsx('black:from-black pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 dark:from-gray-900', {
|
||||
'opacity-0': isNearBottom,
|
||||
'opacity-100': !isNearBottom,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -24,15 +24,15 @@ const ChatTextarea = React.forwardRef<HTMLTextAreaElement, IChatTextarea>(({
|
|||
...rest
|
||||
}, ref) => (
|
||||
<div className={`
|
||||
block
|
||||
w-full
|
||||
rounded-md border border-gray-400
|
||||
bg-white text-gray-900
|
||||
shadow-sm placeholder:text-gray-600
|
||||
focus-within:border-primary-500
|
||||
focus-within:ring-1 focus-within:ring-primary-500 dark:border-gray-800 dark:bg-gray-800
|
||||
dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500
|
||||
dark:focus-within:ring-primary-500 sm:text-sm
|
||||
focus-within:ring-primary-500
|
||||
dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 block
|
||||
w-full rounded-md
|
||||
border border-gray-400
|
||||
bg-white
|
||||
text-gray-900 shadow-sm placeholder:text-gray-600 focus-within:ring-1
|
||||
sm:text-sm dark:border-gray-800 dark:bg-gray-800 dark:text-gray-100 dark:ring-1
|
||||
dark:ring-gray-800 dark:placeholder:text-gray-600
|
||||
`}
|
||||
>
|
||||
{(attachment || uploading) && (
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='relative isolate inline-block size-24 overflow-hidden rounded-lg bg-gray-200 dark:bg-primary-900'>
|
||||
<div className='dark:bg-primary-900 relative isolate inline-block size-24 overflow-hidden rounded-lg bg-gray-200'>
|
||||
<Blurhash hash={attachment.blurhash} className='absolute inset-0 -z-10 size-full' />
|
||||
|
||||
<div className='absolute right-[6px] top-[6px]'>
|
||||
|
|
@ -50,7 +50,7 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => (
|
|||
<button
|
||||
type='button'
|
||||
onClick={onClick}
|
||||
className='flex size-5 items-center justify-center rounded-full bg-secondary-500 p-1'
|
||||
className='bg-secondary-500 flex size-5 items-center justify-center rounded-full p-1'
|
||||
>
|
||||
<Icon
|
||||
className='size-3 text-white'
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
|
|||
({unreadCount})
|
||||
</Text>
|
||||
|
||||
<div className='size-2.5 rounded-full bg-accent-300' />
|
||||
<div className='bg-accent-300 size-2.5 rounded-full' />
|
||||
</HStack>
|
||||
)}
|
||||
</ButtonComp>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const ChatSettings = () => {
|
|||
<button onClick={closeSettings}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/arrow-left.svg')}
|
||||
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
|
||||
className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
|
||||
/>
|
||||
</button>
|
||||
|
||||
|
|
@ -121,13 +121,13 @@ const ChatSettings = () => {
|
|||
</HStack>
|
||||
|
||||
<Stack space={5}>
|
||||
<button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
|
||||
<button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='text-primary-600 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'>
|
||||
<Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
|
||||
<span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
|
||||
</button>
|
||||
|
||||
{features.chatsDelete && (
|
||||
<button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
|
||||
<button onClick={handleLeaveChat} className='text-danger-600 flex w-full items-center space-x-2 text-sm font-bold'>
|
||||
<Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
|
||||
<span>{intl.formatMessage(messages.leaveChat)}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const ChatWindow = () => {
|
|||
<button onClick={closeChat}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/arrow-left.svg')}
|
||||
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
|
||||
className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const ChatSearchHeader = () => {
|
|||
>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/arrow-left.svg')}
|
||||
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
|
||||
className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
|
||||
/>
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface IPane {
|
|||
/** Chat pane UI component for desktop. */
|
||||
const Pane: React.FC<IPane> = ({ isOpen = false, children }) => (
|
||||
<div
|
||||
className={clsx('fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black dark:bg-gray-900 ltr:right-5 rtl:left-5', {
|
||||
className={clsx('shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white ltr:right-5 rtl:left-5 dark:bg-gray-900', {
|
||||
'h-[550px] max-h-[100vh]': isOpen,
|
||||
'h-16': !isOpen,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ const Circle: React.FC = () => {
|
|||
<FormattedMessage id='interactions_circle.confirmation_heading' defaultMessage='Do you want to generate an interaction circle for the user @{username}?' values={{ username: account?.acct }} />
|
||||
</Text>
|
||||
|
||||
<div className='mx-auto max-w-md rounded-lg p-2 black:border black:border-gray-800'>
|
||||
<div className='black:border black:border-gray-800 mx-auto max-w-md rounded-lg p-2'>
|
||||
{account && <Account account={account} withRelationship={false} disabled />}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
|
||||
<HStack className='text-primary-500 dark:text-accent-blue size-full cursor-pointer' space={3} alignItems='center' justifyContent='center' element='label'>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/photo-plus.svg')}
|
||||
className='size-7'
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
|
|||
labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
|
||||
hintText={<FormattedMessage id='compose_event.fields.banner_hint' defaultMessage='PNG, GIF or JPG. Landscape format is preferred.' />}
|
||||
>
|
||||
<div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
|
||||
<div className='dark:sm:shadow-inset bg-primary-100 text-primary-500 relative flex h-24 items-center justify-center overflow-hidden rounded-lg sm:h-32 sm:shadow dark:bg-gray-800 dark:text-white'>
|
||||
{banner ? (
|
||||
<>
|
||||
<img className='size-full object-cover' src={banner.url} alt='' />
|
||||
|
|
@ -203,7 +203,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
|
|||
>
|
||||
<ComposeEditor
|
||||
key={String(isDisabled)}
|
||||
className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
|
||||
className='focus-within:border-primary-500 focus-within:ring-primary-500 black:bg-black dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600'
|
||||
placeholderClassName='pt-2'
|
||||
composeId={composeId}
|
||||
placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
|
||||
|
|
|
|||
|
|
@ -265,7 +265,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
|||
ref={editorRef}
|
||||
className={transparent
|
||||
? ''
|
||||
: 'rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500'}
|
||||
: 'focus-within:border-primary-500 focus-within:ring-primary-500 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 rounded-md border-gray-400 px-3 py-2 ring-2 dark:border-gray-800 dark:ring-gray-800'}
|
||||
placeholderClassName={transparent ? '' : 'pt-2'}
|
||||
composeId={id}
|
||||
condensed={condensed}
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
|
|||
ref={active ? focusedItem : null}
|
||||
>
|
||||
<div
|
||||
className={clsx('flex-auto grow text-primary-600 dark:text-primary-400', {
|
||||
className={clsx('text-primary-600 dark:text-primary-400 flex-auto grow', {
|
||||
'text-black dark:text-white': modified,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
|
|||
}
|
||||
|
||||
return (
|
||||
<Stack space={2} className={clsx('max-h-72 overflow-y-auto rounded-lg bg-gray-100 p-4 black:bg-gray-900 dark:bg-gray-800', className)}>
|
||||
<Stack space={2} className={clsx('black:bg-gray-900 max-h-72 overflow-y-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800', className)}>
|
||||
<AccountContainer
|
||||
{...actions}
|
||||
id={status.account_id}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
|
|||
return (
|
||||
<span
|
||||
key={acct}
|
||||
className='inline-block text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
|
||||
className='text-primary-600 hover:text-primary-700 dark:text-accent-blue dark:hover:text-accent-blue inline-block no-underline [direction:ltr] hover:underline'
|
||||
>
|
||||
@{username}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ const FloatingLinkEditor = ({
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<a className='mr-8 block truncate text-primary-600 no-underline hover:underline dark:text-accent-blue' href={linkUrl} target='_blank' rel='noopener noreferrer'>
|
||||
<a className='text-primary-600 dark:text-accent-blue mr-8 block truncate no-underline hover:underline' href={linkUrl} target='_blank' rel='noopener noreferrer'>
|
||||
{linkUrl}
|
||||
</a>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ interface IToolbarButton extends React.HTMLAttributes<HTMLButtonElement> {
|
|||
export const ToolbarButton: React.FC<IToolbarButton> = ({ active, icon, ...props }) => (
|
||||
<button
|
||||
className={clsx(
|
||||
'flex cursor-pointer rounded-lg border-0 bg-none p-1 align-middle hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-none dark:hover:bg-primary-700',
|
||||
'dark:hover:bg-primary-700 flex cursor-pointer rounded-lg border-0 bg-none p-1 align-middle hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-none',
|
||||
{ 'bg-gray-100/30 dark:bg-gray-800/30': active },
|
||||
)}
|
||||
type='button'
|
||||
|
|
@ -185,7 +185,7 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
|
|||
<>
|
||||
<button
|
||||
onClick={() => setShowDropDown(!showDropDown)}
|
||||
className='relative flex cursor-pointer rounded-lg border-0 bg-none p-1 align-middle hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-none dark:hover:bg-primary-700'
|
||||
className='dark:hover:bg-primary-700 relative flex cursor-pointer rounded-lg border-0 bg-none p-1 align-middle hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-none'
|
||||
aria-label=''
|
||||
type='button'
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,12 @@ import HStack from 'pl-fe/components/ui/hstack';
|
|||
import Icon from 'pl-fe/components/ui/icon';
|
||||
import Stack from 'pl-fe/components/ui/stack';
|
||||
import Text from 'pl-fe/components/ui/text';
|
||||
import { CryptoIcon } from 'pl-fe/features/ui/util/async-components';
|
||||
import { useModalsStore } from 'pl-fe/stores/modals';
|
||||
|
||||
import { getExplorerUrl } from '../utils/block-explorer';
|
||||
import { getTitle } from '../utils/coin-db';
|
||||
|
||||
import CryptoIcon from './crypto-icon';
|
||||
|
||||
interface ICryptoAddress {
|
||||
address: string;
|
||||
ticker: string;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@ import React from 'react';
|
|||
|
||||
import CopyableInput from 'pl-fe/components/copyable-input';
|
||||
import Icon from 'pl-fe/components/icon';
|
||||
import { CryptoIcon } from 'pl-fe/features/ui/util/async-components';
|
||||
|
||||
import { getExplorerUrl } from '../utils/block-explorer';
|
||||
import { getTitle } from '../utils/coin-db';
|
||||
|
||||
import CryptoIcon from './crypto-icon';
|
||||
|
||||
interface IDetailedCryptoAddress {
|
||||
address: string;
|
||||
ticker: string;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
|
|||
const followedBy = me !== account.id && account.relationship?.followed_by;
|
||||
|
||||
return (
|
||||
<div className='flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow dark:divide-primary-700 dark:bg-primary-800'>
|
||||
<div className='dark:divide-primary-700 dark:bg-primary-800 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow'>
|
||||
<div className='relative'>
|
||||
{followedBy && (
|
||||
<div className='absolute left-2.5 top-2.5'>
|
||||
|
|
@ -56,7 +56,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
|
|||
<Avatar
|
||||
src={account.avatar}
|
||||
alt={account.avatar_description}
|
||||
className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900'
|
||||
className='dark:bg-primary-900 dark:ring-primary-900 !absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white'
|
||||
size={64}
|
||||
/>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
|
|||
<label
|
||||
ref={picker}
|
||||
className={clsx(
|
||||
'absolute bottom-0 left-1/2 size-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-lg bg-primary-300 ring-2',
|
||||
'bg-primary-300 absolute bottom-0 left-1/2 size-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-lg ring-2',
|
||||
{
|
||||
'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging,
|
||||
'ring-white dark:ring-primary-900': !isDraggedOver,
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
|
|||
<label
|
||||
ref={picker}
|
||||
className={clsx(
|
||||
'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow',
|
||||
'dark:sm:shadow-inset bg-primary-100 text-primary-500 dark:text-accent-blue relative h-24 w-full cursor-pointer overflow-hidden rounded-lg sm:h-36 sm:shadow dark:bg-gray-800',
|
||||
{
|
||||
'border-2 border-primary-600 border-dashed !z-[99]': isDragging,
|
||||
'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
|
|||
|
||||
return (
|
||||
<a
|
||||
className='block bg-white dark:bg-primary-900'
|
||||
className='dark:bg-primary-900 block bg-white'
|
||||
href={status?.url || '#'}
|
||||
onClick={e => e.stopPropagation()}
|
||||
target='_blank'
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
|
|||
return (
|
||||
<>
|
||||
<div className='-mx-4 -mt-4'>
|
||||
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
|
||||
<div className='black:rounded-t-none relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
|
||||
</div>
|
||||
|
||||
<PlaceholderEventHeader />
|
||||
|
|
@ -360,13 +360,13 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
|
|||
return (
|
||||
<>
|
||||
<div className='-mx-4 -mt-4'>
|
||||
<div className='relative h-32 w-full bg-gray-200 black:rounded-t-none dark:bg-gray-900/50 md:rounded-t-xl lg:h-48'>
|
||||
<div className='black:rounded-t-none relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
|
||||
{banner && (
|
||||
<a href={banner.url} onClick={handleHeaderClick} target='_blank'>
|
||||
<StillImage
|
||||
src={banner.url}
|
||||
alt={intl.formatMessage(messages.bannerHeader)}
|
||||
className='absolute inset-0 h-full object-cover black:rounded-t-none md:rounded-t-xl'
|
||||
className='black:rounded-t-none absolute inset-0 h-full object-cover md:rounded-t-xl'
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue