diff --git a/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.js b/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.js index 8f163979f..fa1ae8821 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { changeComposeSensitivity } from 'flavours/glitch/actions/compose'; import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; -import Icon from 'flavours/glitch/components/icon'; const messages = defineMessages({ marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' }, @@ -42,9 +41,19 @@ class SensitiveButton extends React.PureComponent { return (
- +
); } diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 86041da20..bb333d35f 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -61,9 +61,35 @@ padding: 10px; padding-top: 0; - .icon-button { - font-size: 14px; - font-weight: 500; + font-size: 14px; + font-weight: 500; + + &.active { + color: $highlight-text-color; + } + + input[type=checkbox] { + display: none; + } + + .checkbox { + display: inline-block; + position: relative; + border: 1px solid $ui-primary-color; + box-sizing: border-box; + width: 18px; + height: 18px; + flex: 0 0 auto; + margin-left: 5px; + margin-right: 10px; + top: -1px; + border-radius: 4px; + vertical-align: middle; + + &.active { + border-color: $highlight-text-color; + background: $highlight-text-color; + } } }