Progress

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

@@ -29,7 +29,7 @@ class ComposeModal extends ImmutablePureComponent {
   };
 
   onClickClose = () => {
-    const {composeText, dispatch, onClose, intl} = this.props;
+    const { composeText, dispatch, onClose, intl } = this.props;
 
     if (composeText) {
       dispatch(openModal('CONFIRM', {
@@ -44,12 +44,15 @@ class ComposeModal extends ImmutablePureComponent {
     }
   };
 
-  render () {
+  render() {
     const { intl } = this.props;
 
     return (
-      <ModalLayout title={intl.formatMessage(messages.title)} onClose={this.onClickClose}>
-        <TimelineComposeBlock />
+      <ModalLayout
+        noPadding
+        title={intl.formatMessage(messages.title)} onClose={this.onClickClose}
+      >
+        <TimelineComposeBlock modal />
       </ModalLayout>
     );
   }

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

@@ -130,7 +130,7 @@ class ModalBase extends PureComponent {
           <Fragment>
             <div
               role='presentation'
-              className={[_s.default, _s.backgroundColorPrimaryOpaque, _s.positionFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+              className={[_s.default, _s.backgroundColorOpaque, _s.positionFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
               onClick={this.handleOnClose}
             />
             <div

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

@@ -17,7 +17,12 @@ class ModalLayout extends PureComponent {
   }
 
   render() {
-    const { title, children, intl, onClose } = this.props
+    const {
+      title,
+      children,
+      intl,
+      onClose,
+    } = this.props
 
     return (
       <div className={[_s.width645PX].join(' ')}>
@@ -27,12 +32,13 @@ class ModalLayout extends PureComponent {
               {title}
             </Heading>
             <Button
-              className=''
+              backgroundColor='none'
               title={intl.formatMessage(messages.close)}
+              className={_s.marginLeftAuto}
               onClick={onClose}
-              icon='times'
-              iconWidth='20px'
-              iconWidth='20px'
+              icon='close'
+              iconWidth='10px'
+              iconWidth='10px'
             />
           </div>
           <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>