fix: add additional ui tweaks (#10275)

* fix: add additional ui tweaks

* use fa fa-close class for x icon

* use new svg icons

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',

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 = (

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 {