Fix search not being easily findable on smaller screens in web UI (#25576)

app/javascript/mastodon/features/ui/components/header.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { Link, withRouter } from 'react-router-dom';
 
@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { openModal } from 'mastodon/actions/modal';
 import { fetchServer } from 'mastodon/actions/server';
 import { Avatar } from 'mastodon/components/avatar';
+import { Icon } from 'mastodon/components/icon';
 import { WordmarkLogo, SymbolLogo } from 'mastodon/components/logo';
 import { registrationsOpen, me } from 'mastodon/initial_state';
 
@@ -21,6 +22,10 @@ const Account = connect(state => ({
   </Link>
 ));
 
+const messages = defineMessages({
+  search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
+});
+
 const mapStateToProps = (state) => ({
   signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up',
 });
@@ -44,7 +49,8 @@ class Header extends PureComponent {
     openClosedRegistrationsModal: PropTypes.func,
     location: PropTypes.object,
     signupUrl: PropTypes.string.isRequired,
-    dispatchServer: PropTypes.func
+    dispatchServer: PropTypes.func,
+    intl: PropTypes.object.isRequired,
   };
 
   componentDidMount () {
@@ -54,14 +60,15 @@ class Header extends PureComponent {
 
   render () {
     const { signedIn } = this.context.identity;
-    const { location, openClosedRegistrationsModal, signupUrl } = this.props;
+    const { location, openClosedRegistrationsModal, signupUrl, intl } = this.props;
 
     let content;
 
     if (signedIn) {
       content = (
         <>
-          {location.pathname !== '/publish' && <Link to='/publish' className='button'><FormattedMessage id='compose_form.publish_form' defaultMessage='Publish' /></Link>}
+          {location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' /></Link>}
+          {location.pathname !== '/publish' && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
           <Account />
         </>
       );
@@ -84,6 +91,7 @@ class Header extends PureComponent {
 
       content = (
         <>
+          {location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' /></Link>}
           {signupButton}
           <a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
         </>
@@ -106,4 +114,4 @@ class Header extends PureComponent {
 
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));
+export default injectIntl(withRouter(connect(mapStateToProps, mapDispatchToProps)(Header)));

app/javascript/mastodon/locales/en.json

@@ -147,7 +147,7 @@
   "compose_form.poll.switch_to_multiple": "Change poll to allow multiple choices",
   "compose_form.poll.switch_to_single": "Change poll to allow for a single choice",
   "compose_form.publish": "Publish",
-  "compose_form.publish_form": "Publish",
+  "compose_form.publish_form": "New post",
   "compose_form.publish_loud": "{publish}!",
   "compose_form.save_changes": "Save changes",
   "compose_form.sensitive.hide": "{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}",

app/javascript/styles/mastodon/components.scss

@@ -133,12 +133,13 @@
     color: $darker-text-color;
     background: transparent;
     padding: 6px 17px;
-    border: 1px solid $ui-primary-color;
+    border: 1px solid lighten($ui-base-color, 12%);
 
     &:active,
     &:focus,
     &:hover {
-      border-color: lighten($ui-primary-color, 4%);
+      background: lighten($ui-base-color, 4%);
+      border-color: lighten($ui-base-color, 16%);
       color: lighten($darker-text-color, 4%);
       text-decoration: none;
     }