1 files changed, 86 insertions, 111 deletions

diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 5ff4e487d04..65f0a0d18e2 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -7,6 +7,8 @@ $ide-context-header-padding: 10px;
 $ide-project-avatar-end: $ide-context-header-padding + 48px;
 $ide-tree-padding: $gl-padding;
 $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
+$ide-commit-row-height: 32px;
+$ide-commit-header-height: 48px;
 
 .project-refs-form,
 .project-refs-target-form {
@@ -51,83 +53,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   flex: 1;
   min-height: 0; // firefox fix
 
-  .file {
-    height: 32px;
-    cursor: pointer;
-
-    &.file-active {
-      background: $theme-gray-100;
-    }
-
-    .ide-file-name {
-      flex: 1;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      max-width: inherit;
-      line-height: 16px;
-      display: inline-block;
-      height: 18px;
-
-      svg {
-        vertical-align: middle;
-        margin-right: 2px;
-      }
-
-      .loading-container {
-        margin-right: 4px;
-        display: inline-block;
-      }
-    }
-
-    .ide-file-icon-holder {
-      display: flex;
-      align-items: center;
-      color: $theme-gray-700;
-    }
-
-    .ide-file-changed-icon {
-      margin-left: auto;
-
-      > svg {
-        display: block;
-      }
-    }
-
-    .ide-new-btn {
-      display: none;
-
-      .btn {
-        padding: 2px 5px;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      .ide-new-btn {
-        display: block;
-      }
-    }
-
-    .folder-icon {
-      fill: $gl-text-color-secondary;
-    }
-  }
-
   a {
     color: $gl-text-color;
   }
-
-  th {
-    position: sticky;
-    top: 0;
-  }
-}
-
-.file-name {
-  display: flex;
-  overflow: visible;
-  align-items: center;
-  width: 100%;
 }
 
 .multi-file-loading-container {
@@ -567,24 +495,11 @@ $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: $ide-commit-header-height;
   border-bottom: 1px solid $white-dark;
   padding: 12px 0;
 }
 
-.multi-file-commit-panel-header-title {
-  display: flex;
-  flex: 1;
-  align-items: center;
-
-  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;
@@ -594,8 +509,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 {
@@ -638,8 +551,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   }
 }
 
-.multi-file-commit-list-path,
-.ide-file-list .file {
+.multi-file-commit-list-path {
   display: flex;
   align-items: center;
   margin-left: -$grid-size;
@@ -647,29 +559,31 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   padding: $grid-size / 2 $grid-size;
   border-radius: $border-radius-default;
   text-align: left;
+  cursor: pointer;
+  height: $ide-commit-row-height;
+  padding-right: 0;
 
   &:hover,
   &:focus {
     background: $theme-gray-100;
+
+    outline: 0;
+
+    .multi-file-discard-btn {
+      > .btn {
+        display: flex;
+      }
+    }
   }
 
   &:active {
     background: $theme-gray-200;
   }
-}
-
-.multi-file-commit-list-path {
-  cursor: pointer;
 
   &.is-active {
     background-color: $white-normal;
   }
 
-  &:hover,
-  &:focus {
-    outline: 0;
-  }
-
   svg {
     min-width: 16px;
     vertical-align: middle;
@@ -679,6 +593,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .multi-file-commit-list-file-path {
   @include str-truncated(calc(100% - 30px));
+  user-select: none;
 
   &:active {
     text-decoration: none;
@@ -686,9 +601,11 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .multi-file-discard-btn {
-  top: 4px;
-  right: 8px;
-  bottom: 4px;
+  > .btn {
+    display: none;
+    width: $ide-commit-row-height;
+    height: $ide-commit-row-height;
+  }
 
   svg {
     top: 0;
@@ -807,10 +724,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .ide-staged-action-btn {
-  width: 22px;
-  margin-left: -1px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  width: $ide-commit-row-height;
+  height: $ide-commit-row-height;
+  color: inherit;
 
   > svg {
     top: 0;
@@ -1401,9 +1317,17 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   }
 }
 
-.ide-new-btn .dropdown.show .ide-entry-dropdown-toggle {
-  color: $white-normal;
-  background-color: $blue-500;
+.ide-new-btn {
+  display: none;
+
+  .btn {
+    padding: 2px 5px;
+  }
+
+  .dropdown.show .ide-entry-dropdown-toggle {
+    color: $white-normal;
+    background-color: $blue-500;
+  }
 }
 
 .ide-preview-header {
@@ -1442,3 +1366,54 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   top: 50%;
   transform: translateY(-50%);
 }
+
+.ide-file-templates {
+  padding: $grid-size $gl-padding;
+  background-color: $gray-light;
+  border-bottom: 1px solid $white-dark;
+
+  .dropdown {
+    min-width: 180px;
+  }
+
+  .dropdown-content {
+    max-height: 222px;
+  }
+}
+
+.ide-commit-editor-header {
+  height: 65px;
+  padding: 8px 16px;
+  background-color: $theme-gray-50;
+  box-shadow: inset 0 -1px $white-dark;
+}
+
+.ide-commit-list-changed-icon {
+  width: $ide-commit-row-height;
+  height: $ide-commit-row-height;
+}
+
+.ide-file-icon-holder {
+  display: flex;
+  align-items: center;
+  color: $theme-gray-700;
+}
+
+.ide-file-changed-icon {
+  margin-left: auto;
+
+  > svg {
+    display: block;
+  }
+}
+
+.file-row:hover,
+.file-row:focus {
+  .ide-new-btn {
+    display: block;
+  }
+
+  .folder-icon {
+    fill: $gl-text-color-secondary;
+  }
+}