design improvements

4 files changed, 30 insertions, 18 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 92cd46e9385..a69df0956bc 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -97,7 +97,7 @@ export default {
     class="ide-commit-list-container"
   >
     <header
-      class="multi-file-commit-panel-header"
+      class="multi-file-commit-panel-header d-flex mb-0"
     >
       <div
         class="d-flex align-items-center flex-fill"
@@ -131,7 +131,7 @@ export default {
             <icon
               :name="actionBtnIcon"
               :size="16"
-              class="mr-0"
+              class="ml-auto mr-auto"
             />
           </button>
           <button
@@ -144,7 +144,7 @@ export default {
               'disabled-content': !filesLength
             }"
             type="button"
-            class="d-flex ide-staged-action-btn p-0 border-0 align-items-center prepend-left-8"
+            class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
             data-placement="bottom"
             data-container="body"
             data-boundary="viewport"
@@ -153,7 +153,7 @@ export default {
             <icon
               :size="16"
               name="remove-all"
-              class="mr-0"
+              class="ml-auto mr-auto"
             />
           </button>
         </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 391004dcd3c..10c78a80302 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -2,6 +2,7 @@
 import { mapActions } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import StageButton from './stage_button.vue';
 import UnstageButton from './unstage_button.vue';
 import { viewerTypes } from '../../constants';
@@ -12,6 +13,7 @@ export default {
     Icon,
     StageButton,
     UnstageButton,
+    FileIcon,
   },
   directives: {
     tooltip,
@@ -48,7 +50,7 @@ export default {
       return `${getCommitIconMap(this.file).icon}${suffix}`;
     },
     iconClass() {
-      return `${getCommitIconMap(this.file).class} append-right-8`;
+      return `${getCommitIconMap(this.file).class} ml-auto mr-auto`;
     },
     fullKey() {
       return `${this.keyPrefix}-${this.file.key}`;
@@ -105,17 +107,24 @@ export default {
       @click="openFileInEditor"
     >
       <span class="multi-file-commit-list-file-path d-flex align-items-center">
-        <icon
-          :name="iconName"
-          :size="16"
-          :css-classes="iconClass"
+        <file-icon
+          :file-name="file.name"
+          class="append-right-8"
         />{{ file.name }}
       </span>
+      <div class="ml-auto d-flex align-items-center">
+        <div class="d-flex align-items-center ide-commit-list-changed-icon">
+          <icon
+            :name="iconName"
+            :size="16"
+            :css-classes="iconClass"
+          />
+        </div>
+        <component
+          :is="actionComponent"
+          :path="file.path"
+        />
+      </div>
     </div>
-    <component
-      :is="actionComponent"
-      :path="file.path"
-      class="d-flex position-absolute"
-    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
index 13e66e4bcf5..fb8392d2e1b 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
@@ -46,15 +46,16 @@ export default {
       :aria-label="__('Stage changes')"
       :title="__('Stage changes')"
       type="button"
-      class="btn btn-blank append-right-8 d-flex align-items-center"
+      class="btn btn-blank d-flex align-items-center"
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click="stageChange(path)"
+      @click.stop.prevent="stageChange(path)"
     >
       <icon
         :size="16"
         name="mobile-issue-close"
+        class="ml-auto mr-auto"
       />
     </button>
     <button
@@ -66,11 +67,12 @@ export default {
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click="showDiscardModal"
+      @click.stop.prevent="showDiscardModal"
     >
       <icon
         :size="16"
         name="remove"
+        class="ml-auto mr-auto"
       />
     </button>
     <gl-modal
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
index 4a24cf65e5a..95c80c31d41 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
@@ -36,11 +36,12 @@ export default {
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click="unstageChange(path)"
+      @click.stop.prevent="unstageChange(path)"
     >
       <icon
         :size="16"
         name="redo"
+        class="ml-auto mr-auto"
       />
     </button>
   </div>