restyle percentage field

www/package.json

@@ -13,6 +13,7 @@
     "@types/algoliasearch": "^3.34.2",
     "@types/backbone": "^1.4.1",
     "@types/cash": "^0.0.3",
+    "@types/chroma-js": "^2.0.0",
     "@types/file-saver": "^2.0.1",
     "@types/lodash": "^4.14.138",
     "@types/node": "12.7.4",
@@ -23,6 +24,7 @@
     "@types/react-dom": "16.9.0",
     "@types/react-router-dom": "^4.3.5",
     "algoliasearch": "^3.34.0",
+    "chroma-js": "^2.1.0",
     "csv-parse": "^4.4.6",
     "date-fns": "^2.9.0",
     "file-saver": "^2.0.2",

www/src/assets/icons/Percentage.tsx

@@ -4,7 +4,7 @@ import { mdiPercent } from "@mdi/js";
 
 export default function Action(props: SvgIconProps) {
   return (
-    <SvgIcon viewBox="0 2 24 24" {...props}>
+    <SvgIcon viewBox="-2 -2 28 28" {...props}>
       <path d={mdiPercent} />
     </SvgIcon>
   );

www/src/components/Table/formatters/Percentage.tsx

@@ -2,28 +2,44 @@ import React from "react";
 import { CustomCellProps } from "./withCustomCell";
 
 import { makeStyles, createStyles } from "@material-ui/core";
-
-function percentageToHsl(percentage: number, hue0: number, hue1: number) {
-  var hue = percentage * (hue1 - hue0) + hue0;
-  return "hsl(" + hue + ", 100%, 50%)";
-}
+import { resultColorsScale } from "util/color";
 
 const useStyles = makeStyles(theme =>
   createStyles({
-    rating: { color: theme.palette.text.secondary },
-    iconEmpty: { color: theme.palette.text.secondary },
+    resultColor: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      opacity: 0.5,
+
+      zIndex: 0,
+    },
+
+    text: {
+      textAlign: "right",
+      color: theme.palette.text.primary,
+
+      position: "relative",
+      zIndex: 1,
+    },
   })
 );
 
-export default function Percentage({
-  row,
-  column,
-  value,
-  onSubmit,
-}: CustomCellProps) {
+export default function Percentage({ value }: CustomCellProps) {
   const classes = useStyles();
-  if (typeof value === "number") {
-    const backgroundColor = percentageToHsl(100 - value, 120, 0);
-    return <div style={{ backgroundColor }}>{Math.round(value * 100)} %</div>;
-  } else return <div>%</div>;
+
+  if (typeof value === "number")
+    return (
+      <>
+        <div
+          className={classes.resultColor}
+          style={{ backgroundColor: resultColorsScale(value).hex() }}
+        />
+        <div className={classes.text}>{Math.round(value * 100)}%</div>
+      </>
+    );
+
+  return null;
 }

www/src/util/color.ts

@@ -0,0 +1,9 @@
+import { scale } from "chroma-js";
+
+export const resultColors = {
+  No: "#ed4746",
+  Maybe: "#f3c900",
+  Yes: "#1fad5f",
+};
+
+export const resultColorsScale = scale(Object.values(resultColors)).mode("lab");

www/yarn.lock

@@ -1640,6 +1640,11 @@
   resolved "https://registry.yarnpkg.com/@types/cash/-/cash-0.0.3.tgz#770d6382c605bb4f8572f17cea6f40cec5832496"
   integrity sha512-gS24kdFuVwfo5h7IlStnXyBSIH4e9aFIhNHb4w+o5DwbYDeQJv+i9heh7u7nSvqnOP3v34tQMTe7VoJp2US08w==
 
+"@types/chroma-js@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.0.0.tgz#b0fc98c8625d963f14e8138e0a7961103303ab22"
+  integrity sha512-iomunXsXjDxhm2y1OeJt8NwmgC7RyNkPAOddlYVGsbGoX8+1jYt84SG4/tf6RWcwzROLx1kPXPE95by1s+ebIg==
+
 "@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"
@@ -3183,6 +3188,13 @@ chownr@^1.1.1, chownr@^1.1.2:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
+chroma-js@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.0.tgz#c0be48a21fe797ef8965608c1c4f911ef2da49d5"
+  integrity sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==
+  dependencies:
+    cross-env "^6.0.3"
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -3614,6 +3626,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-env@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
+  integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==
+  dependencies:
+    cross-spawn "^7.0.0"
+
 cross-spawn@7.0.1, cross-spawn@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"