chore: Removes hard-coded opacity and spacing from BigNumber (#19536)

apache · Apr 6, 2022 · 356a038 · 356a038
1 parent 6fa99d6
commit 356a038
Showing 1 changed file with 40 additions and 43 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
@@ -277,59 +277,56 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
 }
 
 export default styled(BigNumberVis)`
-  font-family: ${({ theme }) => theme.typography.families.sansSerif};
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  &.no-trendline .subheader-line {
-    padding-bottom: 0.3em;
-  }
-
-  .text-container {
+  ${({ theme }) => `
+    font-family: ${theme.typography.families.sansSerif};
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: flex-start;
-    .alert {
-      font-size: ${({ theme }) => theme.typography.sizes.s};
-      margin: -0.5em 0 0.4em;
-      line-height: 1;
-      padding: 2px 4px 3px;
-      border-radius: 3px;
+
+    &.no-trendline .subheader-line {
+      padding-bottom: 0.3em;
     }
-  }
 
-  .kicker {
-    line-height: 1em;
-    padding-bottom: 2em;
-  }
+    .text-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      .alert {
+        font-size: ${theme.typography.sizes.s};
+        margin: -0.5em 0 0.4em;
+        line-height: 1;
+        padding: ${theme.gridUnit}px;
+        border-radius: ${theme.gridUnit}px;
+      }
+    }
 
-  .header-line {
-    position: relative;
-    line-height: 1em;
-    span {
-      position: absolute;
-      bottom: 0;
+    .kicker {
+      line-height: 1em;
+      padding-bottom: 2em;
     }
-  }
 
-  .subheader-line {
-    line-height: 1em;
-    padding-bottom: 0;
-  }
+    .header-line {
+      position: relative;
+      line-height: 1em;
+      span {
+        position: absolute;
+        bottom: 0;
+      }
+    }
 
-  &.is-fallback-value {
-    .kicker,
-    .header-line,
     .subheader-line {
-      opacity: 0.5;
+      line-height: 1em;
+      padding-bottom: 0;
     }
-  }
 
-  .superset-data-ui-tooltip {
-    z-index: 1000;
-    background: #000;
-  }
+    &.is-fallback-value {
+      .kicker,
+      .header-line,
+      .subheader-line {
+        opacity: ${theme.opacity.mediumHeavy};
+      }
+    }
+  `}
 `;