Updated compose modal

Added "publish" button on top of modal. Added compose modal scroll functionality. Updated max height for textbox. Removed avatar, arrow on compose modal for more room. Updated image upload sizes for composer.
Fixes: #83

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -233,6 +233,8 @@ class ComposeForm extends ImmutablePureComponent {
       publishText = intl.formatMessage(messages.schedulePost);
     }
 
+    const showPublish = isModalOpen ? false : !condensed;
+
     const composeClassNames = classNames({
       'compose-form': true,
       'condensed': condensed,
@@ -309,7 +311,7 @@ class ComposeForm extends ImmutablePureComponent {
         }
 
         {
-          !condensed &&
+          showPublish &&
           <div className='compose-form__publish'>
             <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
           </div>

app/javascript/gabsocial/features/compose/components/upload.js

@@ -10,6 +10,7 @@ import Icon from 'gabsocial/components/icon';
 
 const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
+  delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
 });
 
 export default @injectIntl
@@ -100,7 +101,7 @@ class Upload extends ImmutablePureComponent {
           {({ scale }) => (
             <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
               <div className={classNames('compose-form__upload__actions', { active })}>
-                <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
+                <button className='icon-button' title={intl.formatMessage(messages.delete)} onClick={this.handleUndoClick}><Icon id='times'/></button>
                 {media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
               </div>
 

app/javascript/gabsocial/features/compose/components/upload_form.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import UploadProgressContainer from '../containers/upload_progress_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -13,12 +14,15 @@ export default class UploadForm extends ImmutablePureComponent {
 
   render () {
     const { mediaIds } = this.props;
+    const classes = classNames('compose-form__uploads-wrapper', {
+      'contains-media': mediaIds.size !== 0,
+    });
 
     return (
       <div className='compose-form__upload-wrapper'>
         <UploadProgressContainer />
 
-        <div className='compose-form__uploads-wrapper'>
+        <div className={classes}>
           {mediaIds.map(id => (
             <UploadContainer id={id} key={id} />
           ))}