You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2020/06/18 22:02:15 UTC

[incubator-superset] branch master updated: style: push bootstrap theme towards SIP-34 styles (#10056)

This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new a6390af  style: push bootstrap theme towards SIP-34 styles (#10056)
a6390af is described below

commit a6390afb8972f315a0e5c87e618e21708e596f36
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Thu Jun 18 15:01:58 2020 -0700

    style: push bootstrap theme towards SIP-34 styles (#10056)
    
    * feat: cartel theme
    
    * piling
    
    * more tweaks
    
    * Make things look better
    
    * lint
    
    * fix tests
    
    * paint it black
    
    * tweaks
---
 setup.cfg                                          |  2 +-
 .../cypress/integration/sqllab/tabs.js             |  6 +-
 .../explore/components/QueryAndSaveBtns_spec.jsx   |  2 +-
 .../spec/javascripts/sqllab/SqlEditor_spec.jsx     |  2 +-
 .../src/SqlLab/components/RunQueryActionButton.tsx |  4 +-
 .../src/SqlLab/components/SaveQuery.jsx            |  2 +-
 .../src/SqlLab/components/ShareSqlLabQuery.jsx     |  2 +-
 .../src/SqlLab/components/SqlEditor.jsx            | 19 ++---
 .../src/SqlLab/components/TabbedSqlEditors.jsx     | 94 +++++++++++++---------
 superset-frontend/src/SqlLab/main.less             |  2 +-
 .../src/components/ListView/LegacyFilters.tsx      |  9 ++-
 .../src/components/ListView/ListView.tsx           |  4 +-
 .../src/explore/components/QueryAndSaveBtns.css    | 21 +++++
 .../src/explore/components/QueryAndSaveBtns.jsx    |  9 ++-
 .../stylesheets/less/cosmo/bootswatch.less         | 10 ++-
 .../stylesheets/less/cosmo/variables.less          | 10 +--
 superset-frontend/stylesheets/less/variables.less  | 38 ++++++---
 superset-frontend/stylesheets/superset.less        |  2 +-
 18 files changed, 148 insertions(+), 90 deletions(-)

diff --git a/setup.cfg b/setup.cfg
index 7c13f5e..eef0e37 100644
--- a/setup.cfg
+++ b/setup.cfg
@@ -45,7 +45,7 @@ combine_as_imports = true
 include_trailing_comma = true
 line_length = 88
 known_first_party = superset
-known_third_party =alembic,apispec,backoff,bleach,cachelib,celery,click,colorama,contextlib2,croniter,cryptography,dateutil,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,geohash,geopy,humanize,isodate,jinja2,markdown,markupsafe,marshmallow,msgpack,numpy,pandas,parsedatetime,pathlib2,polyline,prison,pyarrow,pyhive,pytz,retry,selenium,setuptools,simplejson,sphinx_rtd_theme,sqlalchemy,sqlalch [...]
+known_third_party =alembic,apispec,backoff,bleach,cachelib,celery,click,colorama,contextlib2,croniter,cryptography,dateutil,flask,flask_appbuilder,flask_babel,flask_caching,flask_compress,flask_login,flask_migrate,flask_sqlalchemy,flask_talisman,flask_testing,flask_wtf,geohash,geopy,humanize,isodate,jinja2,markdown,markupsafe,marshmallow,msgpack,numpy,pandas,parsedatetime,pathlib2,polyline,prison,pyarrow,pyhive,pytz,retry,selenium,setuptools,simplejson,slack,sphinx_rtd_theme,sqlalchemy,s [...]
 multi_line_output = 3
 order_by_type = false
 
diff --git a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.js b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.js
index 8dd5493..f4a1f93 100644
--- a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.js
+++ b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.js
@@ -43,12 +43,10 @@ export default () => {
         const initialTabCount = tabListA.length;
 
         // open the tab dropdown to remove
-        cy.get(
-          '#a11y-query-editor-tabs > ul > li:first button:nth-child(2)',
-        ).click();
+        cy.get('#a11y-query-editor-tabs > ul > li .dropdown-toggle').click();
 
         // first item is close
-        cy.get('#a11y-query-editor-tabs > ul > li:first ul li a').eq(0).click();
+        cy.get('#a11y-query-editor-tabs .close-btn a').click();
 
         cy.get('#a11y-query-editor-tabs > ul > li').should(
           'have.length',
diff --git a/superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx b/superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
index ec9bfe9..2126265 100644
--- a/superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx
@@ -49,7 +49,7 @@ describe('QueryAndSaveButtons', () => {
     });
 
     it('renders buttons with correct text', () => {
-      expect(wrapper.find(Button).contains(' Run Query')).toBe(true);
+      expect(wrapper.find(Button).contains('Run')).toBe(true);
       expect(wrapper.find(Button).contains(' Save')).toBe(true);
     });
 
diff --git a/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx
index 2c7b1e3..2ee4689 100644
--- a/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/SqlEditor_spec.jsx
@@ -109,7 +109,7 @@ describe('SqlEditor', () => {
   it('allows toggling autocomplete', () => {
     const wrapper = shallow(<SqlEditor {...mockedProps} />);
     expect(wrapper.find(AceEditorWrapper).props().autocomplete).toBe(true);
-    wrapper.find(Checkbox).props().onChange();
+    wrapper.find('.autocomplete').simulate('click');
     expect(wrapper.find(AceEditorWrapper).props().autocomplete).toBe(false);
   });
 });
diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
index 2d94c73..d6c1974 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
@@ -42,7 +42,7 @@ const RunQueryActionButton = ({
   stopQuery = NO_OP,
   sql,
 }: Props) => {
-  const runBtnText = selectedText ? t('Run Selected Query') : t('Run Query');
+  const runBtnText = selectedText ? t('Run Selected Query') : t('Run');
   const btnStyle = selectedText ? 'warning' : 'primary';
   const shouldShowStopBtn =
     !!queryState && ['running', 'pending'].indexOf(queryState) > -1;
@@ -68,7 +68,7 @@ const RunQueryActionButton = ({
         tooltip={t('Run query asynchronously (Ctrl + ↵)')}
         disabled={!sql.trim()}
       >
-        <i className="fa fa-table" /> {runBtnText}
+        <i className="fa fa-bolt" /> {runBtnText}
       </Button>
     );
   }
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.jsx b/superset-frontend/src/SqlLab/components/SaveQuery.jsx
index 4181980..025326a 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.jsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.jsx
@@ -172,7 +172,7 @@ class SaveQuery extends React.PureComponent {
               className="toggleSave"
               onClick={this.toggleSave}
             >
-              <i className="fa fa-save" /> {t('Save Query')}
+              <i className="fa fa-save" /> {t('Save')}
             </Button>
           }
           bsSize="small"
diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx
index cc1e548..f80ecec 100644
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx
@@ -112,7 +112,7 @@ class ShareSqlLabQuery extends React.Component {
         overlay={this.renderPopover()}
       >
         <Button bsSize="small" className="toggleSave">
-          <i className="fa fa-clipboard" /> {t('Share Query')}
+          <i className="fa fa-share" /> {t('Share')}
         </Button>
       </OverlayTrigger>
     );
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
index 4903abc..7f1123c 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -20,7 +20,6 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 import {
-  Checkbox,
   FormGroup,
   InputGroup,
   Form,
@@ -35,6 +34,7 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 
 import Button from '../../components/Button';
+import Checkbox from '../../components/Checkbox';
 import LimitControl from './LimitControl';
 import TemplateParamsEditor from './TemplateParamsEditor';
 import SouthPane from './SouthPane';
@@ -509,16 +509,13 @@ class SqlEditor extends React.PureComponent {
           </Form>
         </div>
         <div className="rightItems">
-          <span>
-            <Checkbox
-              checked={this.state.autocompleteEnabled}
-              inline
-              title={t('Autocomplete')}
-              onChange={this.handleToggleAutocompleteEnabled}
-            >
-              {t('Autocomplete')}
-            </Checkbox>
-          </span>
+          <Button
+            className="autocomplete"
+            onClick={this.handleToggleAutocompleteEnabled}
+          >
+            <Checkbox checked={this.state.autocompleteEnabled} />{' '}
+            {t('Autocomplete')}
+          </Button>{' '}
           <TemplateParamsEditor
             language="json"
             onChange={params => {
diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
index b4170b2..dc7d557 100644
--- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
+++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
@@ -288,46 +288,60 @@ class TabbedSqlEditors extends React.PureComponent {
         </>
       );
       const tabTitle = (
-        <SplitButton
-          bsSize="small"
-          id={'ddbtn-tab-' + i}
-          className="ddbtn-tab"
-          title={title}
-        >
-          <MenuItem eventKey="1" onClick={() => this.removeQueryEditor(qe)}>
-            <div className="icon-container">
-              <i className="fa fa-close" />
-            </div>
-            {t('Close tab')}
-          </MenuItem>
-          <MenuItem eventKey="2" onClick={() => this.renameTab(qe)}>
-            <div className="icon-container">
-              <i className="fa fa-i-cursor" />
-            </div>
-            {t('Rename tab')}
-          </MenuItem>
-          <MenuItem eventKey="3" onClick={this.toggleLeftBar}>
-            <div className="icon-container">
-              <i className="fa fa-cogs" />
-            </div>
-            {this.state.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
-          </MenuItem>
-          <MenuItem
-            eventKey="4"
-            onClick={() => this.removeAllOtherQueryEditors(qe)}
-          >
-            <div className="icon-container">
-              <i className="fa fa-times-circle-o" />
-            </div>
-            {t('Close all other tabs')}
-          </MenuItem>
-          <MenuItem eventKey="5" onClick={() => this.duplicateQueryEditor(qe)}>
-            <div className="icon-container">
-              <i className="fa fa-files-o" />
-            </div>
-            {t('Duplicate tab')}
-          </MenuItem>
-        </SplitButton>
+        <>
+          <span className="ddbtn-tab">{title}</span>
+          {isSelected && (
+            <SplitButton
+              bsSize="small"
+              id={'ddbtn-tab-' + i}
+              className="ddbtn-tab"
+              title="&nbsp;"
+            >
+              <MenuItem
+                className="close-btn"
+                eventKey="1"
+                onClick={() => this.removeQueryEditor(qe)}
+              >
+                <div className="icon-container">
+                  <i className="fa fa-close" />
+                </div>
+                {t('Close tab')}
+              </MenuItem>
+              <MenuItem eventKey="2" onClick={() => this.renameTab(qe)}>
+                <div className="icon-container">
+                  <i className="fa fa-i-cursor" />
+                </div>
+                {t('Rename tab')}
+              </MenuItem>
+              <MenuItem eventKey="3" onClick={this.toggleLeftBar}>
+                <div className="icon-container">
+                  <i className="fa fa-cogs" />
+                </div>
+                {this.state.hideLeftBar
+                  ? t('Expand tool bar')
+                  : t('Hide tool bar')}
+              </MenuItem>
+              <MenuItem
+                eventKey="4"
+                onClick={() => this.removeAllOtherQueryEditors(qe)}
+              >
+                <div className="icon-container">
+                  <i className="fa fa-times-circle-o" />
+                </div>
+                {t('Close all other tabs')}
+              </MenuItem>
+              <MenuItem
+                eventKey="5"
+                onClick={() => this.duplicateQueryEditor(qe)}
+              >
+                <div className="icon-container">
+                  <i className="fa fa-files-o" />
+                </div>
+                {t('Duplicate tab')}
+              </MenuItem>
+            </SplitButton>
+          )}
+        </>
       );
       return (
         <Tab key={qe.id} title={tabTitle} eventKey={qe.id}>
diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
index a995a74..e8047b3 100644
--- a/superset-frontend/src/SqlLab/main.less
+++ b/superset-frontend/src/SqlLab/main.less
@@ -259,7 +259,7 @@ div.Workspace {
 
   .ddbtn-tab {
     font-size: inherit;
-    font-weight: @font-weight-bold;
+    color: black;
 
     &:active {
       background: none;
diff --git a/superset-frontend/src/components/ListView/LegacyFilters.tsx b/superset-frontend/src/components/ListView/LegacyFilters.tsx
index 3721a0d..111af4b 100644
--- a/superset-frontend/src/components/ListView/LegacyFilters.tsx
+++ b/superset-frontend/src/components/ListView/LegacyFilters.tsx
@@ -30,6 +30,8 @@ import { Select } from 'src/components/Select';
 import { Filters, InternalFilter, SelectOption } from './types';
 import { extractInputValue, getDefaultFilterOperator } from './utils';
 
+const styleWidth100p = { width: '100%' };
+
 export const FilterMenu = ({
   filters,
   internalFilters,
@@ -49,7 +51,7 @@ export const FilterMenu = ({
         <>
           <i className="fa fa-filter text-primary" />
           {'  '}
-          {t('Filter List')}
+          {t('Filter')}
         </>
       }
     >
@@ -181,12 +183,13 @@ export const FilterInputs = ({
     {internalFilters.length > 0 && (
       <>
         <Row>
-          <Col md={10} />
-          <Col md={2}>
+          <Col md={11} />
+          <Col md={1}>
             <Button
               data-test="apply-filters"
               disabled={!!filtersApplied}
               bsStyle="primary"
+              style={styleWidth100p}
               onClick={applyFilters}
               bsSize="small"
             >
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index c086141..27f68cd 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@@ -125,11 +125,11 @@ const ListView: FunctionComponent<Props> = ({
             {title && filterable && (
               <>
                 <Row>
-                  <Col md={10}>
+                  <Col md={11}>
                     <h2>{t(title)}</h2>
                   </Col>
                   {filterable && (
-                    <Col md={2}>
+                    <Col md={1}>
                       <FilterMenu
                         filters={filters}
                         internalFilters={internalFilters}
diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.css b/superset-frontend/src/explore/components/QueryAndSaveBtns.css
new file mode 100644
index 0000000..4ea4dce
--- /dev/null
+++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.css
@@ -0,0 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+.save-btn {
+  width: 100px;
+}
diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx
index bb86b6c..e2ec4ef 100644
--- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx
+++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx
@@ -20,8 +20,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import classnames from 'classnames';
+import { t } from '@superset-ui/translation';
 
 import Button from '../../components/Button';
+import './QueryAndSaveBtns.css';
 
 const propTypes = {
   canAdd: PropTypes.bool.isRequired,
@@ -50,6 +52,7 @@ export default function QueryAndSaveBtns({
 }) {
   const saveClasses = classnames({
     'disabled disabledButton': !canAdd,
+    'save-btn': true,
   });
 
   let qryButtonStyle = 'default';
@@ -61,17 +64,17 @@ export default function QueryAndSaveBtns({
 
   const saveButtonDisabled = errorMessage ? true : loading;
   const qryOrStopButton = loading ? (
-    <Button onClick={onStop} bsStyle="warning">
+    <Button onClick={onStop} bsStyle="warning" className="save-btn">
       <i className="fa fa-stop-circle-o" /> Stop
     </Button>
   ) : (
     <Button
-      className="query"
+      className="query save-btn"
       onClick={onQuery}
       bsStyle={qryButtonStyle}
       disabled={!!errorMessage}
     >
-      <i className="fa fa-bolt" /> Run Query
+      <i className="fa fa-bolt" /> {t('Run')}
     </Button>
   );
 
diff --git a/superset-frontend/stylesheets/less/cosmo/bootswatch.less b/superset-frontend/stylesheets/less/cosmo/bootswatch.less
index bb31c94..3ae51f7 100644
--- a/superset-frontend/stylesheets/less/cosmo/bootswatch.less
+++ b/superset-frontend/stylesheets/less/cosmo/bootswatch.less
@@ -66,6 +66,10 @@
 
 // Buttons ====================================================================
 
+.btn {
+  text-transform: uppercase;
+}
+
 .btn-default:hover {
   color: @gray-dark;
   background-color: @gray-bg;
@@ -277,10 +281,13 @@ table,
 
 .label {
   border-radius: @border-radius-normal;
+  padding: 0.3em 0.6em 0.2em;
+  font-weight: @font-weight-normal;
 }
 
 label {
   font-weight: @font-weight-normal;
+  font-size: @font-size-s;
 }
 
 // Progress bars ==============================================================
@@ -292,7 +299,7 @@ label {
   .progress-bar {
     font-size: @font-size-s;
     line-height: @line-height-tight;
-    padding-top: 1px;
+    padding-top: 2px;
   }
 }
 
@@ -415,6 +422,7 @@ a.list-group-item {
 
 .nav-tabs > li > a {
   border-top: 3px solid transparent;
+  color: @text-color;
 }
 
 .nav-tabs > li.active > a,
diff --git a/superset-frontend/stylesheets/less/cosmo/variables.less b/superset-frontend/stylesheets/less/cosmo/variables.less
index 4eaf950..bac931c 100644
--- a/superset-frontend/stylesheets/less/cosmo/variables.less
+++ b/superset-frontend/stylesheets/less/cosmo/variables.less
@@ -107,8 +107,8 @@
 @line-height-small: 1.5;
 
 @border-radius-base: @border-radius-normal;
-@border-radius-large: 2px;
-@border-radius-small: 2px;
+@border-radius-large: 4px;
+@border-radius-small: 4px;
 
 // ** Global color for active items (e.g., navs or dropdowns).
 @component-active-color: @lightest; // superset-var
@@ -146,12 +146,12 @@
 
 @btn-font-weight: normal;
 
-@btn-primary-color: @lightest; // superset-var
+@btn-primary-color: @lightest;
 @btn-primary-bg: @brand-primary;
 @btn-primary-border: @brand-primary;
 
 @btn-default-color: @bs-gray;
-@btn-default-bg: @lightest; // superset-var
+@btn-default-bg: @lightest;
 @btn-default-border: @bs-gray-light;
 
 @btn-success-color: @btn-primary-color;
@@ -162,7 +162,7 @@
 @btn-info-bg: @brand-info;
 @btn-info-border: @btn-info-bg;
 
-@btn-warning-color: @btn-default-color;
+@btn-warning-color: @btn-primary-color;
 @btn-warning-bg: @brand-warning;
 @btn-warning-border: @btn-warning-bg;
 
diff --git a/superset-frontend/stylesheets/less/variables.less b/superset-frontend/stylesheets/less/variables.less
index 6630fbf..f22db91 100644
--- a/superset-frontend/stylesheets/less/variables.less
+++ b/superset-frontend/stylesheets/less/variables.less
@@ -24,8 +24,26 @@
 /* component styles. This will allow us to more easily adjust theming   */
 /************************************************************************/
 
-@primary-color: #00a699;
-@indicator-color: #44c0ff;
+@primary-color: #20a7c9;
+@indicator-color: @primary-color;
+
+@brand-primary-dark1: #1a85a0;
+@brand-primary-dark2: #156378;
+@brand-primary-light1: #79cade;
+@brand-primary-light2: #a5dae9;
+@brand-primary-light3: #d2edf4;
+@brand-primary-light4: #e9f6f9;
+@brand-primary-light5: #f3f8fa;
+
+@brand-secondary: #444e7c;
+@brand-secondary-dark1: #363e63;
+@brand-secondary-dark2: #282e4a;
+@brand-secondary-dark3: #1b1f31;
+@brand-secondary-light1: #8e94b0;
+@brand-secondary-light2: #b4b8ca;
+@brand-secondary-light3: #d9dbe4;
+@brand-secondary-light4: #eceef2;
+@brand-secondary-light5: #f5f5f8;
 
 @almost-black: #263238;
 @gray-dark: #484848;
@@ -38,18 +56,14 @@
 @darkest: #000000;
 
 /**************************** text-specific *****************************/
-@link: @brand-primary;
+@link: #1985a0;
 @link-hover: darken(@link, @colorstop-one);
 
 /***************************** status colors ****************************/
-@success: #4ac15f;
-@info: lighten(#2ab7ca, 15%);
-@warning: mix(
-  #fed766,
-  #ffab00,
-  50%
-); // mix of old superset warning color and cosmo warning color. Compromise!
-@danger: #fe4a49;
+@success: #5ac189;
+@info: #66bcfe;
+@warning: #ff7f44;
+@danger: #e04355;
 
 /* general component effects */
 @shadow-highlight: @primary-color;
@@ -185,7 +199,7 @@
 /* BORDER RADII                                                         */
 /* Standard border-radius settings                                      */
 /************************************************************************/
-@border-radius-normal: 2px;
+@border-radius-normal: 4px;
 @border-radius-large: (@border-radius-normal * 2);
 
 /************************************************************************/
diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less
index 688ea8b..b76d2d2 100644
--- a/superset-frontend/stylesheets/superset.less
+++ b/superset-frontend/stylesheets/superset.less
@@ -445,7 +445,7 @@ table.table-no-hover tr:hover {
 }
 
 .list-add-action .btn.btn-sm {
-  padding: 5px 6px;
+  padding: 6px 6px;
   font-size: @font-size-xs;
   line-height: 2px;
   border-radius: 50%;