Merge branch 'next-small-fixes' into 'next'

Next: Small fixes

See merge request soapbox-pub/soapbox-fe!1261

app/soapbox/__fixtures__/intlMessages.json

@@ -52,11 +52,11 @@
     "audio.play": "Play",
     "audio.unmute": "Unmute",
     "boost_modal.combo": "You can press {combo} to skip this next time",
-    "bundle_column_error.body": "Something went wrong while loading this component.",
+    "bundle_column_error.body": "Something went wrong while loading this page.",
     "bundle_column_error.retry": "Try again",
     "bundle_column_error.title": "Network error",
     "bundle_modal_error.close": "Close",
-    "bundle_modal_error.message": "Something went wrong while loading this component.",
+    "bundle_modal_error.message": "Something went wrong while loading this page.",
     "bundle_modal_error.retry": "Try again",
     "column.blocks": "Blocked users",
     "column.community": "Local timeline",
@@ -254,7 +254,7 @@
     "login.fields.username_placeholder": "Username",
     "login.log_in": "Log in",
     "login.reset_password_hint": "Trouble logging in?",
-    "media_gallery.toggle_visible": "Toggle visibility",
+    "media_gallery.toggle_visible": "Hide",
     "missing_indicator.label": "Not found",
     "missing_indicator.sublabel": "This resource could not be found",
     "morefollows.followers_label": "…and {count} more {count, plural, one {follower} other {followers}} on remote sites.",
@@ -530,11 +530,11 @@
   "audio.play": "Play",
   "audio.unmute": "Unmute",
   "boost_modal.combo": "You can press {combo} to skip this next time",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "column.blocks": "Blocked users",
   "column.community": "Local timeline",
@@ -732,7 +732,7 @@
   "login.fields.username_placeholder": "Username",
   "login.log_in": "Log in",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "missing_indicator.label": "Not found",
   "missing_indicator.sublabel": "This resource could not be found",
   "morefollows.followers_label": "…and {count} more {count, plural, one {follower} other {followers}} on remote sites.",

app/soapbox/components/media_gallery.js

@@ -22,7 +22,7 @@ const ATTACHMENT_LIMIT = 4;
 const MAX_FILENAME_LENGTH = 45;
 
 const messages = defineMessages({
-  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
+  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide' },
 });
 
 const mapStateToItemProps = state => ({

app/soapbox/components/sidebar_menu.tsx

@@ -37,6 +37,7 @@ const messages = defineMessages({
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
   invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
+  addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
 });
 
 interface ISidebarLink {
@@ -87,28 +88,29 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
     onClose();
   };
 
-  const handleSwitchAccount = (account: AccountEntity): React.EventHandler<React.MouseEvent> => {
+  const handleSwitchAccount = (account: AccountEntity): React.MouseEventHandler => {
     return (e) => {
       e.preventDefault();
-      switchAccount(account);
       dispatch(switchAccount(account.id));
     };
   };
 
-  const onClickLogOut: React.EventHandler<React.MouseEvent> = (e) => {
+  const onClickLogOut: React.MouseEventHandler = (e) => {
     e.preventDefault();
     dispatch(logOut(intl));
   };
 
-  const handleSwitcherClick: React.EventHandler<React.MouseEvent> = (e) => {
+  const handleSwitcherClick: React.MouseEventHandler = (e) => {
     e.preventDefault();
 
     setSwitcher((prevState) => (!prevState));
   };
 
   const renderAccount = (account: AccountEntity) => (
-    <a href='/' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
-      <Account account={account} showProfileHoverCard={false} />
+    <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
+      <div className='pointer-events-none'>
+        <Account account={account} showProfileHoverCard={false} withRelationship={false} />
+      </div>
     </a>
   );
 
@@ -163,26 +165,31 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   <Account account={account} showProfileHoverCard={false} />
                 </Link>
 
-                {/* TODO: make this available to everyone */}
-                {account.staff && (
-                  <Stack>
-                    <button type='button' onClick={handleSwitcherClick} className='py-1'>
-                      <HStack alignItems='center' justifyContent='between'>
-                        <Text tag='span' size='sm' weight='medium'>Switch accounts</Text>
+                <Stack>
+                  <button type='button' onClick={handleSwitcherClick} className='py-1'>
+                    <HStack alignItems='center' justifyContent='between'>
+                      <Text tag='span' size='sm' weight='medium'>Switch accounts</Text>
 
-                        <Icon
-                          src={switcher ? require('@tabler/icons/icons/chevron-up.svg') : require('@tabler/icons/icons/chevron-down.svg')} className='sidebar-menu-profile__caret'
-                        />
-                      </HStack>
-                    </button>
+                      <Icon
+                        src={require('@tabler/icons/icons/chevron-down.svg')}
+                        className={classNames('text-black dark:text-white transition-transform', {
+                          'rotate-180': switcher,
+                        })}
+                      />
+                    </HStack>
+                  </button>
 
-                    {switcher && (
-                      <div className='border-t border-solid border-gray-200'>
-                        {otherAccounts.map(account => renderAccount(account))}
-                      </div>
-                    )}
-                  </Stack>
-                )}
+                  {switcher && (
+                    <div className='border-t border-solid border-gray-200'>
+                      {otherAccounts.map(account => renderAccount(account))}
+
+                      <NavLink className='flex py-2 space-x-1' to='/login' onClick={handleClose}>
+                        <Icon className='dark:text-white' src={require('@tabler/icons/icons/plus.svg')} />
+                        <Text>{intl.formatMessage(messages.addAccount)}</Text>
+                      </NavLink>
+                    </div>
+                  )}
+                </Stack>
               </Stack>
 
               <ProfileStats

app/soapbox/features/compose/components/compose_form.js

@@ -370,12 +370,12 @@ class ComposeForm extends ImmutablePureComponent {
         >
           <div className='flex items-center space-x-2'>
             {features.media && <UploadButtonContainer />}
+            <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
             {features.polls && <PollButtonContainer />}
             {features.privacyScopes && <PrivacyDropdownContainer />}
             {features.scheduledStatuses && <ScheduleButtonContainer />}
             {features.spoilers && <SpoilerButtonContainer />}
             {features.richText && <MarkdownButtonContainer />}
-            <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
           </div>
 
           <div className='flex items-center space-x-4 ml-auto'>

app/soapbox/features/developers/developers_menu.tsx

@@ -63,6 +63,14 @@ const Developers = () => {
           </Text>
         </Link>
 
+        <Link to='/error/network' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+          <SvgIcon src={require('@tabler/icons/icons/refresh.svg')} className='dark:text-gray-100' />
+
+          <Text>
+            <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
+          </Text>
+        </Link>
+
         <button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
           <SvgIcon src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
 

app/soapbox/features/status/components/status-interaction-bar.tsx

@@ -5,11 +5,10 @@ import { FormattedNumber } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
-import emojify from 'soapbox/features/emoji/emoji';
 import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
 import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
 
-import { HStack, IconButton, Text } from '../../../components/ui';
+import { HStack, IconButton, Text, Emoji } from '../../../components/ui';
 
 import type { Status } from 'soapbox/types/entities';
 
@@ -135,39 +134,28 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
 
     if (count > 0) {
       return (
-        <div className='emoji-reacts-container'>
+        <HStack space={0.5} className='emoji-reacts-container' alignItems='center'>
           <div className='emoji-reacts'>
             {emojiReacts.map((e, i) => {
-              const emojiReact = (
-                <>
-                  <span
-                    className='emoji-react__emoji'
-                    dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
+              return (
+                <HStack space={0.5} className='emoji-react p-1' alignItems='center' key={i}>
+                  <Emoji
+                    className='emoji-react__emoji w-5 h-5 flex-none'
+                    emoji={e.get('name')}
+                    onClick={features.exposableReactions ? handleOpenReactionsModal(e) : undefined}
                   />
-                  <span className='emoji-react__count'>{e.get('count')}</span>
-                </>
+                  <Text theme='muted' size='sm' className='emoji-react__count'>
+                    <FormattedNumber value={e.get('count')} />
+                  </Text>
+                </HStack>
               );
-
-              if (features.exposableReactions) {
-                return (
-                  <span
-                    className='emoji-react'
-                    role='presentation'
-                    key={i}
-                    onClick={handleOpenReactionsModal(e)}
-                  >
-                    {emojiReact}
-                  </span>
-                );
-              }
-
-              return <span className='emoji-react' key={i}>{emojiReact}</span>;
             })}
           </div>
-          <div className='emoji-reacts__count'>
-            {count}
-          </div>
-        </div>
+
+          <Text theme='muted' size='sm' className='emoji-reacts__count'>
+            <FormattedNumber value={count} />
+          </Text>
+        </HStack>
       );
     }
 

app/soapbox/features/ui/components/bundle_column_error.js

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import IconButton from '../../../components/icon_button';
-
-import Column from './column';
-import ColumnHeader from './column_header';
-
-const messages = defineMessages({
-  title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
-  body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this component.' },
-  retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' },
-});
-
-class BundleColumnError extends React.PureComponent {
-
-  static propTypes = {
-    onRetry: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  handleRetry = () => {
-    this.props.onRetry();
-  }
-
-  render() {
-    const { intl: { formatMessage } } = this.props;
-
-    return (
-      <Column>
-        <ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
-        <div className='error-column'>
-          <IconButton title={formatMessage(messages.retry)} src={require('@tabler/icons/icons/refresh.svg')} onClick={this.handleRetry} />
-          {formatMessage(messages.body)}
-        </div>
-      </Column>
-    );
-  }
-
-}
-
-export default injectIntl(BundleColumnError);

app/soapbox/features/ui/components/bundle_column_error.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Column, Stack, Text, IconButton } from 'soapbox/components/ui';
+
+const messages = defineMessages({
+  title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
+  body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this page.' },
+  retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' },
+});
+
+interface IBundleColumnError {
+  onRetry: () => void,
+}
+
+const BundleColumnError: React.FC<IBundleColumnError> = ({ onRetry }) => {
+  const intl = useIntl();
+
+  const handleRetry = () => {
+    onRetry();
+  };
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <Stack space={4} alignItems='center' justifyContent='center' className='bg-primary-50 dark:bg-slate-700 p-10 min-h-[160px] rounded-lg'>
+        <IconButton
+          iconClassName='w-20 h-20'
+          title={intl.formatMessage(messages.retry)}
+          src={require('@tabler/icons/icons/refresh.svg')}
+          onClick={handleRetry}
+        />
+
+        <Text align='center'>{intl.formatMessage(messages.body)}</Text>
+      </Stack>
+    </Column>
+  );
+};
+
+export default BundleColumnError;

app/soapbox/features/ui/components/bundle_modal_error.js

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import IconButton from '../../../components/icon_button';
 
 const messages = defineMessages({
-  error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
+  error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this page.' },
   retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
   close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
 });

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { logOut, switchAccount } from 'soapbox/actions/auth';
 import { fetchOwnAccounts } from 'soapbox/actions/auth';
 import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
 import Account from '../../../components/account';
@@ -36,9 +36,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
 
-  const currentAccount = useOwnAccount();
   const authUsers = useAppSelector((state) => state.auth.get('users'));
-  const isCurrentAccountStaff = Boolean(currentAccount?.staff);
   const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.get('id'))));
 
   const handleLogOut = () => {
@@ -77,13 +75,11 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
 
     menu.push({ text: null });
 
-    if (isCurrentAccountStaff) {
-      menu.push({
-        text: intl.formatMessage(messages.add),
-        to: '/login',
-        icon: require('@tabler/icons/icons/plus.svg'),
-      });
-    }
+    menu.push({
+      text: intl.formatMessage(messages.add),
+      to: '/login',
+      icon: require('@tabler/icons/icons/plus.svg'),
+    });
 
     menu.push({
       text: intl.formatMessage(messages.logout, { acct: account.acct }),
@@ -93,7 +89,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     });
 
     return menu;
-  }, [account, isCurrentAccountStaff, authUsers]);
+  }, [account, authUsers]);
 
   React.useEffect(() => {
     fetchOwnAccountThrottled();

app/soapbox/features/ui/index.js

@@ -364,7 +364,8 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/developers/settings_store' developerOnly page={DefaultPage} component={SettingsStore} content={children} />
         <WrappedRoute path='/developers/timeline' developerOnly page={DefaultPage} component={TestTimeline} content={children} />
         <WrappedRoute path='/developers' page={DefaultPage} component={Developers} content={children} />
-        <WrappedRoute path='/error' page={EmptyPage} component={IntentionalError} content={children} />
+        <WrappedRoute path='/error/network' developerOnly page={EmptyPage} component={() => new Promise((resolve, reject) => reject())} content={children} />
+        <WrappedRoute path='/error' developerOnly page={EmptyPage} component={IntentionalError} content={children} />
 
         {hasCrypto && <WrappedRoute path='/donate/crypto' publicRoute page={DefaultPage} component={CryptoDonate} content={children} />}
         {features.federating && <WrappedRoute path='/federation_restrictions' publicRoute page={DefaultPage} component={FederationRestrictions} content={children} />}

app/soapbox/locales/ast.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "Pues primir {combo} pa saltar esto la próxima vegada",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",
@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/bg.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "You can press {combo} to skip this next time",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Опитай отново",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",
@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/br.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "You can press {combo} to skip this next time",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Klask endro",
   "bundle_column_error.title": "Fazi rouedad",
   "bundle_modal_error.close": "Serriñ",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Klask endro",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",
@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/defaultMessages.json

@@ -378,7 +378,7 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "Toggle visibility",
+        "defaultMessage": "Hide",
         "id": "media_gallery.toggle_visible"
       },
       {
@@ -5245,7 +5245,7 @@
         "id": "bundle_column_error.title"
       },
       {
-        "defaultMessage": "Something went wrong while loading this component.",
+        "defaultMessage": "Something went wrong while loading this page.",
         "id": "bundle_column_error.body"
       },
       {
@@ -5258,7 +5258,7 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "Something went wrong while loading this component.",
+        "defaultMessage": "Something went wrong while loading this page.",
         "id": "bundle_modal_error.message"
       },
       {

app/soapbox/locales/en.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "You can press {combo} to skip this next time",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",
@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth.",

app/soapbox/locales/ga.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "You can press {combo} to skip this next time",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",
@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/hi.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "You can press {combo} to skip this next time",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",
@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/hr.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "Možeš pritisnuti {combo} kako bi ovo preskočio sljedeći put",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",

app/soapbox/locales/io.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "Tu povas presar sur {combo} por omisar co en la venonta foyo",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",

app/soapbox/locales/lt.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "You can press {combo} to skip this next time",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",
@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/lv.json

@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/mk.json

@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/ms.json

@@ -142,11 +142,11 @@
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",
   "boost_modal.combo": "You can press {combo} to skip this next time",
-  "bundle_column_error.body": "Something went wrong while loading this component.",
+  "bundle_column_error.body": "Something went wrong while loading this page.",
   "bundle_column_error.retry": "Try again",
   "bundle_column_error.title": "Network error",
   "bundle_modal_error.close": "Close",
-  "bundle_modal_error.message": "Something went wrong while loading this component.",
+  "bundle_modal_error.message": "Something went wrong while loading this page.",
   "bundle_modal_error.retry": "Try again",
   "chat_box.actions.close": "Close chat",
   "chat_box.actions.send": "Send",
@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/soapbox/locales/nn.json

@@ -577,7 +577,7 @@
   "login.otp_log_in": "OTP Login",
   "login.otp_log_in.fail": "Invalid code, please try again.",
   "login.reset_password_hint": "Trouble logging in?",
-  "media_gallery.toggle_visible": "Toggle visibility",
+  "media_gallery.toggle_visible": "Hide",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",
   "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:",

app/styles/components/emoji-reacts.scss

@@ -1,5 +1,6 @@
 .emoji-react {
   @apply inline-block text-gray-900 dark:text-gray-300 no-underline;
+  transition: 0.2s;
 
   &__emoji {
     img {
@@ -13,7 +14,7 @@
   }
 
   + .emoji-react {
-    margin-right: -8px;
+    @apply -mr-3;
   }
 
   &[type='button'] {
@@ -64,7 +65,6 @@
 
 .emoji-reacts-container {
   display: inline-flex;
-  margin-right: 0.4em;
 
   &:hover {
     .emoji-react {
@@ -81,13 +81,6 @@
   }
 }
 
-.emoji-reacts__count,
-.emoji-react__count {
-  font-size: 12px;
-  font-weight: bold;
-  transform: translateY(2px);
-}
-
 .emoji-react-selector-container {
   &:hover,
   &:focus {

app/styles/components/sidebar-menu.scss

@@ -134,7 +134,7 @@
 
 .sidebar-menu-item {
   display: flex;
-  padding: 16px 18px;
+  padding: 16px 0;
   cursor: pointer;
   text-decoration: none;
   color: var(--primary-text-color--faint);

app/styles/components/status.scss

@@ -15,7 +15,7 @@
 
   ul,
   ol {
-    margin-left: 20px;
+    @apply pl-10;
   }
 
   ul {
@@ -27,9 +27,7 @@
   }
 
   blockquote {
-    padding: 5px 0 5px 15px;
-    border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
-    color: var(--primary-text-color--faint);
+    @apply py-1 pl-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
   }
 
   code {
@@ -37,10 +35,14 @@
     cursor: text;
   }
 
+  p > code,
+  pre {
+    @apply bg-gray-100 dark:bg-slate-900;
+  }
+
   /* Inline code */
   p > code {
     padding: 2px 4px;
-    background-color: var(--background-color);
     border-radius: 4px;
   }
 
@@ -52,7 +54,6 @@
     padding: 8px 12px;
     margin-bottom: 20px;
     word-break: break-all;
-    background-color: var(--background-color);
   }
 
   /* Markdown images */