[design] use angle icons instead of carets for expandable panels (#6564)

* [design] use angle icons instead of carets for expandable panels

Also moving to the right to conform to the material design specs

* Fix cypress test

superset/assets/cypress/integration/explore/control.test.js

@@ -208,6 +208,7 @@ describe('Advanced analytics', () => {
 
     cy.get('span')
       .contains('Advanced Analytics')
+      .parent()
       .siblings()
       .first()
       .click();

superset/assets/src/explore/components/ControlPanelSection.jsx

@@ -31,21 +31,21 @@ export default class ControlPanelSection extends React.Component {
     return (
       label &&
         <div>
+          <span>
+            <span onClick={this.toggleExpand.bind(this)}>{label}</span>
+            {' '}
+            {description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
+            {hasErrors &&
+              <InfoTooltipWithTrigger
+                label="validation-errors"
+                bsStyle="danger"
+                tooltip="This section contains validation errors"
+              />}
+          </span>
           <i
-            className={`text-primary expander fa fa-caret-${this.state.expanded ? 'down' : 'right'}`}
+            className={`float-right fa-lg text-primary expander fa fa-angle-${this.state.expanded ? 'up' : 'down'}`}
             onClick={this.toggleExpand.bind(this)}
           />
-          {' '}
-          <span onClick={this.toggleExpand.bind(this)}>{label}</span>
-          {' '}
-          {description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
-          {hasErrors &&
-            <InfoTooltipWithTrigger
-              label="validation-errors"
-              bsStyle="danger"
-              tooltip="This section contains validation errors"
-            />
-          }
         </div>);
   }