From ea3c3bbae4d5e6f9ef0ca3f66b7e8ed67367d614 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Fri, 24 Jul 2020 18:03:38 -0700
Subject: [PATCH] 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
---
 .../src/components/CachedLabel.jsx             |  3 +--
 superset-frontend/src/components/Timer.jsx     |  9 ++++++---
 .../explore/components/ExploreChartHeader.jsx  |  1 -
 .../src/explore/components/RowCountLabel.jsx   |  5 +----
 superset-frontend/src/explore/main.less        | 14 --------------
 .../stylesheets/less/cosmo/bootswatch.less     | 18 ++++++++++++++++--
 .../stylesheets/less/cosmo/variables.less      |  4 ++--
 superset-frontend/stylesheets/superset.less    |  4 ----
 8 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/superset-frontend/src/components/CachedLabel.jsx b/superset-frontend/src/components/CachedLabel.jsx
index 2faf9af50..6876e24c9 100644
--- a/superset-frontend/src/components/CachedLabel.jsx
+++ b/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)}
diff --git a/superset-frontend/src/components/Timer.jsx b/superset-frontend/src/components/Timer.jsx
index 8f77797f6..8bbd89f86 100644
--- a/superset-frontend/src/components/Timer.jsx
+++ b/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;
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
index 4c3831544..d2c7403ad 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx
+++ b/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}
diff --git a/superset-frontend/src/explore/components/RowCountLabel.jsx b/superset-frontend/src/explore/components/RowCountLabel.jsx
index 0794627b7..64cc8d731 100644
--- a/superset-frontend/src/explore/components/RowCountLabel.jsx
+++ b/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>
diff --git a/superset-frontend/src/explore/main.less b/superset-frontend/src/explore/main.less
index c1ea11683..856258eab 100644
--- a/superset-frontend/src/explore/main.less
+++ b/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 {
diff --git a/superset-frontend/stylesheets/less/cosmo/bootswatch.less b/superset-frontend/stylesheets/less/cosmo/bootswatch.less
index 9b0ebd756..057fa7efc 100644
--- a/superset-frontend/stylesheets/less/cosmo/bootswatch.less
+++ b/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 {
diff --git a/superset-frontend/stylesheets/less/cosmo/variables.less b/superset-frontend/stylesheets/less/cosmo/variables.less
index 438054862..8f13ac30e 100644
--- a/superset-frontend/stylesheets/less/cosmo/variables.less
+++ b/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;
 
diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less
index 16ee9a99e..3b7b452be 100644
--- a/superset-frontend/stylesheets/superset.less
+++ b/superset-frontend/stylesheets/superset.less
@@ -26,10 +26,6 @@
   color: @danger;
 }
 
-.label {
-  font-size: 100%;
-}
-
 .no-wrap {
   white-space: nowrap;
 }