Aligned styling of stats popover/box with rest of grafana & minor css refactoring

public/app/features/explore/LogLabels.tsx

@@ -48,15 +48,21 @@ export class Stats extends PureComponent<{
     const otherProportion = otherCount / total;
 
     return (
-      <>
-        <div className="logs-stats__info">
+      <div className="logs-stats">
+        <div className="logs-stats__header">
+          <span className="logs-stats__title">
             {label}: {total} of {rowCount} rows have that label
-          <span className="logs-stats__icon fa fa-window-close" onClick={onClickClose} />
+          </span>
+          <span className="logs-stats__close fa fa-remove" onClick={onClickClose} />
         </div>
+        <div className="logs-stats__body">
           {topRows.map(stat => <StatsRow key={stat.value} {...stat} active={stat.value === value} />)}
           {insertActiveRow && activeRow && <StatsRow key={activeRow.value} {...activeRow} active />}
-        {otherCount > 0 && <StatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />}
-      </>
+          {otherCount > 0 && (
+            <StatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
+          )}
+        </div>
+      </div>
     );
   }
 }

public/sass/components/_panel_logs.scss

@@ -173,10 +173,6 @@ $column-horizontal-spacing: 10px;
 
 .logs-row__stats {
   margin: 5px 0;
-  background-color: $popover-bg;
-  color: $popover-color;
-  border: 1px solid $popover-border-color;
-  padding: 10px;
 }
 
 .logs-row__field-highlight:hover {
@@ -211,21 +207,42 @@ $column-horizontal-spacing: 10px;
   top: 1.25em;
   left: -10px;
   z-index: 100;
+  justify-content: space-between;
+  box-shadow: $popover-shadow;
+}
+
+/*
+* Stats popover & message stats box
+*/
+.logs-stats {
   background-color: $popover-bg;
   color: $popover-color;
   border: 1px solid $popover-border-color;
-  padding: 10px;
   border-radius: $border-radius;
-  justify-content: space-between;
-  box-shadow: $popover-shadow;
+  max-width: 500px;
 }
 
-.logs-stats__info {
-  margin-bottom: $spacer / 2;
+.logs-stats__header {
+  background-color: $popover-border-color;
+  padding: 6px 10px;
+  display: flex;
 }
 
-.logs-stats__icon {
-  margin-left: 0.5em;
+.logs-stats__title {
+  font-weight: $font-weight-semi-bold;
+  padding-right: $spacer;
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.logs-stats__body {
+  padding: 20px 10px 10px 10px;
+}
+
+.logs-stats__close {
   cursor: pointer;
 }
 
@@ -272,6 +289,6 @@ $column-horizontal-spacing: 10px;
   }
 
   &__innerbar {
-    background-color: $blue;
+    background: $blue;
   }
 }