From 2f996375e5f459ec94adf2c7bce3b4524b7de55a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 26 Jun 2023 05:26:41 +0200 Subject: [PATCH] [Glitch] Fix search not being easily findable on smaller screens in web UI Port 2b78c07ef16c8cb89f95393aa12f0d79efdc41c2 to glitch-soc Signed-off-by: Claire --- .../glitch/features/ui/components/header.jsx | 18 +++++++++++++----- .../glitch/styles/components/misc.scss | 5 +++-- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/app/javascript/flavours/glitch/features/ui/components/header.jsx b/app/javascript/flavours/glitch/features/ui/components/header.jsx index 873ff20e79..f2b89f3bdc 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/modal'; import { fetchServer } from 'flavours/glitch/actions/server'; import { Avatar } from 'flavours/glitch/components/avatar'; +import { Icon } from 'flavours/glitch/components/icon'; import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo'; import Permalink from 'flavours/glitch/components/permalink'; import { registrationsOpen, me } from 'flavours/glitch/initial_state'; @@ -22,6 +23,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', }); @@ -45,7 +50,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 () { @@ -55,14 +61,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' && } ); @@ -85,6 +92,7 @@ class Header extends PureComponent { content = ( <> + {location.pathname !== '/search' && } {signupButton} @@ -107,4 +115,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/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss index 53620eeb3c..208204021a 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.scss @@ -108,12 +108,13 @@ text-transform: none; 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; }