feat(dashboard): conform colours to style guide

dashboard/src/app.tsx

@@ -36,9 +36,8 @@ const Logo = styled.img`
 
 const SidebarWrapper = styled.div`
   border-right: 1px solid ${colors.border};
-  min-width: 12rem;
-  width: 18vw;
-  max-width: 19rem;
+  min-width: 19rem;
+  width: 19rem;
   height: 100vh;
 `
 
@@ -67,7 +66,7 @@ const App = () => (
             overflow-y: auto;
           `}>
             <div className={cls(css`
-              background-color: ${colors.lightGray};
+              background-color: ${colors.grayLight};
               flex-grow: 1;
             `, "p-2")}>
               <Route exact path="/" component={Overview} />

dashboard/src/components/card.tsx

@@ -17,7 +17,7 @@ interface CardProps {
 }
 
 const Wrapper = styled.div`
-  background-color: ${colors.white};
+  background-color: ${colors.gardenWhite};
   border-radius: 2px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 `

dashboard/src/components/checkbox.tsx

@@ -43,7 +43,7 @@ const Checkmark = styled.span`
   left: 0;
   height: 21px;
   width: 21px;
-  border: 1px solid ${colors.darkGray};
+  border: 1px solid ${colors.gardenGrayLight};
   :after {
     content: "";
     position: absolute;

dashboard/src/components/global-style.tsx

@@ -13,15 +13,14 @@ import {
   colors,
   fontBold,
   fontMedium,
-  fontRegular,
   tablet,
   fontFamily,
 } from "../styles/variables"
 
 const styles = css`
   html {
     box-sizing: border-box;
-    color: ${colors.lightBlack};
+    color: ${colors.black};
     font-size: ${"1em" /*was: 44%*/};
 
     ${media.tablet`
@@ -112,32 +111,6 @@ const styles = css`
   .underline {
     text-decoration: underline;
   }
-
-  ::-webkit-input-placeholder {
-    color: ${colors.waikawaGray};
-    ${fontRegular};
-  }
-  :-moz-placeholder {
-     color: ${colors.waikawaGray};
-     ${fontRegular};
-  }
-  ::-moz-placeholder {
-     color: ${colors.waikawaGray};
-     ${fontRegular};
-  }
-  :-ms-input-placeholder {
-     color: ${colors.waikawaGray};
-     ${fontRegular};
-  }
-  ::-ms-input-placeholder {
-     color: ${colors.waikawaGray};
-     ${fontRegular};
-  }
-
-  ::placeholder {
-     color: ${colors.waikawaGray};
-     ${fontRegular};
-  }
 `
 
 export default () => (

dashboard/src/components/graph/index.tsx

@@ -216,6 +216,10 @@ class Chart extends Component<Props, State> {
     }
   }
 
+  componentWillUnmount() {
+    window.onresize = () => { }
+  }
+
   onCheckboxChange({ target }: ChangeEvent<HTMLInputElement>) {
     this.setState({
       filters: { ...this.state.filters, [target.name]: !target.checked },
@@ -299,7 +303,7 @@ class Chart extends Component<Props, State> {
     let status = ""
     if (message && message.name !== "taskGraphComplete") {
       status = "Processing..."
-      spinner = <ProcessSpinner background={colors.white} fontSize="2px" />
+      spinner = <ProcessSpinner background={colors.gardenWhite} fontSize="2px" />
     }
 
     return (

dashboard/src/components/logs.tsx

@@ -39,10 +39,10 @@ const Header = styled.div`
 const Button = styled.div`
   padding: 0.5em;
   border-radius: 10%;
-  border: 1px solid ${colors.darkGray};
+  border: 2px solid ${colors.gardenGrayLight};
   cursor: pointer;
   :hover {
-    background-color: ${colors.gray};
+    border: 2px solid ${colors.gardenGray};
     transition: all 0.3s ease-out;
   }
   :active {
@@ -51,7 +51,8 @@ const Button = styled.div`
 `
 
 const Icon = styled.i`
-  font-size: 1.5rem;
+  color: ${colors.gardenGray};
+  font-size: 1.25rem;
   :active {
     opacity: 0.5;
   }
@@ -73,18 +74,18 @@ const IconLoading = styled(Icon)`
 const selectStyles = {
   control: (base, state) => ({
     ...base,
-    "boxShadow": state.isFocused ? `0 0 0 1px ${colors.gray}` : 0, // The box shadow adds width to the border
-    "borderColor": state.isFocused ? colors.gray : base.borderColor,
+    "boxShadow": state.isFocused ? `0 0 0 1px ${colors.gardenGrayLight}` : 0, // The box shadow adds width to the border
+    "borderColor": state.isFocused ? colors.gardenGrayLight : base.borderColor,
     "&:hover": {
-      borderColor: state.isFocused ? colors.gray : base.borderColor,
+      borderColor: state.isFocused ? colors.gardenGrayLight : base.borderColor,
     },
   }),
   option: (base, state) => ({
     ...base,
-    color: colors.lightBlack,
+    color: colors.black,
     backgroundColor: state.isSelected
-      ? colors.gray
-      : state.isFocused ? colors.lightGray : colors.white,
+      ? colors.gardenGreenDark
+      : state.isFocused ? colors.gardenGreenLight : colors.gardenWhite,
   }),
 }
 

dashboard/src/components/sidebar.tsx

@@ -30,9 +30,8 @@ const Button = styled.li`
   width: 100%;
   transition: all 0.3s ease;
   &: hover {
-    background-color: ${colors.brightTealAccent};
-    color: ${colors.white};
-    border-color: ${colors.brightTealAccent};
+    background-color: ${colors.gardenGreenLight};
+    border-color: ${colors.gardenGreenLight};
   }
 `
 

dashboard/src/components/spinner.tsx

@@ -37,7 +37,7 @@ export default styled.div`
     content: '';
   }
   :after {
-    background: ${props => props.background || colors.lightGray};
+    background: ${props => props.background || colors.grayLight};
     width: 75%;
     height: 75%;
     border-radius: 50%;

dashboard/src/components/table.tsx

@@ -32,8 +32,14 @@ const Td = styled.td`
   font-size: 0.9rem;
 `
 
+const Tr = styled.tr`
+  :hover {
+    background-color: ${colors.gardenGreenLight}
+  }
+`
+
 const THead = styled.thead`
-  color: ${colors.gardenGrey};
+  color: ${colors.gardenGray};
   text-align: left;
 `
 
@@ -60,13 +66,13 @@ const Table: React.SFC<Props> = props => (
       </THead>
       <tbody>
         {props.rows.map((row, idx) => (
-          <tr key={idx}>
+          <Tr key={idx}>
             {row.map((col, cidx) => {
               return (
                 <Td key={cidx}>{col}</Td>
               )
             })}
-          </tr>
+          </Tr>
         ))}
       </tbody>
     </TableEl>

dashboard/src/components/terminal.tsx

@@ -21,24 +21,25 @@ interface Props {
 }
 
 const Term = styled.div`
-  background-color: ${colors.lightBlack};
+  background-color: ${colors.black};
   border-radius: 2px;
   max-height: 45rem;
+  max-width: calc(18wv - 4rem);
   overflow-y: auto;
 `
 
 const P = styled.p`
-  color: ${colors.white};
+  color: ${colors.gardenWhite};
   font-size: 0.8rem;
 `
 
 const Service = styled.span`
-  color: ${colors.brightTealAccent};
+  color: ${colors.gardenGreen};
   display: inline-block;
 `
 
 const Timestamp = styled.span`
-  color: ${colors.lightGray};
+  color: ${colors.gardenGrayLight};
 `
 
 // FIXME Use whitespace instead of dots for the sectinon padding.

dashboard/src/styles/variables.ts

@@ -20,62 +20,28 @@ export const fontMedium = `${fontFamily};font-weight: 500;`
 export const fontItalic = `${fontFamily};font-style: italic;`
 
 function gardenPinkLighten(pct: number) {
-  return `rgba(218, 69, 162, ${pct})`
+  return `rgba(237, 131, 204, ${pct})`
 }
 
+// Colours prefixed with `garden` are from the official Garden colour palette.
+// The rest are for those cases where none of the official colours worked.
 export const colors = {
-  azure: "#00aeef",
-  lightWhite: "rgba(255, 255, 255, 0.15)",
-  white: "#ffffff",
-  lightBlack: "#030303",
+  border: "rgba(0,0,0,0.12)",
+  black: "#030303",
   gray: "#f0f0f0",
-  darkGray: "#ccc",
-  lightGray: "#fafafa",
-  waikawaGray: "#597088",
-  gardenGreen: "#02f2b4",
-  gardenGrey: "#f8faff",
-  gardenPink: "#da45a2",
-  gardenPinkRgba: "rgba(218, 69, 162, 0)",
+  grayLight: "#fafafa",
+  gardenGray: "#555656",
+  gardenGrayLight: "#cdcfd1",
+  gardenBlack: "#010101",
+  gardenBlue: "#00adef",
+  gardenBlueDark: "#01569a",
+  gardenBlueLight: "#e4f6fd",
+  gardenGreenDarker: "#16999a",
+  gardenGreenDark: "#00c9b6",
+  gardenGreen: "#66ffcc",
+  gardenGreenLight: "#c9ffed",
+  gardenPink: "#ed83cc",
   gardenPinkLighten,
-  blueyGrey: "#98a6b6",
-  iceCold: "#a5f1e6",
-  darkGreen: "#277379",
-  navy: "#01244a",
-  jungleMist: "#bccfd9",
-  spindle: "#c3ccec",
-  thistle: "#d7b7dc",
-  frenchLilac: "#ebb9e0",
-  brightTealAccent: "#00eac7",
-  regentGray: "#8294a6",
-  pink: "#ff2ea7",
-  purplePink: "#f17fcd",
-  heather: "#b4bfca",
-  border: "rgba(0,0,0,0.12)",
-  font: {
-    default: "#000000",
-    light: "#666666",
-    main: "#333333",
-  },
-  navbar: {
-    peacockBlue: "#00569a",
-    lightGreenishBlue: "#66ffcc",
-    aquamarine: "#00c9b6",
-    azure: "#00aeef",
-    blueGreen: "#169a9a",
-    border: "rgba(1, 36, 74, 0.1)",
-    catskill: "#deeaf0",
-  },
-  section: {
-    motivation: "#e4f6fd",
-    product: "#c9ffed",
-    excited: "#05284d",
-    about: "#bcf0eb",
-    investors: "#f17fcd",
-    jobs: "#e6f4f4",
-  },
-  impressum: {
-    section: {
-      google: "#eef4f7",
-    },
-  },
+  gardenPinkRgba: "rgba(237, 131, 204, 0)",
+  gardenWhite: "#ffffff",
 }