Change hashtag follow icon button into a text buttonredesign/hashtag-column-follow-button

3 files changed, 14 insertions, 15 deletions

diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.jsx b/app/javascript/mastodon/features/hashtag_timeline/index.jsx
index b6ed29d8deb..cafef76cc17 100644
--- a/app/javascript/mastodon/features/hashtag_timeline/index.jsx
+++ b/app/javascript/mastodon/features/hashtag_timeline/index.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
@@ -17,17 +17,11 @@ import { fetchHashtag, followHashtag, unfollowHashtag } from 'mastodon/actions/t
 import { expandHashtagTimeline, clearTimeline } from 'mastodon/actions/timelines';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
-import { Icon }  from 'mastodon/components/icon';
 
 import StatusListContainer from '../ui/containers/status_list_container';
 
 import ColumnSettingsContainer from './containers/column_settings_container';
 
-const messages = defineMessages({
-  followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
-  unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' },
-});
-
 const mapStateToProps = (state, props) => ({
   hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}${props.params.local ? ':local' : ''}`, 'unread']) > 0,
   tag: state.getIn(['tags', props.params.id]),
@@ -48,7 +42,6 @@ class HashtagTimeline extends PureComponent {
     hasUnread: PropTypes.bool,
     tag: ImmutablePropTypes.map,
     multiColumn: PropTypes.bool,
-    intl: PropTypes.object,
   };
 
   handlePin = () => {
@@ -188,7 +181,7 @@ class HashtagTimeline extends PureComponent {
   };
 
   render () {
-    const { hasUnread, columnId, multiColumn, tag, intl } = this.props;
+    const { hasUnread, columnId, multiColumn, tag } = this.props;
     const { id, local } = this.props.params;
     const pinned = !!columnId;
     const { signedIn } = this.context.identity;
@@ -198,13 +191,13 @@ class HashtagTimeline extends PureComponent {
     if (tag) {
       const following = tag.get('following');
 
-      const classes = classNames('column-header__button', {
+      const classes = classNames('column-header__text-button button', {
         active: following,
       });
 
       followButton = (
-        <button className={classes} onClick={this.handleFollow} disabled={!signedIn} title={intl.formatMessage(following ? messages.unfollowHashtag : messages.followHashtag)} aria-label={intl.formatMessage(following ? messages.unfollowHashtag : messages.followHashtag)}>
-          <Icon id={following ? 'user-times' : 'user-plus'} fixedWidth className='column-header__icon' />
+        <button className={classes} onClick={this.handleFollow} disabled={!signedIn}>
+          {following ? <FormattedMessage id='hashtag.unfollow_button' defaultMessage='Unfollow' /> : <FormattedMessage id='hashtag.follow_button' defaultMessage='Follow' />}
         </button>
       );
     }
@@ -245,4 +238,4 @@ class HashtagTimeline extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(injectIntl(HashtagTimeline));
+export default connect(mapStateToProps)(HashtagTimeline);
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 2c901f3bd64..d28815eea1a 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -295,8 +295,8 @@
   "hashtag.column_settings.tag_mode.any": "Any of these",
   "hashtag.column_settings.tag_mode.none": "None of these",
   "hashtag.column_settings.tag_toggle": "Include additional tags for this column",
-  "hashtag.follow": "Follow hashtag",
-  "hashtag.unfollow": "Unfollow hashtag",
+  "hashtag.follow_button": "Follow",
+  "hashtag.unfollow_button": "Unfollow",
   "home.actions.go_to_explore": "See what's trending",
   "home.actions.go_to_suggestions": "Find people to follow",
   "home.column_settings.basic": "Basic",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index f46ac685318..ac3396182be 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3983,6 +3983,12 @@ a.status-card {
   }
 }
 
+.column-header__text-button {
+  align-self: center;
+  margin-inline-start: 8px;
+  margin-inline-end: 8px;
+}
+
 .column-header__collapsible {
   max-height: 70vh;
   overflow: hidden;