Adjusts styles of table tree

Fixes #12725

2 files changed, 34 insertions, 10 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 64854a67678..0e67e35b606 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -127,6 +127,9 @@
     &.btn-xs {
       margin-right: 3px;
     }
+    i {
+      font-size: 11px;
+    }
   }
   &.disabled {
     pointer-events: auto !important;
@@ -190,8 +193,4 @@
   .btn-green {
     @include btn-green
   }
-}
-
-.btn-icon {
-  
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 4ff549ade1f..ab12f2d55e0 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,6 +1,12 @@
 .tree-holder {
   > .nav-block {
-    margin: 11px 0;
+    margin: 22px 0 0 0;
+    background: #F8FAFC;
+    padding: 9px 9px 4px 14px;
+    border: 1px solid #EBECF0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-width: 0;
   }
 
   .file-finder {
@@ -13,7 +19,18 @@
 
   .tree-table {
     margin-bottom: 0;
-
+    border: 1px solid #EEF0F2;
+    thead {
+      th {
+        background-color: white;
+
+        &:last-child {
+          .light {
+            color: #8C9AAC;
+          }
+        }
+      }
+    }
     tr:nth-child(odd) {
       background-color: #F7F9FB;
     }
@@ -28,8 +45,6 @@
       &:hover {
         td {
           background: $hover;
-          border-top: 1px solid #ADF;
-          border-bottom: 1px solid #ADF;
         }
         cursor: pointer;
       }
@@ -48,10 +63,14 @@
       max-width: 320px;
       vertical-align: middle;
 
-      i, a {
+      a {
         color: $gl-link-color;
       }
 
+      i {
+        color: #797B7D;
+      }
+
       img {
         position: relative;
         top:-1px;
@@ -60,10 +79,16 @@
 
     .tree_commit {
       max-width: 320px;
+      a {
+        color: #8C9AAC;
+      }
     }
 
     .tree_time_ago {
       min-width: 135px;
+      time {
+        color: #8C9AAC;
+      }
     }
   }
 
@@ -129,5 +154,5 @@
 
 .tree-controls {
   float: right;
-  margin-top: 11px;
+  margin: 32px 7px 0 0;
 }