ComposeModal, ComposeForm: adapt depending on privacy scope

app/soapbox/features/compose/components/compose_form.js

@@ -36,6 +36,7 @@ const messages = defineMessages({
   spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
   publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
+  message: { id: 'compose_form.message', defaultMessage: 'Message' },
   schedule: { id: 'compose_form.schedule', defaultMessage: 'Schedule' },
 });
 
@@ -257,8 +258,20 @@ export default class ComposeForm extends ImmutablePureComponent {
 
     let publishText = '';
 
-    if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
-      publishText = <span className='compose-form__publish-private'><Icon id='lock' /> {intl.formatMessage(messages.publish)}</span>;
+    if (this.props.privacy === 'direct') {
+      publishText = (
+        <>
+          <Icon src={require('@tabler/icons/icons/mail.svg')} />
+          {intl.formatMessage(messages.message)}
+        </>
+      );
+    } else if (this.props.privacy === 'private') {
+      publishText = (
+        <>
+          <Icon src={require('@tabler/icons/icons/lock.svg')} />
+          {intl.formatMessage(messages.publish)}
+        </>
+      );
     } else {
       publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
     }

app/soapbox/features/ui/components/compose_modal.js

@@ -19,6 +19,7 @@ const mapStateToProps = state => {
   return {
     account: state.getIn(['accounts', me]),
     composeText: state.getIn(['compose', 'text']),
+    privacy: state.getIn(['compose', 'privacy']),
   };
 };
 
@@ -29,6 +30,7 @@ class ComposeModal extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired,
     composeText: PropTypes.string,
+    privacy: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
   };
 
@@ -48,13 +50,17 @@ class ComposeModal extends ImmutablePureComponent {
   };
 
   render() {
-    const { intl } = this.props;
+    const { intl, privacy } = this.props;
 
     return (
       <div className='modal-root__modal compose-modal'>
         <div className='compose-modal__header'>
           <h3 className='compose-modal__header__title'>
-            <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' />
+            {privacy === 'direct' ? (
+              <FormattedMessage id='navigation_bar.compose_direct' defaultMessage='Direct message' />
+            ) : (
+              <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' />
+            )}
           </h3>
           <IconButton
             className='compose-modal__close'

app/styles/components/buttons.scss

@@ -14,7 +14,9 @@ button {
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
@@ -31,6 +33,10 @@ button {
   width: auto;
   transition: 0.2s;
 
+  .svg-icon {
+    margin-right: 5px;
+  }
+
   &:active,
   &:focus,
   &:hover {
@@ -113,7 +119,7 @@ button {
   }
 
   &.button--block {
-    display: block;
+    display: flex;
     width: 100%;
   }
 }