From 2f147cfedcfc4cd6c7f7ff77d8ec76b75eb4f9f3 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Wed, 15 Jul 2020 14:05:30 -0700
Subject: [PATCH] fix: add additional ui tweaks (#10275)

* fix: add additional ui tweaks

* use fa fa-close class for x icon

* use new svg icons
---
 .../cypress/integration/sqllab/tabs.test.js        |  2 +-
 .../src/SqlLab/components/TabbedSqlEditors.jsx     | 11 ++++++++---
 superset-frontend/src/SqlLab/main.less             | 14 ++++----------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js
index 8f52946992..49629f443a 100644
--- a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js
+++ b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js
@@ -45,7 +45,7 @@ describe('SqlLab query tabs', () => {
       });
 
       // first item is close
-      cy.get('.SqlEditorTabs .ddbtn-tab .close').first().click();
+      cy.get('.SqlEditorTabs .ddbtn-tab svg').first().click();
 
       cy.get('.SqlEditorTabs > ul > li').should(
         'have.length',
diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
index ce1fbc5efc..e1f465f2f5 100644
--- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
+++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
@@ -29,6 +29,7 @@ import * as Actions from '../actions/sqlLab';
 import SqlEditor from './SqlEditor';
 import { areArraysShallowEqual } from '../../reduxUtils';
 import TabStatusIcon from './TabStatusIcon';
+import Icon from '../../components/Icon';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -289,9 +290,13 @@ class TabbedSqlEditors extends React.PureComponent {
       const title = (
         <>
           {qe.title} <TabStatusIcon tabState={state} />{' '}
-          <span className="close" onClick={() => this.removeQueryEditor(qe)}>
-            {'×'}
-          </span>
+          <Icon
+            role="button"
+            tabIndex={0}
+            cursor="pointer"
+            name="cancel-x"
+            onClick={() => this.removeQueryEditor(qe)}
+          />
         </>
       );
       const tabTitle = (
diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
index d6672e5748..7b3fb9c764 100644
--- a/superset-frontend/src/SqlLab/main.less
+++ b/superset-frontend/src/SqlLab/main.less
@@ -177,11 +177,9 @@ div.Workspace {
 
   display: inline-block;
   background-color: @gray-light;
-  line-height: 8px; // set specifically for closing 'x'
   text-align: center;
   vertical-align: middle;
   font-size: @font-size-m;
-  margin-top: -3px;
   font-weight: @font-weight-bold;
 }
 
@@ -259,6 +257,10 @@ div.Workspace {
     &:active {
       background: none;
     }
+
+    svg {
+      vertical-align: middle;
+    }
   }
 
   .dropdown.btn-group.btn-group-sm {
@@ -303,14 +305,6 @@ div.Workspace {
   .dropdown-toggle {
     padding-top: 2px;
   }
-
-  .close {
-    opacity: 1;
-    color: @almost-black;
-    position: relative;
-    top: -2px;
-    right: -4px;
-  }
 }
 
 .SqlEditor {