1 files changed, 62 insertions, 25 deletions

diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 3a05a1cf2a9..450ef7d6b7e 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -68,6 +68,10 @@
 
     .ide-file-changed-icon {
       margin-left: auto;
+
+      > svg {
+        display: block;
+      }
     }
 
     .ide-new-btn {
@@ -525,9 +529,13 @@
   overflow: auto;
 }
 
-.multi-file-commit-empty-state-container {
-  align-items: center;
-  justify-content: center;
+.ide-commit-empty-state {
+  padding: 0 $gl-padding;
+}
+
+.ide-commit-empty-state-container {
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
 .multi-file-commit-panel-header {
@@ -536,35 +544,22 @@
   margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
   padding: $gl-btn-padding 0;
-
-  &.is-collapsed {
-    border-bottom: 1px solid $white-dark;
-
-    svg {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .multi-file-commit-panel-collapse-btn {
-      margin-right: auto;
-      margin-left: auto;
-      border-left: 0;
-    }
-  }
 }
 
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
-  padding: 0 $gl-btn-padding;
+  padding-left: $grid-size;
 
   svg {
     margin-right: $gl-btn-padding;
+    color: $theme-gray-700;
   }
 }
 
 .multi-file-commit-panel-collapse-btn {
   border-left: 1px solid $white-dark;
+  margin-left: auto;
 }
 
 .multi-file-commit-list {
@@ -578,12 +573,14 @@
   display: flex;
   padding: 0;
   align-items: center;
+  border-radius: $border-radius-default;
 
   .multi-file-discard-btn {
     display: none;
+    margin-top: -2px;
     margin-left: auto;
+    margin-right: $grid-size;
     color: $gl-link-color;
-    padding: 0 2px;
 
     &:focus,
     &:hover {
@@ -595,26 +592,31 @@
     background: $white-normal;
 
     .multi-file-discard-btn {
-      display: block;
+      display: flex;
     }
   }
 }
 
-.multi-file-addition {
+.multi-file-additions,
+.multi-file-additions-solid {
   fill: $green-500;
 }
 
-.multi-file-modified {
+.multi-file-modified,
+.multi-file-modified-solid {
   fill: $orange-500;
 }
 
 .multi-file-commit-list-collapsed {
   display: flex;
   flex-direction: column;
+  padding: $gl-padding 0;
 
-  > svg {
+  svg {
+    display: block;
     margin-left: auto;
     margin-right: auto;
+    color: $theme-gray-700;
   }
 
   .file-status-icon {
@@ -626,7 +628,7 @@
 
 .multi-file-commit-list-path {
   padding: $grid-size / 2;
-  padding-left: $gl-padding;
+  padding-left: $grid-size;
   background: none;
   border: 0;
   text-align: left;
@@ -811,6 +813,41 @@
   }
 }
 
+.ide-commit-list-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 16px;
+
+  &:not(.is-collapsed) {
+    flex: 1;
+    min-height: 140px;
+  }
+
+  &.is-collapsed {
+    .multi-file-commit-panel-header {
+      margin-left: -$gl-padding;
+      margin-right: -$gl-padding;
+
+      svg {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .multi-file-commit-panel-collapse-btn {
+        margin-right: auto;
+        margin-left: auto;
+        border-left: 0;
+      }
+    }
+  }
+}
+
+.ide-staged-action-btn {
+  margin-left: auto;
+  color: $gl-link-color;
+}
+
 .ide-commit-radios {
   label {
     font-weight: normal;