updated css and html for recent state changes for alert lists

public/app/features/alerting/partials/alert_tab.html

@@ -77,7 +77,6 @@
 						</ul>
 					</label>
 				</div>
-
 			</div>
 
 			<div class="gf-form-group">
@@ -147,23 +146,19 @@
 			<section class="card-section card-list-layout-list">
 				<ol class="card-list" >
 					<li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory">
-						<div class="card-item card-item--alert">
-              <div class="card-item-header">
-                <div class="card-item-type">
-                </div>
-              </div>
-							<div class="card-item-body">
-								<div class="card-item-details">
-									<div class="card-item-sub-name">
-										<span class="alert-list-item-state {{ah.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 {{ah.stateModel.stateClass}}">
 									<i class="{{ah.stateModel.iconClass}}"></i>
-                      {{ah.stateModel.text}}
-                    </span> {{ah.time}}
 								</div>
-									<div class="card-item-sub-name">
-										{{ah.info}}
+								<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>
 							</div>
+							<div class="alert-list-footer">
+								<p class="alert-list-text">{{ah.time}}</p>
+								<p class="alert-list-text">Img Link -></p>
 							</div>
 						</div>
 					</li>

public/app/plugins/panel/alertlist/module.html

@@ -27,22 +27,22 @@
   </section>
 
   <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
-    <ol class="card-list">
+    <ol class ="card-list">
       <li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory">
-        <div class="card-item card-item--alert">
-          <div class="card-item-header">
-            <div class="card-item-sub-name">{{al.time}}</div>
-          </div>
-          <div class="card-item-body">
-            <div class="card-item-details">
-              <div class="card-item-notice">{{al.title}}</div>
-              <div class="card-item-sub-name">
-                <span class="alert-list-item-state {{al.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 {{al.stateModel.stateClass}}">
               <i class="{{al.stateModel.iconClass}}"></i>
-                  {{al.stateModel.text}}
-                </span> {{al.info}}
+            </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>
           </div>
+          <div class="alert-list-footer">
+            <p class="alert-list-text">{{al.time}}</p>
+            <p class="alert-list-text">Img Link -></p>
           </div>
         </div>
       </li>

public/sass/pages/_alerting.scss

@@ -30,15 +30,59 @@
 
 // Alert List
 
-.alert-list-item-state {
+.alert-list {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.alert-list-icon {
   font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .icon-gf, .fa {
-    font-size: 120%;
+    font-size: 200%;
     position: relative;
     top: 2px;
   }
 }
 
+.alert-list-body {
+  display: flex;
+}
+
+.alert-list-main {
+  padding: 0 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.alert-list-title {
+  font-size: $font-size-base;
+  margin: 0;
+  font-weight: 600;
+}
+
+.alert-list-state {
+  font-weight: bold;
+}
+
+.alert-list-text {
+  font-size: $font-size-sm;
+  margin: 0;
+  line-height: 1.5rem;
+}
+
+.alert-list-footer {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: flex-end;
+  color: $text-color-weak;
+}
+
 .panel-has-alert {
   .panel-alert-icon:before {
     content: "\e611";