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;
+ }
}
}