From 0d5540ca092063aefc58f2da88bc6626591e66b4 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Thu, 28 Sep 2017 09:41:33 +0200
Subject: [PATCH] cleaned up html/sass and added final touches

---
 .../features/alerting/partials/alert_tab.html | 12 +++---
 .../app/plugins/panel/alertlist/module.html   | 40 +++++++++----------
 public/sass/pages/_alerting.scss              | 10 ++++-
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 5c053a360e2..a17e58ea83d 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -151,14 +151,14 @@
 								<div class="alert-list-icon alert-list-item-state {{ah.stateModel.stateClass}}">
 									<i class="{{ah.stateModel.iconClass}}"></i>
 								</div>
-								<div class="alert-list-main">
-									<p class="alert-list-state alert-list-text {{ah.stateModel.stateClass}}">{{ah.stateModel.text}}</p>
-									<p class="alert-list-text">{{ah.info}}</p>
+								<div class="alert-list-main alert-list-text">
+									<span class="alert-list-state {{ah.stateModel.stateClass}}">{{ah.stateModel.text}}</span>
+									<span class="alert-list-info">{{ah.info}}</span>
 								</div>
 							</div>
-							<div class="alert-list-footer">
-								<p class="alert-list-text">{{ah.time}}</p>
-								<p class="alert-list-text">Img Link -></p>
+							<div class="alert-list-footer alert-list-text">
+								<span>{{ah.time}}</span>
+								<span><!--Img Link--></span>
 							</div>
 						</div>
 					</li>
diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html
index 0ae24dac7fe..42749bbbecc 100644
--- a/public/app/plugins/panel/alertlist/module.html
+++ b/public/app/plugins/panel/alertlist/module.html
@@ -2,24 +2,22 @@
   <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
     <ol class="card-list">
       <li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
-        <div class="card-item card-item--alert">
-          <div class="card-item-body">
-            <div class="card-item-details">
-              <div class="card-item-notice">
-                <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
-                  {{alert.name}}
-                </a>
-              </div>
-              <div class="card-item-sub-name">
-                <span class="alert-list-item-state {{alert.stateModel.stateClass}}">
+        <div class="alert-list card-item card-item--alert">
+          <div class="alert-list-body">
+              <div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
                   <i class="{{alert.stateModel.iconClass}}"></i>
-                  {{alert.stateModel.text}}
-                </span> for {{alert.newStateDateAgo}}
               </div>
-              <div class="small muted" ng-show="alert.executionError">
-                {{alert.executionError}}
-              </div>
-            </div>
+              <div class="alert-list-main">
+                  <p class="alert-list-title">
+                    <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
+                      {{alert.name}}
+                    </a>
+                  </p>
+                  <p class="alert-list-text">
+                    <span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
+                   for {{alert.newStateDateAgo}}
+                  </p>
+                </div>
           </div>
         </div>
       </li>
@@ -36,13 +34,15 @@
             </div>
             <div class="alert-list-main">
               <p class="alert-list-title">{{al.title}}</p>
-              <p class="alert-list-state alert-list-text {{al.stateModel.stateClass}}">{{al.stateModel.text}}</p>
-              <p class="alert-list-text">{{al.info}}</p>
+              <div class="alert-list-text">
+                <span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
+                <span class="alert-list-info alert-list-info-left">{{al.info}}</span>
+              </div>
             </div>
           </div>
           <div class="alert-list-footer">
-            <p class="alert-list-text">{{al.time}}</p>
-            <p class="alert-list-text">Img Link -></p>
+            <span class="alert-list-text">{{al.time}}</span>
+            <span class="alert-list-text"><!--Img Link--></span>
           </div>
         </div>
       </li>
diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss
index 3f97ef1a73c..6db3470f3ea 100644
--- a/public/sass/pages/_alerting.scss
+++ b/public/sass/pages/_alerting.scss
@@ -73,6 +73,15 @@
   font-size: $font-size-sm;
   margin: 0;
   line-height: 1.5rem;
+  color: $text-color-weak;
+}
+
+.alert-list-info {
+  color: $text-color;
+}
+
+.alert-list-info-left {
+  padding-left: 2rem;
 }
 
 .alert-list-footer {
@@ -80,7 +89,6 @@
   justify-content: space-between;
   flex-direction: column;
   align-items: flex-end;
-  color: $text-color-weak;
 }
 
 .panel-has-alert {