From 346230a4b3658979adbe7ae596390799500bbeeb Mon Sep 17 00:00:00 2001
From: Elizabeth Thompson <eschutho@gmail.com>
Date: Thu, 7 Jan 2021 17:30:54 -0800
Subject: [PATCH] move styles to component

---
 superset-frontend/src/SqlLab/main.less                 |  4 ----
 .../src/components/FilterableTable/FilterableTable.tsx | 10 +++++-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
index 23e6810e75a8a..dffc599308f64 100644
--- a/superset-frontend/src/SqlLab/main.less
+++ b/superset-frontend/src/SqlLab/main.less
@@ -401,10 +401,6 @@ div.tablePopover {
   padding-top: 16px;
 }
 
-.filterable-table-container {
-  margin-top: 48px;
-}
-
 .ace_editor.ace_editor {
   //double class is better than !important
   border: 1px solid @gray-light;
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
index ebddf09c25609..5b51f9915b016 100644
--- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
+++ b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
@@ -29,7 +29,7 @@ import {
   SortIndicator,
   Table,
 } from 'react-virtualized';
-import { getMultipleTextDimensions, t, css } from '@superset-ui/core';
+import { getMultipleTextDimensions, t, styled } from '@superset-ui/core';
 
 import Button from '../Button';
 import CopyToClipboard from '../CopyToClipboard';
@@ -83,8 +83,9 @@ const JSON_TREE_THEME = {
   base0F: '#cc6633',
 };
 
-const filterableTableStyles = css`
+const StyledFilterableTable = styled.div`
   overflow-x: auto;
+  margin-top: ${({ theme }) => theme.gridUnit * 12}px;
 `;
 
 // when more than MAX_COLUMNS_FOR_TABLE are returned, switch from table to grid view
@@ -556,11 +557,10 @@ export default class FilterableTable extends PureComponent<
     const rowGetter = ({ index }: { index: number }) =>
       this.getDatum(sortedAndFilteredList, index);
     return (
-      <div
+      <StyledFilterableTable
         style={{ height }}
         className="filterable-table-container"
         ref={this.container}
-        css={filterableTableStyles}
       >
         {this.state.fitted && (
           <Table
@@ -592,7 +592,7 @@ export default class FilterableTable extends PureComponent<
             ))}
           </Table>
         )}
-      </div>
+      </StyledFilterableTable>
     );
   }