pl-fe: Migrate from makeGetStatus to useStatus in most cases
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
eeb1e1370c
commit
2ce2f96b16
215 changed files with 460 additions and 513 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { fetchRelationships } from 'pl-fe/actions/accounts';
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { filterBadges, getTagDiff } from 'pl-fe/utils/badges';
|
||||
|
||||
import { deleteFromTimelines } from './timelines';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import toast from 'pl-fe/toast';
|
||||
import { isLoggedIn } from 'pl-fe/utils/auth';
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
* @see module:pl-fe/actions/security
|
||||
*/
|
||||
import { credentialAccountSchema, PlApiClient, type CreateAccountParams, type Token } from 'pl-api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import { createAccount } from 'pl-fe/actions/accounts';
|
||||
|
|
@ -18,6 +17,7 @@ import { startOnboarding } from 'pl-fe/actions/onboarding';
|
|||
import { type PlfeResponse, getClient } from 'pl-fe/api';
|
||||
import * as BuildConfig from 'pl-fe/build-config';
|
||||
import { custom } from 'pl-fe/custom';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { queryClient } from 'pl-fe/queries/client';
|
||||
import { selectAccount } from 'pl-fe/selectors';
|
||||
import { unsetSentryAccount } from 'pl-fe/sentry';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import type { PaginatedResponse, Status } from 'pl-api';
|
||||
import type { AppDispatch, RootState } from 'pl-fe/store';
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import throttle from 'lodash/throttle';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { defineMessages, IntlShape } from 'react-intl';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { isNativeEmoji } from 'pl-fe/features/emoji';
|
||||
import emojiSearch from 'pl-fe/features/emoji/search';
|
||||
import { Language } from 'pl-fe/features/preferences';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { selectAccount, selectOwnAccount, makeGetAccount } from 'pl-fe/selectors';
|
||||
import { tagHistory } from 'pl-fe/settings';
|
||||
import { useModalsStore } from 'pl-fe/stores';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { isLoggedIn } from 'pl-fe/utils/auth';
|
||||
|
||||
import type { Account, Conversation, PaginatedResponse, Status } from 'pl-api';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import { fetchRelationships } from './accounts';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { isLoggedIn } from 'pl-fe/utils/auth';
|
||||
|
||||
import type { Status } from 'pl-api';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import { STATUS_FETCH_SOURCE_FAIL, STATUS_FETCH_SOURCE_REQUEST, STATUS_FETCH_SOURCE_SUCCESS } from 'pl-fe/actions/statuses';
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { useModalsStore } from 'pl-fe/stores';
|
||||
import toast from 'pl-fe/toast';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { AppDispatch, RootState } from 'pl-fe/store';
|
||||
|
||||
import { fetchRelationships } from './accounts';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { isLoggedIn } from 'pl-fe/utils/auth';
|
||||
|
||||
import type { PaginatedResponse, Status } from 'pl-api';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import type { Account, PaginatedResponse } from 'pl-api';
|
||||
import type { AppDispatch, RootState } from 'pl-fe/store';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import type { StatusEdit } from 'pl-api';
|
||||
import type { AppDispatch, RootState } from 'pl-fe/store';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { useModalsStore } from 'pl-fe/stores';
|
||||
import toast, { type IToastOptions } from 'pl-fe/toast';
|
||||
import { isLoggedIn } from 'pl-fe/utils/auth';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { selectAccount } from 'pl-fe/selectors';
|
||||
import toast from 'pl-fe/toast';
|
||||
import { isLoggedIn } from 'pl-fe/utils/auth';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { selectAccount } from 'pl-fe/selectors';
|
||||
import { setSentryAccount } from 'pl-fe/sentry';
|
||||
import KVStore from 'pl-fe/storage/kv-store';
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import IntlMessageFormat from 'intl-messageformat';
|
||||
import 'intl-pluralrules';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import { FILTER_TYPES, type FilterType } from 'pl-fe/features/notifications';
|
||||
import { getNotificationStatus } from 'pl-fe/features/notifications/components/notification';
|
||||
import { normalizeNotification } from 'pl-fe/normalizers';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { queryClient } from 'pl-fe/queries/client';
|
||||
import { getFilters, regexFromFilters } from 'pl-fe/selectors';
|
||||
import { unescapeHTML } from 'pl-fe/utils/html';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { isLoggedIn } from 'pl-fe/utils/auth';
|
||||
|
||||
import type { Status } from 'pl-api';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import type { Poll } from 'pl-api';
|
||||
import type { AppDispatch, RootState } from 'pl-fe/store';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import mapValues from 'lodash/mapValues';
|
||||
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { verifyCredentials } from './auth';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import { fetchRelationships } from './accounts';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import type { Status as BaseStatus, PaginatedResponse } from 'pl-api';
|
||||
import type { AppDispatch, RootState } from 'pl-fe/store';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { useModalsStore } from 'pl-fe/stores';
|
||||
import { isLoggedIn } from 'pl-fe/utils/auth';
|
||||
import { shouldHaveCard } from 'pl-fe/utils/status';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import { fetchRelationships } from './accounts';
|
||||
import { insertSuggestionsIntoTimeline } from './timelines';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { Map as ImmutableMap } from 'immutable';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
|
||||
import { getLocale, getSettings } from 'pl-fe/actions/settings';
|
||||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
import { shouldFilter } from 'pl-fe/utils/timelines';
|
||||
|
||||
import type { PaginatedResponse, Status as BaseStatus, PublicTimelineParams, HomeTimelineParams, ListTimelineParams, HashtagTimelineParams, GetAccountStatusesParams, GroupTimelineParams } from 'pl-api';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { getClient } from 'pl-fe/api';
|
||||
import { importEntities } from 'pl-fe/pl-hooks/importer';
|
||||
|
||||
import { getClient } from 'pl-fe/api';
|
||||
|
||||
import type { AppDispatch, RootState } from 'pl-fe/store';
|
||||
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
|
|||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<Card variant='rounded' className='black:rounded-xl black:border black:border-gray-800 relative isolate overflow-hidden'>
|
||||
<Card variant='rounded' className='relative isolate overflow-hidden black:rounded-xl black:border black:border-gray-800'>
|
||||
<CardBody>
|
||||
<Stack space={2}>
|
||||
<UserPanel
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
|
|||
|
||||
return (
|
||||
<button
|
||||
className='focus:ring-primary-500 size-4 flex-none focus:ring-2 focus:ring-offset-2'
|
||||
className='size-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const AnnouncementsPanel = () => {
|
|||
|
||||
return (
|
||||
<Widget title={<FormattedMessage id='announcements.title' defaultMessage='Announcements' />}>
|
||||
<Card className='black:rounded-xl black:border black:border-gray-800 relative' size='md' variant='rounded'>
|
||||
<Card className='relative black:rounded-xl black:border black:border-gray-800' size='md' variant='rounded'>
|
||||
<ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}>
|
||||
{announcements.map((announcement) => (
|
||||
<Announcement
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
|
|||
|
||||
return (
|
||||
<button
|
||||
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', {
|
||||
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,
|
||||
})}
|
||||
|
|
@ -57,7 +57,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='text-primary-600 block min-w-[9px] text-center text-xs font-medium dark:text-white'>
|
||||
<span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>
|
||||
<AnimatedNumber value={reaction.count} />
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import throttle from 'lodash/throttle';
|
||||
import React, { useState, useRef, useCallback, useEffect } from 'react';
|
||||
|
||||
|
|
@ -30,7 +29,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
|||
...rest
|
||||
}) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const [accountIds, setAccountIds] = useState(ImmutableOrderedSet<string>());
|
||||
const [accountIds, setAccountIds] = useState(Array<string>());
|
||||
const controller = useRef(new AbortController());
|
||||
|
||||
const refreshCancelToken = () => {
|
||||
|
|
@ -39,14 +38,14 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
|||
};
|
||||
|
||||
const clearResults = () => {
|
||||
setAccountIds(ImmutableOrderedSet());
|
||||
setAccountIds([]);
|
||||
};
|
||||
|
||||
const handleAccountSearch = useCallback(throttle((q) => {
|
||||
dispatch(accountSearch(q, controller.current.signal))
|
||||
.then((accounts: { id: string }[]) => {
|
||||
const accountIds = accounts.map(account => account.id);
|
||||
setAccountIds(ImmutableOrderedSet(accountIds));
|
||||
setAccountIds(accountIds);
|
||||
})
|
||||
.catch(noOp);
|
||||
}, 900, { leading: true, trailing: true }), []);
|
||||
|
|
@ -79,7 +78,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
|||
<AutosuggestInput
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
suggestions={accountIds.toList()}
|
||||
suggestions={accountIds}
|
||||
onSuggestionsFetchRequested={noOp}
|
||||
onSuggestionsClearRequested={noOp}
|
||||
onSuggestionSelected={handleSelected}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ type AutoSuggestion = string | Emoji;
|
|||
|
||||
interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyUp' | 'onKeyDown'> {
|
||||
value: string;
|
||||
suggestions: ImmutableList<any>;
|
||||
suggestions: Array<any>;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void;
|
||||
|
|
@ -79,7 +79,7 @@ class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
|
|||
const { suggestions, menu, disabled } = this.props;
|
||||
const { selectedSuggestion, suggestionsHidden } = this.state;
|
||||
const firstIndex = this.getFirstIndex();
|
||||
const lastIndex = suggestions.size + (menu || []).length - 1;
|
||||
const lastIndex = suggestions.length + (menu || []).length - 1;
|
||||
|
||||
if (disabled) {
|
||||
e.preventDefault();
|
||||
|
|
@ -94,7 +94,7 @@ class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
|
|||
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
if (suggestions.size === 0 || suggestionsHidden) {
|
||||
if (suggestions.length === 0 || suggestionsHidden) {
|
||||
document.querySelector('.ui')?.parentElement?.focus();
|
||||
} else {
|
||||
e.preventDefault();
|
||||
|
|
@ -103,14 +103,14 @@ class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
|
|||
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
if (!suggestionsHidden && (suggestions.size > 0 || menu)) {
|
||||
if (!suggestionsHidden && (suggestions.length > 0 || menu)) {
|
||||
e.preventDefault();
|
||||
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, lastIndex) });
|
||||
}
|
||||
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
if (!suggestionsHidden && (suggestions.size > 0 || menu)) {
|
||||
if (!suggestionsHidden && (suggestions.length > 0 || menu)) {
|
||||
e.preventDefault();
|
||||
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, firstIndex) });
|
||||
}
|
||||
|
|
@ -119,15 +119,15 @@ class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
|
|||
case 'Enter':
|
||||
case 'Tab':
|
||||
// Select suggestion
|
||||
if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.size > 0 || menu)) {
|
||||
if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.length > 0 || menu)) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.setState({ selectedSuggestion: firstIndex });
|
||||
|
||||
if (selectedSuggestion < suggestions.size) {
|
||||
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
|
||||
if (selectedSuggestion < suggestions.length) {
|
||||
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions[selectedSuggestion]);
|
||||
} else if (menu) {
|
||||
const item = menu[selectedSuggestion - suggestions.size];
|
||||
const item = menu[selectedSuggestion - suggestions.length];
|
||||
this.handleMenuItemAction(item, e);
|
||||
}
|
||||
}
|
||||
|
|
@ -154,7 +154,7 @@ class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
|
|||
|
||||
onSuggestionClick: React.EventHandler<React.MouseEvent | React.TouchEvent> = (e) => {
|
||||
const index = Number(e.currentTarget?.getAttribute('data-index'));
|
||||
const suggestion = this.props.suggestions.get(index);
|
||||
const suggestion = this.props.suggestions[index];
|
||||
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
|
||||
this.input?.focus();
|
||||
e.preventDefault();
|
||||
|
|
@ -162,7 +162,7 @@ class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
|
|||
|
||||
componentDidUpdate(prevProps: IAutosuggestInput, prevState: any) {
|
||||
const { suggestions } = this.props;
|
||||
if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) {
|
||||
if (suggestions !== prevProps.suggestions && suggestions.length > 0 && prevState.suggestionsHidden && prevState.focused) {
|
||||
this.setState({ suggestionsHidden: false });
|
||||
}
|
||||
}
|
||||
|
|
@ -230,7 +230,9 @@ class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
|
|||
|
||||
return menu.map((item, i) => (
|
||||
<a
|
||||
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.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.length - selectedSuggestion === i,
|
||||
})}
|
||||
href='#'
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
|
|
@ -260,7 +262,7 @@ class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
|
|||
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
|
||||
const { suggestionsHidden } = this.state;
|
||||
|
||||
const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
|
||||
const visible = !suggestionsHidden && (suggestions.length !== 0 || (menu && value));
|
||||
|
||||
return [
|
||||
<div key='input' className='relative w-full'>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
|
|||
style={{ zIndex: limit - i }}
|
||||
>
|
||||
<Avatar
|
||||
className='dark:ring-primary-900 ring-1 ring-white'
|
||||
className='ring-1 ring-white dark:ring-primary-900'
|
||||
src={account.avatar}
|
||||
alt={account.avatar_description}
|
||||
size={20}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,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 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
|
||||
<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'>
|
||||
<Stack space={2}>
|
||||
<Text size='2xl' align='center' weight='bold'>{title}</Text>
|
||||
{subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
|
|||
}
|
||||
|
||||
return (
|
||||
<li className='focus-visible:ring-primary-500 truncate focus-visible:ring-2'>
|
||||
<li className='truncate focus-visible:ring-2 focus-visible:ring-primary-500'>
|
||||
<a
|
||||
href={item.href || item.to || '#'}
|
||||
role='button'
|
||||
|
|
@ -112,7 +112,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
|
|||
target={item.target}
|
||||
title={item.text}
|
||||
className={
|
||||
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', {
|
||||
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', {
|
||||
'text-danger-600 dark:text-danger-400': item.destructive,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -308,7 +308,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
|
|||
}
|
||||
|
||||
const getClassName = () => {
|
||||
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', {
|
||||
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', {
|
||||
'rounded-md min-w-56 max-w-sm duration-100': true,
|
||||
'no-reduce-motion:scale-0': !(isDisplayed && isOpen),
|
||||
'scale-100': isDisplayed && isOpen,
|
||||
|
|
@ -368,7 +368,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
|
|||
<div
|
||||
ref={arrowRef}
|
||||
style={arrowProps}
|
||||
className='black:bg-black pointer-events-none absolute z-[-1] size-3 bg-white dark:bg-gray-900'
|
||||
className='pointer-events-none absolute z-[-1] size-3 bg-white black:bg-black dark:bg-gray-900'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,11 +51,11 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
|
|||
));
|
||||
|
||||
return (
|
||||
<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={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='absolute right-3 top-28'>
|
||||
{floatingAction && action}
|
||||
</div>
|
||||
<div className='bg-primary-200 h-40 dark:bg-gray-600'>
|
||||
<div className='h-40 bg-primary-200 dark:bg-gray-600'>
|
||||
{banner && <img className='size-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
|
||||
</div>
|
||||
<Stack className='p-2.5' space={2}>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ interface IGroupCard {
|
|||
|
||||
const GroupCard: React.FC<IGroupCard> = ({ group }) => (
|
||||
<Stack
|
||||
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'
|
||||
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'
|
||||
data-testid='group-card'
|
||||
>
|
||||
{/* Group Cover Image */}
|
||||
<Stack grow className='bg-primary-100 relative basis-1/2 rounded-t-lg dark:bg-gray-800'>
|
||||
<Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
|
||||
<GroupHeaderImage
|
||||
group={group}
|
||||
className='absolute inset-0 size-full rounded-t-lg object-cover'
|
||||
|
|
|
|||
|
|
@ -45,11 +45,11 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
|
|||
content={
|
||||
<Stack space={4} className='w-80 pb-4'>
|
||||
<Stack
|
||||
className='black:bg-white dark:border-primary-800 dark:bg-primary-900 relative h-60 rounded-lg bg-white'
|
||||
className='relative h-60 rounded-lg bg-white black:bg-white dark:border-primary-800 dark:bg-primary-900'
|
||||
data-testid='group-card'
|
||||
>
|
||||
{/* Group Cover Image */}
|
||||
<Stack grow className='bg-primary-100 relative basis-1/2 rounded-t-lg dark:bg-gray-800'>
|
||||
<Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
|
||||
{group.header && (
|
||||
<img
|
||||
className='absolute inset-0 size-full rounded-t-lg object-cover'
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
|
||||
/** Fullscreen gradient used as a backdrop to public pages. */
|
||||
const LandingGradient: React.FC = () => (
|
||||
<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' />
|
||||
<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' />
|
||||
);
|
||||
|
||||
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 dark:text-accent-blue hover:underline'
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const ListItem: React.FC<IListItem> = ({ className, label, hint, children, to, h
|
|||
return null;
|
||||
}), [children, domId]);
|
||||
|
||||
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',
|
||||
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',
|
||||
className,
|
||||
{
|
||||
'px-4 py-2': size === 'md',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import clsx from 'clsx';
|
||||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import throttle from 'lodash/throttle';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
|
@ -24,7 +23,7 @@ interface ILocationSearch {
|
|||
const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const [locationIds, setLocationIds] = useState(ImmutableOrderedSet<string>());
|
||||
const [locationIds, setLocationIds] = useState(Array<string>());
|
||||
const controller = useRef(new AbortController());
|
||||
|
||||
const [value, setValue] = useState('');
|
||||
|
|
@ -63,14 +62,14 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
|
|||
};
|
||||
|
||||
const clearResults = () => {
|
||||
setLocationIds(ImmutableOrderedSet());
|
||||
setLocationIds([]);
|
||||
};
|
||||
|
||||
const handleLocationSearch = useCallback(throttle(q => {
|
||||
dispatch(locationSearch(q, controller.current.signal))
|
||||
.then((locations: { origin_id: string }[]) => {
|
||||
const locationIds = locations.map(location => location.origin_id);
|
||||
setLocationIds(ImmutableOrderedSet(locationIds));
|
||||
setLocationIds(locationIds);
|
||||
})
|
||||
.catch(noOp);
|
||||
}, 900, { leading: true, trailing: true }), []);
|
||||
|
|
@ -88,7 +87,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
|
|||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
suggestions={locationIds.toList()}
|
||||
suggestions={locationIds}
|
||||
onSuggestionsFetchRequested={noOp}
|
||||
onSuggestionsClearRequested={noOp}
|
||||
onSuggestionSelected={handleSelected}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled })
|
|||
<Tooltip text={`@${acct}`}>
|
||||
<Link
|
||||
to={`/@${acct}`}
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
onClick={handleClick}
|
||||
dir='ltr'
|
||||
>
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
|
|||
<div
|
||||
role='presentation'
|
||||
id='modal-overlay'
|
||||
className={clsx('black:bg-gray-900/90 fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90', {
|
||||
className={clsx('fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90', {
|
||||
'opacity-60': type === 'DROPDOWN_MENU',
|
||||
})}
|
||||
onClick={handleOnClose}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const Navlinks: React.FC<INavlinks> = ({ type }) => {
|
|||
|
||||
return (
|
||||
<div key={idx} className='px-5 py-2'>
|
||||
<Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'>
|
||||
<Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
|
||||
<Text tag='span' theme='inherit' size='sm'>
|
||||
{(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,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('bg-primary-200 text-primary-500 dark:bg-primary-800 dark:text-primary-200 rounded-full', {
|
||||
<div className={clsx('rounded-full bg-primary-200 text-primary-500 dark:bg-primary-800 dark:text-primary-200', {
|
||||
'p-3': size === 'lg',
|
||||
'p-2.5': size === 'md',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,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='bg-primary-100 dark:bg-primary-500 absolute inset-0 inline-block h-full rounded-l-md'
|
||||
className='absolute inset-0 inline-block h-full rounded-l-md bg-primary-100 dark:bg-primary-500'
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -41,7 +41,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
return (
|
||||
<label
|
||||
className={
|
||||
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', {
|
||||
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,
|
||||
})
|
||||
|
|
@ -81,7 +81,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
aria-label={option.title}
|
||||
>
|
||||
{active && (
|
||||
<Icon src={require('@tabler/icons/outline/check.svg')} className='dark:text-primary-900 size-4 text-white' />
|
||||
<Icon src={require('@tabler/icons/outline/check.svg')} className='size-4 text-white dark:text-primary-900' />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -123,7 +123,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
|
|||
<HStack
|
||||
justifyContent='between'
|
||||
alignItems='center'
|
||||
className='dark:bg-primary-800 relative w-full overflow-hidden rounded-md bg-white p-2'
|
||||
className='relative w-full overflow-hidden rounded-md bg-white p-2 dark:bg-primary-800'
|
||||
>
|
||||
<PollPercentageBar percent={percent} leading={leading} />
|
||||
|
||||
|
|
@ -141,7 +141,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='text-primary-600 dark:text-primary-800 size-4 dark:fill-white'
|
||||
className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
|
||||
/>
|
||||
) : (
|
||||
<div className='svg-icon' />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useStatus } from 'pl-fe/pl-hooks/hooks/statuses/useStatus';
|
||||
import React from 'react';
|
||||
|
||||
import { HStack, Icon, Text } from 'pl-fe/components/ui';
|
||||
import { useStatus } from 'pl-fe/pl-hooks/hooks/statuses/useStatus';
|
||||
|
||||
interface IQuotedStatusIndicator {
|
||||
/** The quoted status id. */
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
|
|||
checked={checked}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
className='text-primary-600 focus:ring-primary-500 size-4 border-gray-300'
|
||||
className='size-4 border-gray-300 text-primary-600 focus:ring-primary-500'
|
||||
/>
|
||||
</ListItem>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
|
|||
return (
|
||||
<div className='fixed left-1/2 top-2 z-50 -translate-x-1/2'>
|
||||
<button
|
||||
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'
|
||||
className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Icon
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@ interface ISidebarLink {
|
|||
const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
|
||||
const body = (
|
||||
<HStack space={2} alignItems='center'>
|
||||
<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 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>
|
||||
|
||||
<Text tag='span' weight='medium' theme='inherit'>{text}</Text>
|
||||
|
|
@ -176,7 +176,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
onTouchEnd={handleTouchEnd}
|
||||
>
|
||||
<div
|
||||
className={clsx('black:bg-gray-900 no-reduce-motion:transition-opacity fixed inset-0 cursor-default bg-gray-500 dark:bg-gray-700', {
|
||||
className={clsx('fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
|
||||
'no-reduce-motion:opacity-0': !(sidebarVisible && isSidebarOpen),
|
||||
'opacity-40': (sidebarVisible && isSidebarOpen),
|
||||
})}
|
||||
|
|
@ -186,7 +186,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
|
||||
<div
|
||||
className={
|
||||
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', {
|
||||
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', {
|
||||
'scale-100': sidebarVisible && isSidebarOpen,
|
||||
'no-reduce-motion:scale-0': !(sidebarVisible && isSidebarOpen),
|
||||
})
|
||||
|
|
@ -399,11 +399,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
|
|||
</button>
|
||||
|
||||
{switcher && (
|
||||
<div className='black:border-t border-t-2 border-solid border-gray-100 dark:border-gray-800'>
|
||||
<div className='border-t-2 border-solid border-gray-100 black:border-t 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='text-primary-500 size-4' src={require('@tabler/icons/outline/plus.svg')} />
|
||||
<Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
|
||||
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
|
|||
};
|
||||
|
||||
const fallback = (
|
||||
<div className='black:bg-black dark:bg-primary-900 flex h-screen flex-col bg-white pb-12 pt-16'>
|
||||
<div className='flex h-screen flex-col bg-white pb-12 pt-16 black:bg-black dark:bg-primary-900'>
|
||||
<main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
|
||||
{logoSrc && (
|
||||
<div className='flex shrink-0 justify-center'>
|
||||
|
|
@ -87,7 +87,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 sm:text-4xl dark:text-gray-500'>
|
||||
<h1 className='text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-500 sm:text-4xl'>
|
||||
<FormattedMessage id='alert.unexpected.message' defaultMessage='Something went wrong.' />
|
||||
</h1>
|
||||
<p className='text-lg text-gray-700 dark:text-gray-600'>
|
||||
|
|
@ -96,7 +96,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 dark:text-accent-blue hover:underline'>
|
||||
<a href='/' onClick={clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
|
||||
<FormattedMessage
|
||||
id='alert.unexpected.clear_cookies'
|
||||
defaultMessage='clear cookies and browser data'
|
||||
|
|
@ -114,7 +114,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
|
|||
</Text>
|
||||
|
||||
<div className='mt-10'>
|
||||
<a href='/' className='text-primary-600 dark:text-accent-blue text-base font-medium hover:underline'>
|
||||
<a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
|
||||
<FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
|
||||
{' '}
|
||||
<span className='inline-block rtl:rotate-180' aria-hidden='true'>→</span>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
|
|||
type='button'
|
||||
className={clsx(
|
||||
'-m-1 flex items-center rounded-full p-2 rtl:space-x-reverse',
|
||||
'focus:ring-primary-500 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0',
|
||||
'transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 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',
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
|
|||
<HoverRefWrapper accountId={mention.id} inline>
|
||||
<Link
|
||||
to={`/@${mention.acct}`}
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
dir='ltr'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
|
|||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<Card className='black:rounded-xl black:border black:border-gray-800 relative overflow-hidden'>
|
||||
<Card className='relative overflow-hidden black:rounded-xl black:border black:border-gray-800'>
|
||||
<CardBody>
|
||||
{renderStatus(statusId)}
|
||||
</CardBody>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
|
|||
<HoverRefWrapper accountId={accountId} inline>
|
||||
<Link
|
||||
to={`/@${account.acct}`}
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
dir='ltr'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ const StatusReactionsBar: React.FC<IStatusReactionsBar> = ({ status, collapsed }
|
|||
{me && (
|
||||
<EmojiPickerDropdown onPickEmoji={handlePickEmoji}>
|
||||
<button
|
||||
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'
|
||||
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'
|
||||
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='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'
|
||||
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'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
@{account.username}
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
return (
|
||||
<StatusInfo
|
||||
avatarSize={avatarSize}
|
||||
icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='text-primary-600 dark:text-accent-blue size-4' />}
|
||||
icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
|
||||
text={
|
||||
<FormattedMessage
|
||||
id='status.group'
|
||||
|
|
@ -327,7 +327,7 @@ const Status: React.FC<IStatus> = (props) => {
|
|||
<Text theme='muted'>
|
||||
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
|
||||
{' '}
|
||||
<button className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleUnfilter}>
|
||||
<button className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleUnfilter}>
|
||||
<FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
|
||||
</button>
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const StatusInfo = (props: IStatusInfo) => {
|
|||
<HStack
|
||||
space={3}
|
||||
alignItems='center'
|
||||
className='cursor-default text-xs font-medium text-gray-700 rtl:space-x-reverse dark:text-gray-600'
|
||||
className='cursor-default text-xs font-medium text-gray-700 dark:text-gray-600 rtl:space-x-reverse'
|
||||
>
|
||||
<div
|
||||
className='flex justify-end'
|
||||
|
|
|
|||
|
|
@ -55,13 +55,13 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
|
|||
>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/square-rounded-plus.svg')}
|
||||
className='black:text-white size-6 text-gray-600'
|
||||
className='size-6 text-gray-600 black:text-white'
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<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'>
|
||||
<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'>
|
||||
<button
|
||||
className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600'
|
||||
onClick={openSidebar}
|
||||
|
|
@ -69,7 +69,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
|
|||
>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/menu-2.svg')}
|
||||
className='black:text-white size-5 text-gray-600'
|
||||
className='size-5 text-gray-600 black:text-white'
|
||||
/>
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const TrendingLink: React.FC<ITrendingLink> = ({ trendingLink }) => {
|
|||
|
||||
return (
|
||||
<a
|
||||
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'
|
||||
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'
|
||||
href={trendingLink.url}
|
||||
target='_blank'
|
||||
rel='noopener'
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='dark:bg-primary-800 rounded-lg bg-white text-gray-900 shadow dark:text-gray-100 dark:shadow-none'>
|
||||
<div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
|
||||
<button
|
||||
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='focus:ring-primary-500 rounded-full text-gray-900 focus:ring-2 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
|
||||
<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)}>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
|
|||
return (
|
||||
<HStack alignItems='stretch'>
|
||||
<div
|
||||
className='dark:bg-primary-900 z-10 flex w-5 items-center justify-center self-stretch rounded-l-xl bg-white'
|
||||
className='z-10 flex w-5 items-center justify-center self-stretch rounded-l-xl bg-white dark:bg-primary-900'
|
||||
style={{
|
||||
height: controlsHeight || 'auto',
|
||||
}}
|
||||
|
|
@ -88,7 +88,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className='dark:bg-primary-900 z-10 flex w-5 items-center justify-center self-stretch rounded-r-xl bg-white'
|
||||
className='z-10 flex w-5 items-center justify-center self-stretch rounded-r-xl bg-white dark:bg-primary-900'
|
||||
style={{
|
||||
height: controlsHeight || 'auto',
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => (
|
|||
{...props}
|
||||
ref={ref}
|
||||
type='checkbox'
|
||||
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'
|
||||
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'
|
||||
/>
|
||||
));
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface ICounter {
|
|||
|
||||
/** A simple counter for notifications, etc. */
|
||||
const Counter: React.FC<ICounter> = ({ count, countMax }) => (
|
||||
<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'>
|
||||
<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'>
|
||||
<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='black:border-t w-full border-t-2 border-solid border-gray-100 dark:border-gray-800' />
|
||||
<div className='w-full border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800' />
|
||||
</div>
|
||||
|
||||
{text && (
|
||||
<div className='relative flex justify-center'>
|
||||
<span className='black:bg-black bg-white px-2 text-gray-700 dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
|
||||
<span className='bg-white px-2 text-gray-700 black:bg-black 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 bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
|
||||
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
|
||||
>
|
||||
{errors.join(', ')}
|
||||
</p>
|
||||
|
|
@ -100,7 +100,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
{hasError && (
|
||||
<p
|
||||
data-testid='form-group-error'
|
||||
className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
|
||||
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
|
||||
>
|
||||
{errors.join(', ')}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
|
|||
<Component
|
||||
ref={ref}
|
||||
type='button'
|
||||
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', {
|
||||
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': 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='black:bg-black flex w-fit overflow-auto rounded-md border border-gray-400 bg-white dark:border-gray-800 dark:bg-gray-900'>
|
||||
<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'>
|
||||
{Object.entries(items).map(([key, label], i) => {
|
||||
const checked = value?.includes(key as T);
|
||||
|
||||
return (
|
||||
<label
|
||||
className={clsx('hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700 whitespace-nowrap px-3 py-2 text-white transition-colors', {
|
||||
className={clsx('whitespace-nowrap px-3 py-2 text-white transition-colors hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700', {
|
||||
'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('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', {
|
||||
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', {
|
||||
'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='focus:ring-primary-500 h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 dark:text-gray-600 dark:hover:text-gray-400'
|
||||
className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
|
||||
>
|
||||
<SvgIcon
|
||||
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='black:pt-0 relative flex grow flex-col sm:pt-4'>
|
||||
<div className='relative flex grow flex-col black:pt-0 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>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const MenuList: React.FC<IMenuList> = (props) => {
|
|||
<MenuItems
|
||||
onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
|
||||
className={
|
||||
clsx(className, 'shadow-menu black:bg-black dark:bg-primary-900 rounded-lg bg-white py-1')
|
||||
clsx(className, 'shadow-menu rounded-lg bg-white py-1 black:bg-black dark:bg-primary-900')
|
||||
}
|
||||
{...filteredProps}
|
||||
/>
|
||||
|
|
@ -37,6 +37,6 @@ const MenuList: React.FC<IMenuList> = (props) => {
|
|||
};
|
||||
|
||||
/** Divides menu items. */
|
||||
const MenuDivider = () => <hr className='black:border-t mx-2 my-1 border-t-2 border-gray-100 dark:border-gray-800' />;
|
||||
const MenuDivider = () => <hr className='mx-2 my-1 border-t-2 border-gray-100 black:border-t dark:border-gray-800' />;
|
||||
|
||||
export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink };
|
||||
|
|
|
|||
|
|
@ -100,13 +100,13 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
|
|||
<div
|
||||
ref={ref}
|
||||
data-testid='modal'
|
||||
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], {
|
||||
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], {
|
||||
'bottom-0': !firstRender,
|
||||
'no-reduce-motion:-bottom-32': firstRender,
|
||||
})}
|
||||
>
|
||||
{title && (
|
||||
<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='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={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 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
|
||||
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -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 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200'
|
||||
className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
|
|||
<div
|
||||
className={
|
||||
clsx(
|
||||
'dark:ring-primary-700 z-40 overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2',
|
||||
'z-40 overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
|
||||
{ 'p-6': !isFlush },
|
||||
)
|
||||
}
|
||||
|
|
@ -116,7 +116,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
|
|||
<FloatingArrow
|
||||
ref={arrowRef}
|
||||
context={context}
|
||||
className='dark:fill-primary-700 fill-white'
|
||||
className='fill-white dark:fill-primary-700'
|
||||
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('dark:bg-primary-800 h-2.5 w-full overflow-hidden rounded-lg bg-gray-300', {
|
||||
className={clsx('h-2.5 w-full overflow-hidden rounded-lg bg-gray-300 dark:bg-primary-800', {
|
||||
'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='bg-secondary-500 h-full'
|
||||
className='h-full bg-secondary-500'
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
|
|||
value={value}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
className='text-primary-600 focus:ring-primary-500 size-4 border-gray-300'
|
||||
className='size-4 border-gray-300 text-primary-600 focus:ring-primary-500'
|
||||
/>
|
||||
|
||||
<label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
|
|||
<select
|
||||
ref={ref}
|
||||
className={clsx(
|
||||
'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',
|
||||
'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',
|
||||
className,
|
||||
{
|
||||
'w-full': full,
|
||||
|
|
|
|||
|
|
@ -57,10 +57,10 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
|
|||
onMouseDown={handleMouseDown}
|
||||
ref={node}
|
||||
>
|
||||
<div className='bg-primary-200 dark:bg-primary-700 absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full' />
|
||||
<div className='bg-accent-500 absolute top-1/2 h-1 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
|
||||
<div className='absolute top-1/2 h-1 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}%` }} />
|
||||
<span
|
||||
className='bg-accent-500 absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full shadow'
|
||||
className='absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
|
||||
tabIndex={0}
|
||||
style={{ left: `${value * 100}%` }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
|
|||
ref={ref}
|
||||
>
|
||||
<div
|
||||
className='bg-primary-200 absolute h-[3px] w-full dark:bg-gray-800'
|
||||
className='absolute h-[3px] w-full bg-primary-200 dark:bg-gray-800'
|
||||
style={{ top }}
|
||||
/>
|
||||
<div
|
||||
className={clsx('bg-primary-500 absolute h-[3px] transition-all duration-200', {
|
||||
className={clsx('absolute h-[3px] bg-primary-500 transition-all duration-200', {
|
||||
'hidden': top <= 0,
|
||||
})}
|
||||
style={{ left, top, width }}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
|
|||
return (
|
||||
<div className='relative mt-1 grow shadow-sm'>
|
||||
<HStack
|
||||
className='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'
|
||||
className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
|
||||
space={2}
|
||||
wrap
|
||||
>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ interface ITag {
|
|||
|
||||
/** A single editable Tag (used by TagInput). */
|
||||
const Tag: React.FC<ITag> = ({ tag, onDelete }) => (
|
||||
<div className='bg-primary-500 inline-flex items-center whitespace-nowrap rounded p-1'>
|
||||
<div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
|
||||
<Text theme='white'>{tag}</Text>
|
||||
|
||||
<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 sm:text-sm dark:text-gray-100 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',
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/circle-check.svg')}
|
||||
className='text-success-500 dark:text-success-400 size-6'
|
||||
className='size-6 text-success-500 dark:text-success-400'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -51,7 +51,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/info-circle.svg')}
|
||||
className='text-primary-600 dark:text-accent-blue size-6'
|
||||
className='size-6 text-primary-600 dark:text-accent-blue'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -59,7 +59,7 @@ const Toast = (props: IToast) => {
|
|||
return (
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/alert-circle.svg')}
|
||||
className='text-danger-600 size-6'
|
||||
className='size-6 text-danger-600'
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
|
|
@ -138,7 +138,7 @@ const Toast = (props: IToast) => {
|
|||
<div className='flex shrink-0 pt-0.5'>
|
||||
<button
|
||||
type='button'
|
||||
className='focus:ring-primary-500 inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
|
||||
className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
|
||||
onClick={dismissToast}
|
||||
data-testid='toast-dismiss'
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked = false, onC
|
|||
|
||||
return (
|
||||
<button
|
||||
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', {
|
||||
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', {
|
||||
'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 rtl:rotate-180 dark:text-white'
|
||||
className='ml-2 size-6 text-black dark:text-white rtl:rotate-180'
|
||||
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='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 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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const AboutPage: React.FC = () => {
|
|||
return (
|
||||
<div>
|
||||
<Card variant='rounded'>
|
||||
<div className='prose dark:prose-invert mx-auto py-4 sm:p-6'>
|
||||
<div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
|
||||
<div dangerouslySetInnerHTML={{ __html: pageHtml }} />
|
||||
{alsoAvailable}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
|
|||
<HStack className='mb-2' alignItems='center' space={1.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/outline/briefcase.svg')}
|
||||
className='text-primary-600 dark:text-primary-400 flex-none'
|
||||
className='flex-none text-primary-600 dark:text-primary-400'
|
||||
/>
|
||||
|
||||
<div className='truncate'>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
|
|||
return (
|
||||
<div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
|
||||
<div>
|
||||
<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 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>
|
||||
|
||||
<div className='px-4 sm:px-6'>
|
||||
|
|
@ -636,7 +636,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
|
|||
)}
|
||||
|
||||
<div>
|
||||
<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'>
|
||||
<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'>
|
||||
{renderHeader()}
|
||||
|
||||
<div className='absolute left-2 top-2'>
|
||||
|
|
@ -655,12 +655,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
|
|||
src={account.avatar}
|
||||
alt={account.avatar_description}
|
||||
size={96}
|
||||
className='black:ring-black dark:bg-primary-900 dark:ring-primary-900 relative size-24 rounded-full bg-white ring-4 ring-white'
|
||||
className='relative size-24 rounded-full bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
|
||||
/>
|
||||
</a>
|
||||
{account.verified && (
|
||||
<div className='absolute bottom-0 right-0'>
|
||||
<VerificationBadge className='black:ring-black dark:ring-primary-900 !size-[24px] rounded-full !p-[2px] ring-2 ring-white' />
|
||||
<VerificationBadge className='!size-[24px] rounded-full !p-[2px] ring-2 ring-white black:ring-black dark:ring-primary-900' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div key={announcement.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<div key={announcement.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<Stack space={2}>
|
||||
<Text dangerouslySetInnerHTML={{ __html: announcement.contentHtml }} />
|
||||
{(announcement.starts_at || announcement.ends_at || announcement.all_day) && (
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ const Report: React.FC<IReport> = ({ id }) => {
|
|||
<Link
|
||||
to={`/@${reporterAcct}`}
|
||||
title={reporterAcct}
|
||||
className='text-primary-600 dark:text-accent-blue hover:underline'
|
||||
className='text-primary-600 hover:underline dark:text-accent-blue'
|
||||
>
|
||||
@{reporterAcct}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
|
|||
}) : undefined;
|
||||
|
||||
return (
|
||||
<div key={domain.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<div key={domain.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<Stack space={2}>
|
||||
<HStack alignItems='center' space={4} wrap>
|
||||
<Text size='sm'>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const Relay: React.FC<IRelay> = ({ relay }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div key={relay.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<div key={relay.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<Stack space={2}>
|
||||
<HStack alignItems='center' space={4} wrap>
|
||||
<Text size='sm'>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const Rule: React.FC<IRule> = ({ rule }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div key={rule.id} className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
|
||||
<div key={rule.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
|
||||
<Stack space={2}>
|
||||
<Text>{rule.text}</Text>
|
||||
<Text tag='span' theme='muted' size='sm'>{rule.hint}</Text>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const Search: React.FC = () => {
|
|||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
|
||||
|
||||
<input
|
||||
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'
|
||||
className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
|
|
|
|||
|
|
@ -466,7 +466,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
<img
|
||||
src={poster}
|
||||
alt=''
|
||||
className='aspect-1 pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full object-cover'
|
||||
className='pointer-events-none absolute aspect-1 -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='bg-accent-500 absolute top-0 block h-1 rounded'
|
||||
className='absolute top-0 block h-1 rounded bg-accent-500'
|
||||
style={{ width: `${progress}%`, backgroundColor: accentColor }}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
|
|||
|
||||
if (providers.length > 0) {
|
||||
return (
|
||||
<Card className='black:bg-black black:p-0 dark:bg-primary-800 bg-gray-50 p-2 sm:rounded-xl'>
|
||||
<Card className='bg-gray-50 p-2 black:bg-black black:p-0 dark:bg-primary-800 sm:rounded-xl'>
|
||||
<Stack space={2}>
|
||||
<Text size='xs' theme='muted'>
|
||||
<FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue