Merge branch 'small-fixes' into 'develop'

Small fixes

Closes #927, #936, and #933

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

app/soapbox/components/badge.tsx

@@ -15,7 +15,7 @@ const Badge: React.FC<IBadge> = ({ title, slug }) => (
       'bg-yellow-500': slug === 'donor',
       'bg-black': slug === 'admin',
       'bg-cyan-600': slug === 'moderator',
-      'bg-gray-100 text-gray-800': slug === 'bot',
+      'bg-gray-100 text-gray-900': slug === 'bot',
       'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
     })}
   >

app/soapbox/components/status_action_bar.tsx

@@ -636,7 +636,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           count={replyCount}
         />
 
-        {features.quotePosts && me ? (
+        {(features.quotePosts && me) ? (
           <DropdownMenuContainer
             items={reblogMenu}
             disabled={!publicStatus}

app/soapbox/features/notifications/components/notification.tsx

@@ -45,7 +45,7 @@ const icons: Record<NotificationType, string> = {
   mention: require('@tabler/icons/icons/at.svg'),
   favourite: require('@tabler/icons/icons/heart.svg'),
   reblog: require('@tabler/icons/icons/repeat.svg'),
-  status: require('@tabler/icons/icons/home.svg'),
+  status: require('@tabler/icons/icons/bell-ringing.svg'),
   poll: require('@tabler/icons/icons/chart-bar.svg'),
   move: require('@tabler/icons/icons/briefcase.svg'),
   'pleroma:chat_mention': require('@tabler/icons/icons/messages.svg'),

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

@@ -522,49 +522,29 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
 
     const reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');
 
-    let reblogButton;
-
-    if (me && features.quotePosts) {
-      const reblogMenu: Menu = [
-        {
-          text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog),
-          action: this.handleReblogClick,
-          icon: require('@tabler/icons/icons/repeat.svg'),
-        },
-        {
-          text: intl.formatMessage(messages.quotePost),
-          action: this.handleQuoteClick,
-          icon: require('@tabler/icons/icons/quote.svg'),
-        },
-      ];
-
-      reblogButton = (
-        <DropdownMenuContainer
-          items={reblogMenu}
-          disabled={!publicStatus}
-          active={status.get('reblogged')}
-          pressed={status.get('reblogged')}
-          title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
-          src={reblogIcon}
-          text={intl.formatMessage(messages.reblog)}
-          onShiftClick={this.handleReblogClick}
-        />
-      );
-    } else {
-      reblogButton = (
-        <IconButton
-          disabled={reblog_disabled}
-          className={classNames({
-            'text-gray-400 hover:text-gray-600': !status.get('reblogged'),
-            'text-success-600 hover:text-success-600': status.get('reblogged'),
-          })}
-          title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
-          src={reblogIcon}
-          onClick={this.handleReblogClick}
-          text={intl.formatMessage(messages.reblog)}
-        />
-      );
-    }
+    const reblogMenu: Menu = [{
+      text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
+      action: this.handleReblogClick,
+      icon: require('@tabler/icons/icons/repeat.svg'),
+    }, {
+      text: intl.formatMessage(messages.quotePost),
+      action: this.handleQuoteClick,
+      icon: require('@tabler/icons/icons/quote.svg'),
+    }];
+
+    const reblogButton = (
+      <IconButton
+        disabled={reblog_disabled}
+        className={classNames({
+          'text-gray-400 hover:text-gray-600': !status.reblogged,
+          'text-success-600 hover:text-success-600': status.reblogged,
+        })}
+        title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
+        src={reblogIcon}
+        onClick={this.handleReblogClick}
+        text={intl.formatMessage(messages.reblog)}
+      />
+    );
 
     return (
       <HStack justifyContent='between'>
@@ -576,7 +556,17 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
           text={intl.formatMessage(messages.reply)}
         />
 
-        {reblogButton}
+        {(features.quotePosts && me) ? (
+          <DropdownMenuContainer
+            items={reblogMenu}
+            disabled={!publicStatus}
+            onShiftClick={this.handleReblogClick}
+          >
+            {reblogButton}
+          </DropdownMenuContainer>
+        ) : (
+          reblogButton
+        )}
 
         {features.emojiReacts ? (
           <EmojiButtonWrapper statusId={status.id}>

app/soapbox/pages/profile_page.tsx

@@ -27,23 +27,22 @@ interface IProfilePage {
   },
 }
 
+/** Page to display a user's profile. */
 const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
   const history = useHistory();
+  const username = params?.username || '';
 
-  const { accountId, account, accountUsername, realAccount } = useAppSelector(state => {
-    const username = params?.username || '';
+  const { accountId, account, realAccount } = useAppSelector(state => {
     const { accounts } = state;
     const accountFetchError = (((state.accounts.getIn([-1, 'username']) || '') as string).toLowerCase() === username.toLowerCase());
 
     let accountId: string | -1 | null = -1;
     let account = null;
-    let accountUsername = username;
     if (accountFetchError) {
       accountId = null;
     } else {
       account = findAccountByUsername(state, username);
       accountId = account ? account.id : -1;
-      accountUsername = account ? account.acct : '';
     }
 
     let realAccount;
@@ -57,7 +56,6 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
     return {
       account: typeof accountId === 'string' ? getAccount(state, accountId) : account,
       accountId,
-      accountUsername,
       realAccount,
     };
   });
@@ -66,24 +64,30 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
   const features = useFeatures();
   const { displayFqn } = useSoapboxConfig();
 
+  // Redirect from a user ID
   if (realAccount) {
     return <Redirect to={`/@${realAccount.acct}`} />;
   }
 
+  // Fix case of username
+  if (account && account.acct !== username) {
+    return <Redirect to={`/@${account.acct}`} />;
+  }
+
   const tabItems = [
     {
       text: <FormattedMessage id='account.posts' defaultMessage='Posts' />,
-      to: `/@${accountUsername}`,
+      to: `/@${username}`,
       name: 'profile',
     },
     {
       text: <FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' />,
-      to: `/@${accountUsername}/with_replies`,
+      to: `/@${username}/with_replies`,
       name: 'replies',
     },
     {
       text: <FormattedMessage id='account.media' defaultMessage='Media' />,
-      to: `/@${accountUsername}/media`,
+      to: `/@${username}/media`,
       name: 'media',
     },
   ];
@@ -100,14 +104,14 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
   }
 
   let activeItem;
-  const pathname = history.location.pathname.replace(`@${accountUsername}/`, '');
+  const pathname = history.location.pathname.replace(`@${username}/`, '');
   if (pathname.includes('with_replies')) {
     activeItem = 'replies';
   } else if (pathname.includes('media')) {
     activeItem = 'media';
   } else if (pathname.includes('favorites')) {
     activeItem = 'likes';
-  } else if (pathname === `/@${accountUsername}`) {
+  } else {
     activeItem = 'profile';
   }
 
@@ -117,13 +121,13 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
         <Column label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}>
           <div className='space-y-4'>
             {/* @ts-ignore */}
-            <HeaderContainer accountId={accountId} username={accountUsername} />
+            <HeaderContainer accountId={accountId} username={username} />
 
             <BundleContainer fetchComponent={ProfileInfoPanel}>
-              {Component => <Component username={accountUsername} account={account} />}
+              {Component => <Component username={username} account={account} />}
             </BundleContainer>
 
-            {account && activeItem && (
+            {account && (
               <Tabs items={tabItems} activeItem={activeItem} />
             )}