4 files changed, 43 insertions, 33 deletions

diff --git a/webui/src/Label.js b/webui/src/Label.js
index 826d21f5..de2ccd61 100644
--- a/webui/src/Label.js
+++ b/webui/src/Label.js
@@ -4,43 +4,25 @@ import {
   getContrastRatio,
   darken,
 } from '@material-ui/core/styles/colorManipulator';
-import * as allColors from '@material-ui/core/colors';
 import { common } from '@material-ui/core/colors';
 
-// JS's modulo returns negative numbers sometimes.
-// This ensures the result is positive.
-const mod = (n, m) => ((n % m) + m) % m;
-
 // Minimum contrast between the background and the text color
 const contrastThreshold = 2.5;
 
-// Filter out the "common" color
-const labelColors = Object.entries(allColors)
-  .filter(([key, value]) => value !== common)
-  .map(([key, value]) => value);
-
-// Generate a hash (number) from a string
-const hash = string =>
-  string.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
-
-// Get the background color from the label
-const getColor = label =>
-  labelColors[mod(hash(label), labelColors.length)][500];
-
 // Guess the text color based on the background color
 const getTextColor = background =>
   getContrastRatio(background, common.white) >= contrastThreshold
     ? common.white // White on dark backgrounds
     : common.black; // And black on light ones
 
-const _genStyle = background => ({
-  backgroundColor: background,
-  color: getTextColor(background),
-  borderBottomColor: darken(background, 0.2),
-});
+const _rgb = color => 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
 
-// Generate a style object (text, background and border colors) from the label
-const genStyle = label => _genStyle(getColor(label));
+// Create a style object from the label RGB colors
+const createStyle = color => ({
+  backgroundColor: _rgb(color),
+  color: getTextColor(_rgb(color)),
+  borderBottomColor: darken(_rgb(color), 0.2),
+});
 
 const useStyles = makeStyles(theme => ({
   label: {
@@ -58,8 +40,8 @@ const useStyles = makeStyles(theme => ({
 function Label({ label }) {
   const classes = useStyles();
   return (
-    <span className={classes.label} style={genStyle(label)}>
-      {label}
+    <span className={classes.label} style={createStyle(label.color)}>
+      {label.name}
     </span>
   );
 }
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js
index 829a4af2..3e003567 100644
--- a/webui/src/bug/Bug.js
+++ b/webui/src/bug/Bug.js
@@ -74,7 +74,7 @@ function Bug({ bug }) {
           <ul className={classes.labelList}>
             {bug.labels.map(l => (
               <li className={classes.label}>
-                <Label label={l} key={l} />
+                <Label label={l} key={l.name} />
               </li>
             ))}
           </ul>
@@ -90,7 +90,14 @@ Bug.fragment = gql`
     humanId
     status
     title
-    labels
+    labels {
+      name
+      color {
+        R
+        G
+        B
+      }
+    }
     createdAt
     author {
       email
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index 76b6e6e2..73c05c43 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.js
@@ -49,8 +49,22 @@ LabelChange.fragment = gql`
         email
         displayName
       }
-      added
-      removed
+      added {
+        name
+        color {
+          R
+          G
+          B
+        }
+      }
+      removed {
+        name
+        color {
+          R
+          G
+          B
+        }
+      }
     }
   }
 `;
diff --git a/webui/src/list/BugRow.js b/webui/src/list/BugRow.js
index e82d81db..81cccc5e 100644
--- a/webui/src/list/BugRow.js
+++ b/webui/src/list/BugRow.js
@@ -70,7 +70,7 @@ function BugRow({ bug }) {
               {bug.labels.length > 0 && (
                 <span className={classes.labels}>
                   {bug.labels.map(l => (
-                    <Label key={l} label={l} />
+                    <Label key={l.name} label={l} />
                   ))}
                 </span>
               )}
@@ -94,7 +94,14 @@ BugRow.fragment = gql`
     title
     status
     createdAt
-    labels
+    labels {
+      name
+      color {
+        R
+        G
+        B
+      }
+    }
     author {
       name
       displayName