diff --git a/index.html b/index.html index 4e41d029c..02eb70d2c 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,6 @@ - + \ No newline at end of file diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx index 81d27a480..fb4a4b4fc 100644 --- a/src/components/autosuggest-emoji.tsx +++ b/src/components/autosuggest-emoji.tsx @@ -25,13 +25,12 @@ const AutosuggestEmoji: React.FC = ({ emoji }) => { } return ( -
+
{alt} - {emoji.colons}
); diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx index 7628a29a1..5a9b1bb84 100644 --- a/src/components/autosuggest-input.tsx +++ b/src/components/autosuggest-input.tsx @@ -235,7 +235,7 @@ export default class AutosuggestInput extends PureComponent { return menu.map((item, i) => ( = ({ account, withSuffix = true ); // eslint-disable-next-line formatjs/no-literal-string-in-jsx - const suffix = (@{getAcct(account, displayFqn)}); + const suffix = (@{getAcct(account, displayFqn)}); return (
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx index 3d8c7ef9c..76ea5a93b 100644 --- a/src/components/display-name.tsx +++ b/src/components/display-name.tsx @@ -33,10 +33,10 @@ const DisplayName: React.FC = ({ account, children, withSuffix = t ); - const suffix = (@{getAcct(account, displayFqn)}); // eslint-disable-line formatjs/no-literal-string-in-jsx + const suffix = (@{getAcct(account, displayFqn)}); // eslint-disable-line formatjs/no-literal-string-in-jsx return ( - + {displayName} diff --git a/src/components/extended-video-player.tsx b/src/components/extended-video-player.tsx index ff37ce384..e5567aa0b 100644 --- a/src/components/extended-video-player.tsx +++ b/src/components/extended-video-player.tsx @@ -42,10 +42,11 @@ const ExtendedVideoPlayer: React.FC = ({ src, alt, time, c } return ( -
+
+
- {text && {text}} + {text && {text}} ); }; diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx index 8df07f224..fbd074aff 100644 --- a/src/components/load-gap.tsx +++ b/src/components/load-gap.tsx @@ -1,7 +1,7 @@ import dotsIcon from '@tabler/icons/outline/dots.svg'; import { defineMessages, useIntl } from 'react-intl'; -import Icon from 'soapbox/components/icon.tsx'; +import SvgIcon from 'soapbox/components/ui/svg-icon.tsx'; const messages = defineMessages({ load_more: { id: 'status.load_more', defaultMessage: 'Load more' }, @@ -19,8 +19,8 @@ const LoadGap: React.FC = ({ disabled, maxId, onClick }) => { const handleClick = () => onClick(maxId); return ( - ); }; diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx index 124b19ba6..f8bab49c4 100644 --- a/src/components/location-search.tsx +++ b/src/components/location-search.tsx @@ -8,7 +8,7 @@ import { defineMessages, useIntl } from 'react-intl'; import { locationSearch } from 'soapbox/actions/events.ts'; import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx'; -import Icon from 'soapbox/components/icon.tsx'; +import SvgIcon from 'soapbox/components/ui/svg-icon.tsx'; import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; import AutosuggestLocation from './autosuggest-location.tsx'; @@ -87,7 +87,7 @@ const LocationSearch: React.FC = ({ onSelected }) => { }, [value]); return ( -
+
= ({ onSelected }) => { onKeyDown={handleKeyDown} renderSuggestion={AutosuggestLocation} /> -
- - +
+ +
); diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx index 34141b40d..76d99220d 100644 --- a/src/components/preview-card.tsx +++ b/src/components/preview-card.tsx @@ -8,8 +8,8 @@ import { useState, useEffect } from 'react'; import Blurhash from 'soapbox/components/blurhash.tsx'; import HStack from 'soapbox/components/ui/hstack.tsx'; -import Icon from 'soapbox/components/ui/icon.tsx'; import Stack from 'soapbox/components/ui/stack.tsx'; +import SvgIcon from 'soapbox/components/ui/svg-icon.tsx'; import Text from 'soapbox/components/ui/text.tsx'; import { normalizeAttachment } from 'soapbox/normalizers/index.ts'; import { addAutoPlay } from 'soapbox/utils/media.ts'; @@ -96,7 +96,7 @@ const PreviewCard: React.FC = ({ return (
@@ -113,7 +113,7 @@ const PreviewCard: React.FC = ({ const interactive = card.type !== 'link'; horizontal = typeof horizontal === 'boolean' ? horizontal : interactive || embedded; - const className = clsx('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`); + const className = clsx('flex overflow-hidden rounded-lg border border-solid border-gray-200 text-sm text-gray-800 no-underline dark:border-gray-800 dark:text-gray-200', { '!block': horizontal, 'border-gray-200 dark:border-gray-800': compact, interactive, 'flex flex-col md:flex-row': card.type === 'link' }); const ratio = getRatio(card); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); @@ -142,7 +142,7 @@ const PreviewCard: React.FC = ({ )} - + {card.provider_name} @@ -167,7 +167,7 @@ const PreviewCard: React.FC = ({ width: horizontal ? width : undefined, height: horizontal ? height : undefined, }} - className='status-card__image-image' + className='block size-full bg-cover bg-center object-cover' /> ); @@ -182,7 +182,7 @@ const PreviewCard: React.FC = ({ } embed = ( -
+
{canvas} {thumbnail} @@ -190,9 +190,9 @@ const PreviewCard: React.FC = ({
@@ -204,7 +204,7 @@ const PreviewCard: React.FC = ({ rel='noopener' className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100' > - @@ -226,7 +226,7 @@ const PreviewCard: React.FC = ({ } else if (card.image) { embed = (
= ({ return ( { }) } > -
diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx index 0afc1966d..5380d7611 100644 --- a/src/components/status-list.tsx +++ b/src/components/status-list.tsx @@ -212,10 +212,12 @@ const StatusList: React.FC = ({ if (isPartial) { return ( -
-
-
- +
+
+
+ + +
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx index eba27de25..5160e43d0 100644 --- a/src/components/status-media.tsx +++ b/src/components/status-media.tsx @@ -41,15 +41,15 @@ const StatusMedia: React.FC = ({ let media: JSX.Element | null = null; const renderLoadingMediaGallery = (): JSX.Element => { - return
; + return
; }; const renderLoadingVideoPlayer = (): JSX.Element => { - return
; + return
; }; const renderLoadingAudioPlayer = (): JSX.Element => { - return
; + return
; }; const openMedia = (media: ImmutableList, index: number) => { diff --git a/src/components/status-reply-mentions.tsx b/src/components/status-reply-mentions.tsx index 7e11bc86e..f3dcbbc03 100644 --- a/src/components/status-reply-mentions.tsx +++ b/src/components/status-reply-mentions.tsx @@ -38,7 +38,7 @@ const StatusReplyMentions: React.FC = ({ status, hoverable // Rare, but it can happen. if (to.size === 0) { return ( -
+
= ({ status, hoverable e.stopPropagation()} > {/* eslint-disable-line formatjs/no-literal-string-in-jsx */} @{shortenNostr(account.username)} @@ -80,7 +80,7 @@ const StatusReplyMentions: React.FC = ({ status, hoverable } return ( -
+
= (props) => { return ( -
+
{/* eslint-disable formatjs/no-literal-string-in-jsx */} : {status.filtered.join(', ')}. @@ -368,7 +368,7 @@ const Status: React.FC = (props) => { if (actualStatus.quote) { if (actualStatus.pleroma.get('quote_visible', true) === false) { quote = ( -
+

); @@ -408,6 +408,7 @@ const Status: React.FC = (props) => { return ( + {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
= (props) => { > @@ -443,7 +441,7 @@ const Status: React.FC = (props) => { avatarSize={avatarSize} /> -
+
= ({ count, countMax, const icon = (active && activeSrc) || src; return ( - + {count !== undefined ? ( { }; return ( -
+
= ({ id, onMoveUp, onMoveDown }) => {
= (props) => { )} {hasError && ( -
+
+
+

{errors.join(', ')}

+ +
)} @@ -98,12 +102,18 @@ const FormGroup: React.FC = (props) => { {inputChildren.filter((_, i) => i !== 0)} {hasError && ( -

- {errors.join(', ')} -

+
+
+ +

+ {errors.join(', ')} +

+ +
+
)}
diff --git a/src/components/ui/menu.tsx b/src/components/ui/menu.tsx index 3f03935e4..58b70469d 100644 --- a/src/components/ui/menu.tsx +++ b/src/components/ui/menu.tsx @@ -27,7 +27,7 @@ const MenuList: React.FC = (props) => { event.nativeEvent.stopImmediatePropagation()} className={ - clsx(className, 'shadow-menu rounded-lg bg-white py-1 black:bg-black dark:bg-primary-900') + clsx(className, 'rounded-lg bg-white py-1 black:bg-black dark:bg-primary-900') } {...filteredProps} /> diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx index b64ef163b..0eadb3a9c 100644 --- a/src/components/verification-badge.tsx +++ b/src/components/verification-badge.tsx @@ -24,7 +24,7 @@ const VerificationBadge: React.FC = ({ className }) => { const Element = icon.endsWith('.svg') ? Icon : 'img'; return ( - + ); diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx index 281ea821b..9d163bc46 100644 --- a/src/features/account-gallery/index.tsx +++ b/src/features/account-gallery/index.tsx @@ -107,7 +107,7 @@ const AccountGallery = () => { if (isUnavailable) { return ( -
+
@@ -128,7 +128,7 @@ const AccountGallery = () => { ))} {!isLoading && attachments.size === 0 && ( -
+
)} @@ -137,7 +137,7 @@ const AccountGallery = () => {
{isLoading && attachments.size === 0 && ( -
+
)} diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx index 511c66a91..7b39eff50 100644 --- a/src/features/aliases/components/search.tsx +++ b/src/features/aliases/components/search.tsx @@ -3,8 +3,8 @@ import clsx from 'clsx'; import { defineMessages, useIntl } from 'react-intl'; import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases.ts'; -import Icon from 'soapbox/components/icon.tsx'; import Button from 'soapbox/components/ui/button.tsx'; +import SvgIcon from 'soapbox/components/ui/svg-icon.tsx'; import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts'; @@ -54,7 +54,7 @@ const Search: React.FC = () => { />
- +
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx index b2ecab4d6..2c7a7e61b 100644 --- a/src/features/aliases/index.tsx +++ b/src/features/aliases/index.tsx @@ -54,18 +54,20 @@ const Aliases = () => { const emptyMessage = ; return ( - + { loaded && searchAccountIds.size === 0 ? ( -
+
) : ( -
+
{searchAccountIds.map(accountId => )}
) @@ -73,7 +75,7 @@ const Aliases = () => { -
+
= ({ captcha, onChange, return (
- {intl.formatMessage(messages.captcha)} +
{ const { context, ...rest } = props; - return
; + return
; }); const Scroller: Components['Scroller'] = forwardRef((props, ref) => { diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx index c8443b655..ccf9aff10 100644 --- a/src/features/chats/components/chat-page/chat-page.tsx +++ b/src/features/chats/components/chat-page/chat-page.tsx @@ -68,7 +68,7 @@ const ChatPage: React.FC = ({ chatId }) => { data-testid='chat-page' > diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx index fa693bb68..d68626efc 100644 --- a/src/features/compose/components/compose-form.tsx +++ b/src/features/compose/components/compose-form.tsx @@ -127,7 +127,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab // List of elements that shouldn't collapse the composer when clicked // FIXME: Make this less brittle getClickableArea(), - document.querySelector('.privacy-dropdown__dropdown'), + document.getElementById('privacy-dropdown'), document.querySelector('em-emoji-picker'), document.getElementById('modal-overlay'), ].some(element => element?.contains(e.target as any)); @@ -217,7 +217,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab ), [features, id]); const composeModifiers = !condensed && ( - + diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx index 252a904bc..7b77ab035 100644 --- a/src/features/compose/components/privacy-dropdown.tsx +++ b/src/features/compose/components/privacy-dropdown.tsx @@ -42,9 +42,10 @@ interface IPrivacyDropdownMenu { onClose: () => void; onChange: (value: string | null) => void; unavailable?: boolean; + active: boolean; } -const PrivacyDropdownMenu: React.FC = ({ style, items, placement, value, onClose, onChange }) => { +const PrivacyDropdownMenu: React.FC = ({ style, items, placement, value, onClose, onChange, active }) => { const node = useRef(null); const focusedItem = useRef(null); @@ -125,15 +126,15 @@ const PrivacyDropdownMenu: React.FC = ({ style, items, pla // It should not be transformed when mounting because the resulting // size will be used to determine the coordinate of the menu by // react-overlays -
+
{items.map(item => ( -
-
+
+
-
- {item.text} +
+ {item.text} {item.meta}
@@ -244,8 +245,8 @@ const PrivacyDropdown: React.FC = ({ const valueOption = options.find(item => item.value === value); return ( -
-
+
+
= ({ onClose={handleClose} onChange={onChange} placement={placement} + active={open} />
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx index 039a939be..716db2f70 100644 --- a/src/features/compose/components/search-results.tsx +++ b/src/features/compose/components/search-results.tsx @@ -137,7 +137,7 @@ const SearchResults = () => { searchResults = suggestions.map(suggestion => ); } else if (loaded) { noResultsMessage = ( -
+
{ resultsIds = trendingStatuses; } else if (loaded) { noResultsMessage = ( -
+
{ searchResults = trends.map(hashtag => ); } else if (loaded) { noResultsMessage = ( -
+
= ({ message }) => ( {({ opacity, scaleX, scaleY }) => ( -
+
{message}
)} diff --git a/src/features/compose/editor/plugins/autosuggest-plugin.tsx b/src/features/compose/editor/plugins/autosuggest-plugin.tsx index 677e64702..6efc85369 100644 --- a/src/features/compose/editor/plugins/autosuggest-plugin.tsx +++ b/src/features/compose/editor/plugins/autosuggest-plugin.tsx @@ -532,7 +532,7 @@ const AutosuggestPlugin = ({ ? ReactDOM.createPortal(
= ({ ticker, title, className }): JSX.El return (
{title diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx index 10a19c135..bf3b4f8c8 100644 --- a/src/features/crypto-donate/components/detailed-crypto-address.tsx +++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx @@ -2,7 +2,7 @@ import externalLinkIcon from '@tabler/icons/outline/external-link.svg'; import { QRCodeCanvas as QRCode } from 'qrcode.react'; import CopyableInput from 'soapbox/components/copyable-input.tsx'; -import Icon from 'soapbox/components/icon.tsx'; +import SvgIcon from 'soapbox/components/ui/svg-icon.tsx'; import { getExplorerUrl } from '../utils/block-explorer.ts'; import { getTitle } from '../utils/coin-db.ts'; @@ -20,22 +20,22 @@ const DetailedCryptoAddress: React.FC = ({ address, tick const explorerUrl = getExplorerUrl(ticker, address); return ( -
-
+
+
-
{title || ticker.toUpperCase()}
- - {note &&
{note}
} -
+ {note &&
{note}
} +
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx index 3b8cbc573..0e15e22c7 100644 --- a/src/features/event/event-discussion.tsx +++ b/src/features/event/event-discussion.tsx @@ -179,7 +179,7 @@ const EventDiscussion: React.FC = (props) => { {me &&
} -
+
= ({ params }) => { if (isUnavailable) { return ( -
+
diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx index 31aaac6e6..e3e89cc23 100644 --- a/src/features/filters/edit-filter.tsx +++ b/src/features/filters/edit-filter.tsx @@ -188,7 +188,7 @@ const EditFilter: React.FC = ({ params }) => { if (notFound) return ; return ( - +
{ const emptyMessage = ; return ( - + diff --git a/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx b/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx index 0bafb8562..c9f56c7bc 100644 --- a/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx +++ b/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx @@ -54,7 +54,7 @@ export const PuzzleCaptcha: React.FC = ({ bg, puzzle, position, return (
e.currentTarget.setPointerCapture(e.pointerId)} diff --git a/src/features/ui/components/modals/compare-history-modal.tsx b/src/features/ui/components/modals/compare-history-modal.tsx index 1eec1fe0a..16bdf18d5 100644 --- a/src/features/ui/components/modals/compare-history-modal.tsx +++ b/src/features/ui/components/modals/compare-history-modal.tsx @@ -57,10 +57,10 @@ const CompareHistoryModal: React.FC = ({ onClose, statusId )} -
+
{poll && ( -
+
{version.poll.options.map((option: any) => ( diff --git a/src/features/ui/components/modals/crypto-donate-modal.tsx b/src/features/ui/components/modals/crypto-donate-modal.tsx index 75c112a1c..fc2925513 100644 --- a/src/features/ui/components/modals/crypto-donate-modal.tsx +++ b/src/features/ui/components/modals/crypto-donate-modal.tsx @@ -7,7 +7,7 @@ const CryptoDonateModal: React.FC void }> = ({ return ( -
+
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx index e34653231..267683f84 100644 --- a/src/features/ui/components/modals/media-modal.tsx +++ b/src/features/ui/components/modals/media-modal.tsx @@ -243,7 +243,7 @@ const MediaModal: React.FC = (props) => { }; return ( -
+
= ({ composeId, onClose closeIcon={arrowLeftIcon} closePosition='left' > -
+
{mentions.map(accountId => )}
diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx index 069f5653e..f0f9047ef 100644 --- a/src/features/ui/components/modals/unauthorized-modal.tsx +++ b/src/features/ui/components/modals/unauthorized-modal.tsx @@ -115,8 +115,8 @@ const UnauthorizedModal: React.FC = ({ action, onClose, acco secondaryAction={isOpen ? onRegister : undefined} secondaryText={isOpen ? : undefined} > -
- +
+ = ({ action, onClose, acco onChange={onAccountChange} required /> - + -
+
+
+
{isOpen && ( diff --git a/src/features/ui/components/modals/zap-split/display-name-row.tsx b/src/features/ui/components/modals/zap-split/display-name-row.tsx deleted file mode 100644 index f407d294f..000000000 --- a/src/features/ui/components/modals/zap-split/display-name-row.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import HStack from 'soapbox/components/ui/hstack.tsx'; -import Text from 'soapbox/components/ui/text.tsx'; -import VerificationBadge from 'soapbox/components/verification-badge.tsx'; -import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts'; -import { getAcct } from 'soapbox/utils/accounts.ts'; - -import type { Account } from 'soapbox/schemas/index.ts'; - -interface IDisplayName { - account: Pick; - withSuffix?: boolean; -} -/** - * This component is different from other display name components because it displays the name inline. - * - * @param {IDisplayName} props - The properties for this component. - * @param {Pick} props.account - The account object contains all the metadata for an account, such as the display name, ID, and more. - * @param {boolean} [props.withSuffix=true] - Determines whether to show the account suffix (eg, @danidfra). - * - * @returns {JSX.Element} The DisplayNameRow component. - */ -const DisplayNameRow: React.FC = ({ account, withSuffix = true }) => { - const { displayFqn = false } = useSoapboxConfig(); - const { verified } = account; - - const displayName = ( - - - - {verified && } - - ); - - // eslint-disable-next-line formatjs/no-literal-string-in-jsx - const suffix = (@{getAcct(account, displayFqn)}); - - return ( -
- {displayName} - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - - - {withSuffix && suffix} -
- ); -}; - -export default DisplayNameRow; diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx index 9a2c1cbc1..74ec92622 100644 --- a/src/features/ui/components/modals/zap-split/zap-split.tsx +++ b/src/features/ui/components/modals/zap-split/zap-split.tsx @@ -47,7 +47,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
-
+
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} @@ -67,7 +67,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
-
+
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {zapAmount} sats
@@ -81,7 +81,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }: - {invoice &&
+ {invoice &&

{renderTitleQr()} diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx index ebf74930c..249668384 100644 --- a/src/features/ui/components/navbar.tsx +++ b/src/features/ui/components/navbar.tsx @@ -113,7 +113,7 @@ const Navbar = () => { = ({ idempotencyKey, className, mu
= ({ idempotencyKey, className, mu
-
+
diff --git a/src/features/ui/components/profile-familiar-followers.tsx b/src/features/ui/components/profile-familiar-followers.tsx index 7d648476b..4f4b86e4e 100644 --- a/src/features/ui/components/profile-familiar-followers.tsx +++ b/src/features/ui/components/profile-familiar-followers.tsx @@ -48,7 +48,7 @@ const ProfileFamiliarFollowers: React.FC = ({ account const accounts: Array = familiarFollowers.map(account => !!account && ( - + { return (
@@ -132,6 +132,7 @@ class ZoomableImage extends PureComponent { role='presentation' ref={this.setImageRef} alt={alt} + className='size-auto max-h-[80%] max-w-full object-contain shadow-2xl' title={alt} src={src} style={{ diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx index 7e1c62869..6dc0cb2ef 100644 --- a/src/features/zap/components/zap-pay-request-form.tsx +++ b/src/features/zap/components/zap-pay-request-form.tsx @@ -135,7 +135,7 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {hasZapSplit &&

sats

} diff --git a/src/styles/application.scss b/src/styles/application.scss index 873f81992..64108d619 100644 --- a/src/styles/application.scss +++ b/src/styles/application.scss @@ -1,30 +1,9 @@ -@use 'variables'; -@use 'fonts'; -@use 'basics'; @use 'loading'; @use 'ui'; @use 'emoji-picker'; -@use 'rtl'; @use 'accessibility'; -@use 'navigation'; -@use 'autosuggest'; // COMPONENTS -@use 'components/buttons'; -@use 'components/modal'; @use 'components/compose-form'; @use 'components/status'; -@use 'components/reply-mentions'; -@use 'components/detailed-status'; -@use 'components/media-gallery'; -@use 'components/notification'; -@use 'components/display-name'; -@use 'components/columns'; -@use 'components/search'; -@use 'components/video-player'; -@use 'components/audio-player'; -@use 'components/crypto-donate'; -@use 'components/aliases'; @use 'components/icon'; -@use 'forms'; -@use 'utilities'; diff --git a/src/styles/autosuggest.scss b/src/styles/autosuggest.scss deleted file mode 100644 index f81cbf195..000000000 --- a/src/styles/autosuggest.scss +++ /dev/null @@ -1,38 +0,0 @@ -.react-datepicker__input-container input { - // display: block; - // box-sizing: border-box; - // width: 100%; - // margin: 0; - // background: transparent; - // color: var(--primary-text-color); - // padding: 10px; - // font-family: inherit; - // font-size: 16px; - // resize: vertical; - // border: 0; - // outline: 0; - - // &:focus { - // outline: 0; - // } - - // @media screen and (max-width: 600px) { - // font-size: 16px; - // } -} - -.autosuggest-emoji { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - line-height: 18px; - font-size: 14px; -} - -.autosuggest-emoji img { - display: block; - margin-right: 8px; - width: 16px; - height: 16px; -} diff --git a/src/styles/basics.scss b/src/styles/basics.scss deleted file mode 100644 index fec5daa0e..000000000 --- a/src/styles/basics.scss +++ /dev/null @@ -1,33 +0,0 @@ -body { - @apply antialiased; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; -} - -body.with-modals { - @apply overflow-hidden; -} - -// Note: this is needed for React HotKeys performance. Removing this -// will cause severe performance degradation on Safari. -div[tabindex='-1']:focus { - outline: 0; -} - -::selection { - @apply bg-primary-600 text-white; -} - -noscript { - text-align: center; -} - -.emojione { - @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain; -} - -// Virtuoso empty placeholder fix. -// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506 -div[data-viewport-type='window'] { - position: static !important; -} diff --git a/src/styles/components/aliases.scss b/src/styles/components/aliases.scss deleted file mode 100644 index 8f15165d4..000000000 --- a/src/styles/components/aliases.scss +++ /dev/null @@ -1,14 +0,0 @@ -.aliases { - &__accounts { - overflow-y: auto; - - &.empty-column-indicator { - min-height: unset; - overflow-y: unset; - } - } -} - -.aliases-settings-panel { - flex: 1; -} diff --git a/src/styles/components/audio-player.scss b/src/styles/components/audio-player.scss deleted file mode 100644 index 17810e47b..000000000 --- a/src/styles/components/audio-player.scss +++ /dev/null @@ -1,51 +0,0 @@ -.audio-player { - @apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11; - direction: ltr; - - &.editable { - @apply rounded-none h-full; - } - - .video-player__volume::before, - .video-player__seek::before { - @apply bg-white/10; - } - - .video-player__seek__buffer { - @apply bg-white/20; - } - - .video-player__buttons button { - @apply text-current opacity-[75]; - - &:active, - &:hover, - &:focus { - @apply text-current opacity-100; - } - } - - .video-player__time-sep, - .video-player__time-total, - .video-player__time-current { - @apply text-current; - } - - .video-player__seek::before, - .video-player__seek__buffer, - .video-player__seek__progress { - @apply top-0; - } - - .video-player__seek__handle { - @apply -top-1; - } - - .video-player__controls { - @apply pt-2.5 bg-transparent; - } -} - -.media-spoiler-audio { - @apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat; -} diff --git a/src/styles/components/buttons.scss b/src/styles/components/buttons.scss deleted file mode 100644 index 1f8b0c6f1..000000000 --- a/src/styles/components/buttons.scss +++ /dev/null @@ -1,8 +0,0 @@ -button { - font-family: inherit; - cursor: pointer; - - &:focus { - outline: none; - } -} diff --git a/src/styles/components/columns.scss b/src/styles/components/columns.scss deleted file mode 100644 index dc0b1dc75..000000000 --- a/src/styles/components/columns.scss +++ /dev/null @@ -1,26 +0,0 @@ -.empty-column-indicator, -.error-column { - @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg; - - @supports (display: grid) { // hack to fix Chrome <57 - contain: strict; - } - - & > span { - @apply max-w-[400px]; - } - - a { - @apply text-primary-600 dark:text-primary-400 no-underline hover:underline; - } -} - -.error-column { - flex-direction: column; - - .svg-icon { - width: 70px; - height: 70px; - margin-bottom: 30px; - } -} diff --git a/src/styles/components/compose-form.scss b/src/styles/components/compose-form.scss index 9139a9ce3..37a986d39 100644 --- a/src/styles/components/compose-form.scss +++ b/src/styles/components/compose-form.scss @@ -1,17 +1,9 @@ -@use "../variables"; - .compose-form { &__warning { @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white; strong { @apply font-medium; - - @each $lang in variables.$cjk-langs { - &:lang(#{$lang}) { - @apply font-bold; - } - } } a { @@ -169,12 +161,6 @@ strong { @apply block font-medium text-black dark:text-white; - - @each $lang in variables.$cjk-langs { - &:lang(#{$lang}) { - @apply font-bold; - } - } } } } diff --git a/src/styles/components/crypto-donate.scss b/src/styles/components/crypto-donate.scss deleted file mode 100644 index 08a1a8a09..000000000 --- a/src/styles/components/crypto-donate.scss +++ /dev/null @@ -1,47 +0,0 @@ -.crypto-address { - @apply flex flex-col p-5; - - &__head { - @apply flex items-center mb-1.5; - } - - &__title { - @apply font-bold; - } - - &__icon { - @apply flex items-start justify-center w-6 mr-2.5; - - img { - @apply w-full; - } - } - - &__actions { - @apply flex ml-auto; - - a { - @apply text-gray-400 ml-2; - } - - .svg-icon { - @apply h-4.5 w-4.5; - } - } - - &__note { - @apply mb-2.5; - } - - &__qrcode { - @apply flex items-center justify-center mb-3 p-2.5; - } - - &__address { - @apply mt-auto; - } -} - -.crypto-donate-modal .crypto-address { - @apply p-0; -} diff --git a/src/styles/components/detailed-status.scss b/src/styles/components/detailed-status.scss deleted file mode 100644 index 2edea3294..000000000 --- a/src/styles/components/detailed-status.scss +++ /dev/null @@ -1,15 +0,0 @@ -.thread { - @apply bg-white black:bg-black dark:bg-primary-900; - - &__status { - @apply relative pb-4; - - .status__wrapper { - @apply shadow-none p-0; - } - } - - .status__content-wrapper { - @apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)]; - } -} diff --git a/src/styles/components/display-name.scss b/src/styles/components/display-name.scss deleted file mode 100644 index fca752408..000000000 --- a/src/styles/components/display-name.scss +++ /dev/null @@ -1,18 +0,0 @@ -.display-name { - display: block; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - position: relative; - - bdi { - min-width: 0; - } - - &__account { - position: relative; - font-weight: 600; - font-size: 14px; - } -} diff --git a/src/styles/components/media-gallery.scss b/src/styles/components/media-gallery.scss deleted file mode 100644 index 475875d40..000000000 --- a/src/styles/components/media-gallery.scss +++ /dev/null @@ -1,152 +0,0 @@ -$media-compact-size: 50px; - -.media-gallery { - @apply rounded-lg; - box-sizing: border-box; - overflow: hidden; - isolation: isolate; - position: relative; - width: 100%; - height: auto; - - &__item { - @apply rounded-sm; - border: 0; - box-sizing: border-box; - display: block; - float: left; - position: relative; - overflow: hidden; - - &__icons { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - .svg-icon { - @apply h-24 w-24; - } - } - - &-overflow { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 255, 255, 0.75); - z-index: 2; - color: #333; - text-align: center; - font-weight: bold; - font-size: 50px; - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; - } - - &-thumbnail { - @apply text-gray-400; - cursor: zoom-in; - display: block; - text-decoration: none; - line-height: 0; - position: relative; - z-index: 1; - height: 100%; - width: 100%; - - video { - width: 100%; - height: 100%; - object-fit: cover; - } - } - } - - &__preview { - @apply bg-gray-200 dark:bg-gray-900 rounded-lg; - width: 100%; - height: 100%; - object-fit: cover; - position: absolute; - top: 0; - left: 0; - z-index: 0; - - &--hidden { - display: none; - } - } - - &__gifv { - height: 100%; - overflow: hidden; - position: relative; - width: 100%; - } - - &__item-gifv-thumbnail { - @apply rounded-md; - cursor: zoom-in; - height: 100%; - object-fit: cover; - position: relative; - width: 100%; - z-index: 1; - transform: none; - top: 0; - } - - &__gifv__label, - &__filename__label, - &__file-extension__label { - @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90; - font-size: 11px; - transition: opacity 0.1s ease; - line-height: 18px; - } - - &__gifv { - &.autoplay { - .media-gallery__gifv__label { - display: none; - } - } - - &:hover { - .media-gallery__gifv__label { - opacity: 1; - } - } - } - - &--compact { - height: $media-compact-size !important; - background: transparent; - - .media-gallery__item { - width: $media-compact-size !important; - height: $media-compact-size !important; - inset: auto !important; - float: left !important; - margin-right: 5px; - - &-overflow { - font-size: 20px; - } - - &__icons .svg-icon { - @apply h-8 w-8; - } - } - - .media-gallery__file-extension__label { - display: none; - } - } -} diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss deleted file mode 100644 index d69552f67..000000000 --- a/src/styles/components/modal.scss +++ /dev/null @@ -1,177 +0,0 @@ -.modal-root__modal { - pointer-events: auto; - display: flex; - z-index: 9999; - max-height: 100%; - overflow-y: hidden; -} - -.media-modal { - .audio-player.detailed, - .extended-video-player { - display: flex; - align-items: center; - justify-content: center; - } - - .audio-player { - max-width: 800px; - max-height: 600px; - } - - .extended-video-player { - width: 100%; - height: 100%; - - video { - @apply max-w-full max-h-[80%]; - } - } -} - -.error-modal { - @apply text-gray-900; - border-radius: 8px; - overflow: hidden; - display: flex; - flex-direction: column; - - &__body { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 80vh; - width: 80vw; - max-width: 520px; - max-height: 420px; - position: relative; - text-align: center; - - & > div { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 25px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - opacity: 0; - user-select: text; - } - } - - &__footer { - flex: 0 0 auto; - display: flex; - justify-content: center; - padding: 25px; - - & > div { - min-width: 33px; - } - } -} - -.actions-modal { - @apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white black:bg-black dark:bg-gray-900 shadow-xl rounded-2xl; - max-height: calc(100vh - 3rem); - - &__item-label { - font-weight: 500; - } - - .dropdown-menu__separator { - @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600 black:bg-gray-800; - } - - &__status { - @apply overflow-y-auto max-h-[300px]; - } - - ul { - @apply my-2 flex-shrink-0 overflow-y-auto; - max-height: calc(100vh - 147px); - - &.with-status { max-height: calc(80vh - 75px); } - - li:not(:empty) { - a, - button { - @apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 no-underline text-left; - - &.destructive { - @apply text-danger-600 dark:text-danger-400; - } - - .svg-icon:first-child { - @apply min-w-[1.25rem] w-5 h-5; - - svg { - stroke-width: 1.5; - } - } - } - - button[type='button'] { - @apply w-full justify-center text-center; - } - } - } -} - -.reply-mentions-modal__accounts { - display: block; - flex-direction: row; - flex: 1; - overflow-y: auto; - min-height: 300px; -} - -.remote-interaction-modal { - &__content { - display: flex; - flex-direction: column; - row-gap: 10px; - } - - &__fields { - display: flex; - flex-direction: column; - gap: 10px; - width: 100%; - - button { - align-self: flex-end; - } - } - - &__divider { - display: flex; - align-items: center; - gap: 10px; - margin: 0 -10px; - - &::before, - &::after { - @apply border-b border-gray-300 dark:border-gray-600; - content: ''; - flex: 1; - } - } - - @media screen and (width <= 895px) { - margin: 0; - border-radius: 6px; - height: unset !important; - width: 440px !important; - } - - @media screen and (width <= 480px) { - width: 330px !important; - } -} diff --git a/src/styles/components/notification.scss b/src/styles/components/notification.scss deleted file mode 100644 index 63439e79a..000000000 --- a/src/styles/components/notification.scss +++ /dev/null @@ -1,3 +0,0 @@ -.notification .status__wrapper { - @apply p-0 shadow-none rounded-none; -} diff --git a/src/styles/components/reply-mentions.scss b/src/styles/components/reply-mentions.scss deleted file mode 100644 index 002afe3e1..000000000 --- a/src/styles/components/reply-mentions.scss +++ /dev/null @@ -1,18 +0,0 @@ -.reply-mentions { - @apply text-gray-700 dark:text-gray-600 mb-1 text-sm; - - &__account { - @apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline inline-block; - direction: ltr; - } -} - -.status__wrapper { - .reply-mentions { - display: block; - - span { - cursor: pointer; - } - } -} diff --git a/src/styles/components/search.scss b/src/styles/components/search.scss deleted file mode 100644 index 66c2f4311..000000000 --- a/src/styles/components/search.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use "../fonts"; - -.search { - position: relative; -} - -.search__icon { - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus { - outline: 0 !important; - } - - .svg-icon { - @apply right-4 rtl:left-4 rtl:right-auto text-gray-400; - @include fonts.font-size(16); - cursor: default; - display: inline-block; - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 2; - width: 18px; - height: 18px; - opacity: 0; - pointer-events: none; - - &.active { - pointer-events: auto; - opacity: 1; - } - } - - .svg-icon--search.active { - pointer-events: none; - } - - .svg-icon--backspace { - cursor: pointer; - width: 22px; - height: 22px; - } -} diff --git a/src/styles/components/status.scss b/src/styles/components/status.scss index 3c7863062..660f5127e 100644 --- a/src/styles/components/status.scss +++ b/src/styles/components/status.scss @@ -15,7 +15,7 @@ } } -[column-type='filled'] .status__wrapper, +[column-type='filled'] .status--wrapper, [column-type='filled'] .status-placeholder { @apply bg-transparent dark:bg-transparent rounded-none shadow-none; } diff --git a/src/styles/components/video-player.scss b/src/styles/components/video-player.scss deleted file mode 100644 index e37f10427..000000000 --- a/src/styles/components/video-player.scss +++ /dev/null @@ -1,307 +0,0 @@ -.detailed, -.fullscreen { - .video-player__volume__current, - .video-player__volume::before { - bottom: 27px; - } - - .video-player__volume__handle { - bottom: 23px; - } -} - -.video-player { - @apply relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white; - direction: ltr; - - &.editable { - @apply rounded-none; - height: 100% !important; - } - - &:focus { - outline: 0; - } - - video { - display: block; - z-index: 1; - position: relative; - } - - &.fullscreen { - width: 100% !important; - height: 100% !important; - margin: 0; - - video { - max-width: 100% !important; - max-height: 100% !important; - width: 100% !important; - height: 100% !important; - outline: 0; - } - } - - &--inline { - video { - object-fit: contain; - max-height: 100%; - } - } - - &__controls { - position: absolute; - z-index: 2; - bottom: 0; - left: 0; - right: 0; - box-sizing: border-box; - background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent); - padding: 0 15px; - opacity: 0; - transition: opacity 0.1s ease; - - &.active { - opacity: 1; - } - } - - &__buttons-bar { - display: flex; - justify-content: space-between; - padding-bottom: 8px; - margin: 0 -5px; - - .video-player__download__icon { - color: inherit; - } - } - - &__buttons { - display: flex; - flex: 0 1 auto; - min-width: 30px; - align-items: center; - font-size: 16px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - .player-button { - display: inline-block; - outline: 0; - flex: 0 0 auto; - background: transparent; - padding: 5px 6px; - font-size: 16px; - border: 0; - color: rgba(#fff, 0.75); - - .svg-icon { - width: 20px; - height: 20px; - } - - &:active, - &:hover, - &:focus { - color: #fff; - } - } - } - - &__time { - display: inline; - flex: 0 1 auto; - overflow: hidden; - text-overflow: ellipsis; - margin: 0 5px; - } - - &__time-sep, - &__time-total, - &__time-current { - font-size: 14px; - font-weight: 500; - } - - &__time-current { - color: #fff; - } - - &__time-sep { - display: inline-block; - margin: 0 6px; - } - - &__time-sep, - &__time-total { - color: #fff; - } - - &__volume { - flex: 0 0 auto; - display: inline-flex; - cursor: pointer; - height: 24px; - position: relative; - overflow: hidden; - - .no-reduce-motion & { - transition: all 100ms linear; - } - - &.active { - overflow: visible; - width: 50px; - margin-right: 16px; - } - - &::before { - content: ''; - width: 50px; - background: rgba(#fff, 0.35); - border-radius: 4px; - display: block; - position: absolute; - height: 4px; - left: 0; - top: 50%; - transform: translate(0, -50%); - } - - &__current { - @apply bg-accent-500; - display: block; - position: absolute; - height: 4px; - border-radius: 4px; - left: 0; - top: 50%; - transform: translate(0, -50%); - } - - &__handle { - @apply bg-accent-500; - position: absolute; - z-index: 3; - border-radius: 50%; - width: 12px; - height: 12px; - top: 50%; - left: 0; - margin-left: -6px; - transform: translate(0, -50%); - box-shadow: 1px 2px 6px #0003; - opacity: 0; - - .no-reduce-motion & { - transition: opacity 100ms linear; - } - } - - &.active &__handle { - opacity: 1; - } - } - - &__link { - padding: 2px 10px; - - a { - text-decoration: none; - font-size: 14px; - font-weight: 500; - color: #fff; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } - } - - &__seek { - cursor: pointer; - height: 24px; - position: relative; - - &::before { - content: ''; - width: 100%; - background: rgba(#fff, 0.35); - border-radius: 4px; - display: block; - position: absolute; - height: 4px; - top: 14px; - } - - &__progress, - &__buffer { - display: block; - position: absolute; - height: 4px; - border-radius: 4px; - top: 14px; - } - - &__progress { - @apply bg-accent-500; - } - - &__buffer { - background: rgba(#fff, 0.2); - } - - &__handle { - @apply bg-accent-500; - position: absolute; - z-index: 3; - opacity: 0; - border-radius: 50%; - width: 12px; - height: 12px; - top: 10px; - margin-left: -6px; - box-shadow: 1px 2px 6px #0003; - - .no-reduce-motion & { - transition: opacity 0.1s ease; - } - - &.active { - opacity: 1; - } - } - - &:hover { - .video-player__seek__handle { - opacity: 1; - } - } - } - - &.detailed, - &.fullscreen { - .video-player__buttons { - .player-button { - padding-top: 10px; - padding-bottom: 10px; - } - } - } -} - -.media-spoiler-video { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; - margin-top: 8px; - position: relative; - border: 0; - display: block; -} diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss deleted file mode 100644 index 574c07c27..000000000 --- a/src/styles/fonts.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use 'sass:math'; - -// TYPEOGRAPHY MIXINS - -// Use these mixins to define font-size and line-height -// html and body declaration allows developer to pass px value as argument -// Rendered css will default to "rem" and fall back to "px" for unsupported browsers -@mixin font-size($size) { - $rem: math.div($size, 10); - $px: $size; - font-size: #{$px + 'px'}; - font-size: #{$rem + 'rem'}; -} diff --git a/src/styles/forms.scss b/src/styles/forms.scss deleted file mode 100644 index 3678652f1..000000000 --- a/src/styles/forms.scss +++ /dev/null @@ -1,29 +0,0 @@ -select { - @apply pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); -} - -.form-error::before, -.form-error::after { - border: solid transparent; - bottom: 100%; - content: ''; - height: 0; - left: 10px; - pointer-events: none; - width: 0; - position: absolute; -} - -.form-error::before { - --tw-bg-opacity: 1; - border-bottom-color: rgba(254, 202, 202, var(--tw-bg-opacity)); - border-width: 6px; - margin-left: -1px; -} - -.input.with_label.toggle .label_input { - display: flex; - font-size: 14px; - align-items: center; -} diff --git a/src/styles/navigation.scss b/src/styles/navigation.scss deleted file mode 100644 index 010d3b22e..000000000 --- a/src/styles/navigation.scss +++ /dev/null @@ -1,40 +0,0 @@ -.thumb-navigation { - @apply fixed lg:hidden bottom-0 bg-white/90 black:bg-black/90 dark:bg-primary-900/90 backdrop-blur-md border-t border-solid border-gray-200 dark:border-gray-800 left-0 right-0 shadow-2xl w-full flex z-50; - padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */ - overflow-x: auto; - scrollbar-width: thin; - scrollbar-color: #fff; - - &::-webkit-scrollbar { - display: none; - } - - &__link { - @apply px-2 py-2.5 space-y-1 flex flex-col flex-1 items-center text-gray-600 text-lg; - - // padding: 8px 10px; - // display: flex; - // flex-direction: column; - // align-items: center; - // justify-content: end; - // color: var(--primary-text-color); - // text-decoration: none; - // font-size: 20px; - // width: 55px; - - // span { - // margin-top: 1px; - // text-align: center; - // font-size: 1.2rem; - // } - - // .svg-icon { - // width: 24px; - // height: 24px; - - // svg { - // stroke-width: 1px; - // } - // } - } -} diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss deleted file mode 100644 index 09de6297d..000000000 --- a/src/styles/rtl.scss +++ /dev/null @@ -1,13 +0,0 @@ -body.rtl { - direction: rtl; - - .status { - padding-left: 10px; - padding-right: 68px; - } - - .table th, - .table td { - text-align: right; - } -} diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index e74538275..4dedec85e 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -2,7 +2,168 @@ @tailwind components; @tailwind utilities; +@layer base { + body { + @apply antialiased; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + } + + body.rtl { + direction: rtl; + + .status { + padding-left: 10px; + padding-right: 68px; + } + + .table th, + .table td { + text-align: right; + } + } + + ::selection { + @apply bg-primary-600 text-white; + } + + div[data-viewport-type='window'] { + position: static !important; + } + + div[tabindex='-1']:focus { + outline: 0; + } +} + @layer utilities { + .status { + @apply min-h-[54px] cursor-default animate-fade opacity-100; + } + + .thread { + @apply bg-white black:bg-black dark:bg-primary-900; + + .status--content-wrapper { + @apply pl-[54px] rtl:pl-0 rtl:pr-[54px]; + } + } + + .thread__status { + @apply relative pb-4; + + .status--wrapper { + @apply shadow-none p-0; + } + } + + .notification .status--wrapper { + @apply p-0 shadow-none rounded-none; + } + + .status--wrapper { + .reply-mentions { + display: block; + + span { + cursor: pointer; + } + } + } + + [column-type='filled'] .status--wrapper, + [column-type='filled'] .status-placeholder { + @apply bg-transparent dark:bg-transparent rounded-none shadow-none; + } + + .search__icon { + &::-moz-focus-inner { + border: 0; + } + + &::-moz-focus-inner, + &:focus { + outline: 0 !important; + } + } + + .focusable:focus, + .focusable-within:focus-within { + outline: 0; + @apply ring-2 ring-primary-300; + } + + .error-column > span { + @apply max-w-[400px]; + } + + .error-column { + .svg-icon { + width: 70px; + height: 70px; + margin-bottom: 30px; + } + + @supports (display: grid) { + contain: strict; + } + + a { + @apply text-primary-600 dark:text-primary-400 no-underline hover:underline; + } + + } + + .mention { + @apply text-primary-600 dark:text-accent-blue hover:underline; + } + + .input.with_label.toggle .label_input { + display: flex; + font-size: 14px; + align-items: center; + } + + .divide-x-dot > *:not(:last-child)::after { + content: '·'; + padding-right: 4px; + padding-left: 4px; + } + + .emoji-lg img.emojione { + width: 36px !important; + height: 36px !important; + } + + .emojione { + @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain; + } + + .compose-form-warning { + strong { + @apply font-medium; + } + + a { + font-weight: 500; + text-decoration: underline; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } + } + } + + .hide-scrollbar { + scrollbar-width: none; /* Firefox */ + } + + .hide-scrollbar::-webkit-scrollbar { + display: none; /* iOS PWA, Chrome */ + } + .break-word-nested > p { word-break: break-word; } diff --git a/src/styles/ui.scss b/src/styles/ui.scss index 5678148be..3683497c1 100644 --- a/src/styles/ui.scss +++ b/src/styles/ui.scss @@ -86,7 +86,7 @@ .ui { display: block; width: 100%; - padding: 0 0 calc(var(--thumb-navigation-height) + 86px); + padding: 0 0 calc(60px + env(safe-area-inset-bottom) + 86px); .page { display: flex; diff --git a/src/styles/utilities.scss b/src/styles/utilities.scss deleted file mode 100644 index 8172e0825..000000000 --- a/src/styles/utilities.scss +++ /dev/null @@ -1,22 +0,0 @@ -.w-10i { - width: 2.5rem !important; -} - -.z-1000 { - z-index: 1000; -} - -.divide-x-dot > *:not(:last-child)::after { - content: '·'; - padding-right: 4px; - padding-left: 4px; -} - -.mention { - @apply text-primary-600 dark:text-accent-blue hover:underline; -} - -.emoji-lg img.emojione { - width: 36px !important; - height: 36px !important; -} diff --git a/src/styles/variables.scss b/src/styles/variables.scss deleted file mode 100644 index afcccbd20..000000000 --- a/src/styles/variables.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Language codes that uses CJK fonts -/* stylelint-disable-next-line value-keyword-case -- locale filenames */ -$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; - -// CSS variables -// NOTE: Prefer CSS variables whenever possible. -// They're future-proof and more flexible. -:root { - --thumb-navigation-height: calc(60px + env(safe-area-inset-bottom)); -} diff --git a/src/utils/media.ts b/src/utils/media.ts index 9143061ff..b44f1eb64 100644 --- a/src/utils/media.ts +++ b/src/utils/media.ts @@ -63,6 +63,11 @@ const addAutoPlay = (html: string): string => { const document = domParser.parseFromString(html, 'text/html').documentElement; const iframe = document.querySelector('iframe'); + if (iframe) { + iframe.style.width = '100%'; + iframe.style.height = '100%'; + } + if (iframe) { const url = new URL(iframe.src); const provider = new URL(iframe.src).host; diff --git a/tailwind.config.ts b/tailwind.config.ts index 49f6129c3..50c0d9e3d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -69,6 +69,7 @@ const config: Config = { 'greentext': true, }), animation: { + fade: 'fade 150ms linear', 'sonar-scale-4': 'sonar-scale-4 3s linear infinite', 'sonar-scale-3': 'sonar-scale-3 3s 0.5s linear infinite', 'sonar-scale-2': 'sonar-scale-2 3s 1s linear infinite', @@ -77,6 +78,10 @@ const config: Config = { 'leave': 'leave 150ms ease-in forwards', }, keyframes: { + fade: { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, 'sonar-scale-4': { from: { opacity: '0.4', transform: 'scale(1)' }, to: { opacity: '0', transform: 'scale(4)' },