Add headlines to confirmation modals

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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

@@ -41,6 +41,8 @@ class ComposeModal extends ImmutablePureComponent {
 
     if (composeText) {
       dispatch(openModal('CONFIRM', {
+        icon: require('@tabler/icons/icons/trash.svg'),
+        heading: <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
         message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
         confirm: intl.formatMessage(messages.confirm),
         onConfirm: () => dispatch(cancelReplyCompose()),

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

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import Button from '../../../components/button';
 import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
+import Icon from '../../../components/icon';
 
 export default @injectIntl
 class ConfirmationModal extends React.PureComponent {
 
   static propTypes = {
+    heading: PropTypes.node,
+    icon: PropTypes.node,
     message: PropTypes.node.isRequired,
     confirm: PropTypes.node.isRequired,
     onClose: PropTypes.func.isRequired,
@@ -52,11 +55,18 @@ class ConfirmationModal extends React.PureComponent {
   }
 
   render() {
-    const { message, confirm, secondary, checkbox } = this.props;
+    const { heading, icon, message, confirm, secondary, checkbox } = this.props;
     const { checked } = this.state;
 
     return (
       <div className='modal-root__modal confirmation-modal'>
+        {heading && (
+          <div className='confirmation-modal__header'>
+            {icon && <Icon src={icon} />}
+            {heading}
+          </div>
+        )}
+
         <div className='confirmation-modal__container'>
           {message}
         </div>

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

@@ -3,10 +3,11 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import Toggle from 'react-toggle';
-import Button from '../../../components/button';
-import { closeModal } from '../../../actions/modal';
-import { muteAccount } from '../../../actions/accounts';
-import { toggleHideNotifications } from '../../../actions/mutes';
+import Button from 'soapbox/components/button';
+import Icon from 'soapbox/components/icon';
+import { closeModal } from 'soapbox/actions/modal';
+import { muteAccount } from 'soapbox/actions/accounts';
+import { toggleHideNotifications } from 'soapbox/actions/mutes';
 
 
 const mapStateToProps = state => {
@@ -73,6 +74,14 @@ class MuteModal extends React.PureComponent {
 
     return (
       <div className='modal-root__modal mute-modal'>
+        <div className='mute-modal__header'>
+          <Icon src={require('@tabler/icons/icons/circle-x.svg')} />
+          <FormattedMessage
+            id='confirmations.mute.heading'
+            defaultMessage='Mute @{name}'
+            values={{ name: account.get('acct') }}
+          />
+        </div>
         <div className='mute-modal__container'>
           <p>
             <FormattedMessage