Merge pull request #2262 from metabase/fix_fullscreen_text_fade

explicit fullscreen text classes + cleanup

frontend/src/components/dashboard/dashboard.css

+:root {
+  --night-mode-color: rgba(255, 255, 255, 0.86);
+}
 .Dashboard {
     background-color: #f9fbfc;
 }
@@ -37,20 +40,24 @@
 }
 
 /* Night mode */
+.Dashboard.Dashboard--night {
+  background-color: rgb(34, 37, 39);
+}
+
 .Dashboard.Dashboard--night .Header-button,
 .Dashboard.Dashboard--night .Header-button svg {
-    color: rgba(151, 151, 151, 0.3) !important;
+    color: rgba(151, 151, 151, 0.3);
 }
 
-.Dashboard.Dashboard--night {
-  background-color: rgb(34, 37, 39);
-}
 
+.Dashboard.Dashboard--fullscreen .fullscreen-normal-text {
+  color: #3f3a3a;
+  transition: color 1s linear;
+}
 
-.Dashboard.Dashboard--night .DashCard .Card a,
-.Dashboard.Dashboard--night .DashCard .Card div,
-.Dashboard.Dashboard--night .DashCard .Card span {
-  color: rgba(255, 255, 255, 0.86) !important;
+.Dashboard.Dashboard--night.Dashboard--fullscreen .fullscreen-night-text {
+  color: var(--night-mode-color);
+  transition: color 1s linear;
 }
 
 .Dashboard.Dashboard--night .DashCard .Card svg text {
@@ -59,12 +66,12 @@
 
 .Dashboard.Dashboard--night .DashCard .Card {
   background-color: rgb(54, 58, 61);
-  border: 1px solid rgb(46, 49, 52) !important;
+  border: 1px solid rgb(46, 49, 52);
 }
 
 .Dashboard.Dashboard--night .enable-dots-onhover .dc-tooltip circle.dot:hover,
 .Dashboard.Dashboard--night .enable-dots .dc-tooltip circle.dot {
-  fill: currentColor !important;
+  fill: currentColor;
 }
 
 /* Night mode transition */
@@ -73,16 +80,6 @@
   transition: background-color 1s linear, border 1s linear;
 }
 
-.Dashboard.Dashboard--fullscreen .DashCard .Card a,
-.Dashboard.Dashboard--fullscreen .DashCard .Card div,
-.Dashboard.Dashboard--fullscreen .DashCard .Card span,
-.Dashboard.Dashboard--fullscreen .Header-button,
-.Dashboard.Dashboard--fullscreen .Header-button svg {
-  transition: color 1s linear;
-}
-
-
-
 .DashboardGrid {
   margin-top: 5px;
 }

frontend/src/visualizations/PieChart.jsx

@@ -12,6 +12,8 @@ import { formatValue } from "metabase/lib/formatting";
 
 import * as colors from "metabase/lib/colors";
 
+import cx from "classnames";
+
 import d3 from "d3";
 import _ from "underscore";
 
@@ -133,7 +135,7 @@ export default class PieChart extends Component {
             >
                 <div className={styles.ChartAndDetail}>
                     <div ref="detail" className={styles.Detail}>
-                        <div className={styles.Value}>{value}</div>
+                        <div className={cx(styles.Value, "fullscreen-normal-text fullscreen-night-text")}>{value}</div>
                         <div className={styles.Title}>{title}</div>
                     </div>
                     <div className={styles.Chart}>

frontend/src/visualizations/Scalar.jsx

@@ -108,11 +108,11 @@ export default class Scalar extends Component {
         return (
             <div className={cx(className, styles.Scalar, styles[isSmall ? "small" : "large"])}>
                 <div className="Card-title absolute top right p1 px2">{actionButtons}</div>
-                <Ellipsified className={cx(styles.Value, 'ScalarValue')} tooltip={fullScalarValue} alwaysShowTooltip={fullScalarValue !== compactScalarValue}>
+                <Ellipsified className={cx(styles.Value, 'ScalarValue', 'fullscreen-normal-text', 'fullscreen-night-text')} tooltip={fullScalarValue} alwaysShowTooltip={fullScalarValue !== compactScalarValue}>
                     {compactScalarValue}
                 </Ellipsified>
                 <Ellipsified className={styles.Title} tooltip={card.name}>
-                    <a className="no-decoration" href={Urls.card(card.id)}>{card.name}</a>
+                    <a className="no-decoration fullscreen-normal-text fullscreen-night-text" href={Urls.card(card.id)}>{card.name}</a>
                 </Ellipsified>
             </div>
         );

frontend/src/visualizations/TableSimple.jsx

@@ -71,7 +71,7 @@ export default class TableSimple extends Component {
             <div className={cx(this.props.className, "relative flex flex-column")}>
                 <div className="flex-full relative border-bottom">
                     <div className="absolute top bottom left right scroll-x scroll-show scroll-show--horizontal scroll-show--hover" style={{ overflowY: "hidden" }}>
-                        <table className={cx(styles.Table, styles.TableSimple)}>
+                        <table className={cx(styles.Table, styles.TableSimple, 'fullscreen-normal-text', 'fullscreen-night-text')}>
                             <thead ref="header">
                                 <tr>
                                     {cols.map((col, colIndex) =>
@@ -103,7 +103,7 @@ export default class TableSimple extends Component {
                     </div>
                 </div>
                 { pageSize < rows.length ?
-                    <div ref="footer" className="p1 flex flex-no-shrink flex-align-right">
+                    <div ref="footer" className="p1 flex flex-no-shrink flex-align-right fullscreen-normal-text fullscreen-night-text">
                         <span className="text-bold">Rows {start + 1}-{end + 1} of {rows.length}</span>
                         <span className={cx("text-brand-hover px1 cursor-pointer", { disabled: start === 0 })} onClick={() => this.setState({ page: page - 1 })}>
                             <Icon name="left" height={10} />

frontend/src/visualizations/components/ChartWithLegend.jsx

@@ -58,7 +58,7 @@ export default class ChartWithLegend extends Component {
         }
 
         return (
-            <div className={cx(className, 'fullscreen-text-small', styles.ChartWithLegend, styles[type], flexChart && styles.flexChart)} style={{ paddingBottom: PADDING, paddingLeft: PADDING, paddingRight: PADDING }}>
+            <div className={cx(className, 'fullscreen-text-small fullscreen-normal-text fullscreen-night-text', styles.ChartWithLegend, styles[type], flexChart && styles.flexChart)} style={{ paddingBottom: PADDING, paddingLeft: PADDING, paddingRight: PADDING }}>
                 { LegendComponent ?
                     <LegendComponent
                         className={styles.Legend}

frontend/src/visualizations/components/LegendItem.jsx

@@ -26,7 +26,7 @@ export default class LegendItem extends Component {
         return (
             <a
                 href={href}
-                className={cx(className, "LegendItem", "no-decoration flex align-center", { mr1: showTitle, muted: isMuted })}
+                className={cx(className, "LegendItem", "no-decoration flex align-center fullscreen-normal-text fullscreen-night-text", { mr1: showTitle, muted: isMuted })}
                 style={{ overflowX: "hidden", flex: "0 1 auto" }}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}

frontend/src/visualizations/components/LineAreaBarChart.jsx

@@ -193,7 +193,7 @@ export default class LineAreaBarChart extends Component {
         return (
             <div className={cx("flex flex-column p1", this.getHoverClasses(), this.props.className)}>
                 { (isDashboard && isMultiseries) &&
-                    <a href={card.id && Urls.card(card.id)} className="Card-title pt1 px1 flex-no-shrink no-decoration h3 text-bold" style={{fontSize: '1em'}}>{card.name}</a>
+                    <a href={card.id && Urls.card(card.id)} className="Card-title pt1 px1 flex-no-shrink no-decoration h3 text-bold fullscreen-night-text fullscreen-normal-text" style={{fontSize: '1em'}}>{card.name}</a>
                 }
                 { (isDashboard || isMultiseries) &&
                     <LegendHeader