diff --git a/app/soapbox/components/__mocks__/react-inlinesvg.tsx b/app/soapbox/components/__mocks__/react-inlinesvg.tsx index 367ec0e33..1d4fde154 100644 --- a/app/soapbox/components/__mocks__/react-inlinesvg.tsx +++ b/app/soapbox/components/__mocks__/react-inlinesvg.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; interface IInlineSVG { loader?: JSX.Element, diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx index 006584e8d..70ab2cfc5 100644 --- a/app/soapbox/components/account.tsx +++ b/app/soapbox/components/account.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { Link, useHistory } from 'react-router-dom'; import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper'; @@ -199,7 +199,7 @@ const Account = ({ title={account.acct} onClick={(event: React.MouseEvent) => event.stopPropagation()} > -
+ {account.verified && } -
+ @@ -255,7 +255,7 @@ const Account = ({ )} diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx index c38cc8c5b..24253d7df 100644 --- a/app/soapbox/components/copyable-input.tsx +++ b/app/soapbox/components/copyable-input.tsx @@ -28,7 +28,7 @@ const CopyableInput: React.FC = ({ value }) => { ref={input} type='text' value={value} - className='rounded-r-none' + className='rounded-r-none rtl:rounded-l-none rtl:rounded-r-lg' outerClassName='flex-grow' onClick={selectInput} readOnly @@ -36,7 +36,7 @@ const CopyableInput: React.FC = ({ value }) => { ); diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx index b6e0bcbf0..384fa354d 100644 --- a/app/soapbox/components/ui/avatar/avatar.tsx +++ b/app/soapbox/components/ui/avatar/avatar.tsx @@ -1,5 +1,5 @@ import classNames from 'clsx'; -import * as React from 'react'; +import React from 'react'; import StillImage from 'soapbox/components/still-image'; diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx index 97de8862b..4be97ee83 100644 --- a/app/soapbox/components/ui/button/button.tsx +++ b/app/soapbox/components/ui/button/button.tsx @@ -1,5 +1,5 @@ import classNames from 'clsx'; -import * as React from 'react'; +import React from 'react'; import { Link } from 'react-router-dom'; import Icon from '../icon/icon'; diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx index a2d181e3a..2fb89315b 100644 --- a/app/soapbox/components/ui/card/card.tsx +++ b/app/soapbox/components/ui/card/card.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { Text } from 'soapbox/components/ui'; +import { HStack, Text } from 'soapbox/components/ui'; import SvgIcon from 'soapbox/components/ui/icon/svg-icon'; const sizes = { @@ -62,7 +62,7 @@ const CardHeader: React.FC = ({ children, backHref, onBackClick }): const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick }; return ( - + {intl.formatMessage(messages.back)} @@ -70,11 +70,11 @@ const CardHeader: React.FC = ({ children, backHref, onBackClick }): }; return ( -
+ {renderBackButton()} {children} -
+ ); }; diff --git a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx index 85126806f..c87ef9040 100644 --- a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx +++ b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { render, screen } from '../../../../jest/test-helpers'; import Emoji from '../emoji'; diff --git a/app/soapbox/components/ui/form-actions/form-actions.tsx b/app/soapbox/components/ui/form-actions/form-actions.tsx index a09fb02dc..f1480e07c 100644 --- a/app/soapbox/components/ui/form-actions/form-actions.tsx +++ b/app/soapbox/components/ui/form-actions/form-actions.tsx @@ -1,10 +1,12 @@ import React from 'react'; +import HStack from '../hstack/hstack'; + /** Container element to house form actions. */ const FormActions: React.FC = ({ children }) => ( -
+ {children} -
+ ); export default FormActions; diff --git a/app/soapbox/components/ui/form/form.tsx b/app/soapbox/components/ui/form/form.tsx index 59ca180b1..466825434 100644 --- a/app/soapbox/components/ui/form/form.tsx +++ b/app/soapbox/components/ui/form/form.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; interface IForm { /** Form submission event handler. */ diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx index 996ccd64d..4f31a3403 100644 --- a/app/soapbox/components/ui/hstack/hstack.tsx +++ b/app/soapbox/components/ui/hstack/hstack.tsx @@ -21,8 +21,10 @@ const spaces = { 1: 'space-x-1', 1.5: 'space-x-1.5', 2: 'space-x-2', + 2.5: 'space-x-2.5', 3: 'space-x-3', 4: 'space-x-4', + 5: 'space-x-5', 6: 'space-x-6', 8: 'space-x-8', }; @@ -58,7 +60,7 @@ const HStack = forwardRef((props, ref) => { ( 'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal', 'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search', 'bg-transparent border-none': theme === 'transparent', - 'pr-7': isPassword || append, + 'pr-7 rtl:pl-7 rtl:pr-3': isPassword || append, 'text-red-600 border-red-600': hasError, 'pl-8': typeof icon !== 'undefined', 'pl-16': typeof prepend !== 'undefined', }, className)} /> - {/* eslint-disable-next-line no-nested-ternary */} {append ? ( -
+
{append}
) : null} @@ -111,7 +110,7 @@ const Input = React.forwardRef( intl.formatMessage(messages.showPassword) } > -
+
-
+
)}
diff --git a/app/soapbox/components/ui/radio-button/radio-button.tsx b/app/soapbox/components/ui/radio-button/radio-button.tsx index 322cbd7e7..96f2c2ec4 100644 --- a/app/soapbox/components/ui/radio-button/radio-button.tsx +++ b/app/soapbox/components/ui/radio-button/radio-button.tsx @@ -1,6 +1,8 @@ import React, { useMemo } from 'react'; import { v4 as uuidv4 } from 'uuid'; +import HStack from '../hstack/hstack'; + interface IRadioButton { value: string checked?: boolean @@ -16,7 +18,7 @@ const RadioButton: React.FC = ({ name, value, checked, onChange, l const formFieldId: string = useMemo(() => `radio-${uuidv4()}`, []); return ( -
+ = ({ name, value, checked, onChange, l className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500' /> -
+ ); }; diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx index b8d05b79d..8c2369ce5 100644 --- a/app/soapbox/components/ui/select/select.tsx +++ b/app/soapbox/components/ui/select/select.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; interface ISelect extends React.SelectHTMLAttributes { children: Iterable, diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx index 49316529a..283908579 100644 --- a/app/soapbox/components/ui/tabs/tabs.tsx +++ b/app/soapbox/components/ui/tabs/tabs.tsx @@ -6,7 +6,7 @@ import { useTabsContext, } from '@reach/tabs'; import classNames from 'clsx'; -import * as React from 'react'; +import React from 'react'; import { useHistory } from 'react-router-dom'; import Counter from '../counter/counter'; diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx index 3bced193f..16cc33234 100644 --- a/app/soapbox/components/ui/widget/widget.tsx +++ b/app/soapbox/components/ui/widget/widget.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import { Text, IconButton } from 'soapbox/components/ui'; -import HStack from 'soapbox/components/ui/hstack/hstack'; -import Stack from 'soapbox/components/ui/stack/stack'; +import { HStack, IconButton, Stack, Text } from 'soapbox/components/ui'; interface IWidgetTitle { /** Title text for the widget. */ diff --git a/app/soapbox/components/verification-badge.tsx b/app/soapbox/components/verification-badge.tsx index 766decb88..aea2f5f81 100644 --- a/app/soapbox/components/verification-badge.tsx +++ b/app/soapbox/components/verification-badge.tsx @@ -2,7 +2,7 @@ import classNames from 'clsx'; import React from 'react'; import { useIntl, defineMessages } from 'react-intl'; -import Icon from 'soapbox/components/ui/icon/icon'; +import { Icon } from 'soapbox/components/ui'; import { useSoapboxConfig } from 'soapbox/hooks'; const messages = defineMessages({ diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index f1623f585..ce02d068d 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -49,6 +49,8 @@ import ErrorBoundary from '../components/error-boundary'; import UI from '../features/ui'; import { store } from '../store'; +const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he']; + // Configure global functions for developers createGlobals(store); @@ -276,7 +278,7 @@ const SoapboxHead: React.FC = ({ children }) => { <> - + {themeCss && } {darkMode && } diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx index d3d7865b6..48c1eff8f 100644 --- a/app/soapbox/features/account/components/header.tsx +++ b/app/soapbox/features/account/components/header.tsx @@ -17,7 +17,7 @@ import { getSettings } from 'soapbox/actions/settings'; import snackbar from 'soapbox/actions/snackbar'; import Badge from 'soapbox/components/badge'; import StillImage from 'soapbox/components/still-image'; -import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider, Avatar } from 'soapbox/components/ui'; +import { Avatar, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui'; import SvgIcon from 'soapbox/components/ui/icon/svg-icon'; import MovedNote from 'soapbox/features/account-timeline/components/moved-note'; import ActionButton from 'soapbox/features/ui/components/action-button'; @@ -89,13 +89,13 @@ const Header: React.FC = ({ account }) => {
-
+
-
+
); @@ -570,7 +570,7 @@ const Header: React.FC = ({ account }) => { ); diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx index a0db9f78d..73446989d 100644 --- a/app/soapbox/features/ads/components/ad.tsx +++ b/app/soapbox/features/ads/components/ad.tsx @@ -2,8 +2,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'; import React, { useState, useEffect, useRef } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui'; -import IconButton from 'soapbox/components/ui/icon-button/icon-button'; +import { Avatar, Card, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui'; import StatusCard from 'soapbox/features/status/components/card'; import { useAppSelector } from 'soapbox/hooks'; diff --git a/app/soapbox/features/aliases/components/account.tsx b/app/soapbox/features/aliases/components/account.tsx index f76431ba8..1687b85e6 100644 --- a/app/soapbox/features/aliases/components/account.tsx +++ b/app/soapbox/features/aliases/components/account.tsx @@ -2,9 +2,9 @@ import React, { useCallback } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { addToAliases } from 'soapbox/actions/aliases'; -import Avatar from 'soapbox/components/avatar'; -import DisplayName from 'soapbox/components/display-name'; +import AccountComponent from 'soapbox/components/account'; import IconButton from 'soapbox/components/icon-button'; +import { HStack } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; import { getFeatures } from 'soapbox/utils/features'; @@ -47,23 +47,17 @@ const Account: React.FC = ({ accountId, aliases }) => { if (!added && accountId !== me) { button = ( -
- -
+ ); } return ( -
-
-
-
- -
- - {button} + +
+
-
+ {button} + ); }; diff --git a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx index 2a55c5483..fb20ab06d 100644 --- a/app/soapbox/features/auth-login/components/password-reset-confirm.tsx +++ b/app/soapbox/features/auth-login/components/password-reset-confirm.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { Redirect } from 'react-router-dom'; diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx index 2083ce19d..c180160e3 100644 --- a/app/soapbox/features/chats/components/chat.tsx +++ b/app/soapbox/features/chats/components/chat.tsx @@ -1,10 +1,9 @@ import React, { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; -import Avatar from 'soapbox/components/avatar'; import DisplayName from 'soapbox/components/display-name'; import Icon from 'soapbox/components/icon'; -import { Counter } from 'soapbox/components/ui'; +import { Avatar, Counter, HStack, Stack, Text } from 'soapbox/components/ui'; import emojify from 'soapbox/features/emoji/emoji'; import { useAppSelector } from 'soapbox/hooks'; import { makeGetChat } from 'soapbox/selectors'; @@ -34,12 +33,10 @@ const Chat: React.FC = ({ chatId, onClick }) => { return (
+ +
); }; diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx index 78a9cd11a..1267c8753 100644 --- a/app/soapbox/features/compose/components/compose-form.tsx +++ b/app/soapbox/features/compose/components/compose-form.tsx @@ -16,7 +16,7 @@ import { import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input'; import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea'; import Icon from 'soapbox/components/icon'; -import { Button, Stack } from 'soapbox/components/ui'; +import { Button, HStack, Stack } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector, useCompose, useFeatures, usePrevious } from 'soapbox/hooks'; import { isMobile } from 'soapbox/is-mobile'; @@ -221,7 +221,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab }, [focusDate]); const renderButtons = useCallback(() => ( -
+ {features.media && } {features.polls && } @@ -229,7 +229,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab {features.scheduledStatuses && } {features.spoilers && } {features.richText && } -
+ ), [features, id]); const condensed = shouldCondense && !composeFocused && isEmpty() && !isUploading; @@ -335,16 +335,18 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab > {renderButtons()} -
+ {maxTootChars && ( -
+ -
+ )}
+ + {/* + */} ); diff --git a/app/soapbox/features/compose/components/polls/poll-form.tsx b/app/soapbox/features/compose/components/polls/poll-form.tsx index f080ae1fa..77f47bdfc 100644 --- a/app/soapbox/features/compose/components/polls/poll-form.tsx +++ b/app/soapbox/features/compose/components/polls/poll-form.tsx @@ -169,7 +169,7 @@ const PollForm: React.FC = ({ composeId }) => { - - + diff --git a/app/soapbox/features/reply-mentions/account.tsx b/app/soapbox/features/reply-mentions/account.tsx index 53dc4e02c..5facac7a8 100644 --- a/app/soapbox/features/reply-mentions/account.tsx +++ b/app/soapbox/features/reply-mentions/account.tsx @@ -3,9 +3,9 @@ import { defineMessages, useIntl } from 'react-intl'; import { fetchAccount } from 'soapbox/actions/accounts'; import { addToMentions, removeFromMentions } from 'soapbox/actions/compose'; -import Avatar from 'soapbox/components/avatar'; -import DisplayName from 'soapbox/components/display-name'; +import AccountComponent from 'soapbox/components/account'; import IconButton from 'soapbox/components/icon-button'; +import { HStack } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector, useCompose } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; @@ -44,24 +44,18 @@ const Account: React.FC = ({ composeId, accountId, author }) => { let button; if (added) { - button = ; + button = ; } else { - button = ; + button = ; } return ( -
-
-
-
- -
- -
- {!author && button} -
+ +
+
-
+ {!author && button} + ); }; diff --git a/app/soapbox/features/settings/index.tsx b/app/soapbox/features/settings/index.tsx index b8a7a33ec..946450f61 100644 --- a/app/soapbox/features/settings/index.tsx +++ b/app/soapbox/features/settings/index.tsx @@ -86,9 +86,11 @@ const Settings = () => { - {isMfaEnabled ? - intl.formatMessage(messages.mfaEnabled) : - intl.formatMessage(messages.mfaDisabled)} + + {isMfaEnabled ? + intl.formatMessage(messages.mfaEnabled) : + intl.formatMessage(messages.mfaDisabled)} + )} diff --git a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx index 75ffec27c..5e0a6de2c 100644 --- a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx +++ b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { useIntl, defineMessages } from 'react-intl'; import { HStack, Input } from 'soapbox/components/ui'; -import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield'; +import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield'; import type { CryptoAddress } from 'soapbox/types/soapbox'; const messages = defineMessages({ diff --git a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx index bf2451240..19b6af9f7 100644 --- a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx +++ b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { useIntl, defineMessages } from 'react-intl'; import { HStack, Input } from 'soapbox/components/ui'; -import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield'; +import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield'; import type { FooterItem } from 'soapbox/types/soapbox'; const messages = defineMessages({ diff --git a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx index 616fddb82..b894b5984 100644 --- a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx +++ b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { useIntl, defineMessages } from 'react-intl'; import { HStack, Input } from 'soapbox/components/ui'; -import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield'; import IconPicker from './icon-picker'; +import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield'; import type { PromoPanelItem } from 'soapbox/types/soapbox'; const messages = defineMessages({ diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx index 72cd1de7d..8cf88688e 100644 --- a/app/soapbox/features/soapbox-config/index.tsx +++ b/app/soapbox/features/soapbox-config/index.tsx @@ -8,19 +8,19 @@ import snackbar from 'soapbox/actions/snackbar'; import List, { ListItem } from 'soapbox/components/list'; import { Accordion, + Button, Column, CardHeader, CardTitle, + FileInput, Form, FormActions, FormGroup, Input, - FileInput, + Streamfield, Textarea, - Button, Toggle, } from 'soapbox/components/ui'; -import Streamfield from 'soapbox/components/ui/streamfield/streamfield'; import ThemeSelector from 'soapbox/features/ui/components/theme-selector'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { normalizeSoapboxConfig } from 'soapbox/normalizers'; diff --git a/app/soapbox/features/ui/components/modals/actions-modal.tsx b/app/soapbox/features/ui/components/modals/actions-modal.tsx index 7648069fa..ab2ca6402 100644 --- a/app/soapbox/features/ui/components/modals/actions-modal.tsx +++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx @@ -5,7 +5,7 @@ import { spring } from 'react-motion'; import Icon from 'soapbox/components/icon'; import StatusContent from 'soapbox/components/status-content'; -import { Stack } from 'soapbox/components/ui'; +import { HStack, Stack } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account-container'; import Motion from '../../util/optional-motion'; @@ -29,23 +29,24 @@ const ActionsModal: React.FC = ({ status, actions, onClick, onClo const { icon = null, text, meta = null, active = false, href = '#', isLogout, destructive } = action; const Comp = href === '#' ? 'button' : 'a'; - const compProps = href === '#' ? { onClick: onClick } : { href: href }; + const compProps = href === '#' ? { onClick: onClick } : { href: href, rel: 'noopener' }; return (
  • - {icon && }
    {text}
    {meta}
    -     +
    • ); }; diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx index aa9c4a1bd..871ade6c4 100644 --- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx +++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx @@ -108,7 +108,7 @@ const ReasonStep = (_props: IReasonStep) => { data-testid={`rule-${rule.id}`} onClick={() => dispatch(changeReportRule(rule.id))} className={classNames({ - 'relative border border-solid border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-primary-800/30 text-left w-full p-4 flex justify-between items-center cursor-pointer': true, + 'relative border border-solid border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-primary-800/30 text-start w-full p-4 flex justify-between items-center cursor-pointer': true, 'rounded-tl-lg rounded-tr-lg': idx === 0, 'rounded-bl-lg rounded-br-lg': idx === rules.length - 1, 'bg-gray-200 hover:bg-gray-200 dark:bg-primary-800/50': isSelected, diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx index 1df4df05a..2fd186830 100644 --- a/app/soapbox/features/ui/components/navbar.tsx +++ b/app/soapbox/features/ui/components/navbar.tsx @@ -8,7 +8,7 @@ import { logIn, verifyCredentials } from 'soapbox/actions/auth'; import { fetchInstance } from 'soapbox/actions/instance'; import { openSidebar } from 'soapbox/actions/sidebar'; import SiteLogo from 'soapbox/components/site-logo'; -import { Avatar, Button, Form, IconButton, Input, Tooltip } from 'soapbox/components/ui'; +import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui'; import Search from 'soapbox/features/compose/components/search'; import { useOwnAccount, useSoapboxConfig } from 'soapbox/hooks'; @@ -78,9 +78,10 @@ const Navbar = () => {
    )} -
    {
    )} - + -
    + {account ? (
    @@ -108,7 +109,7 @@ const Navbar = () => {
    ) : ( <> -
    + {
    )} - + diff --git a/app/soapbox/features/ui/components/promo-panel.tsx b/app/soapbox/features/ui/components/promo-panel.tsx index 6766a6ad4..9add33b27 100644 --- a/app/soapbox/features/ui/components/promo-panel.tsx +++ b/app/soapbox/features/ui/components/promo-panel.tsx @@ -20,7 +20,7 @@ const PromoPanel: React.FC = () => { {promoItems.map((item, i) => ( - + {item.textLocales.get(locale) || item.text} diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx index e285788e0..8ce8199e7 100644 --- a/app/soapbox/features/ui/components/theme-selector.tsx +++ b/app/soapbox/features/ui/components/theme-selector.tsx @@ -1,9 +1,7 @@ import React, { useMemo } from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import { Icon } from 'soapbox/components/ui'; - -import Select from '../../../components/ui/select/select'; +import { Icon, Select } from 'soapbox/components/ui'; const messages = defineMessages({ light: { id: 'theme_toggle.light', defaultMessage: 'Light' }, diff --git a/app/soapbox/features/ui/components/trends-panel.tsx b/app/soapbox/features/ui/components/trends-panel.tsx index 75ef4f151..e7f11683a 100644 --- a/app/soapbox/features/ui/components/trends-panel.tsx +++ b/app/soapbox/features/ui/components/trends-panel.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; diff --git a/app/soapbox/features/ui/components/upload-area.tsx b/app/soapbox/features/ui/components/upload-area.tsx index 5cc0c9e64..6d6fb395b 100644 --- a/app/soapbox/features/ui/components/upload-area.tsx +++ b/app/soapbox/features/ui/components/upload-area.tsx @@ -1,5 +1,5 @@ import classNames from 'clsx'; -import * as React from 'react'; +import React from 'react'; import { FormattedMessage } from 'react-intl'; import { spring } from 'react-motion'; diff --git a/app/soapbox/features/ui/components/who-to-follow-panel.tsx b/app/soapbox/features/ui/components/who-to-follow-panel.tsx index f479acead..dd2fc91fa 100644 --- a/app/soapbox/features/ui/components/who-to-follow-panel.tsx +++ b/app/soapbox/features/ui/components/who-to-follow-panel.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; diff --git a/app/soapbox/features/verification/email-passthru.tsx b/app/soapbox/features/verification/email-passthru.tsx index e51f3220f..bfdc017de 100644 --- a/app/soapbox/features/verification/email-passthru.tsx +++ b/app/soapbox/features/verification/email-passthru.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useHistory, useParams } from 'react-router-dom'; diff --git a/app/soapbox/features/verification/index.tsx b/app/soapbox/features/verification/index.tsx index 4470bd4c2..88c9dc435 100644 --- a/app/soapbox/features/verification/index.tsx +++ b/app/soapbox/features/verification/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { Redirect } from 'react-router-dom'; import { fetchVerificationConfig } from 'soapbox/actions/verification'; diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx index e4bf2c1e2..e409f3beb 100644 --- a/app/soapbox/features/verification/registration.tsx +++ b/app/soapbox/features/verification/registration.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { Redirect } from 'react-router-dom'; diff --git a/app/soapbox/features/verification/waitlist-page.tsx b/app/soapbox/features/verification/waitlist-page.tsx index 71677d3d3..1ae44817c 100644 --- a/app/soapbox/features/verification/waitlist-page.tsx +++ b/app/soapbox/features/verification/waitlist-page.tsx @@ -40,7 +40,7 @@ const WaitlistPage = (/* { account } */) => { -
    +
    diff --git a/app/soapbox/hooks/useOnScreen.ts b/app/soapbox/hooks/useOnScreen.ts index 7cfd4f284..883fde698 100644 --- a/app/soapbox/hooks/useOnScreen.ts +++ b/app/soapbox/hooks/useOnScreen.ts @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; export const useOnScreen = (ref: React.MutableRefObject) => { const [isIntersecting, setIntersecting] = React.useState(false); diff --git a/app/soapbox/pages/home-page.tsx b/app/soapbox/pages/home-page.tsx index d3908fd1e..1982d4605 100644 --- a/app/soapbox/pages/home-page.tsx +++ b/app/soapbox/pages/home-page.tsx @@ -17,7 +17,7 @@ import { import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig } from 'soapbox/hooks'; import Avatar from '../components/avatar'; -import { Card, CardBody, Layout } from '../components/ui'; +import { Card, CardBody, HStack, Layout } from '../components/ui'; import ComposeForm from '../features/compose/components/compose-form'; import BundleContainer from '../features/ui/containers/bundle-container'; // import GroupSidebarPanel from '../features/groups/sidebar_panel'; @@ -42,7 +42,7 @@ const HomePage: React.FC = ({ children }) => { {me && ( -
    + @@ -53,7 +53,7 @@ const HomePage: React.FC = ({ children }) => { autoFocus={false} clickableAreaRef={composeBlock} /> -
    +     )} diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index e24a19ddf..86fd7cb71 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -75,23 +75,6 @@ a .account__avatar { } } -.account__relationship { - height: auto; - position: relative; - display: flex; - align-items: center; - justify-content: center; - - button { - margin-left: 5px; - } - - .svg-icon { - width: 20px; - height: 20px; - } -} - .account-authorize__avatar { float: left; margin-right: 10px; diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss index a9e32d19e..a31b25cf2 100644 --- a/app/styles/components/columns.scss +++ b/app/styles/components/columns.scss @@ -392,17 +392,14 @@ } .column__switch .audio-toggle { - position: absolute; - z-index: 4; - top: 12px; - right: 14px; + @apply absolute top-3 right-[14px] rtl:left-[14px] rtl:right-auto z-10; .react-toggle-track-check { - left: 6px; + @apply left-1.5; } .react-toggle-track-x { - right: 8px; + @apply right-2; } } diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index d2297db4e..0c7f73659 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -59,7 +59,7 @@ } .icon-button { - @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 flex items-center; + @apply text-gray-200 hover:text-white text-sm font-medium p-2.5 space-x-1 rtl:space-x-reverse flex items-center; } } diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index 257ad8af6..e91dfb6f8 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -39,7 +39,7 @@ // } &__connector { - @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden; + @apply bg-gray-200 dark:bg-primary-800 absolute w-0.5 left-5 hidden z-[1]; &--bottom { @apply block; @@ -48,17 +48,3 @@ } } } - -.thread { - .ptr, - .ptr__children { - background: var(--foreground-color) !important; - border-radius: 10px; - border-top-left-radius: 0; - border-top-right-radius: 0; - - @media screen and (max-width: 580px) { - border-radius: 0; - } - } -} diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index 7c27ad35c..a26668bb3 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -294,7 +294,7 @@ } .svg-icon:first-child { - @apply min-w-[1.25rem] w-5 h-5 mr-2.5; + @apply min-w-[1.25rem] w-5 h-5; svg { stroke-width: 1.5; diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss index e8a33a44e..e2f9be247 100644 --- a/app/styles/components/search.scss +++ b/app/styles/components/search.scss @@ -13,12 +13,12 @@ } .svg-icon { + @apply right-4 rtl:left-4 rtl:right-auto; @include font-size(16); cursor: default; display: inline-block; position: absolute; top: 50%; - right: 16px; transform: translateY(-50%); z-index: 2; width: 18px; diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss index 9d3625863..f3fd86032 100644 --- a/app/styles/components/sidebar-menu.scss +++ b/app/styles/components/sidebar-menu.scss @@ -1,5 +1,5 @@ .sidebar-menu { - @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 z-1000; + @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 rtl:translate-x-80 z-1000; @media (max-width: 400px) { width: 90vw; diff --git a/app/styles/components/snackbar.scss b/app/styles/components/snackbar.scss index 28e79d672..c2adaf0a5 100644 --- a/app/styles/components/snackbar.scss +++ b/app/styles/components/snackbar.scss @@ -16,7 +16,7 @@ @apply text-success-500; &::before { - @apply ml-4; + @apply ml-4 rtl:ml-0 rtl:mr-4; content: '\f058'; } } @@ -25,13 +25,13 @@ @apply text-danger-500 ml-4; &::before { - @apply ml-4; + @apply ml-4 rtl:ml-0 rtl:mr-4; content: '\f057'; } } .notification-bar-info { - @apply text-primary-500 ml-4; + @apply text-primary-500 ml-4 rtl:ml-0 rtl:mr-4; &::before { @apply ml-4; @@ -40,7 +40,7 @@ } .notification-bar-wrapper { - @apply p-4 flex items-center justify-between w-full space-x-2; + @apply p-4 flex items-center justify-between w-full space-x-2 rtl:space-x-reverse; } .notification-bar-title {