A bit improvements for GitLab CI UI

6 files changed, 96 insertions, 40 deletions

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 1dd5da5..9dba478 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -28,22 +28,15 @@
 @import "font-awesome";
 
 /**
- * Generic css (forms, buttons etc):
+ * Generic css (forms, nav etc):
  */
-@import "generic/xterm.scss";
-@import "generic/common.scss";
-@import "generic/typography.scss";
-@import "generic/buttons.scss";
-@import "generic/forms.scss";
+@import "generic/*";
 
 /**
  * Page specific styles (issues, projects etc):
  */
-@import "sections/navbar.scss";
-@import "sections/projects.scss";
-@import "sections/builds.scss";
-@import "sections/login.scss";
-@import "sections/runners.scss";
+
+@import "sections/*";
 
 /*
  * NProgress
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index a15bf45..99119c6 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -7,6 +7,7 @@
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
+  border-color: #CCC;
   white-space: nowrap;
   padding: 6px 12px;
   font-size: 13px;
@@ -19,7 +20,6 @@
   user-select: none;
   color: #444444;
   background-color: #fff;
-  border-color: #ccc;
   text-shadow: none;
 
   &.hover,
@@ -59,23 +59,21 @@
 
   &.btn-primary {
     color: #ffffff;
-    background-color: #429bca;
-    border-color: #358ebd;
+    background-color: $bg_primary;
+    border-color: $border_primary;
 
     &.hover,
     &:hover,
     &.disabled,
     &[disabled] {
       color: #ffffff;
-      background-color: #3286b1;
-      border-color: #286e8e;
     }
   }
 
   &.btn-success {
     color: #ffffff;
-    background-color: #5cb85c;
-    border-color: #4cae4c;
+    background-color: $bg_success;
+    border-color: $border_success;
 
 
     &.hover,
@@ -83,15 +81,27 @@
     &.disabled,
     &[disabled] {
       color: #ffffff;
-      background-color: #47a447;
-      border-color: #398439;
     }
   }
 
   &.btn-danger {
     color: #ffffff;
-    background-color: #d9534f;
-    border-color: #d43f3a;
+    background-color: $bg_danger;
+    border-color: $border_danger;
+
+
+    &.hover,
+    &:hover,
+    &.disabled,
+    &[disabled] {
+      color: #ffffff;
+    }
+  }
+
+  &.btn-warning {
+    color: #ffffff;
+    background-color: $bg_warning;
+    border-color: $border_warning;
 
 
     &.hover,
@@ -99,8 +109,6 @@
     &.disabled,
     &[disabled] {
       color: #ffffff;
-      background-color: #d2322d;
-      border-color: #ac2925;
     }
   }
 
@@ -118,7 +126,6 @@
     @extend .btn-primary;
   }
 
-  &.btn-close,
   &.btn-remove {
     @extend .btn-danger;
   }
@@ -132,7 +139,7 @@
     padding-right: 20px;
   }
 
-  &.btn-small, &.btn-xs {
+  &.btn-small {
     padding: 2px 10px;
     font-size: 12px;
   }
@@ -143,6 +150,30 @@
     line-height: 16px;
     margin: 2px;
   }
+
+  &.btn-close {
+    color: $bg_danger;
+    border-color: $border_danger;
+    &:hover {
+      color: #B94A48;
+    }
+  }
+
+  &.btn-reopen {
+    color: $bg_success;
+    border-color: $border_success;
+    &:hover {
+      color: #468847;
+    }
+  }
+
+  &.btn-grouped {
+    margin-right: 7px;
+    float: left;
+    &:last-child {
+      margin-right: 0px;
+    }
+  }
 }
 
 .btn-block {
@@ -154,9 +185,8 @@
   }
 }
 
-.btn,
 .btn-group {
-  &.grouped {
+  &.btn-grouped {
     margin-right: 7px;
     float: left;
     &:last-child {
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 16ad7b6..f05af6f 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -54,17 +54,6 @@
   max-width: 82%;
 }
 
-.table {
-  thead {
-    th {
-      background: #eee;
-      color: #555;
-      border-bottom: 1px solid #CCC !important;
-      border-top: 1px solid #CCC !important;
-    }
-  }
-}
-
 .page-title {
   color: #444;
   line-height: 1.5;
diff --git a/app/assets/stylesheets/generic/tables.scss b/app/assets/stylesheets/generic/tables.scss
new file mode 100644
index 0000000..71a7d4a
--- /dev/null
+++ b/app/assets/stylesheets/generic/tables.scss
@@ -0,0 +1,20 @@
+table {
+  &.table {
+    tr {
+      td, th {
+        padding: 8px 10px;
+        line-height: 20px;
+        vertical-align: middle;
+      }
+      th {
+        font-weight: normal;
+        font-size: 15px;
+        border-bottom: 1px solid #CCC !important;
+      }
+      td {
+        border-color: #F1F1F1 !important;
+        border-bottom: 1px solid;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/main/variables.scss b/app/assets/stylesheets/main/variables.scss
index 7943357..d3440b9 100644
--- a/app/assets/stylesheets/main/variables.scss
+++ b/app/assets/stylesheets/main/variables.scss
@@ -6,3 +6,27 @@ $link_color: #3A89A3;
 $style_color: #246;
 $bg_style_color: #246;
 $hover: #D9EDF7;
+
+/*
+ * Success colors (green)
+ */
+$border_success: #019875;
+$bg_success: #019875;
+
+/*
+ * Danger colors (red)
+ */
+$border_danger: #d43f3a;
+$bg_danger: #d9534f;
+
+/*
+ * Primary colors (blue)
+ */
+$border_primary: #246;
+$bg_primary: #246;
+
+/*
+ * Warning colors (yellow)
+ */
+$bg_warning: #EB9532;
+$border_warning: #EB9532;
diff --git a/app/assets/stylesheets/sections/runners.scss b/app/assets/stylesheets/sections/runners.scss
index abf450d..ae098fe 100644
--- a/app/assets/stylesheets/sections/runners.scss
+++ b/app/assets/stylesheets/sections/runners.scss
@@ -7,6 +7,6 @@
     background: #32b186;
   }
   &.runner-state-specific {
-    background: #3286b1;
+    background: #3498db;
   }
 }