Merge pull request #2989 from Azure/krrish-error-warning

Error and Warnings UI Modified
Azure · Aug 15, 2018 · 4e07934 · 4e07934
2 parents 6191aa0 + f938a5b
commit 4e07934
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/client/src/app/errors-warnings/errors-warnings.component.scss b/client/src/app/errors-warnings/errors-warnings.component.scss
@@ -45,6 +45,7 @@ table {
   border-style: solid;
   thead {
     display: block;
+    background: $errors-warnings-table-header-background-color;
   }
   tbody {
     font-family: "Segoe UI";
@@ -55,13 +56,31 @@ table {
   }
 }
 tr {
-  min-height: 25px;
+  min-height: 30px;
   width: 100%;
-  display: block;
+  vertical-align: middle;
+  border-bottom: 0.5px solid $errors-warnings-table-border-color;
 }
-tr:hover {
+
+tbody tr:hover {
   background: $errors-warnings-table-row-hover-color;
+  border-bottom: 0.5px solid $errors-warnings-table-border-hover-color;
+}
+
+table th + th {
+  border-left: 0.5px solid $errors-warnings-table-border-color;
+}
+
+table td + td {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  border-left: 0.5px solid $errors-warnings-table-border-color;
 }
+
+tbody tr:hover td + td {
+  border-left: 0.5px solid $errors-warnings-table-border-hover-color;
+}
+
 td, th {
   padding: 0px 10px;
 }
@@ -70,6 +89,9 @@ td, th {
     table {
         background: $errors-warnings-table-background-color-dark;
     }
+    thead {
+      background: $errors-warnings-table-header-background-color-dark;
+    }
     tr:hover {
         background-color: $errors-warnings-table-row-hover-color-dark;
     }

diff --git a/client/src/sass/common/_variables.scss b/client/src/sass/common/_variables.scss
@@ -109,8 +109,11 @@ $custom-sq-picker-header-bg-color: rgb(217, 217, 217);
 
 $errors-warnings-table-background-color: whitesmoke;
 $errors-warnings-table-background-color-dark: #323232;
+$errors-warnings-table-header-background-color: #C6C6C6;
+$errors-warnings-table-header-background-color-dark: darken($errors-warnings-table-background-color-dark, 10%);
 
 $errors-warnings-table-border-color: lightgray;
+$errors-warnings-table-border-hover-color: #C6C6C6;
 $errors-warnings-table-row-hover-color: lightgray;
 $errors-warnings-table-row-hover-color-dark: darken($errors-warnings-table-background-color-dark, 5%);
 
@@ -136,12 +139,12 @@ $summary-header-color:  rgb(0, 88, 173);
 $console-text-color: white;
 $console-background-color: black;
 $powershell-background-color: #002456;
-$console-error-color: red;
+$console-error-color: #FF6161;
 $console-default-msg-color: rgb(197, 195, 195);
 $bash-cursor-text-color: black;
 $bash-cursor-background-color: white;
 
 $log-info: #00BFFF;
 $log-warning: orange;
-$log-error: orangered;
+$log-error: #FF6161;
 $log-console-connector: #898787;