From b24938b5ffea39ea78b1757d4e58f0deec16716f Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 29 May 2019 14:37:32 -0400
Subject: [PATCH] UX: Minor composer button alignment adjustments,
 simplification

---
 .../javascripts/discourse/templates/composer.hbs  |  2 --
 app/assets/stylesheets/common/base/compose.scss   | 10 +---------
 app/assets/stylesheets/desktop/compose.scss       | 10 ++++------
 app/assets/stylesheets/mobile/compose.scss        | 15 +++++++--------
 4 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 99e723803a1..4ae081b2124 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -176,7 +176,6 @@
               </div>
             </div>
 
-            <div class="composer-bottom-right">
               {{#if site.mobileView}}
                 {{#if allowUpload}}
                   <a class="btn btn-default no-text mobile-file-upload {{if isUploading 'hidden'}}">
@@ -195,7 +194,6 @@
                 <a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
               {{/if}}
 
-            </div>
           </div>
         </div>
 
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 283bb99e02d..4c564bc178e 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -280,6 +280,7 @@
     flex-basis: 50%;
     display: flex;
     align-items: center;
+    margin-right: auto;
     button {
       flex: 0 0 auto;
     }
@@ -314,15 +315,6 @@
     }
   }
 
-  .composer-bottom-right {
-    flex-basis: 50%;
-    display: flex;
-    flex-direction: row-reverse;
-    .toggle-preview {
-      order: 2;
-    }
-  }
-
   #draft-status,
   #file-uploading {
     color: $primary-high;
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index e91f93cbd08..0594ca8e51d 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -202,12 +202,10 @@
   width: calc(50% - 65px);
 }
 
-.composer-bottom-right {
-  a {
-    color: $primary-high;
-    &:hover {
-      color: $tertiary;
-    }
+a.toggle-preview {
+  color: $primary-high;
+  &:hover {
+    color: $tertiary;
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 2138c44cdcd..e73ac05898d 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -71,22 +71,21 @@
       flex: 1 1 auto;
       #draft-status,
       #file-uploading {
-        margin-left: 15px;
+        margin-left: 6px;
       }
       .cancel {
-        font-size: 1.6em;
+        font-size: 1.4em;
         color: $primary-low-mid;
         margin-left: 0.6em;
-        padding: 0 5px;
+        padding: 3px 6px;
       }
     }
-    .composer-bottom-right {
-      margin-left: auto;
-      flex: 1 1 auto;
+    .mobile-file-upload:not(.hidden),
+    .mobile-preview {
+      // Alignment fix, remove if converted to buttons
+      display: inline-flex;
     }
-
     .mobile-file-upload {
-      order: 2;
       &.hidden + .mobile-preview {
         // Hide preview button while file is uploading to make room for upload progress
         display: none;