Change icon and label depending on whether media is marked as sensitive (mastodon#10748)

* Change icon and label depending on whether media is marked as sensitive

* WiP use a checkbox

Author: ClearlyClaire

app/javascript/mastodon/features/compose/containers/sensitive_button_container.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { changeComposeSensitivity } from 'mastodon/actions/compose';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
-import Icon from 'mastodon/components/icon';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
@@ -38,9 +37,19 @@ class SensitiveButton extends React.PureComponent {
 
     return (
       <div className='compose-form__sensitive-button'>
-        <button className={classNames('icon-button', { active })} onClick={onClick} disabled={disabled} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
-          <Icon id='eye-slash' /> <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
-        </button>
+        <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
+          <input
+            name='mark-sensitive'
+            type='checkbox'
+            checked={active}
+            onChange={onClick}
+            disabled={disabled}
+          />
+
+          <span className={classNames('checkbox', { active })} />
+
+          <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
+        </label>
       </div>
     );
   }

app/javascript/styles/mastodon/components.scss

@@ -268,9 +268,34 @@
     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-right: 10px;
+      top: -1px;
+      border-radius: 4px;
+      vertical-align: middle;
+
+      &.active {
+        border-color: $highlight-text-color;
+        background: $highlight-text-color;
+      }
     }
   }