Change the title of sensitive button by state (#6771)

Icon showing the state may be confusing. (does the slahed eye icon mean
the state that it is sensitive, or to mark it as sensitive?) Moreover, it
may not help for blind people.

The title will give the precise representation of the current state.

1 files changed, 3 insertions, 2 deletions

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 c8e74f5a1..43de8f213 100644
--- a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
+++ b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
@@ -9,7 +9,8 @@ import spring from 'react-motion/lib/spring';
 import { injectIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-  title: { id: 'compose_form.sensitive', defaultMessage: 'Mark media as sensitive' },
+  marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
+  unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
 });
 
 const mapStateToProps = state => ({
@@ -50,7 +51,7 @@ class SensitiveButton extends React.PureComponent {
             <div className={className} style={{ transform: `scale(${scale})` }}>
               <IconButton
                 className='compose-form__sensitive-button__icon'
-                title={intl.formatMessage(messages.title)}
+                title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
                 icon={icon}
                 onClick={onClick}
                 size={18}