design improvements

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>

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>

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

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>

app/assets/stylesheets/page_bundles/ide.scss

@@ -567,9 +567,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .multi-file-commit-panel-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
+  height: 48px;
   border-bottom: 1px solid $white-dark;
   padding: 12px 0;
 }
@@ -583,8 +581,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   flex: 1;
   overflow: auto;
   padding: $grid-size 0;
-  margin-left: -$grid-size;
-  margin-right: -$grid-size;
   min-height: 60px;
 
   &.form-text.text-muted {
@@ -649,6 +645,8 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .multi-file-commit-list-path {
   cursor: pointer;
+  height: 32px;
+  padding-right: 0;
 
   &.is-active {
     background-color: $white-normal;
@@ -657,6 +655,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   &:hover,
   &:focus {
     outline: 0;
+
+    .multi-file-discard-btn {
+      display: flex;
+    }
   }
 
   svg {
@@ -676,13 +678,16 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .multi-file-discard-btn {
-  top: 4px;
-  right: 8px;
-  bottom: 4px;
+  display: none;
 
   svg {
     top: 0;
   }
+
+  .btn {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 .multi-file-commit-form {
@@ -797,6 +802,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .ide-staged-action-btn {
+  width: 32px;
+  height: 32px;
+  color: inherit;
+
   > svg {
     top: 0;
   }
@@ -1443,7 +1452,13 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .ide-commit-editor-header {
+  height: 65px;
   padding: 8px 16px;
-  background-color: $white-normal;
+  background-color: $theme-gray-50;
   box-shadow: inset 0 -1px $white-dark;
 }
+
+.ide-commit-list-changed-icon {
+  width: 32px;
+  height: 32px;
+}