Event view: change the text colour based on background.

This is needed to ensure a good enough contrast.

Fixes #85.

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",

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) ?
+      backgroundColor,
-        props.backgroundColor : props.theme.palette.secondary.main,
+      color: foregroundColor,
-      color: props.theme.palette.secondary.contrastText,
       padding: 15,
     },
     headerText: {

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"