Refactored to be a proper list, added x button in upper right. Before cleaning…

Refactored to be a proper list, added x button in upper right. Before cleaning up the CSS, want trent to set some eyes on it and make it look better.

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

@@ -2,46 +2,47 @@
   <div class="dashlist-section">
     <h6 class="dashlist-section-header">
       Getting Started with Grafana
+      <button class="dashlist-CTA-close-btn"><i class="fa fa-remove"></i></button>
     </h6>
     <div class="dashlist-flex-container">
       <div class="dashlist-panel-CTA-flex-container--left">
-        <h4><em>Next up:</em></h4>
-        <h5>Create your first data source</h5>
+        <h5 class="dashlist-next-up">Next up:</h5>
+        <span class="dashlist-title">Create your first data source</span>
         <p class="dashlist-next-up-blurb">If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.</p>
         <button class="btn btn-success">Add Data Source</button>
       </div>
-      <div class="dashlist-panel-CTA-flex-container--right">
-        <div class="dashlist-panel-CTA-items">
+      <ul class="dashlist-panel-CTA-flex-container--right">
+        <li class="dashlist-panel-CTA-items">
           <div class="dashlist-icons-container">
               <i class="icon-gf icon-gf-check dashlist-icon-success"></i>
           </div>
           <span class="dashlist-blurb dashlist-blurb-success">Install Grafana like a boss.</span>
-        </div>
-        <div class="dashlist-panel-CTA-items">
-          <div class="dashlist-icons-container dashlist-icons-container--active">
+        </li>
+        <li class="dashlist-panel-CTA-items dashlist-icons-container--active">
+          <div class="dashlist-icons-container">
               <i class="icon-gf icon-gf-datasources dashlist-icon-active"></i>
           </div>
           <a href="#" class="dashlist-blurb">Add your first data source.</a>
-        </div>
-        <div class="dashlist-panel-CTA-items">
+        </li>
+        <li class="dashlist-panel-CTA-items">
           <div class="dashlist-icons-container">
               <i class="icon-gf icon-gf-dashboard dashlist-icon-upcoming"></i>
           </div>
           <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Create your first dashboard.</a>
-        </div>
-        <div class="dashlist-panel-CTA-items">
+        </li>
+        <li class="dashlist-panel-CTA-items">
           <div class="dashlist-icons-container">
               <i class="icon-gf icon-gf-users dashlist-icon-upcoming"></i>
           </div>
           <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Invite your team.</a>
-        </div>
-        <div class="dashlist-panel-CTA-items">
+        </li>
+        <li class="dashlist-panel-CTA-items">
           <div class="dashlist-icons-container">
               <i class="icon-gf icon-gf-grafana-icon dashlist-icon-upcoming"></i>
           </div>
           <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Extend on Grafana.net.</a>
-        </div>
-      </div>
+        </li>
+      </ul>
     </div>
   </div>
 </div>

public/sass/components/_panel_dashlist.scss

@@ -38,16 +38,26 @@
   align-items: center;
 }
 
-.dashlist-panel-CTA-flex-container--right {
+ul.dashlist-panel-CTA-flex-container--right {
   padding-left: 1rem;
   border-left: solid 1px black;
+  list-style-type: none;
 }
 
-.dashlist-panel-CTA-items {
+li.dashlist-panel-CTA-items {
   text-align: left;
   margin: 10px 0;
 }
 
+li.dashlist-icons-container--active::before {
+    content: ' ';
+    border-top: 1px solid black;
+    width: 13px;
+    position: absolute;
+    margin-left: -14px;
+    margin-top: 9px;
+}
+
 p.dashlist-blurb{
      font-size:14px;
      color: $text-color;
@@ -112,13 +122,27 @@ a.dashlist-blurb-upcoming {
   vertical-align: top;
 }
 
-.dashlist-icons-container--active:before {
-  border-top: 1px solid black;
-  margin-left: -1em;
-  padding-left: 2em;
+h5.dashlist-next-up {
+  color: $text-color-weak;
+  font-style: italic;
 }
 
 p.dashlist-next-up-blurb {
   color: $text-color-weak;
   max-width: 375px;
 }
+
+.dashlist-CTA-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0 2px 0 0;
+  background-color: transparent;
+  border: none;
+  i {
+    font-size: 80%;
+  }
+  color: $text-color-weak;
+  &:hover {
+    color: $white;
+  }
+}