refactor: Removes the CSS files from the DeckGL plugin

superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx

@@ -28,7 +28,6 @@ import DeckGL from 'deck.gl';
 import { styled } from '@superset-ui/core';
 import Tooltip from './components/Tooltip';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import './css/deckgl.css';
 
 const TICK = 250; // milliseconds
 

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/BootstrapSliderWrapper.jsx

@@ -19,12 +19,23 @@
 import React from 'react';
 import ReactBootstrapSlider from 'react-bootstrap-slider';
 import 'bootstrap-slider/dist/css/bootstrap-slider.min.css';
-import './BootstrapSliderWrapper.css';
+import { styled } from '@superset-ui/core';
+
+const StyledSlider = styled.div`
+  ${({ theme }) => `
+    .slider-selection {
+      background: ${theme.colors.grayscale.light2};
+    }
+    .slider-handle {
+      background: ${theme.colors.grayscale.light1};
+    }
+  `}
+`;
 
 export default function BootstrapSliderWrapper(props) {
   return (
-    <span className="BootstrapSliderWrapper">
+    <StyledSlider>
       <ReactBootstrapSlider {...props} />
-    </span>
+    </StyledSlider>
   );
 }

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.jsx

@@ -21,9 +21,36 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { formatNumber } from '@superset-ui/core';
-
-import './Legend.css';
+import { formatNumber, styled } from '@superset-ui/core';
+
+const StyledLegend = styled.div`
+  ${({ theme }) => `
+    font-size: ${theme.typography.sizes.s}px;
+    position: absolute;
+    background: ${theme.colors.grayscale.light5};
+    box-shadow: 0 0 ${theme.gridUnit}px ${theme.colors.grayscale.light2};
+    margin: ${theme.gridUnit * 6}px;
+    padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 5}px;
+    outline: none;
+    overflow-y: scroll;
+    max-height: 200px;
+
+    & ul {
+      list-style: none;
+      padding-left: 0;
+      margin: 0;
+
+      & li a {
+        color: ${theme.colors.grayscale.base};
+        text-decoration: none;
+
+        & span {
+          margin-right: ${theme.gridUnit * 3}px;
+        }
+      }
+    }
+  `}
+`;
 
 const categoryDelimiter = ' - ';
 
@@ -106,9 +133,9 @@ export default class Legend extends React.PureComponent {
     };
 
     return (
-      <div className="legend" style={style}>
-        <ul className="categories">{categories}</ul>
-      </div>
+      <StyledLegend style={style}>
+        <ul>{categories}</ul>
+      </StyledLegend>
     );
   }
 }

superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/PlaySlider.jsx

@@ -26,9 +26,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Mousetrap from 'mousetrap';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import BootrapSliderWrapper from './BootstrapSliderWrapper';
-import './PlaySlider.css';
+
+const StyledSlider = styled.div`
+  ${({ theme }) => `
+    display: flex;
+    height: 40px;
+    width: 100%;
+    margin: 0;
+
+    .play-slider-controls {
+      flex: 0 0 80px;
+      text-align: middle;
+    }
+
+    .play-slider-scrobbler {
+      flex: 1;
+    }
+
+    .slider.slider-horizontal {
+      width: 100% !important;
+    }
+
+    .slider-button {
+      color: ${theme.colors.grayscale.light1};
+      margin-right: ${theme.gridUnit}px;
+    }
+
+    div.slider > div.tooltip.tooltip-main.top.in {
+      margin-left: 0 !important;
+    }
+  `}
+`;
 
 const propTypes = {
   start: PropTypes.number.isRequired,
@@ -167,7 +197,7 @@ export default class PlaySlider extends React.PureComponent {
       this.props;
 
     return (
-      <div className="play-slider">
+      <StyledSlider>
         <div className="play-slider-controls padded">
           <i
             className="fa fa-step-backward fa-lg slider-button "
@@ -193,7 +223,7 @@ export default class PlaySlider extends React.PureComponent {
             disabled={disabled ? 'disabled' : 'enabled'}
           />
         </div>
-      </div>
+      </StyledSlider>
     );
   }
 }