style: SIP-34 labels (#10403)

* style: SIP-34 labels

Aligning with SIP-34 designs for labels/pills. Going uppercase fixes the
padding issues we had before, and the rounder pills look better.

Cleaning up some CSS in the process

* lint

superset-frontend/src/components/CachedLabel.jsx

@@ -70,9 +70,8 @@ class CacheLabel extends React.PureComponent {
     return (
       <TooltipWrapper tooltip={this.state.tooltipContent} label="cache-desc">
         <Label
-          className={this.props.className}
+          className={`${this.props.className} m-r-5 pointer`}
           bsStyle={labelStyle}
-          style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }}
           onClick={this.props.onClick}
           onMouseOver={this.mouseOver.bind(this)}
           onMouseOut={this.mouseOut.bind(this)}

superset-frontend/src/components/Timer.jsx

@@ -18,6 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Label } from 'react-bootstrap';
+
 import { now, fDuration } from '../modules/dates';
 
 const propTypes = {
@@ -76,12 +78,13 @@ export default class Timer extends React.PureComponent {
     let timerSpan = null;
     if (this.props) {
       timerSpan = (
-        <span
-          className={`inlineBlock m-r-5 label label-${this.props.status}`}
+        <Label
+          className="m-r-5"
           style={this.props.style}
+          bsStyle={this.props.status}
         >
           {this.state.clockStr}
-        </span>
+        </Label>
       );
     }
     return timerSpan;

superset-frontend/src/explore/components/ExploreChartHeader.jsx

@@ -163,7 +163,6 @@ export class ExploreChartHeader extends React.PureComponent {
             endTime={chartUpdateEndTime}
             isRunning={chartStatus === 'loading'}
             status={CHART_STATUS_MAP[chartStatus]}
-            style={{ fontSize: '10px', marginRight: '5px' }}
           />
           <ExploreActionButtons
             actions={this.props.actions}

superset-frontend/src/explore/components/RowCountLabel.jsx

@@ -47,10 +47,7 @@ export default function RowCountLabel({ rowcount, limit, suffix }) {
   );
   return (
     <TooltipWrapper label="tt-rowcount" tooltip={tooltip}>
-      <Label
-        bsStyle={bsStyle}
-        style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }}
-      >
+      <Label bsStyle={bsStyle} className="m-r-5 pointer">
         {formattedRowCount} {suffix}
       </Label>
     </TooltipWrapper>

superset-frontend/src/explore/main.less

@@ -210,19 +210,6 @@
   border: @gray-light solid thin;
 }
 
-.label-default {
-  background-color: @gray;
-  font-weight: @font-weight-normal;
-}
-
-.btn.label-btn {
-  background-color: @gray;
-  font-weight: @font-weight-normal;
-  color: @lightest;
-  padding: 5px 4px 4px;
-  border: 0;
-}
-
 .label-dropdown ul.dropdown-menu {
   position: fixed;
   top: auto;
@@ -233,7 +220,6 @@
 .label-btn:hover,
 .label-btn-label:hover {
   background-color: @gray-dark;
-  color: @lightest;
 }
 
 .label-btn-label {

superset-frontend/stylesheets/less/cosmo/bootswatch.less

@@ -280,9 +280,23 @@ table,
 }
 
 .label {
-  border-radius: @border-radius-normal;
-  padding: 0.3em 0.6em 0.2em;
+  border-radius: 21px;
+  padding: 0.35em 0.8em 0.35em;
   font-weight: @font-weight-normal;
+  text-transform: uppercase;
+  font-size: @font-size-s;
+}
+.label-default:hover {
+  background-color: darken(@label-default-bg, 5%);
+}
+.label-warning:hover {
+  background-color: darken(@label-warning-bg, 5%);
+}
+.label-danger:hover {
+  background-color: darken(@label-danger-bg, 5%);
+}
+.label-primary:hover {
+  background-color: darken(@label-primary-bg, 5%);
 }
 
 label {

superset-frontend/stylesheets/less/cosmo/variables.less

@@ -28,7 +28,7 @@
 @gray-darker: lighten(@gray-base, 13.5%);
 @gray-dark: lighten(@gray-base, 20%);
 @bs-gray: lighten(@gray-base, 33.5%);
-@bs-gray-light: lighten(@gray-base, 70%);
+@bs-gray-light: lighten(@gray-base, 60%);
 @gray-lighter: lighten(@gray-base, 95%);
 
 @brand-primary: @primary-color; // superset-var
@@ -568,7 +568,7 @@
 // ** Info label background color
 @label-info-bg: @brand-info;
 // ** Warning label background color
-@label-warning-bg: @brand-warning;
+@label-warning-bg: darken(@brand-warning, 6%);
 // ** Danger label background color
 @label-danger-bg: @brand-danger;
 

superset-frontend/stylesheets/superset.less

@@ -26,10 +26,6 @@
   color: @danger;
 }
 
-.label {
-  font-size: 100%;
-}
-
 .no-wrap {
   white-space: nowrap;
 }