diff --git a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js index 761ae8c08..63c0e8ae4 100644 --- a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js +++ b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js @@ -1,7 +1,8 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import TextIconButton from '../components/text_icon_button'; +import classNames from 'classnames'; +import IconButton from '../../../components/icon_button'; import { changeComposeSensitivity } from '../../../actions/compose'; import Motion from 'react-motion/lib/Motion'; import spring from 'react-motion/lib/spring'; @@ -38,11 +39,26 @@ class SensitiveButton extends React.PureComponent { return ( - {({ scale }) => -
- -
- } + {({ scale }) => { + const icon = active ? 'eye-slash' : 'eye'; + const className = classNames('compose-form__sensitive-button', { + 'compose-form__sensitive-button--visible': visible, + }); + return ( +
+ +
+ ); + }}
); } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 1cd0eba74..ecfc186eb 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -306,6 +306,18 @@ line-height: 27px; } +.compose-form__sensitive-button { + display: none; + + &.compose-form__sensitive-button--visible { + display: block; + } + + .compose-form__sensitive-button__icon { + line-height: 27px; + } +} + .compose-form__upload-wrapper { overflow: hidden; }