improved post form's icons at bottom display

2 files changed, 38 insertions, 14 deletions

diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index ac32ae83..1dda7bc1 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -31,12 +31,14 @@
 <script src="./media_upload.js" ></script>
 
 <style>
- .media-upload {
-     font-size: 26px;
-     min-width: 50px;
- }
+.media-upload {
+  .icon-upload {
+    cursor: pointer;
+  }
 
- .icon-upload {
-     cursor: pointer;
- }
+  label {
+    display: block;
+    width: 100%;
+  }
+}
 </style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0e0b0e60..89e51b97 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -159,6 +159,7 @@
         <div class="form-bottom-left">
           <media-upload
             ref="mediaUpload"
+            class="media-upload-icon"
             :drop-files="dropFiles"
             @uploading="disableSubmit"
             @uploaded="addMediaFile"
@@ -176,11 +177,11 @@
           <div
             v-if="pollsAvailable"
             class="poll-icon"
+            :class="{ selected: pollFormVisible }"
           >
             <i
               :title="$t('polls.add_poll')"
               class="icon-chart-bar btn btn-default"
-              :class="pollFormVisible && 'selected'"
               @click="togglePollForm"
             />
           </div>
@@ -316,6 +317,8 @@
   .form-bottom-left {
     display: flex;
     flex: 1;
+    padding-right: 7px;
+    margin-right: 7px;
   }
 
   .text-format {
@@ -325,19 +328,38 @@
     }
   }
 
-  .poll-icon, .emoji-icon {
+  .media-upload-icon, .poll-icon, .emoji-icon {
     font-size: 26px;
     flex: 1;
 
-    .selected {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
+    i {
+      display: block;
+      width: 100%;
     }
+
+    &.selected, &:hover {
+      // needs to be specific to override icon default color
+      i, label {
+        color: $fallback--lightText;
+        color: var(--lightText, $fallback--lightText);
+      }
+    }
+  }
+
+  // Order is not necessary but a good indicator
+  .media-upload-icon {
+    order: 1;
+    text-align: left;
   }
 
   .emoji-icon {
-    flex: 0;
-    min-width: 50px;
+    order: 2;
+    text-align: center;
+  }
+
+  .poll-icon {
+    order: 3;
+    text-align: right;
   }
 
   .icon-chart-bar {