From 649a7cd28137708fa0a20366caea07b83bf30723 Mon Sep 17 00:00:00 2001 From: Tom Hacohen Date: Wed, 11 Mar 2020 20:07:13 +0200 Subject: [PATCH] Event view: change the text colour based on background. This is needed to ensure a good enough contrast. Fixes #85. --- package.json | 1 + src/components/PimItemHeader.tsx | 8 +++++--- yarn.lock | 19 +++++++++++++++++++ 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 1bd2d7c..ec99c63 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "eject": "react-scripts eject" }, "devDependencies": { + "@types/color": "^3.0.1", "@types/jest": "^24.0.4", "@types/node": "^11.9.3", "@types/node-rsa": "^1.0.0", diff --git a/src/components/PimItemHeader.tsx b/src/components/PimItemHeader.tsx index 1d48591..9eb2cc9 100644 --- a/src/components/PimItemHeader.tsx +++ b/src/components/PimItemHeader.tsx @@ -2,15 +2,17 @@ // SPDX-License-Identifier: AGPL-3.0-only import * as React from 'react'; +import Color from 'color'; import { Theme, withTheme } from '@material-ui/core/styles'; export default withTheme((props: {text: string, backgroundColor?: string, children?: any, theme: Theme}) => { + const backgroundColor = props.backgroundColor ?? props.theme.palette.secondary.main; + const foregroundColor = props.theme.palette.getContrastText(Color(backgroundColor).rgb().string()); const style = { header: { - backgroundColor: (props.backgroundColor !== undefined) ? - props.backgroundColor : props.theme.palette.secondary.main, - color: props.theme.palette.secondary.contrastText, + backgroundColor, + color: foregroundColor, padding: 15, }, headerText: { diff --git a/yarn.lock b/yarn.lock index b570f21..f061c46 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2030,6 +2030,25 @@ dependencies: "@babel/types" "^7.3.0" +"@types/color-convert@*": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d" + integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg== + dependencies: + "@types/color-name" "*" + +"@types/color-name@*": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" + integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== + +"@types/color@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.1.tgz#2900490ed04da8116c5058cd5dba3572d5a25071" + integrity sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA== + dependencies: + "@types/color-convert" "*" + "@types/eslint-visitor-keys@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"