diff --git a/frontend/src/components/dashboard/dashboard.css b/frontend/src/components/dashboard/dashboard.css
index 2694df172491fa573a189ef4f9f4b452014c4992..4f6cd05f9bc6f35b12d503681175083e3e7877e1 100644
--- a/frontend/src/components/dashboard/dashboard.css
+++ b/frontend/src/components/dashboard/dashboard.css
@@ -1,3 +1,6 @@
+: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;
}
diff --git a/frontend/src/visualizations/PieChart.jsx b/frontend/src/visualizations/PieChart.jsx
index 606b957c52d82c0b813c19db36185e5a5afbf402..a478e4b6b9904031377a5dde85f72f3be4d70bc1 100644
--- a/frontend/src/visualizations/PieChart.jsx
+++ b/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}>
diff --git a/frontend/src/visualizations/Scalar.jsx b/frontend/src/visualizations/Scalar.jsx
index 1a3b8243dcc1b6978aab2620fa7dfce734f4b7bd..8a81ef372ffa7adf1f1649781a6333661700173a 100644
--- a/frontend/src/visualizations/Scalar.jsx
+++ b/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>
);
diff --git a/frontend/src/visualizations/TableSimple.jsx b/frontend/src/visualizations/TableSimple.jsx
index bb96cc928f3c9d9cdf7ec97eb9ccc42a20397ec9..06bd6be21bde6ac461fee621aae61b2e678334fa 100644
--- a/frontend/src/visualizations/TableSimple.jsx
+++ b/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} />
diff --git a/frontend/src/visualizations/components/ChartWithLegend.jsx b/frontend/src/visualizations/components/ChartWithLegend.jsx
index ca4430a3f1acc5f16cb9804274bdb28af3cfeaef..f79b991fd9df536b4eceb559ad0adcaac416d873 100644
--- a/frontend/src/visualizations/components/ChartWithLegend.jsx
+++ b/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}
diff --git a/frontend/src/visualizations/components/LegendItem.jsx b/frontend/src/visualizations/components/LegendItem.jsx
index 7c4c424324e7cc1862d2fba5fee5a3f1effa71e0..6fd9a26b17d341abc3cf1afefd8c990b5760f415 100644
--- a/frontend/src/visualizations/components/LegendItem.jsx
+++ b/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}
diff --git a/frontend/src/visualizations/components/LineAreaBarChart.jsx b/frontend/src/visualizations/components/LineAreaBarChart.jsx
index b6460e1fec0356ec936d94f4515fcdc92fb68e4b..d07fc15635bf4a57eb19d78add9af4d68f18c58e 100644
--- a/frontend/src/visualizations/components/LineAreaBarChart.jsx
+++ b/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