From 8a9e73521e25a7918f01ebd066eac62452aa50f9 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Fri, 18 Oct 2019 19:20:08 -0400
Subject: [PATCH] Updated compose modal publish button position

Removed fixed positioning of publish button on small screen sizes to top, keep at bottom as compose modal is now scrollable.
---
 .../features/compose/components/compose_form.js    |  6 +-----
 .../features/ui/components/compose_modal.js        |  2 +-
 app/javascript/styles/gabsocial/components.scss    | 14 +-------------
 3 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js
index 054160a9..6f237192 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -238,10 +238,6 @@ class ComposeForm extends ImmutablePureComponent {
       'condensed': condensed,
     });
 
-    const composeFormPublishClasses = classNames('compose-form__publish', {
-      'in-modal': isModalOpen,
-    });
-
     return (
       <div className={composeClassNames} ref={this.setForm} onClick={this.handleClick}>
         <WarningContainer />
@@ -314,7 +310,7 @@ class ComposeForm extends ImmutablePureComponent {
 
         {
           !condensed &&
-          <div className={composeFormPublishClasses}>
+          <div className='compose-form__publish'>
             <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
           </div>
         }
diff --git a/app/javascript/gabsocial/features/ui/components/compose_modal.js b/app/javascript/gabsocial/features/ui/components/compose_modal.js
index ef03f0f6..2aab09b0 100644
--- a/app/javascript/gabsocial/features/ui/components/compose_modal.js
+++ b/app/javascript/gabsocial/features/ui/components/compose_modal.js
@@ -55,10 +55,10 @@ class ComposeModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal compose-modal'>
         <div className='compose-modal__header'>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
           <h3 className='compose-modal__header__title'>
             <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new gab' />
           </h3>
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
         </div>
         <div className='compose-modal__content compose-modal__content--scroll'>
           <div className='timeline-compose-block'>
diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss
index f01332cb..a43b60da 100644
--- a/app/javascript/styles/gabsocial/components.scss
+++ b/app/javascript/styles/gabsocial/components.scss
@@ -4917,16 +4917,10 @@ noscript {
 
 	&__close {
 	position: absolute;
-	left: 10px;
+	right: 10px;
 	top: 10px;
 	}
 
-	&__publish {
-		position: absolute;
-		right: 10px;
-		top: 4px;
-	}
-
 	&__content {
 		display: flex;
 		flex-direction: row;
@@ -4967,12 +4961,6 @@ noscript {
 		border-radius: 0;
     height: 100vh;
 		width: 100vw;
-
-		.compose-form__publish.in-modal {
-			position: fixed;
-			top: 0;
-			right: 15px;
-		}
 	}
 }