Different colors for labels based on their hash

webui: A hash is computed on each label, which is then used to determine
the label's color.

1 files changed, 39 insertions, 32 deletions

diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js
index 34fc3ad4..c6edda35 100644
--- a/webui/src/bug/Bug.js
+++ b/webui/src/bug/Bug.js
@@ -1,15 +1,16 @@
-import { withStyles } from '@material-ui/core/styles'
-import Typography from '@material-ui/core/Typography/Typography'
-import gql from 'graphql-tag'
-import React from 'react'
-import Author from '../Author'
-import Date from '../Date'
-import TimelineQuery from './TimelineQuery'
+import { withStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography/Typography";
+import gql from "graphql-tag";
+import React from "react";
+import Author from "../Author";
+import Date from "../Date";
+import TimelineQuery from "./TimelineQuery";
+import Label from "../Label";
 
 const styles = theme => ({
   main: {
     maxWidth: 600,
-    margin: 'auto',
+    margin: "auto",
     marginTop: theme.spacing.unit * 4
   },
   header: {},
@@ -18,37 +19,41 @@ const styles = theme => ({
   },
   id: {
     ...theme.typography.subheading,
-    marginLeft: 15,
+    marginLeft: 15
   },
   container: {
-    display: 'flex',
+    display: "flex",
     marginBottom: 30
   },
   timeline: {
-    width: '70%',
+    width: "70%",
     marginTop: 20,
-    marginRight: 20,
+    marginRight: 20
   },
   sidebar: {
-    width: '30%'
+    width: "30%"
+  },
+  labelList: {
+    listStyle: "none",
+    padding: 0,
+    margin: 0
   },
   label: {
-    backgroundColor: '#da9898',
-    borderRadius: '3px',
-    paddingLeft: '10px',
-    margin: '2px 20px auto 2px',
-    fontWeight: 'bold',
+    margin: "4px 0",
+    "& > *": {
+      display: "block"
+    }
   }
-})
+});
 
-const Bug = ({bug, classes}) => (
+const Bug = ({ bug, classes }) => (
   <main className={classes.main}>
     <div className={classes.header}>
       <span className={classes.title}>{bug.title}</span>
       <span className={classes.id}>{bug.humanId}</span>
 
-      <Typography color={'textSecondary'}>
-        <Author author={bug.author}/>
+      <Typography color={"textSecondary"}>
+        <Author author={bug.author} />
         <span> opened this bug </span>
         <Date date={bug.createdAt} />
       </Typography>
@@ -56,19 +61,21 @@ const Bug = ({bug, classes}) => (
 
     <div className={classes.container}>
       <div className={classes.timeline}>
-        <TimelineQuery id={bug.id}/>
+        <TimelineQuery id={bug.id} />
       </div>
       <div className={classes.sidebar}>
-        <Typography variant={'subheading'}>Labels</Typography>
-        {bug.labels.map(l => (
-          <Typography key={l} className={classes.label}>
-            {l}
-          </Typography>
-        ))}
+        <Typography variant={"subheading"}>Labels</Typography>
+        <ul className={classes.labelList}>
+          {bug.labels.map(l => (
+            <li className={classes.label}>
+              <Label label={l} key={l} />
+            </li>
+          ))}
+        </ul>
       </div>
     </div>
   </main>
-)
+);
 
 Bug.fragment = gql`
   fragment Bug on Bug {
@@ -83,6 +90,6 @@ Bug.fragment = gql`
       name
     }
   }
-`
+`;
 
-export default withStyles(styles)(Bug)
+export default withStyles(styles)(Bug);