move styles to component

apache · Jan 8, 2021 · 346230a · 346230a
1 parent 8870749
commit 346230a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git 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
@@ -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>
     );
   }