Updated components, style modules

app/javascript/gabsocial/components/modal/compose_modal/compose_modal.js

@@ -1,11 +1,7 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Avatar from '../../avatar';
-import ComposeFormContainer from '../../../features/compose/containers/compose_form_container';
 import { openModal } from '../../../actions/modal';
 import { cancelReplyCompose } from '../../../actions/compose';
-import { me } from '../../../initial_state';
 import ModalLayout from '../modal_layout';
 
 const messages = defineMessages({
@@ -15,7 +11,6 @@ const messages = defineMessages({
 
 const mapStateToProps = state => {
   return {
-    account: state.getIn(['accounts', me]),
     composeText: state.getIn(['compose', 'text']),
   };
 };
@@ -25,7 +20,6 @@ export default @connect(mapStateToProps)
 class ComposeModal extends ImmutablePureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired,
     composeText: PropTypes.string,
@@ -49,16 +43,11 @@ class ComposeModal extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, account } = this.props;
+    const { intl } = this.props;
 
     return (
       <ModalLayout title={intl.formatMessage(messages.title)} onClose={onClickClose}>
-        <div className='timeline-compose-block'>
-          <div className='timeline-compose-block__avatar'>
-            <Avatar account={account} size={32} />
-          </div>
-          <ComposeFormContainer />
-        </div>
+        <TimelineComposeBlock />
       </ModalLayout>
     );
   }

app/javascript/gabsocial/components/modal/index.js

@@ -24,4 +24,4 @@ export {
   ReportModal,
   UnauthorizedModal,
   VideoModal,
-}
+};

app/javascript/gabsocial/components/modal/media_modal/media_modal.js

@@ -15,6 +15,7 @@ const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
   next: { id: 'lightbox.next', defaultMessage: 'Next' },
+  viewContext: { id: 'lightbox.view_context', defaultMessage: 'View context' },
 });
 
 export const previewState = 'previewMediaModal';
@@ -228,7 +229,9 @@ class MediaModal extends ImmutablePureComponent {
 
           {status && (
             <div className={classNames('media-modal__meta', { 'media-modal__meta--shifted': media.size > 1 })}>
-              <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
+              <a href={status.get('url')} onClick={this.handleStatusClick}>
+                {intl.formatMessage(messages.viewContext)}
+              </a>
             </div>
           )}
 

app/javascript/gabsocial/components/modal/mute_modal/mute_modal.js

@@ -1,10 +1,16 @@
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
 import ToggleSwitch from '../../toggle_switch';
 import Button from '../../button';
 import { closeModal } from '../../../actions/modal';
 import { muteAccount } from '../../../actions/accounts';
 import { toggleHideNotifications } from '../../../actions/mutes';
 
+const messages = defineMessages({
+  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
+  hideNotifications: { id: 'mute_modal.hide_notifications', defaultMessage: 'Hide notifications from this user?' },
+  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+});
 
 const mapStateToProps = state => {
   return {
@@ -72,15 +78,11 @@ class MuteModal extends PureComponent {
       <div className='modal-root__modal mute-modal'>
         <div className='mute-modal__container'>
           <p>
-            <FormattedMessage
-              id='confirmations.mute.message'
-              defaultMessage='Are you sure you want to mute {name}?'
-              values={{ name: <strong>@{account.get('acct')}</strong> }}
-            />
+            {intl.formatMessage(messages.muteMessage, { name: <strong>@{account.get('acct')}</strong> })}
           </p>
           <div>
             <label htmlFor='mute-modal__hide-notifications-checkbox'>
-              <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
+              {intl.formatMessage(messages.hideNotifications)}
               {' '}
               <ToggleSwitch id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} />
             </label>
@@ -89,10 +91,10 @@ class MuteModal extends PureComponent {
 
         <div className='mute-modal__action-bar'>
           <Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
-            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+            {intl.formatMessage(messages.cancel)}
           </Button>
           <Button onClick={this.handleClick} ref={this.setRef}>
-            <FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />
+            {intl.formatMessage(messages.confirm)}
           </Button>
         </div>
       </div>

app/javascript/gabsocial/components/modal/report_modal/report_modal.js

@@ -1,5 +1,5 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { OrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ToggleSwitch from '../../toggle_switch';
@@ -14,6 +14,10 @@ const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
   submit: { id: 'report.submit', defaultMessage: 'Submit' },
+  hint: { id: 'report.hint', defaultMessage: 'The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:' },
+  forwardHint: { id: 'report.forward_hint', defaultMessage: 'The account is from another server. Send an anonymized copy of the report there as well?' },
+  forward: { id: 'report.forward', defaultMessage: 'Forward to {target}' },
+  target: { id: 'report.target', defaultMessage: 'Report {target}' },
 });
 
 const makeMapStateToProps = () => {
@@ -89,12 +93,14 @@ class ReportModal extends ImmutablePureComponent {
       <div className='modal-root__modal report-modal'>
         <div className='report-modal__target'>
           <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
-          <FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
+          {intl.formatMessage(messages.target, {
+            target: <strong>{account.get('acct')}</strong>
+          })}
         </div>
 
         <div className='report-modal__container'>
           <div className='report-modal__comment'>
-            <p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:' /></p>
+            <p>{intl.formatMessage(messages.hint)}</p>
 
             <textarea
               className='setting-text light'
@@ -108,11 +114,15 @@ class ReportModal extends ImmutablePureComponent {
 
             {domain && (
               <div>
-                <p><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
+                <p>{intl.formatMessage(messages.forwardHint)}</p>
 
                 <div className='setting-toggle'>
                   <ToggleSwitch id='report-forward' checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
-                  <label htmlFor='report-forward' className='setting-toggle__label'><FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} /></label>
+                  <label htmlFor='report-forward' className='setting-toggle__label'>
+                    {intl.formatMessage(messages.forward, {
+                      target: domain
+                    })}
+                  </label>
                 </div>
               </div>
             )}