fix: More tweaks needed after adding Doctype tag (#10504)

* fixing last-of-type specificity

* Simplifying/consolidating styles

* fixing filterbox in explore

* linting

* adding some px to font sizes

* fixing in-dash overflow

* removing px for one special fontsize case

* simplifying, addressing comments

superset-frontend/src/chart/Chart.jsx

@@ -19,6 +19,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Alert } from 'react-bootstrap';
+import styled from '@superset-ui/style';
 
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger/LogUtils';
@@ -27,7 +28,6 @@ import RefreshChartOverlay from '../components/RefreshChartOverlay';
 import ErrorMessageWithStackTrace from '../components/ErrorMessage/ErrorMessageWithStackTrace';
 import ErrorBoundary from '../components/ErrorBoundary';
 import ChartRenderer from './ChartRenderer';
-import './chart.less';
 
 const propTypes = {
   annotationData: PropTypes.object,
@@ -80,6 +80,13 @@ const defaultProps = {
   chartStackTrace: null,
 };
 
+const Styles = styled.div`
+  .chart-tooltip {
+    opacity: 0.75;
+    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  }
+`;
+
 class Chart extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -180,8 +187,6 @@ class Chart extends React.PureComponent {
 
     const isLoading = chartStatus === 'loading';
 
-    // this allows <Loading /> to be positioned in the middle of the chart
-    const containerStyles = isLoading ? { height, width } : null;
     const isFaded = refreshOverlayVisible && !errorMessage;
     this.renderContainerStartTime = Logger.getTimestamp();
     if (chartStatus === 'failed') {
@@ -195,12 +200,9 @@ class Chart extends React.PureComponent {
         onError={this.handleRenderContainerFailure}
         showMessage={false}
       >
-        <div
-          className={`chart-container ${isLoading ? 'is-loading' : ''}`}
-          style={containerStyles}
-        >
+        <Styles className="chart-container">
           <div className={`slice_container ${isFaded ? ' faded' : ''}`}>
-            <ChartRenderer {...this.props} />
+            <ChartRenderer {...this.props} data-test={this.props.vizType} />
           </div>
 
           {!isLoading && !chartAlert && isFaded && (
@@ -212,7 +214,7 @@ class Chart extends React.PureComponent {
           )}
 
           {isLoading && <Loading />}
-        </div>
+        </Styles>
       </ErrorBoundary>
     );
   }