diff --git a/app/javascript/mastodon/features/compose/containers/warning_container.jsx b/app/javascript/mastodon/features/compose/containers/warning_container.jsx index 7a212342c79..9f9285d74d3 100644 --- a/app/javascript/mastodon/features/compose/containers/warning_container.jsx +++ b/app/javascript/mastodon/features/compose/containers/warning_container.jsx @@ -10,36 +10,29 @@ import { HASHTAG_PATTERN_REGEX } from 'mastodon/utils/hashtags'; import Warning from '../components/warning'; const mapStateToProps = state => ({ - needsLockWarning: state.getIn(['compose', 'privacy']) === 'private' && !state.getIn(['accounts', me, 'locked']), hashtagWarning: state.getIn(['compose', 'privacy']) !== 'public' && HASHTAG_PATTERN_REGEX.test(state.getIn(['compose', 'text'])), + needsLockWarning: state.getIn(['compose', 'privacy']) === 'private' && !state.getIn(['accounts', me, 'locked']), directMessageWarning: state.getIn(['compose', 'privacy']) === 'direct', }); -const WarningWrapper = ({ needsLockWarning, hashtagWarning, directMessageWarning }) => { - if (needsLockWarning) { - return }} />} />; - } - - if (hashtagWarning) { - return } />; - } - - if (directMessageWarning) { +const WarningWrapper = ({ hashtagWarning, needsLockWarning, directMessageWarning }) => { + if ( hashtagWarning || needsLockWarning || directMessageWarning) { const message = ( - - - + <> + {hashtagWarning && } + {needsLockWarning && }} />} + {directMessageWarning && } + ); return ; } - return null; }; WarningWrapper.propTypes = { - needsLockWarning: PropTypes.bool, hashtagWarning: PropTypes.bool, + needsLockWarning: PropTypes.bool, directMessageWarning: PropTypes.bool, }; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 87e13ee45e2..67322c823a7 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -546,6 +546,14 @@ body > [data-popper-placement] { text-decoration: none; } } + + & > span { + display: block; + + &:not(:first-child) { + margin-top: 0.5em; + } + } } .spoiler-input {