From 649a7cd28137708fa0a20366caea07b83bf30723 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
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"