Add theme top level

apache · Apr 1, 2022 · 472f992 · 472f992
1 parent 9543a03
commit 472f992
Showing 1 changed file with 88 additions and 86 deletions.
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
@@ -87,108 +87,110 @@ const JSON_TREE_THEME = {
 const ONLY_NUMBER_REGEX = /^(NaN|-?((\d*\.\d+|\d+)([Ee][+-]?\d+)?|Infinity))$/;
 
 const StyledFilterableTable = styled.div`
-  height: 100%;
-  overflow-x: auto;
-  margin-top: ${({ theme }) => theme.gridUnit * 2}px;
-  overflow-y: hidden;
-
-  .ReactVirtualized__Grid__innerScrollContainer {
-    border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
-  }
+  ${({ theme }) => `
+    height: 100%;
+    overflow-x: auto;
+    margin-top: ${theme.gridUnit * 2}px;
+    overflow-y: hidden;
+
+    .ReactVirtualized__Grid__innerScrollContainer {
+      border: 1px solid ${theme.colors.grayscale.light2};
+    }
 
-  .ReactVirtualized__Table__headerRow {
-    font-weight: ${({ theme }) => theme.typography.weights.bold};
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
-  }
+    .ReactVirtualized__Table__headerRow {
+      font-weight: ${theme.typography.weights.bold};
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border: 1px solid ${theme.colors.grayscale.light2};
+    }
 
-  .ReactVirtualized__Table__row {
-    display: flex;
-    flex-direction: row;
-  }
+    .ReactVirtualized__Table__row {
+      display: flex;
+      flex-direction: row;
+    }
 
-  .ReactVirtualized__Table__headerTruncatedText,
-  .grid-header-cell {
-    display: inline-block;
-    max-width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
+    .ReactVirtualized__Table__headerTruncatedText,
+    .grid-header-cell {
+      display: inline-block;
+      max-width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
 
-  .ReactVirtualized__Table__headerColumn,
-  .ReactVirtualized__Table__rowColumn,
-  .grid-cell {
-    min-width: 0px;
-    border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
-    align-self: center;
-    padding: ${({ theme }) => theme.gridUnit * 3}px;
-    font-size: ${({ theme }) => theme.typography.sizes.s}px;
-  }
+    .ReactVirtualized__Table__headerColumn,
+    .ReactVirtualized__Table__rowColumn,
+    .grid-cell {
+      min-width: 0px;
+      border-right: 1px solid ${theme.colors.grayscale.light2};
+      align-self: center;
+      padding: ${theme.gridUnit * 3}px;
+      font-size: ${theme.typography.sizes.s}px;
+    }
 
-  .grid-header-cell {
-    font-weight: ${({ theme }) => theme.typography.weights.bold};
-    cursor: pointer;
-  }
+    .grid-header-cell {
+      font-weight: ${theme.typography.weights.bold};
+      cursor: pointer;
+    }
 
-  .ReactVirtualized__Table__headerColumn:last-of-type,
-  .ReactVirtualized__Table__rowColumn:last-of-type {
-    border-right: 0px;
-  }
+    .ReactVirtualized__Table__headerColumn:last-of-type,
+    .ReactVirtualized__Table__rowColumn:last-of-type {
+      border-right: 0px;
+    }
 
-  .ReactVirtualized__Table__headerColumn:focus,
-  .ReactVirtualized__Table__Grid:focus {
-    outline: none;
-  }
+    .ReactVirtualized__Table__headerColumn:focus,
+    .ReactVirtualized__Table__Grid:focus {
+      outline: none;
+    }
 
-  .ReactVirtualized__Table__rowColumn {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    .ReactVirtualized__Table__rowColumn {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  .ReactVirtualized__Table__sortableHeaderColumn {
-    cursor: pointer;
-  }
+    .ReactVirtualized__Table__sortableHeaderColumn {
+      cursor: pointer;
+    }
 
-  .ReactVirtualized__Table__sortableHeaderIconContainer {
-    display: flex;
-    align-items: center;
-  }
+    .ReactVirtualized__Table__sortableHeaderIconContainer {
+      display: flex;
+      align-items: center;
+    }
 
-  .ReactVirtualized__Table__sortableHeaderIcon {
-    flex: 0 0 ${({ theme }) => theme.gridUnit * 6}px;
-    height: 1em;
-    width: 1em;
-    fill: currentColor;
-  }
+    .ReactVirtualized__Table__sortableHeaderIcon {
+      flex: 0 0 ${theme.gridUnit * 6}px;
+      height: 1em;
+      width: 1em;
+      fill: currentColor;
+    }
 
-  .even-row {
-    background: ${({ theme }) => theme.colors.grayscale.light4};
-  }
+    .even-row {
+      background: ${theme.colors.grayscale.light4};
+    }
 
-  .odd-row {
-    background: ${({ theme }) => theme.colors.grayscale.light5};
-  }
+    .odd-row {
+      background: ${theme.colors.grayscale.light5};
+    }
 
-  .header-style {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    .header-style {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  .header-style-disabled {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: ${({ theme }) => theme.colors.grayscale.light1};
-  }
+    .header-style-disabled {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: ${theme.colors.grayscale.light1};
+    }
 
-  .cell-text-for-measuring {
-    font-family: ${({ theme }) => theme.typography.families.sansSerif};
-    font-size: ${({ theme }) => theme.typography.sizes.s}px;
-  }
+    .cell-text-for-measuring {
+      font-family: ${theme.typography.families.sansSerif};
+      font-size: ${theme.typography.sizes.s}px;
+    }
+  `}
 `;
 
 // when more than MAX_COLUMNS_FOR_TABLE are returned, switch from table to grid view