Improving alignment of resolve icons in alert messages

hawkular · Jun 16, 2015 · 30684e0 · 30684e0
1 parent d008dae
commit 30684e0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 37 deletions.
diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/alerts-view.html b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/alerts-view.html
@@ -90,7 +90,7 @@ <h1>No alerts have been fired.</h1>
   </div>
 </div>
 <div class="clearfix" ng-show="mac.alertList.length > 0">
-  <button class="btn btn-danger pull-right" ng-click="mac.resolveAll()" ng-disabled="mac.isResolvingAll">
-    <span class="fa fa-check-square-o" style="color:white"></span>
-    Resolve all</button>
+  <button class="btn btn-default pull-right" ng-click="mac.resolveAll()" ng-disabled="mac.isResolvingAll">
+    <i class="fa fa-check-square-o"></i> Resolve all
+  </button>
 </div>
diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/less/metrics-main.less b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/less/metrics-main.less
@@ -555,16 +555,14 @@ a:hover .fa-spinner {
 
   &.alert-danger {
     background-color: @danger-bg;
-
-    .fa {
-      color: @brand-danger;
-    }
   }
 
   &.alert {
+    display: table;
     font-size: ceil(@font-size-base + 1);
     margin-bottom: @grid-gutter-width/8*3;
     padding: @grid-gutter-width/3 @grid-gutter-width/2;
+    width: 100%;
 
     &:last-child {
       margin-bottom: 20px;
@@ -589,6 +587,25 @@ a:hover .fa-spinner {
       margin-right: 20px;
       min-width: 120px;
     }
+
+    .alert-resolver {
+      cursor: pointer;
+      display: table-cell;
+      padding-left: 1em;
+      width: 16px;
+
+      .fa {
+        margin-right: 0;
+        width: 16px;
+      }
+
+      .fa-check-square-o {
+
+        &:hover {
+          color: @link-hover-color;
+        }
+      }
+    }
   }
 }
 
@@ -1124,34 +1141,4 @@ section {
 #toast-container > .toast-error:after {
   content: "";
   color: #cc0000;
-}
-
-.alert {
-
-  .hk-event {
-    padding-right: 1em;
-  }
-
-  .alert-resolver {
-    position: absolute;
-    padding-left: 1em;
-    width: 2em;
-    right: 1em;
-    cursor: pointer;
-
-    a > i.fa.fa-square-o {
-      color: @gray;
-    }
-
-    a i.fa-check-square-o {
-
-      &:hover {
-        color: @link-hover-color;
-      }
-    }
-
-    a i.fa-check-square-o {
-      color: @link-hover-color;
-    }
-  }
 }