From 2b78c07ef16c8cb89f95393aa12f0d79efdc41c2 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 26 Jun 2023 05:26:41 +0200 Subject: [PATCH] Fix search not being easily findable on smaller screens in web UI (#25576) --- .../mastodon/features/ui/components/header.jsx | 18 +++++++++++++----- app/javascript/mastodon/locales/en.json | 2 +- app/javascript/styles/mastodon/components.scss | 5 +++-- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/header.jsx b/app/javascript/mastodon/features/ui/components/header.jsx index 05abc1ca6..bdd1c7305 100644 --- a/app/javascript/mastodon/features/ui/components/header.jsx +++ b/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 => ({ )); +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' && } + {location.pathname !== '/search' && } + {location.pathname !== '/publish' && } ); @@ -84,6 +91,7 @@ class Header extends PureComponent { content = ( <> + {location.pathname !== '/search' && } {signupButton} @@ -106,4 +114,4 @@ class Header extends PureComponent { } -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header)); +export default injectIntl(withRouter(connect(mapStateToProps, mapDispatchToProps)(Header))); diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 63ab26bc5..da3b6e19e 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/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}}", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 81dee20d3..15a14ce57 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/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; }