Introduce a more visible resize grabber to the SQL editor (#6593)

- Clean up css and html of the sql editor button area (removing unused styles)
- Restyle the button area and the resizer to be more like the one proposed in issue 6565

superset/assets/src/SqlLab/components/SqlEditor.jsx

@@ -82,7 +82,7 @@ class SqlEditor extends React.PureComponent {
   onResize() {
     const height = this.sqlEditorHeight();
     const editorPaneHeight = this.props.queryEditor.height || 200;
-    const splitPaneHandlerHeight = 15;
+    const splitPaneHandlerHeight = 8; // 4px of height + 4px of top-margin
     this.setState({
       editorPaneHeight,
       southPaneHeight: height - editorPaneHeight - splitPaneHandlerHeight,
@@ -218,8 +218,8 @@ class SqlEditor extends React.PureComponent {
       );
     }
     return (
-      <div className="sql-toolbar clearfix" id="js-sql-toolbar">
-        <div className="pull-left">
+      <div className="sql-toolbar" id="js-sql-toolbar">
+        <div>
           <Form inline>
             <span className="m-r-5">
               <RunQueryActionButton
@@ -265,7 +265,7 @@ class SqlEditor extends React.PureComponent {
             </span>
           </Form>
         </div>
-        <div className="pull-right">
+        <div>
           <TemplateParamsEditor
             language="json"
             onChange={(params) => {

superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx

@@ -168,7 +168,7 @@ class SqlEditorLeftBar extends React.PureComponent {
     }
     const database = this.props.database || {};
     return (
-      <div className="clearfix sql-toolbar">
+      <div className="clearfix">
         <div>
           <AsyncSelect
             dataEndpoint={

superset/assets/src/SqlLab/main.less

@@ -112,9 +112,16 @@ div.Workspace {
 .p-t-10 {
     padding-top: 10px;
 }
-.sqllab-toolbar {
-    padding-top: 5px;
-    border-bottom: 1px solid #DDD;
+.sql-toolbar {
+    padding: 10px;
+    background-color: #e8e8e8;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 2px solid #ccc;
+
+    form {
+        margin-block-end: 0;
+    }
 }
 .no-shadow {
     box-shadow: none;
@@ -168,56 +175,22 @@ div.Workspace {
     background-color: transparent !important;
 }
 
-.Resizer {
-    background: @brand-primary;
-    opacity: 0.5;
-    z-index: 1;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-background-clip: padding;
-    -webkit-background-clip: padding;
-    background-clip: padding-box;
-}
+.SqlEditor {
+    .Resizer {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+    }
 
-.Resizer:hover {
-    -webkit-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    opacity: 0.3;
-}
-
-.Resizer.horizontal {
-    height: 10px;
-    margin: -5px 0;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-    cursor: row-resize;
-    width: 100%;
-    padding: 1px;
-}
-
-.Resizer.horizontal:hover {
-    border-top: 5px solid @brand-primary;
-    border-bottom: 5px solid @brand-primary;
-}
-
-.Resizer.vertical {
-    width: 9px;
-    margin: 0 -5px;
-    border-left: 5px solid rgba(255, 255, 255, 0);
-    border-right: 5px solid rgba(255, 255, 255, 0);
-    cursor: col-resize;
-}
-
-.Resizer.vertical:hover {
-    border-left: 5px solid rgba(0, 0, 0, 0.5);
-    border-right: 5px solid rgba(0, 0, 0, 0.5);
-}
-.Resizer.disabled {
-    cursor: not-allowed;
-}
-.Resizer.disabled:hover {
-    border-color: transparent;
+    .Resizer.horizontal {
+        height: 4px;
+        border-top: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        cursor: row-resize;
+        width: 4%;
+        margin-top: 4px;
+        margin-left: 47%;
+    }
 }
 
 .popover{
@@ -243,7 +216,6 @@ div.tablePopover:hover {
 }
 .ace_editor {
   border: 1px solid #ccc;
-  margin: 0px 0px 10px 0px;
 }
 
 .Select-menu-outer {