diff --git a/enterprise/frontend/src/metabase-enterprise/settings/selectors.js b/enterprise/frontend/src/metabase-enterprise/settings/selectors.js
index e63797c361eb27b8c68de03942fc8694fa8f16d6..fc9817867cac63119de384aed9e316cba8e2a155 100644
--- a/enterprise/frontend/src/metabase-enterprise/settings/selectors.js
+++ b/enterprise/frontend/src/metabase-enterprise/settings/selectors.js
@@ -11,7 +11,7 @@ const getApplicationColors = state =>
state.settings.values["application-colors"] ||
state.settings.values.application_colors;
-const getHasCustomColors = createSelector(
+export const getHasCustomColors = createSelector(
[getApplicationColors],
applicationColors => Object.keys(applicationColors || {}).length > 0,
);
@@ -21,7 +21,7 @@ export const getHasCustomLogo = createSelector(
logoUrl => logoUrl !== DEFAULT_LOGO_URL,
);
-export const getIsWhitelabeled = createSelector(
+export const getHasCustomBranding = createSelector(
[getHasCustomLogo, getHasCustomColors],
(hasCustomLogo, hasCustomColors) => hasCustomLogo || hasCustomColors,
);
diff --git a/enterprise/frontend/src/metabase-enterprise/whitelabel/index.js b/enterprise/frontend/src/metabase-enterprise/whitelabel/index.js
index 11724aa74a25a48872425f7bdbad6a6469c0a397..a81d87a4389188ad6bca420dd47787738ba5ce3a 100644
--- a/enterprise/frontend/src/metabase-enterprise/whitelabel/index.js
+++ b/enterprise/frontend/src/metabase-enterprise/whitelabel/index.js
@@ -10,7 +10,8 @@ import { t } from "ttag";
import { hasPremiumFeature } from "metabase-enterprise/settings";
import {
- getIsWhitelabeled,
+ getHasCustomBranding,
+ getHasCustomColors,
getHasCustomLogo,
} from "metabase-enterprise/settings/selectors";
import MetabaseSettings from "metabase/lib/settings";
@@ -75,7 +76,6 @@ if (hasPremiumFeature("whitelabel")) {
}
// these selectors control whitelabeling UI
-PLUGIN_SELECTORS.getShowBrandLogo = state => !getIsWhitelabeled(state);
-PLUGIN_SELECTORS.getShowBrandScene = state => !getIsWhitelabeled(state);
-PLUGIN_SELECTORS.getLogoBackgroundClass = state =>
- getHasCustomLogo(state) ? "bg-brand" : "bg-white";
+PLUGIN_SELECTORS.getHasCustomLogo = getHasCustomLogo;
+PLUGIN_SELECTORS.getHasCustomColors = getHasCustomColors;
+PLUGIN_SELECTORS.getHasCustomBranding = getHasCustomBranding;
diff --git a/frontend/src/metabase/auth/containers/AuthLayout/AuthLayout.tsx b/frontend/src/metabase/auth/containers/AuthLayout/AuthLayout.tsx
index ba9bc79e8156fa8b408e167934dc1f15bbbc3940..c02f45e6cb5318992dfe842d30d1e81fb0aa92ce 100644
--- a/frontend/src/metabase/auth/containers/AuthLayout/AuthLayout.tsx
+++ b/frontend/src/metabase/auth/containers/AuthLayout/AuthLayout.tsx
@@ -4,7 +4,7 @@ import AuthLayout from "../../components/AuthLayout";
import { State } from "metabase-types/store";
const mapStateToProps = (state: State) => ({
- showScene: PLUGIN_SELECTORS.getShowBrandScene(state),
+ showScene: !PLUGIN_SELECTORS.getHasCustomBranding(state),
});
export default connect(mapStateToProps)(AuthLayout);
diff --git a/frontend/src/metabase/home/homepage/containers/HomeGreeting/HomeGreeting.tsx b/frontend/src/metabase/home/homepage/containers/HomeGreeting/HomeGreeting.tsx
index 2ab775bf9ebb264e8f0117d9ea080cb1d0d8d477..aa925b4b3279d2d9409da96caa1a32b070865de8 100644
--- a/frontend/src/metabase/home/homepage/containers/HomeGreeting/HomeGreeting.tsx
+++ b/frontend/src/metabase/home/homepage/containers/HomeGreeting/HomeGreeting.tsx
@@ -6,7 +6,7 @@ import HomeGreeting from "../../components/HomeGreeting";
const mapStateToProps = (state: State) => ({
user: getUser(state),
- showLogo: PLUGIN_SELECTORS.getShowBrandLogo(state),
+ showLogo: !PLUGIN_SELECTORS.getHasCustomBranding(state),
});
export default connect(mapStateToProps)(HomeGreeting);
diff --git a/frontend/src/metabase/home/homepage/containers/HomeLayout/HomeLayout.tsx b/frontend/src/metabase/home/homepage/containers/HomeLayout/HomeLayout.tsx
index d1c98ef94b228917eaa0b3408c347bc5fa341d63..2bcd8b4eafaadc268bb1a4a4f36d55249ba7fd4a 100644
--- a/frontend/src/metabase/home/homepage/containers/HomeLayout/HomeLayout.tsx
+++ b/frontend/src/metabase/home/homepage/containers/HomeLayout/HomeLayout.tsx
@@ -4,7 +4,7 @@ import { State } from "metabase-types/store";
import HomeLayout from "../../components/HomeLayout";
const mapStateToProps = (state: State) => ({
- showScene: PLUGIN_SELECTORS.getShowBrandScene(state),
+ showScene: !PLUGIN_SELECTORS.getHasCustomBranding(state),
});
export default connect(mapStateToProps)(HomeLayout);
diff --git a/frontend/src/metabase/plugins/index.ts b/frontend/src/metabase/plugins/index.ts
index 1786d2b610973f54ab1dc2a348e596d0ac9cd461..88dcdff972cd8deab895c1a85f5deb7ad4d33855 100644
--- a/frontend/src/metabase/plugins/index.ts
+++ b/frontend/src/metabase/plugins/index.ts
@@ -66,9 +66,9 @@ export const PLUGIN_SHOW_CHANGE_PASSWORD_CONDITIONS = [];
// selectors that customize behavior between app versions
export const PLUGIN_SELECTORS = {
- getShowBrandLogo: (state: State) => true,
- getShowBrandScene: (state: State) => true,
- getLogoBackgroundClass: (state: State) => "bg-white",
+ getHasCustomLogo: (state: State) => false,
+ getHasCustomColors: (state: State) => false,
+ getHasCustomBranding: (state: State) => false,
};
export const PLUGIN_FORM_WIDGETS = {};
diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable.jsx b/frontend/src/metabase/visualizations/visualizations/PivotTable.jsx
index 5cce32e330a920db67074fb613f6b502fda55ade..8c25d48790bee436b70901512eeed76fa7e1bb91 100644
--- a/frontend/src/metabase/visualizations/visualizations/PivotTable.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/PivotTable.jsx
@@ -6,7 +6,7 @@ import _ from "underscore";
import { getIn, updateIn } from "icepick";
import { Grid, Collection, ScrollSync, AutoSizer } from "react-virtualized";
-import { color, lighten } from "metabase/lib/colors";
+import { darken, lighten } from "metabase/lib/colors";
import "metabase/visualizations/components/TableInteractive.css";
import { getScrollBarSize } from "metabase/lib/dom";
@@ -25,9 +25,13 @@ import { formatColumn } from "metabase/lib/formatting";
import { columnSettings } from "metabase/visualizations/lib/settings/column";
import { findDOMNode } from "react-dom";
+import { connect } from "react-redux";
+import { PLUGIN_SELECTORS } from "metabase/plugins";
-const getBgLightColor = () => lighten(color("brand"), 0.65);
-const getBgDarkColor = () => lighten(color("brand"), 0.6);
+const getBgLightColor = hasCustomColors =>
+ hasCustomColors ? darken("white", 0.01) : lighten("brand", 0.65);
+const getBgDarkColor = hasCustomColors =>
+ hasCustomColors ? darken("white", 0.035) : lighten("brand", 0.6);
const partitions = [
{
@@ -60,6 +64,11 @@ const CELL_HEIGHT = 25;
const LEFT_HEADER_LEFT_SPACING = 24;
const LEFT_HEADER_CELL_WIDTH = 145;
+const mapStateToProps = state => ({
+ hasCustomColors: PLUGIN_SELECTORS.getHasCustomColors(state),
+});
+
+@connect(mapStateToProps)
export default class PivotTable extends Component {
static uiName = t`Pivot Table`;
static identifier = "pivot";
@@ -230,7 +239,13 @@ export default class PivotTable extends Component {
}
render() {
- const { settings, data, width, onUpdateVisualizationSettings } = this.props;
+ const {
+ settings,
+ data,
+ width,
+ hasCustomColors,
+ onUpdateVisualizationSettings,
+ } = this.props;
if (data == null || !data.cols.some(isPivotGroupColumn)) {
return null;
}
@@ -286,7 +301,10 @@ export default class PivotTable extends Component {
return (
<div
key={key}
- style={{ ...style, backgroundColor: getBgLightColor() }}
+ style={{
+ ...style,
+ backgroundColor: getBgLightColor(hasCustomColors),
+ }}
className={cx("overflow-hidden", {
"border-right border-medium": !hasChildren,
})}
@@ -296,6 +314,7 @@ export default class PivotTable extends Component {
value={value}
isSubtotal={isSubtotal}
isGrandTotal={isGrandTotal}
+ hasCustomColors={hasCustomColors}
onClick={this.getCellClickHander(clicked)}
icon={
(isSubtotal || hasSubtotal) && (
@@ -378,6 +397,7 @@ export default class PivotTable extends Component {
value={value}
isSubtotal={isSubtotal}
isGrandTotal={isGrandTotal}
+ hasCustomColors={hasCustomColors}
isBody
onClick={this.getCellClickHander(clicked)}
/>
@@ -398,7 +418,7 @@ export default class PivotTable extends Component {
"border-right border-bottom border-medium": leftHeaderWidth,
})}
style={{
- backgroundColor: getBgLightColor(),
+ backgroundColor: getBgLightColor(hasCustomColors),
// add left spacing unless the header width is 0
paddingLeft: leftHeaderWidth && LEFT_HEADER_LEFT_SPACING,
width: leftHeaderWidth,
@@ -410,6 +430,7 @@ export default class PivotTable extends Component {
key={rowIndex}
value={this.getColumnTitle(rowIndex)}
style={{ width: LEFT_HEADER_CELL_WIDTH }}
+ hasCustomColors={hasCustomColors}
icon={
// you can only collapse before the last column
index < rowIndexes.length - 1 &&
@@ -418,6 +439,7 @@ export default class PivotTable extends Component {
value={index + 1}
settings={settings}
updateSettings={onUpdateVisualizationSettings}
+ hasCustomColors={hasCustomColors}
/>
)
}
@@ -508,6 +530,7 @@ function RowToggleIcon({
updateSettings,
hideUnlessCollapsed,
rowIndex,
+ hasCustomColors,
}) {
if (value == null) {
return null;
@@ -565,7 +588,9 @@ function RowToggleIcon({
style={{
padding: "4px",
borderRadius: "4px",
- backgroundColor: isCollapsed ? getBgLightColor() : getBgDarkColor(),
+ backgroundColor: isCollapsed
+ ? getBgLightColor(hasCustomColors)
+ : getBgDarkColor(hasCustomColors),
}}
onClick={e => {
e.stopPropagation();
@@ -588,6 +613,7 @@ function Cell({
isBody = false,
className,
icon,
+ hasCustomColors,
}) {
return (
<div
@@ -595,7 +621,9 @@ function Cell({
lineHeight: `${CELL_HEIGHT}px`,
...(isGrandTotal ? { borderTop: "1px solid white" } : {}),
...style,
- ...(isSubtotal ? { backgroundColor: getBgDarkColor() } : {}),
+ ...(isSubtotal
+ ? { backgroundColor: getBgDarkColor(hasCustomColors) }
+ : {}),
}}
className={cx(
"shrink-below-content-size flex-full flex-basis-none TableInteractive-cellWrapper",