add icons to ui (#347)

fixes #282
fixes #297
fixes #333

Not only adds icons (as svgs) but also removes the assets folder which adds some
side effects:
 - move fonts to it's own component (currently only exposing libre-franlin)
 - Base.global requires fonts and injects them
 - update webpack and babelrc to ignore/include that new folder

Having to deal with those side effects, I took the opportunity to add some
improvements:
 - rename "regular" to "normal" which conforms to the font-weight rule options
 - apply family and weight to buttons (which default to system-ui)
 - replace all font-weight to use the typography composer
 - only use "Libra Franklin" as the family name, using weight to vary between
 files

frontend/.babelrc

@@ -12,7 +12,7 @@
   ],
   "plugins": [
     ["inline-react-svg", {
-      "ignorePattern": "assets/fonts"
+      "ignorePattern": "libre-franklin"
     }],
     "transform-class-properties",
     ["transform-object-rest-spread", {

frontend/src/components/header/index.js

@@ -9,7 +9,7 @@ import Logo from '../../resources/logo.svg';
 import PropTypes from '@root/prop-types';
 import Row from '@ui/components/row';
 import Tooltip from '@ui/components/tooltip';
-import { pseudoEl } from '@ui/shared/composers';
+import { pseudoEl, typography } from '@ui/shared/composers';
 import { colors } from '@ui/shared/constants';
 
 const borderSide = props => props.toggled
@@ -65,6 +65,9 @@ const EmptyButton = styled.button`
   background: none;
   border: none;
   padding-right: ${remcalc(20)};
+
+  ${typography.libreFranklin};
+  ${typography.normal};
 `;
 
 const StyledAvatar = styled(Avatar)`

frontend/src/components/monitors/index.js

@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 
 import { colors } from '@ui/shared/constants';
-import Close from '@ui/components/close';
+import { typography } from '@ui/shared/composers';
+import Close from '@ui/components/icons/close';
 import { remcalc } from '@ui/shared/functions';
 import Li from '@ui/components/horizontal-list/li';
 import Modal from '@ui/components/modal';
@@ -11,19 +12,17 @@ import PropTypes from '@root/prop-types';
 import Ul from '@ui/components/horizontal-list/ul';
 
 const H1 = styled.h1`
+  ${typography.semibold};
   font-size: ${remcalc(26)} !important;
-  font-weight: 600;
+
-  font-style: normal;
-  font-stretch: normal;
   color: ${colors.brandSecondaryColor};
   margin: ${remcalc(24)} auto ${remcalc(9)} ${remcalc(24)} !important;
 `;
 
 const H3 = styled.h3`
   font-size: ${remcalc(16)} !important;
-  font-weight: 600;
+  ${typography.semibold};
-  font-style: normal;
+
-  font-stretch: normal;
   color: ${colors.brandSecondaryColor};
   margin: 0 auto ${remcalc(26)} ${remcalc(24)} !important;
 `;

frontend/src/components/people-list/table/person-delete.js

@@ -1,5 +1,6 @@
-import React from 'react';
 import styled from 'styled-components';
+import { typography } from '@ui/shared/composers';
+import React from 'react';
 
 const PlainButton = styled.button`
   background: transparent;
@@ -8,6 +9,9 @@ const PlainButton = styled.button`
   zIndex: 0;
   font-family: inherit;
   color: inherit;
+
+  ${typography.libreFranklin};
+  ${typography.normal};
 `;
 
 const PersonDelete = ({

frontend/src/components/people-list/table/person-role.js

@@ -1,8 +1,8 @@
-import React from 'react';
 import styled from 'styled-components';
+import React from 'react';
 
 import { remcalc } from '@ui/shared/functions';
-import { pseudoEl } from '@ui/shared/composers';
+import { pseudoEl, typography } from '@ui/shared/composers';
 import Tooltip from './tooltip';
 
 const borderSide = props => props.toggled
@@ -31,8 +31,10 @@ const PlainButton = styled.button`
   font-size: inherit;
   border: none;
   zIndex: 0;
-  font-family: inherit;
   color: inherit;
+
+  ${typography.libreFranklin};
+  ${typography.normal};
 `;
 
 const PersonRole = ({

frontend/src/components/people-list/table/person-status.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { remcalc } from '@ui/shared/functions';
-import { pseudoEl } from '@ui/shared/composers';
+import { pseudoEl, typography } from '@ui/shared/composers';
 import Tooltip from './tooltip';
 
 const borderSide = props => props.toggled
@@ -30,8 +30,10 @@ const PlainButton = styled.button`
   font-size: inherit;
   border: none;
   zIndex: 0;
-  font-family: inherit;
   color: inherit;
+
+  ${typography.libreFranklin};
+  ${typography.normal};
 `;
 
 const PersonStatus = ({

frontend/webpack/base.js

@@ -72,7 +72,7 @@ module.exports = {
     }, {
       test: /\.(eot|svg|ttf|woff|woff2)$/,
       loader: 'file-loader',
-      include: path.join(UI, 'assets', 'fonts')
+      include: path.join(UI, 'components', 'fonts', 'libre-franklin')
     }, {
       test: /\.css$/,
       loader: 'style-loader!css-loader'

ui/.babelrc

@@ -13,7 +13,7 @@
   ],
   "plugins": [
     ["inline-react-svg", {
-      "ignorePattern": "assets\\/fonts\\/.*?\\.svg"
+      "ignorePattern": "libre-franklin"
     }],
     "transform-class-properties",
     ["transform-object-rest-spread", {

ui/src/assets/fonts/README.md

@@ -1 +0,0 @@
-Source: https://www.fontsquirrel.com/fonts/libre-franklin

ui/src/assets/icons/close.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="nav" width="133.5" height="36" viewBox="0 0 106.78 29.01">
-    <title>logo</title>
-    <path fill="#464646" fill-rule="evenodd" d="M112.32,36.78a5.3,5.3,0,0,0,3.31,1.32c2.1,0,2.65-1.27,2.65-2.94V20.54h2.28V32.46c0,1,0,2.16-.06,3.2C120.38,38.43,119,40,115.72,40a6.43,6.43,0,0,1-4.55-1.64ZM134,32.61c0-3.46-1-5.88-3.8-5.88s-4,2.3-4,5.42c0,2.85.58,6.22,3.86,6.22C132.77,38.37,134,35.75,134,32.61ZM130.32,25c2,0,5.91.63,5.91,7.14,0,5.62-2.79,8-6.39,8s-5.91-2.48-5.91-7.66C123.93,26.47,127.47,25,130.32,25ZM150,39.12V25.38h-2.19V34a3.23,3.23,0,0,1-3.51,3.37c-3.05,0-3.25-1.67-3.25-3.86V25.38h-2.25v8.7c0,3.28,1.59,4.47,4,4.72-1.41.92-3.17,2.59-3.17,4.93s1.41,3.63,4.35,3.63a5.24,5.24,0,0,0,5.62-4.26A18.85,18.85,0,0,0,150,39.12Zm-5.76,6.51c2.62,0,3.54-2.28,3.54-5.41V37.7c-3.46,1.44-6,3-6,5.73C141.84,44.85,142.68,45.63,144.26,45.63ZM159.3,25c-4.38,0-6.68,3.51-6.68,7.78s1.9,7.35,6.4,7.35a7.47,7.47,0,0,0,4.7-1.64L162.85,37a5.92,5.92,0,0,1-3.69,1.33c-3.05,0-4.21-2.48-4.32-4.84,0.23,0,.46,0,0.75,0,2.79,0,7.92-.69,7.92-5C163.51,26.41,162,25,159.3,25Zm-0.11,1.67c-3.08,0-4.26,2.91-4.35,5.19,0.17,0,.35,0,0.58,0,2,0,6-.46,6-3.05A2.06,2.06,0,0,0,159.19,26.64Zm9.53,13V30.3a3.84,3.84,0,0,1,3.89-3.54c2.42,0,2.88,1.73,2.88,3.86v9.07h2.25V29.93c0-3.28-1.61-5-4.58-5a5.48,5.48,0,0,0-4.64,2.48l-0.26-2.07h-1.93l0.14,2.16V39.69h2.25Zm12.33-20v16.1c0,2.1.12,4.32,3.95,4.32a6.09,6.09,0,0,0,3.26-1l-0.66-1.5a4.19,4.19,0,0,1-2.19.69c-1.35,0-2.1-.6-2.1-2.51V27.31h4.09V25.38H183.3v-5.7h-2.25ZM97.58,41.21A11.43,11.43,0,1,0,86.15,29.78,11.43,11.43,0,0,0,97.58,41.21Zm-2-17.55A0.43,0.43,0,0,1,96,23.22h3.21a0.43,0.43,0,0,1,.43.43v4.09h4.09a0.43,0.43,0,0,1,.43.43v3.21a0.43,0.43,0,0,1-.43.43H99.62V35.9a0.43,0.43,0,0,1-.43.43H96a0.43,0.43,0,0,1-.43-0.43V31.81H91.46A0.43,0.43,0,0,1,91,31.38V28.17a0.43,0.43,0,0,1,.43-0.43h4.09V23.65ZM190,21a1.46,1.46,0,1,0,1.46-1.45A1.45,1.45,0,0,0,190,21Zm0.26,0a1.2,1.2,0,1,1,1.2,1.25A1.2,1.2,0,0,1,190.27,21Zm0.63,0.85h0.26V21.11h0.28l0.46,0.73h0.28l-0.49-.75a0.44,0.44,0,0,0,.45-0.46,0.48,0.48,0,0,0-.59-0.49h-0.66v1.7Zm0.26-1.48h0.35c0.18,0,.37,0,0.37.26s-0.21.28-.45,0.28h-0.28V20.36Z" transform="translate(-86.15 -18.34)"/>
-</svg>

ui/src/components/avatar/index.js

@@ -1,22 +1,28 @@
-// TODO: use a checkbox
-
-import React from 'react';
-import { verticallyAlignCenter, Baseline } from '../../shared/composers';
-import { remcalc } from '../../shared/functions';
 import styled from 'styled-components';
+import { remcalc } from '../../shared/functions';
+import React from 'react';
+
+import {
+  verticallyAlignCenter,
+  Baseline,
+  typography
+} from '../../shared/composers';
 
 const Picture = styled.img`
-  ${verticallyAlignCenter}
+  ${verticallyAlignCenter};
+
   max-width: 100%;
 `;
 
 const Letter = styled.p`
-  ${verticallyAlignCenter}
+  ${verticallyAlignCenter};
+
   max-width: 100%;
   margin: 0 0 0 0 !important;
   color: #FFFFFF;
+
   font-size: ${remcalc(13)};
-  font-weight: 600;
+  ${typography.semibold};
 `;
 
 const Container = styled.div`

ui/src/components/base-elements/index.js

@@ -1,7 +1,7 @@
 /* eslint react/prop-types: 0 */
 
 import { remcalc } from '../../shared/functions';
-import { Baseline, bold } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import styled, { css } from 'styled-components';
 import React from 'react';
 
@@ -15,21 +15,21 @@ const elements = [{
     font-stretch: normal;
     margin: 0;
 
-    ${bold}
+    ${typography.bold}
   `
 }, {
   name: 'H2',
   properties: css`
     font-size: ${remcalc(24)};
 
-    ${bold}
+    ${typography.bold}
   `
 }, {
   name: 'H3',
   properties: css`
     font-size: ${remcalc(16)};
 
-    ${bold}
+    ${typography.bold}
   `
 }, {
   name: 'P',

ui/src/components/base/global.js

@@ -1,85 +1,16 @@
 import { css } from 'styled-components';
 import { colors } from '../../shared/constants';
-
+import { libreFranklin } from '../fonts';
-import eotRegular from '../../assets/fonts/librefranklin-regular-webfont.eot';
-import woffRegular from '../../assets/fonts/librefranklin-regular-webfont.woff';
-// eslint-disable-next-line max-len
-import woff2Regular from '../../assets/fonts/librefranklin-regular-webfont.woff2';
-import ttfRegular from '../../assets/fonts/librefranklin-regular-webfont.ttf';
-import svgRegular from '../../assets/fonts/librefranklin-regular-webfont.svg';
-import eotSemibold from '../../assets/fonts/librefranklin-semibold-webfont.eot';
-// eslint-disable-next-line max-len
-import woffSemibold from '../../assets/fonts/librefranklin-semibold-webfont.woff';
-// eslint-disable-next-line max-len
-import woff2Semibold from '../../assets/fonts/librefranklin-semibold-webfont.woff2';
-import ttfSemibold from '../../assets/fonts/librefranklin-semibold-webfont.ttf';
-import svgSemibold from '../../assets/fonts/librefranklin-semibold-webfont.svg';
-import eotBold from '../../assets/fonts/librefranklin-bold-webfont.eot';
-import woffBold from '../../assets/fonts/librefranklin-bold-webfont.woff';
-import woff2Bold from '../../assets/fonts/librefranklin-bold-webfont.woff2';
-import ttfBold from '../../assets/fonts/librefranklin-bold-webfont.ttf';
-import svgBold from '../../assets/fonts/librefranklin-bold-webfont.svg';
-
-const fonts = [{
-  family: 'LibreFranklin',
-  weight: '400',
-  style: 'normal',
-  filenames: {
-    eot: eotRegular,
-    woff: woffRegular,
-    woff2: woff2Regular,
-    ttf: ttfRegular,
-    svg: svgRegular
-  }
-}, {
-  family: 'LibreFranklin-Semi-Bold',
-  weight: '600',
-  style: 'normal',
-  filenames: {
-    eot: eotSemibold,
-    woff: woffSemibold,
-    woff2: woff2Semibold,
-    ttf: ttfSemibold,
-    svg: svgSemibold
-  }
-}, {
-  family: 'LibreFranklin-Bold',
-  weight: '700',
-  style: 'normal',
-  filenames: {
-    eot: eotBold,
-    woff: woffBold,
-    woff2: woff2Bold,
-    ttf: ttfBold,
-    svg: svgBold
-  }
-}];
-
-const fontFaces = fonts.map(({
-  filenames,
-  family,
-  style,
-  weight
-}) => `
-  @font-face {
-    font-family: '${family}';
-    src: url('${filenames.eot}'),
-         url('${filenames.eot}?#iefix') format('embedded-opentype'),
-         url('${filenames.woff}') format('woff'),
-         url('${filenames.woff2}') format('woff2'),
-         url('${filenames.ttf}') format('truetype'),
-         url('${filenames.svg}#${family}') format('svg');
-    font-weight: ${weight};
-    font-style: ${style};
-  }
-`);
 
 export default css`
-  ${fontFaces.join('\n')}
+  ${libreFranklin.normal}
+  ${libreFranklin.semibold}
+  ${libreFranklin.bold}
 
   html, body {
     font-size: 16px;
     margin: 0;
+    padding: 0;
     background: ${colors.base.background};
   }
 `;

ui/src/components/base/index.js

@@ -1,5 +1,5 @@
 import { colors } from '../../shared/constants';
-import { libreFranklin, bodyColor, regular } from '../../shared/composers';
+import { typography } from '../../shared/composers';
 import styled from 'styled-components';
 import global from './global';
 
@@ -7,10 +7,10 @@ export default styled.div`
   font-size: 1rem;
   line-height: 1.5;
   background-color: ${colors.base.background};
+  color: ${colors.base.text};
 
-  ${libreFranklin}
+  ${typography.libreFranklin}
-  ${bodyColor}
+  ${typography.normal}
-  ${regular}
 `;
 
 export {

ui/src/components/button/icon.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { Baseline, typography } from '../../shared/composers';
+import { remcalc } from '../../shared/functions';
+
+const ButtonIcon = styled.button`
+  background: none;
+  border: none;
+  position: absolute;
+  top: ${remcalc(16)};
+  right: ${remcalc(16)};
+
+  ${typography.libreFranklin};
+  ${typography.normal};
+`;
+
+export default Baseline(
+  ButtonIcon
+);

ui/src/components/button/index.js

@@ -1,4 +1,4 @@
-import { Baseline } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import { colors, boxes } from '../../shared/constants';
 import { remcalc } from '../../shared/functions';
 import isString from 'lodash.isstring';
@@ -62,11 +62,12 @@ const style = css`
   padding: ${remcalc(14)} ${remcalc(16)};
   position: relative;
 
+  ${typography.libreFranklin};
+  ${typography.normal};
+
   font-size: ${remcalc(16)};
-  font-weight: 400;
   text-align: center;
   font-style: normal;
-  font-weight: normal;
   font-stretch: normal;
   line-height: normal;
   letter-spacing: normal;
@@ -176,3 +177,5 @@ Button.propTypes = {
 export default Baseline(
   Button
 );
+
+export { default as ButtonIcon } from './icon';

ui/src/components/close/index.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Baseline } from '../../shared/composers';
-import { remcalc } from '../../shared/functions';
-import CloseSVG from '../../assets/icons/close.svg';
-
-const StyledButton = styled.button`
-  background: none;
-  border: none;
-  position: absolute;
-  top: ${remcalc(16)};
-  right: ${remcalc(16)};
-`;
-
-const Close = ({
-  children,
-  ...props
-}) => (
-  <StyledButton {...props}>
-    <CloseSVG />
-    {children}
-  </StyledButton>
-);
-
-Close.propTypes = {
-  children: React.PropTypes.node
-};
-
-export default Baseline(
-  Close
-);

ui/src/components/close/story.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import Close from './';
-
-storiesOf('Close', module)
-  .add('Default', () => (
-    <Close />
-  ));

ui/src/components/fonts/index.js

@@ -0,0 +1,81 @@
+import { css } from 'styled-components';
+
+import eotNormal from './libre-franklin/regular.eot';
+import woffNormal from './libre-franklin/regular.woff';
+import woff2Normal from './libre-franklin/regular.woff2';
+import ttfNormal from './libre-franklin/regular.ttf';
+import svgNormal from './libre-franklin/regular.svg';
+import eotSemibold from './libre-franklin/semibold.eot';
+import woffSemibold from './libre-franklin/semibold.woff';
+import woff2Semibold from './libre-franklin/semibold.woff2';
+import ttfSemibold from './libre-franklin/semibold.ttf';
+import svgSemibold from './libre-franklin/semibold.svg';
+import eotBold from './libre-franklin/bold.eot';
+import woffBold from './libre-franklin/bold.woff';
+import woff2Bold from './libre-franklin/bold.woff2';
+import ttfBold from './libre-franklin/bold.ttf';
+import svgBold from './libre-franklin/bold.svg';
+
+const fontFaces = {
+  normal: {
+    family: 'Libre Franklin',
+    style: 'normal',
+    weight: 400,
+    filenames: {
+      eot: eotNormal,
+      woff: woffNormal,
+      woff2: woff2Normal,
+      ttf: ttfNormal,
+      svg: svgNormal
+    }
+  },
+  semibold: {
+    family: 'Libre Franklin',
+    style: 'normal',
+    weight: 600,
+    filenames: {
+      eot: eotSemibold,
+      woff: woffSemibold,
+      woff2: woff2Semibold,
+      ttf: ttfSemibold,
+      svg: svgSemibold
+    }
+  },
+  bold: {
+    family: 'Libre Franklin',
+    style: 'normal',
+    weight: 700,
+    filenames: {
+      eot: eotBold,
+      woff: woffBold,
+      woff2: woff2Bold,
+      ttf: ttfBold,
+      svg: svgBold
+    }
+  }
+};
+
+const generate = (name) => css`
+  @font-face {
+    font-family: '${fontFaces[name].family}';
+    font-style: ${fontFaces[name].style};
+    font-weight: ${fontFaces[name].weight};
+    src: url('${fontFaces[name].filenames.eot}');
+    src: url('${fontFaces[name].filenames.eot}?#iefix')
+           format('embedded-opentype'),
+         url('${fontFaces[name].filenames.woff}')
+           format('woff'),
+         url('${fontFaces[name].filenames.woff2}')
+           format('woff2'),
+         url('${fontFaces[name].filenames.ttf}')
+           format('truetype'),
+         url('${fontFaces[name].filenames.svg}#${fontFaces[name].family}')
+           format('svg');
+  }
+`;
+
+export const libreFranklin = {
+  normal: generate('normal'),
+  semibold: generate('semibold'),
+  bold: generate('bold')
+};

ui/src/components/fonts/libre-franklin/README.md

@@ -1,3 +1,6 @@
+# Libre Franklin License [ref](https://www.fontsquirrel.com/license/libre-franklin)
+
+```
 Copyright (c) 2015, Impallari Type (www.impallari.com)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
@@ -41,3 +44,4 @@ This license becomes null and void if any of the above conditions are not met.
 
 DISCLAIMER
 THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
+```

ui/src/components/form/base-input.js

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { Subscriber } from 'react-broadcast';
 import { colors, boxes } from '../../shared/constants';
+import { typography } from '../../shared/composers';
 import { remcalc, is } from '../../shared/functions';
 import React from 'react';
 
@@ -53,7 +54,8 @@ const style = css`
 
   font-size: ${remcalc(16)};
   line-height: normal !important;
-  font-weight: normal;
+
+  ${typography.normal};
   font-style: normal;
   font-stretch: normal;
   color: ${color};

ui/src/components/icons/close.js

@@ -0,0 +1,9 @@
+import { Baseline } from '../../shared/composers';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import CloseIcon from './svg/close.svg';
+
+export default Baseline(
+  CloseIcon
+);

ui/src/components/icons/healthy.js

@@ -0,0 +1,9 @@
+import { Baseline } from '../../shared/composers';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import HealthyIcon from './svg/healthy.svg';
+
+export default Baseline(
+  HealthyIcon
+);

ui/src/components/icons/heart.js

@@ -0,0 +1,9 @@
+import { Baseline } from '../../shared/composers';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import HeartIcon from './svg/heart.svg';
+
+export default Baseline(
+  HeartIcon
+);

ui/src/components/icons/index.js

@@ -0,0 +1,8 @@
+export { default as CloseIcon } from './close';
+export { default as HealthyIcon } from './healthy';
+export { default as HeartIcon } from './heart';
+export { default as InputConfirmIcon } from './input-confirm';
+export { default as InstancesMultipleIcon } from './instances-multiple';
+export { default as NotificationIcon } from './notification';
+export { default as SettingsIcon } from './settings';
+export { default as UploadIcon } from './upload';

ui/src/components/icons/input-confirm.js

@@ -0,0 +1,9 @@
+import { Baseline } from '../../shared/composers';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import InputConfirmIcon from './svg/input-confirm.svg';
+
+export default Baseline(
+  InputConfirmIcon
+);

ui/src/components/icons/instances-multiple.js

@@ -0,0 +1,9 @@
+import { Baseline } from '../../shared/composers';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import InstancesMultipleIcon from './svg/instances-multiple.svg';
+
+export default Baseline(
+  InstancesMultipleIcon
+);

ui/src/components/icons/notification.js

@@ -0,0 +1,52 @@
+import { Baseline } from '../../shared/composers';
+import React from 'react';
+
+import Warning from './svg/notification-warning.svg';
+// eslint-disable-next-line max-len
+import WarningInverted from './svg/notification-warning-inverted.svg';
+import Success from './svg/notification-success.svg';
+// eslint-disable-next-line max-len
+import ConfirmationInverted from './svg/notification-confirmation-inverted.svg';
+import Alert from './svg/notification-alert.svg';
+import Action from './svg/notification-action.svg';
+
+const NotificationIcon = ({
+  action = false,
+  alert = false,
+  confirmation = false,
+  inverted = false,
+  success = false,
+  warning = false,
+  ...props
+}) => {
+  const icons = [
+    () => action ? Action : null,
+    () => alert ? Alert : null,
+    () => (confirmation && inverted) ? ConfirmationInverted : null,
+    () => success ? Success : null,
+    () => warning ? (inverted ? WarningInverted : Warning) : null
+  ];
+
+  const Icon = icons.reduce((Icon, fn) => Icon ? Icon : fn(), null);
+
+  if (!Icon) {
+    return null;
+  }
+
+  return (
+    <Icon {...props} />
+  );
+};
+
+NotificationIcon.propTypes = {
+  action: React.PropTypes.bool,
+  alert: React.PropTypes.bool,
+  confirmation: React.PropTypes.bool,
+  inverted: React.PropTypes.bool,
+  success: React.PropTypes.bool,
+  warning: React.PropTypes.bool
+};
+
+export default Baseline(
+  NotificationIcon
+);

ui/src/components/icons/payment-card.js

@@ -0,0 +1,87 @@
+import { Baseline } from '../../shared/composers';
+import React from 'react';
+
+import alipayIcon from './svg/alipay.svg';
+import amexIcon from './svg/amex.svg';
+import dinersIcon from './svg/diners.svg';
+import discoverIcon from './svg/discover.svg';
+import hipercardIcon from './svg/hipercard.svg';
+import jcbIcon from './svg/jcb.svg';
+import maestroIcon from './svg/maestro.svg';
+import mastercardIcon from './svg/mastercard.svg';
+import paypalIcon from './svg/paypal.svg';
+import unionpayIcon from './svg/unionpay.svg';
+import visaIcon from './svg/visa.svg';
+
+const types = {
+  alipay: alipayIcon,
+  amex: amexIcon,
+  diners: dinersIcon,
+  discover: discoverIcon,
+  hipercard: hipercardIcon,
+  jcb: jcbIcon,
+  maestro: maestroIcon,
+  mastercard: mastercardIcon,
+  paypal: paypalIcon,
+  unionpay: unionpayIcon,
+  visa: visaIcon
+};
+
+const typeNames = Object.keys(types);
+
+const PaymentCardIcon = ({
+  alipay = false,
+  amex = false,
+  diners = false,
+  discover = false,
+  hipercard = false,
+  jcb = false,
+  maestro = false,
+  mastercard = false,
+  paypal = false,
+  unionpay = false,
+  visa = false,
+  type,
+  ...props
+}) => {
+  const TypeIcon = types[type];
+
+  const PropIcon = typeNames.reduce((icon, name) => {
+    return icon ? icon : types[name];
+  }, null);
+
+  const Icon = TypeIcon
+    ? TypeIcon
+    : PropIcon;
+
+  if (!Icon) {
+    return null;
+  }
+
+  return (
+    <Icon {...props} />
+  );
+};
+
+PaymentCardIcon.propTypes = {
+  alipay: React.PropTypes.bool,
+  amex: React.PropTypes.bool,
+  diners: React.PropTypes.bool,
+  discover: React.PropTypes.bool,
+  hipercard: React.PropTypes.bool,
+  jcb: React.PropTypes.bool,
+  maestro: React.PropTypes.bool,
+  mastercard: React.PropTypes.bool,
+  paypal: React.PropTypes.bool,
+  type: React.PropTypes.oneOf(typeNames),
+  unionpay: React.PropTypes.bool,
+  visa: React.PropTypes.bool
+};
+
+export default Baseline(
+  PaymentCardIcon
+);
+
+export {
+  typeNames as types
+};

ui/src/components/icons/settings.js

@@ -0,0 +1,9 @@
+import { Baseline } from '../../shared/composers';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import SettingsIcon from './svg/settings.svg';
+
+export default Baseline(
+  SettingsIcon
+);

ui/src/components/icons/story.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+import {
+  CloseIcon,
+  HealthyIcon,
+  HeartIcon,
+  InputConfirmIcon,
+  InstancesMultipleIcon,
+  NotificationIcon,
+  SettingsIcon,
+  UploadIcon
+} from './';
+
+storiesOf('Icons', module)
+  .add('Close', () => (
+    <CloseIcon />
+  ))
+  .add('Healthy', () => (
+    <HealthyIcon />
+  ))
+  .add('Heart', () => (
+    <HeartIcon />
+  ))
+  .add('InputConfirm', () => (
+    <InputConfirmIcon />
+  ))
+  .add('InstancesMultiple', () => (
+    <InstancesMultipleIcon />
+  ))
+  .add('Notification action', () => (
+    <NotificationIcon action />
+  ))
+  .add('Notification alert', () => (
+    <NotificationIcon alert />
+  ))
+  .add('Notification confirmation inverted', () => (
+    <NotificationIcon confirmation inverted />
+  ))
+  .add('Notification success', () => (
+    <NotificationIcon success />
+  ))
+  .add('Notification warning', () => (
+    <NotificationIcon warning />
+  ))
+  .add('Notification warning inverted', () => (
+    <NotificationIcon warning inverted />
+  ))
+  .add('Settings', () => (
+    <SettingsIcon />
+  ))
+  .add('Upload', () => (
+    <UploadIcon />
+  ));

ui/src/components/icons/svg/amex.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="752px" height="471px"
+	 viewBox="0 0 752 471" enable-background="new 0 0 752 471" xml:space="preserve">
+<title>Slice 1</title>
+<desc>Created with Sketch.</desc>
+<g>
+	<g>
+		<path fill="#2557D6" d="M554.594,130.608l-14.521,35.039h29.121L554.594,130.608z M387.03,152.321
+			c2.738-1.422,4.349-4.515,4.349-8.356c0-3.764-1.693-6.49-4.431-7.771c-2.492-1.42-6.328-1.584-10.006-1.584h-25.978v19.523h25.63
+			C380.7,154.134,384.131,154.074,387.03,152.321z M54.142,130.608l-14.357,35.039h28.8L54.142,130.608z M722.565,355.08h-40.742
+			v-18.852h40.578c4.023,0,6.84-0.525,8.537-2.177c1.471-1.358,2.494-3.336,2.494-5.733c0-2.562-1.023-4.596-2.578-5.813
+			c-1.529-1.342-3.76-1.953-7.434-1.953c-19.81-0.67-44.523,0.609-44.523-27.211c0-12.75,8.131-26.172,30.27-26.172h42.025v-17.492
+			h-39.045c-11.783,0-20.344,2.81-26.406,7.181v-7.181h-57.752c-9.233,0-20.074,2.279-25.201,7.181v-7.181H499.655v7.181
+			c-8.207-5.898-22.057-7.181-28.447-7.181H403.18v7.181c-6.492-6.262-20.935-7.181-29.734-7.181h-76.134l-17.42,18.775
+			l-16.318-18.775H149.847v122.675h111.586l17.95-19.076l16.91,19.076l68.78,0.059v-28.859h6.764
+			c9.125,0.145,19.889-0.223,29.387-4.311v33.107h56.731v-31.976h2.736c3.492,0,3.838,0.146,3.838,3.621v28.348h172.344
+			c10.941,0,22.38-2.786,28.712-7.853v7.853h54.668c11.375,0,22.485-1.588,30.938-5.653v-22.853
+			C746.069,351.297,736.079,355.08,722.565,355.08z M372.734,326.113h-26.325v29.488h-41.006L279.425,326.5l-26.997,29.102h-83.569
+			v-87.914h84.855l25.955,28.818l26.835-28.818h67.414c16.743,0,35.555,4.617,35.555,28.963
+			C409.473,321.072,391.176,326.113,372.734,326.113z M499.323,322.127c2.98,4.291,3.41,8.297,3.496,16.047v17.428h-21.182v-10.998
+			c0-5.289,0.512-13.121-3.41-17.209c-3.08-3.149-7.781-3.901-15.48-3.901h-22.545v32.108h-21.198v-87.914h48.706
+			c10.685,0,18.462,0.472,25.386,4.148c6.658,4.006,10.848,9.494,10.848,19.523c-0.002,14.031-9.399,21.19-14.953,23.389
+			C493.684,316.473,497.522,319.566,499.323,322.127z M586.473,285.869h-49.404v15.982h48.197v17.938h-48.197v17.492l49.404,0.078
+			v18.242h-70.414v-87.914h70.414V285.869z M640.686,355.6h-41.09v-18.852h40.926c4.002,0,6.84-0.527,8.619-2.178
+			c1.449-1.359,2.492-3.336,2.492-5.73c0-2.564-1.129-4.598-2.574-5.818c-1.615-1.34-3.842-1.948-7.514-1.948
+			c-19.73-0.673-44.439,0.606-44.439-27.212c0-12.752,8.047-26.174,30.164-26.174h42.297v18.709h-38.703
+			c-3.836,0-6.33,0.146-8.451,1.592c-2.313,1.423-3.17,3.535-3.17,6.322c0,3.316,1.963,5.574,4.615,6.549
+			c2.228,0.771,4.617,0.996,8.211,0.996l11.359,0.308c11.449,0.274,19.313,2.25,24.092,7.069c4.105,4.232,6.311,9.578,6.311,18.625
+			C673.829,346.771,661.963,355.6,640.686,355.6z M751.192,343.838L751.192,343.838L751.192,343.838L751.192,343.838z
+			 M477.061,287.287c-2.549-1.508-6.311-1.588-10.066-1.588h-25.979v19.744h25.631c4.104,0,7.594-0.144,10.414-1.812
+			c2.734-1.646,4.371-4.678,4.371-8.438C481.432,291.434,479.795,288.711,477.061,287.287z M712.784,285.697
+			c-3.838,0-6.389,0.145-8.537,1.588c-2.227,1.426-3.081,3.537-3.081,6.326c0,3.315,1.879,5.572,4.612,6.549
+			c2.228,0.771,4.615,0.996,8.129,0.996l11.437,0.303c11.537,0.285,19.242,2.262,23.938,7.08c0.855,0.668,1.369,1.42,1.957,2.174
+			v-25.014h-38.453L712.784,285.697L712.784,285.697z M373.47,285.697h-27.509v22.391h27.265c8.105,0,13.146-4.006,13.149-11.611
+			C386.372,288.789,381.086,285.697,373.47,285.697z M189.872,285.697v15.984h46.315v17.938h-46.315v17.49h51.87l24.1-25.791
+			l-23.076-25.621H189.872L189.872,285.697z M325.321,347.176v-70.482l-32.391,34.673L325.321,347.176z M191.649,206.025v15.148
+			h176.263l-0.082-32.046h3.411c2.39,0.083,3.084,0.302,3.084,4.229v27.818h91.164v-7.461c7.353,3.924,18.789,7.461,33.838,7.461
+			h38.353l8.209-19.522h18.197l8.026,19.522h73.906V202.63l11.189,18.543h59.227V98.59h-58.611v14.477l-8.207-14.477h-60.143v14.477
+			l-7.537-14.477h-81.24c-13.6,0-25.551,1.89-35.207,7.158V98.59h-56.063v7.158c-6.146-5.43-14.519-7.158-23.826-7.158H180.784
+			l-13.742,31.662L152.928,98.59H88.417v14.477L81.329,98.59H26.312L0.763,156.874v46.621l37.779-87.894h31.346l35.88,83.217
+			v-83.217h34.435l27.61,59.625l25.365-59.625h35.126v87.894h-21.625l-0.079-68.837l-30.593,68.837h-18.524l-30.671-68.898v68.898
+			H83.899l-8.106-19.605H31.865l-8.19,19.605H0.762v17.682h36.049l8.128-19.523h18.198l8.106,19.523h70.925V206.25l6.33,14.989
+			h36.819L191.649,206.025z M469.401,125.849c6.818-7.015,17.5-10.25,32.039-10.25h20.424v18.833h-19.996
+			c-7.696,0-12.047,1.14-16.233,5.208c-3.599,3.7-6.066,10.696-6.066,19.908c0,9.417,1.881,16.206,5.801,20.641
+			c3.248,3.478,9.152,4.533,14.705,4.533h9.478l29.733-69.12h31.611l35.719,83.134v-83.133h32.123l37.086,61.213v-61.213h21.611
+			v87.891h-29.898l-39.989-65.968v65.968h-42.968l-8.209-19.605h-43.827l-7.966,19.605h-24.688c-10.254,0-23.238-2.258-30.59-9.722
+			c-7.416-7.462-11.271-17.571-11.271-33.553C458.026,147.182,460.329,135.266,469.401,125.849z M426.006,115.6h21.526v87.894
+			h-21.526V115.6z M328.951,115.6h48.525c10.779,0,18.727,0.285,25.547,4.21c6.674,3.926,10.676,9.658,10.676,19.46
+			c0,14.015-9.393,21.254-14.864,23.429c4.614,1.75,8.559,4.841,10.438,7.401c2.979,4.372,3.492,8.277,3.492,16.126v17.267h-21.279
+			l-0.08-11.084c0-5.29,0.508-12.896-3.33-17.122c-3.082-3.09-7.782-3.763-15.379-3.763H350.05v31.97h-21.098L328.951,115.6
+			L328.951,115.6z M243.902,115.6h70.479v18.303h-49.379v15.843h48.193v18.017h-48.193v17.553h49.379v18.177h-70.479V115.6
+			L243.902,115.6z"/>
+	</g>
+</g>
+</svg>

ui/src/components/icons/svg/close.svg

@@ -1,9 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>icon: close</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
         <g id="ui-components-revised" transform="translate(-3367.000000, -870.000000)">
             <g id="notifications" transform="translate(2457.000000, 72.000000)">

ui/src/components/icons/svg/data-centers.svg

@@ -0,0 +1,15 @@
+<svg width="9px" height="13px" viewBox="0 0 9 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-topology-of-services" transform="translate(-575.000000, -487.000000)" fill="#FFFFFF">
+            <g id="services-copy" transform="translate(213.000000, 426.000000)">
+                <g id="service:-nginx" transform="translate(263.000000, 0.000000)">
+                    <g id="metric">
+                        <g id="data-centers-&amp;-instanecs" transform="translate(18.000000, 59.000000)">
+                            <path d="M81,15 L90,15 L90,2 L81,2 L81,15 Z M83,13 L88,13 L88,4 L83,4 L83,13 Z M84,6 L87.001,6 L87.001,5 L84,5 L84,6 Z M84,8 L87.001,8 L87.001,7 L84,7 L84,8 Z M84,10 L87.001,10 L87.001,9 L84,9 L84,10 Z" id="icon:--data-center"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/diners.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="750px" height="471px"
+	 viewBox="0 0 750 471" enable-background="new 0 0 750 471" xml:space="preserve">
+<title>diners</title>
+<desc>Created with Sketch.</desc>
+<g id="diners" sketch:type="MSLayerGroup">
+	<path id="Shape-path" sketch:type="MSShapeGroup" fill="#0079BE" d="M584.934,236.947c0-99.416-82.98-168.133-173.896-168.1
+		h-78.241c-92.003-0.033-167.73,68.705-167.73,168.1c0,90.931,75.729,165.641,167.73,165.203h78.241
+		C501.951,402.587,584.934,327.857,584.934,236.947L584.934,236.947z"/>
+	<path id="Shape-path_1_" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M333.281,82.932
+		c-84.069,0.026-152.193,68.308-152.215,152.58c0.021,84.258,68.145,152.532,152.215,152.559
+		c84.088-0.026,152.229-68.301,152.239-152.559C485.508,151.238,417.369,82.958,333.281,82.932L333.281,82.932z"/>
+	<path id="Path" sketch:type="MSShapeGroup" fill="#0079BE" d="M237.066,235.098c0.08-41.18,25.747-76.296,61.94-90.25v180.479
+		C262.813,311.381,237.145,276.283,237.066,235.098z M368.066,325.373V144.848c36.208,13.921,61.915,49.057,61.981,90.256
+		C429.981,276.316,404.274,311.426,368.066,325.373z"/>
+</g>
+</svg>

ui/src/components/icons/svg/discover.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="780px" height="501px"
+	 viewBox="0 0 780 501" enable-background="new 0 0 780 501" xml:space="preserve">
+<title>discover</title>
+<desc>Created with Sketch.</desc>
+<g id="Page-1" sketch:type="MSPage">
+	<g id="discover" sketch:type="MSLayerGroup">
+		<path fill="#F47216" d="M409.412,197.758c30.938,0,56.02,23.58,56.02,52.709v0.033c0,29.129-25.082,52.742-56.02,52.742
+			c-30.941,0-56.022-23.613-56.022-52.742v-0.033C353.39,221.338,378.471,197.758,409.412,197.758L409.412,197.758z"/>
+		<path d="M321.433,198.438c8.836,0,16.247,1.785,25.269,6.09v22.752c-8.544-7.863-15.955-11.154-25.757-11.154
+			c-19.265,0-34.413,15.015-34.413,34.051c0,20.074,14.681,34.195,35.368,34.195c9.313,0,16.586-3.12,24.802-10.856v22.764
+			c-9.343,4.141-16.912,5.775-25.757,5.775c-31.277,0-55.581-22.597-55.581-51.737C265.363,221.49,290.314,198.438,321.433,198.438
+			L321.433,198.438z"/>
+		<path d="M224.32,199.064c11.546,0,22.109,3.721,30.942,10.994l-10.748,13.248c-5.351-5.646-10.411-8.027-16.563-8.027
+			c-8.854,0-15.301,4.745-15.301,10.988c0,5.354,3.618,8.188,15.944,12.482c23.364,8.043,30.289,15.176,30.289,30.926
+			c0,19.193-14.976,32.554-36.319,32.554c-15.631,0-26.993-5.795-36.457-18.871l13.268-12.031
+			c4.73,8.609,12.622,13.223,22.42,13.223c9.163,0,15.947-5.951,15.947-13.984c0-4.164-2.056-7.733-6.158-10.258
+			c-2.066-1.195-6.158-2.977-14.199-5.646c-19.292-6.538-25.91-13.527-25.91-27.186C191.474,211.25,205.688,199.064,224.32,199.064
+			L224.32,199.064z"/>
+		<polygon points="459.043,200.793 481.479,200.793 509.563,267.385 538.01,200.793 560.276,200.793 514.783,302.479 
+			503.729,302.479 		"/>
+		<polygon points="157.83,200.945 178.371,200.945 178.371,300.088 157.83,300.088 		"/>
+		<polygon points="569.563,200.945 627.815,200.945 627.815,217.744 590.09,217.744 590.09,239.75 626.426,239.75 626.426,256.541 
+			590.09,256.541 590.09,283.303 627.815,283.303 627.815,300.088 569.563,300.088 		"/>
+		<path d="M685.156,258.322c15.471-2.965,23.984-12.926,23.984-28.105c0-18.562-13.576-29.271-37.266-29.271H641.42v99.143h20.516
+			V260.26h2.68l28.43,39.828h25.26L685.156,258.322z M667.938,246.586h-6.002v-30.025h6.326c12.791,0,19.744,5.049,19.744,14.697
+			C688.008,241.224,681.055,246.586,667.938,246.586z"/>
+		<path d="M91.845,200.945H61.696v99.143h29.992c15.946,0,27.465-3.543,37.573-11.445c12.014-9.36,19.117-23.467,19.117-38.057
+			C148.379,221.327,125.157,200.945,91.845,200.945z M115.842,275.424c-6.454,5.484-14.837,7.879-28.108,7.879H82.22v-65.559h5.513
+			c13.271,0,21.323,2.238,28.108,8.018c7.104,5.956,11.377,15.183,11.377,24.682C127.219,259.957,122.945,269.468,115.842,275.424z"
+			/>
+	</g>
+</g>
+</svg>

ui/src/components/icons/svg/healthy.svg

@@ -0,0 +1,14 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-list-of-services" transform="translate(-230.000000, -567.000000)">
+            <g id="service:-nginx" transform="translate(213.000000, 426.000000)">
+                <g id="state:-healthy" transform="translate(17.000000, 139.000000)">
+                    <g id="icon:-state-(healthy)" transform="translate(0.000000, 2.000000)">
+                        <circle id="Oval" fill="#00AF66" cx="9" cy="9" r="9"></circle>
+                        <path d="M9.47745233,6.60270759 L8.95496861,7.04565311 L8.51133742,6.60270759 C7.70841297,5.79909747 6.40563205,5.79909747 5.60270759,6.60270759 C4.79909747,7.40631772 4.79909747,8.70841297 5.60270759,9.5120231 L8.95496861,12.8642841 L12.3668833,9.5120231 C13.1698077,8.70841297 13.2301471,7.40631772 12.4265369,6.60270759 C11.6229268,5.79909747 10.2810625,5.79909747 9.47745233,6.60270759 Z" id="icon:-health" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/heart.svg

@@ -0,0 +1,13 @@
+<svg width="8px" height="7px" viewBox="0 0 8 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-topology-of-services" transform="translate(-549.000000, -447.000000)" fill="#FFFFFF">
+            <g id="services-copy" transform="translate(213.000000, 426.000000)">
+                <g id="service:-nginx" transform="translate(263.000000, 0.000000)">
+                    <g id="icon:-state" transform="translate(68.000000, 15.000000)">
+                        <path d="M9.47745233,6.60270759 L8.95496861,7.04565311 L8.51133742,6.60270759 C7.70841297,5.79909747 6.40563205,5.79909747 5.60270759,6.60270759 C4.79909747,7.40631772 4.79909747,8.70841297 5.60270759,9.5120231 L8.95496861,12.8642841 L12.3668833,9.5120231 C13.1698077,8.70841297 13.2301471,7.40631772 12.4265369,6.60270759 C11.6229268,5.79909747 10.2810625,5.79909747 9.47745233,6.60270759 Z" id="icon:-health"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/hipercard.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="Layer_1" x="0px" y="0px" width="780px" height="501px" viewBox="0 0 780 501" xmlns="http://www.w3.org/2000/svg">
+  <title>amex-outline</title>
+  <desc>Created with Sketch.</desc>
+  <path d="M725,0H55C24.673,0,0,24.673,0,55v391c0,30.327,24.673,55,55,55h670c30.325,0,55-24.673,55-55V55&#10;&#9;C780,24.673,755.325,0,725,0z" style="fill: none;"/>
+  <path id="path2997" d="M 230.107 199.434 L 232.211 199.441 L 233.885 198.871 L 235.56 198.301 L 237.041 196.798 L 238.523 195.296 L 239.302 193.293 L 240.083 191.291 L 240.11 188.343 L 240.138 185.397 L 239.445 184.245 L 238.751 183.094 L 237.544 182.347 L 236.336 181.599 L 233.729 181.599 L 231.122 181.599 L 229.347 182.394 L 227.572 183.188 L 226.542 184.292 L 225.512 185.397 L 224.702 187.304 L 223.893 189.211 L 223.74 192.182 L 223.588 195.153 L 224.34 196.63 L 225.094 198.106 L 226.548 198.766 L 228.001 199.425 L 230.107 199.434 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 565.658 284.057 L 573.228 284.057 L 573.228 281.741 L 573.228 279.423 L 574.1 273.677 C 574.581 270.518 575.372 265.512 575.86 262.557 C 576.348 259.6 576.955 255.855 577.21 254.233 C 577.466 252.612 578.142 249.101 578.713 246.431 C 579.286 243.76 579.999 240.874 580.3 240.015 C 580.601 239.157 580.849 238.256 580.852 238.014 C 580.856 237.772 581.501 236.214 582.286 234.552 L 583.715 231.529 L 585.601 229.024 L 587.486 226.52 L 589.549 224.969 C 590.683 224.115 592.508 222.984 593.604 222.453 L 595.596 221.488 L 599.93 221.518 L 604.265 221.549 L 605.972 222.096 L 607.678 222.644 L 607.966 222.466 L 608.253 222.288 L 608.269 221.182 C 608.276 220.573 608.647 218.309 609.093 216.149 L 609.904 212.223 L 608.992 211.866 C 608.491 211.67 607.301 211.264 606.347 210.964 L 604.613 210.417 L 601.492 210.426 L 598.371 210.433 L 595.827 211.329 L 593.283 212.223 L 591.373 213.375 L 589.464 214.527 L 586.98 217.128 L 584.497 219.728 L 583.163 221.746 C 582.43 222.856 581.784 223.714 581.728 223.653 C 581.672 223.593 582.071 221.28 582.614 218.515 C 583.157 215.749 583.609 213.135 583.617 212.706 L 583.632 211.925 L 577.216 211.925 L 570.801 211.925 L 570.801 212.147 C 570.801 212.268 570.481 214.492 570.09 217.088 C 569.699 219.685 568.913 224.696 568.346 228.225 C 567.777 231.753 566.845 237.449 566.273 240.883 C 565.702 244.316 564.84 249.232 564.358 251.807 C 563.877 254.381 563.022 258.907 562.458 261.863 C 561.894 264.82 560.968 269.58 560.4 272.441 C 559.832 275.301 559.078 279.086 558.727 280.85 L 558.087 284.057 L 565.658 284.057 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 389.899 284.057 L 397.303 284.057 L 397.525 280.924 C 397.648 279.202 398.066 275.729 398.456 273.208 C 398.846 270.687 399.645 265.66 400.23 262.037 C 400.816 258.412 401.904 252.38 402.648 248.631 C 403.394 244.883 404.235 241.157 404.519 240.352 C 404.804 239.546 405.036 238.674 405.036 238.413 C 405.036 238.151 405.593 236.727 406.273 235.248 C 406.953 233.769 408.221 231.505 409.091 230.216 L 410.672 227.872 L 412.787 225.912 L 414.903 223.954 L 417.512 222.708 L 420.121 221.461 L 424.11 221.483 L 428.097 221.504 L 430.058 222.089 C 431.136 222.411 432.111 222.675 432.225 222.675 C 432.339 222.675 432.432 222.307 432.432 221.856 C 432.432 221.406 432.822 219.122 433.299 216.78 C 433.775 214.439 434.166 212.425 434.166 212.304 C 434.166 212.183 433.035 211.74 431.652 211.32 C 430.269 210.9 428.357 210.46 427.404 210.341 L 425.67 210.127 L 423.416 210.526 C 422.176 210.745 420.333 211.229 419.32 211.602 C 418.306 211.974 416.633 212.818 415.601 213.478 C 414.57 214.139 412.965 215.425 412.036 216.336 C 411.105 217.248 409.541 219.087 408.56 220.422 C 407.578 221.757 406.552 223.162 406.279 223.543 L 405.783 224.236 L 406.084 222.85 C 406.25 222.086 406.712 219.589 407.11 217.301 C 407.508 215.012 407.919 212.865 408.019 212.533 L 408.204 211.925 L 401.592 211.925 L 394.979 211.925 L 394.979 212.761 C 394.979 213.221 394.588 215.99 394.112 218.916 C 393.635 221.843 392.848 226.733 392.364 229.785 C 391.88 232.837 391.02 238.143 390.454 241.576 C 389.888 245.009 389.028 249.925 388.543 252.499 C 388.058 255.074 387.198 259.6 386.63 262.557 C 386.064 265.512 385.121 270.351 384.538 273.307 C 383.954 276.264 383.255 279.754 382.986 281.066 C 382.715 282.376 382.495 283.585 382.495 283.752 L 382.495 284.057 L 389.899 284.057 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 215.439 284.057 L 222.898 284.057 L 223.108 283.509 C 223.225 283.206 223.319 282.415 223.319 281.751 C 223.319 281.085 223.789 277.625 224.361 274.062 C 224.935 270.499 225.882 264.698 226.467 261.169 C 227.051 257.641 227.914 252.491 228.385 249.725 C 228.856 246.96 229.692 242.357 230.244 239.494 C 230.796 236.634 231.644 232.186 232.128 229.612 C 232.611 227.037 233.563 222.138 234.242 218.725 C 234.921 215.312 235.561 212.384 235.664 212.217 L 235.853 211.912 L 228.31 212.005 L 220.767 212.098 L 220.137 216.607 C 219.793 219.087 219.037 224.003 218.459 227.53 C 217.882 231.059 217.008 236.444 216.517 239.494 C 216.026 242.547 215.172 247.462 214.617 250.419 C 214.062 253.375 213.212 257.9 212.727 260.475 C 212.243 263.051 211.374 267.576 210.796 270.532 C 210.218 273.489 209.443 277.39 209.073 279.202 C 208.702 281.015 208.305 282.848 208.189 283.277 L 207.98 284.057 L 215.439 284.057 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 122.161 284.057 L 130.586 284.057 L 131.191 280.33 C 131.523 278.279 132.173 274.338 132.634 271.573 C 133.095 268.808 133.954 263.657 134.541 260.129 C 135.129 256.6 136.011 251.372 136.5 248.512 C 136.989 245.651 137.767 241.213 138.227 238.65 C 138.688 236.085 139.153 233.901 139.259 233.794 L 139.454 233.6 L 162.111 233.6 L 184.767 233.6 L 185.019 233.851 L 185.271 234.103 L 184.877 236.105 C 184.662 237.207 184.023 240.604 183.458 243.656 C 182.893 246.708 181.943 251.858 181.346 255.101 C 180.751 258.343 179.889 262.947 179.432 265.331 C 178.974 267.715 178.048 272.708 177.374 276.428 C 176.701 280.147 176.151 283.385 176.153 283.624 L 176.157 284.057 L 184.617 284.057 L 193.078 284.057 L 193.452 281.89 C 193.659 280.698 193.989 278.552 194.189 277.122 C 194.387 275.691 194.868 272.647 195.255 270.359 C 195.642 268.071 196.415 263.544 196.974 260.302 C 197.532 257.06 198.468 251.52 199.052 247.991 C 199.636 244.462 200.502 239.313 200.978 236.548 C 201.452 233.781 202.299 229.1 202.858 226.144 C 203.417 223.187 204.349 218.194 204.929 215.046 C 205.509 211.9 206.376 207.14 206.858 204.469 C 207.34 201.799 208.218 196.961 208.81 193.719 C 209.402 190.477 210.149 186.693 210.47 185.309 L 211.054 182.795 L 202.488 182.795 L 193.921 182.795 L 193.688 184.443 C 193.561 185.348 193.147 187.885 192.769 190.078 C 192.39 192.272 191.704 196.172 191.242 198.747 C 190.78 201.323 189.936 206.238 189.366 209.672 C 188.796 213.104 188.07 217.649 187.752 219.771 L 187.174 223.628 L 174.599 223.883 L 162.023 224.137 L 151.491 223.887 C 145.698 223.75 140.926 223.609 140.886 223.577 C 140.847 223.543 141.044 222.196 141.324 220.582 C 141.605 218.968 142.135 216.164 142.503 214.353 C 142.871 212.541 143.569 208.952 144.053 206.376 C 144.538 203.802 145.086 200.603 145.273 199.268 C 145.459 197.933 145.85 195.709 146.141 194.325 C 146.432 192.943 146.984 190.03 147.368 187.853 C 147.751 185.676 148.16 183.647 148.277 183.345 L 148.487 182.795 L 139.99 182.795 L 131.492 182.795 L 130.949 185.83 C 130.649 187.499 130.25 189.878 130.062 191.118 C 129.873 192.358 129.24 196.337 128.655 199.961 C 128.07 203.585 127.206 208.969 126.735 211.925 C 126.264 214.882 125.408 220.266 124.832 223.889 C 124.254 227.514 123.303 233.131 122.716 236.373 C 122.13 239.617 121.281 244.22 120.829 246.604 C 120.378 248.988 119.519 253.514 118.919 256.661 C 118.32 259.809 117.443 264.256 116.974 266.545 C 116.504 268.833 115.985 271.486 115.821 272.439 C 115.655 273.393 115.119 276.144 114.627 278.552 C 114.136 280.96 113.734 283.183 113.734 283.494 L 113.734 284.057 L 122.161 284.057 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 626.633 285.744 L 629.927 285.786 L 633.049 285.279 C 634.766 285.001 636.95 284.552 637.904 284.282 C 638.857 284.012 640.575 283.312 641.718 282.726 L 643.8 281.66 L 645.59 280.084 L 647.379 278.508 L 649.265 275.995 C 650.302 274.612 651.24 273.247 651.351 272.96 L 651.552 272.439 L 651.377 274.174 C 651.281 275.127 651.066 276.688 650.897 277.642 C 650.729 278.596 650.49 280.429 650.364 281.717 L 650.134 284.057 L 663.74 284.057 L 663.74 279.376 L 664.776 270.532 C 665.346 265.668 666.189 259.193 666.649 256.141 C 667.109 253.088 667.82 248.72 668.229 246.431 C 668.636 244.142 669.359 240.006 669.833 237.241 C 670.309 234.476 671.167 229.637 671.741 226.491 C 672.314 223.343 673.233 218.35 673.782 215.394 C 674.33 212.437 675.184 207.833 675.677 205.163 C 676.17 202.493 677.054 197.811 677.641 194.76 C 678.23 191.708 679.086 187.416 679.547 185.222 C 680.009 183.03 680.386 181.117 680.385 180.975 L 680.385 180.714 L 665.541 180.714 L 665.322 182.882 C 665.202 184.074 664.633 188.014 664.06 191.639 C 663.486 195.262 662.55 201.036 661.98 204.469 C 661.41 207.902 660.862 211.232 660.761 211.868 L 660.575 213.024 L 659.99 212.775 C 659.668 212.638 657.921 212.153 656.11 211.698 L 652.816 210.871 L 648.308 210.52 L 643.799 210.169 L 639.984 210.524 L 636.17 210.88 L 632.702 211.757 L 629.234 212.633 L 625.94 214.24 L 622.644 215.847 L 620.217 217.643 L 617.79 219.44 L 615.693 221.689 C 614.54 222.925 612.875 224.97 611.991 226.233 L 610.387 228.529 L 608.501 232.451 C 607.465 234.609 606.203 237.466 605.698 238.801 C 605.192 240.137 604.302 243.096 603.717 245.378 L 602.656 249.528 L 602.133 254.916 L 601.61 260.302 L 602.002 264.637 L 602.396 268.972 L 602.859 270.532 C 603.116 271.391 603.653 272.92 604.056 273.93 L 604.788 275.769 L 606.123 277.575 L 607.459 279.383 L 608.983 280.631 L 610.507 281.88 L 612.588 282.914 C 613.733 283.481 615.652 284.216 616.854 284.545 C 618.055 284.874 620.006 285.27 621.189 285.423 C 622.371 285.577 624.82 285.722 626.633 285.744 Z M 632.546 275.907 L 629.927 276.044 L 628.161 275.726 C 627.189 275.552 625.634 275.082 624.704 274.684 L 623.015 273.961 L 621.593 272.795 L 620.172 271.631 L 618.06 267.585 L 617.577 265.331 L 617.097 263.076 L 617.138 258.568 L 617.178 254.06 L 617.737 250.071 L 618.296 246.084 L 619.165 243.31 C 619.643 241.784 620.037 240.344 620.039 240.11 C 620.043 239.877 620.513 238.629 621.088 237.337 C 621.662 236.044 622.62 234.051 623.218 232.906 C 623.816 231.761 624.934 229.978 625.701 228.942 C 626.47 227.906 627.839 226.345 628.743 225.473 C 629.647 224.603 631.084 223.459 631.939 222.934 L 633.491 221.979 L 636.218 221.035 L 638.944 220.091 L 644.666 220.088 L 650.388 220.088 L 653.682 221.003 C 655.495 221.505 657.419 222.088 657.958 222.298 L 658.939 222.679 L 658.748 223.631 C 658.643 224.155 658.23 226.456 657.832 228.744 C 657.434 231.033 656.648 235.403 656.087 238.455 C 655.526 241.507 654.664 246.111 654.171 248.685 C 653.679 251.26 652.966 254.537 652.586 255.967 C 652.207 257.398 651.671 259.379 651.396 260.37 C 651.121 261.361 650.467 263.079 649.942 264.185 C 649.417 265.292 648.498 266.9 647.9 267.758 C 647.302 268.616 646.292 269.806 645.654 270.4 C 645.015 270.996 643.635 272.052 642.586 272.749 L 640.679 274.017 L 635.165 275.767 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 509.419 285.621 L 514.1 285.486 L 517.048 284.732 L 519.996 283.977 L 521.904 283.076 C 522.953 282.581 524.669 281.602 525.718 280.901 C 526.767 280.2 528.392 278.868 529.327 277.941 C 530.262 277.013 531.649 275.431 532.409 274.425 C 533.169 273.418 533.837 272.64 533.893 272.697 C 533.95 272.753 533.774 274.356 533.504 276.26 C 533.235 278.165 533.011 280.698 533.007 281.89 L 533.001 284.057 L 545.73 284.057 L 545.925 279.116 L 546.119 274.174 L 547.027 267.758 C 547.527 264.229 548.334 259.001 548.821 256.141 C 549.307 253.28 550.152 248.443 550.7 245.39 C 551.247 242.338 552.114 237.579 552.625 234.813 L 553.557 229.785 L 553.589 225.442 L 553.619 221.098 L 552.638 219.091 L 551.655 217.083 L 550.324 215.805 L 548.991 214.526 L 546.806 213.419 L 544.619 212.31 L 538.101 210.86 L 533.615 210.519 L 529.128 210.178 L 523.349 210.536 C 520.169 210.732 515.697 211.12 513.408 211.399 L 509.246 211.903 L 503.574 211.925 L 503.161 213.92 C 502.934 215.016 502.303 217.621 501.76 219.71 C 501.215 221.798 500.821 223.556 500.883 223.618 C 500.944 223.68 502.461 223.335 504.253 222.853 C 506.045 222.37 509.853 221.578 512.715 221.09 L 517.916 220.204 L 522.597 220.012 L 527.279 219.818 L 533.311 220.876 L 535.323 221.869 L 537.336 222.863 L 538.463 224.543 L 539.591 226.222 L 539.575 228.87 L 539.558 231.519 L 538.961 234.425 L 538.363 237.332 L 525.885 237.377 L 513.407 237.421 L 509.324 238.541 C 507.078 239.157 504.591 239.975 503.797 240.358 C 503.003 240.742 502.209 241.056 502.032 241.056 C 501.856 241.056 500.52 241.796 499.063 242.703 L 496.415 244.348 L 494.33 246.43 C 493.182 247.575 491.717 249.292 491.073 250.246 C 490.429 251.199 489.382 253.191 488.748 254.673 L 487.594 257.366 L 487.064 260.394 L 486.534 263.423 L 486.534 269.778 L 487.039 272.424 L 487.546 275.069 L 488.484 276.794 C 489.001 277.742 489.95 279.133 490.591 279.883 L 491.759 281.247 L 493.832 282.507 L 495.906 283.767 L 498.281 284.438 C 499.587 284.807 501.574 285.255 502.698 285.433 L 504.74 285.755 L 509.422 285.621 Z M 513.754 275.923 L 510.979 276.069 L 509.142 275.6 C 508.132 275.343 506.598 274.769 505.734 274.325 L 504.165 273.518 L 503.307 272.499 C 502.836 271.938 502.116 270.838 501.707 270.053 L 500.964 268.625 L 500.819 265.292 L 500.672 261.958 L 501.26 259.936 C 501.583 258.824 502.342 256.893 502.946 255.647 L 504.044 253.38 L 506.147 251.293 L 508.249 249.205 L 510.481 248.13 L 512.713 247.056 L 515.487 246.396 L 518.262 245.737 L 535.602 245.737 L 536.15 245.964 L 536.698 246.19 L 536.237 248.912 C 535.983 250.408 535.378 253.115 534.891 254.927 C 534.405 256.74 533.547 259.403 532.984 260.846 C 532.421 262.29 531.96 263.566 531.96 263.682 C 531.96 263.799 531.39 264.85 530.693 266.019 L 529.427 268.146 L 527.348 270.207 C 526.205 271.339 525.142 272.266 524.988 272.266 C 524.835 272.266 524.134 272.657 523.431 273.134 L 522.153 274 L 519.34 274.89 L 516.528 275.779 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 452.375 285.749 L 456.192 285.791 L 460.524 285.278 C 462.907 284.995 466.079 284.528 467.574 284.237 C 469.067 283.948 471.486 283.373 472.949 282.961 C 474.411 282.547 475.734 282.1 475.889 281.968 C 476.044 281.835 476.456 280.261 476.807 278.47 C 477.157 276.68 477.599 274.278 477.788 273.134 C 477.976 271.989 478.074 270.992 478.005 270.917 C 477.935 270.842 477.68 270.939 477.437 271.131 C 477.193 271.325 475.492 272.041 473.655 272.723 L 470.316 273.963 L 465.561 274.884 L 460.805 275.805 L 456.763 275.668 L 452.72 275.53 L 450.423 274.733 L 448.126 273.936 L 446.352 272.385 L 444.578 270.832 L 443.4 268.688 L 442.224 266.545 L 441.662 263.676 L 441.102 260.808 L 441.106 257.088 L 441.109 253.367 L 441.79 248.859 L 442.472 244.35 L 443.192 241.922 C 443.589 240.587 444.038 239.027 444.189 238.455 C 444.342 237.882 444.977 236.244 445.603 234.813 C 446.228 233.383 447.344 231.172 448.082 229.9 L 449.424 227.589 L 451.073 225.88 L 452.722 224.171 L 454.467 223.089 L 456.214 222.006 L 458.456 221.315 C 459.689 220.935 461.869 220.442 463.299 220.22 L 465.9 219.814 L 469.714 220.006 L 473.529 220.197 L 478.037 221.1 L 482.546 222.001 L 484.379 222.685 C 485.387 223.061 486.256 223.37 486.311 223.37 C 486.364 223.37 486.606 222.082 486.848 220.508 C 487.09 218.935 487.52 216.346 487.804 214.756 C 488.089 213.164 488.253 211.794 488.168 211.711 C 488.085 211.627 486.73 211.412 485.158 211.233 C 483.585 211.054 479.311 210.736 475.66 210.525 L 469.021 210.144 L 464.339 210.503 L 459.658 210.863 L 456.189 211.591 L 452.722 212.32 L 450.488 213.213 C 449.26 213.704 447.461 214.591 446.49 215.183 C 445.519 215.776 444.285 216.572 443.745 216.953 C 443.205 217.335 441.569 218.823 440.107 220.261 L 437.452 222.875 L 435.968 225.047 C 435.153 226.242 433.743 228.732 432.834 230.583 L 431.182 233.947 L 429.915 237.587 C 429.219 239.59 428.246 242.867 427.755 244.87 L 426.86 248.512 L 426.535 251.806 L 426.211 255.101 L 426.214 259.436 L 426.218 263.77 L 426.545 266.292 L 426.872 268.814 L 427.911 271.408 L 428.949 274.002 L 430.15 275.877 L 431.349 277.752 L 433.256 279.63 L 435.165 281.507 L 437.182 282.575 L 439.201 283.641 L 441.852 284.378 C 443.309 284.782 445.416 285.247 446.533 285.41 C 447.65 285.573 450.281 285.726 452.381 285.749 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 342.094 285.747 L 345.909 285.791 L 349.723 285.443 C 351.822 285.252 355.255 284.853 357.352 284.557 C 359.451 284.262 363.075 283.6 365.407 283.088 L 369.646 282.155 L 369.858 280.591 C 369.974 279.732 370.45 277.174 370.916 274.906 L 371.763 270.781 L 371.575 270.595 L 371.389 270.409 L 370.093 271.034 C 369.38 271.378 367.159 272.2 365.159 272.859 L 361.521 274.057 L 357.703 274.798 L 353.885 275.537 L 347.816 275.55 L 341.747 275.56 L 339.666 274.896 C 338.522 274.531 336.839 273.863 335.926 273.41 L 334.267 272.589 L 331.527 270.113 L 330.458 268.246 L 329.389 266.377 L 328.719 264.035 L 328.049 261.692 L 328.045 257.356 L 328.04 253.019 L 328.634 249.152 L 329.23 245.283 L 339.666 244.795 L 358.957 244.92 L 378.247 245.043 L 378.829 242.573 C 379.15 241.214 379.64 238.405 379.918 236.331 L 380.424 232.559 L 380.435 229.387 L 380.446 226.214 L 379.897 223.845 L 379.347 221.477 L 378.438 219.909 C 377.94 219.047 377.059 217.797 376.483 217.131 C 375.907 216.466 374.878 215.528 374.197 215.047 C 373.515 214.566 372.178 213.757 371.224 213.25 L 369.49 212.328 L 366.461 211.598 L 363.431 210.869 L 359.699 210.512 L 355.965 210.155 L 352.498 210.381 L 349.03 210.606 L 344.868 211.405 L 340.707 212.205 L 338.105 213.244 C 336.675 213.815 334.49 214.859 333.251 215.562 C 332.011 216.265 330.295 217.409 329.437 218.104 C 328.577 218.8 327.091 220.152 326.134 221.109 C 325.176 222.067 323.758 223.785 322.985 224.93 C 322.211 226.075 321.025 228.103 320.348 229.438 C 319.672 230.774 318.791 232.646 318.39 233.6 C 317.99 234.553 317.261 236.504 316.772 237.934 C 316.282 239.365 315.513 242.096 315.063 244.004 C 314.612 245.911 313.995 249.05 313.69 250.98 L 313.137 254.49 L 313.143 259.65 L 313.148 264.81 L 313.675 267.065 C 313.964 268.304 314.519 270.178 314.906 271.226 C 315.293 272.275 316.011 273.836 316.499 274.694 C 316.987 275.552 318.031 276.934 318.817 277.765 C 319.603 278.596 321.027 279.857 321.981 280.566 C 322.934 281.276 324.632 282.275 325.753 282.785 L 327.792 283.713 L 330.635 284.401 C 332.198 284.778 334.558 285.226 335.879 285.396 C 337.199 285.565 339.996 285.724 342.094 285.747 Z M 348.625 236.894 C 339.025 236.894 331.17 236.826 331.17 236.741 C 331.17 236.658 331.58 235.448 332.081 234.053 C 332.581 232.659 333.461 230.585 334.034 229.443 L 335.079 227.366 L 337.372 225.085 L 339.666 222.802 L 341.921 221.725 C 343.16 221.132 344.799 220.486 345.561 220.29 C 346.325 220.094 348.509 219.834 350.416 219.713 L 353.885 219.49 L 356.549 219.833 L 359.211 220.175 L 361.146 221.061 L 363.082 221.947 L 364.144 223.092 C 364.727 223.721 365.423 224.648 365.69 225.151 L 366.174 226.067 L 366.494 228.099 L 366.815 230.131 L 366.448 233.512 L 366.082 236.894 Z" style="fill: rgb(179, 19, 27);"/>
+  <path id="path2997" d="M 245.439 316.309 L 245.649 315.76 C 245.766 315.458 245.86 314.749 245.86 314.184 C 245.86 313.618 246.106 311.564 246.407 309.618 C 246.707 307.67 247.411 303.191 247.973 299.663 C 248.534 296.134 249.374 290.828 249.84 287.872 C 250.306 284.915 250.875 281.131 251.105 279.462 C 251.334 277.793 251.613 276.428 251.726 276.428 C 251.838 276.428 252.32 277.165 252.797 278.067 L 253.663 279.705 L 255.585 281.643 L 257.508 283.579 L 259.874 284.527 L 262.241 285.474 L 265.061 285.84 L 267.882 286.205 L 271.461 285.986 L 275.041 285.766 L 278.917 284.763 L 282.794 283.759 L 284.874 282.811 C 286.019 282.288 288.047 281.149 289.382 280.279 L 291.81 278.698 L 294.073 276.435 C 295.318 275.193 297.074 273.197 297.974 272.002 C 298.876 270.808 299.613 269.744 299.613 269.638 C 299.613 269.531 300.056 268.792 300.597 267.994 C 301.138 267.197 302.244 264.983 303.056 263.076 C 303.869 261.169 305.137 257.736 305.877 255.447 L 307.221 251.285 L 307.916 247.681 C 308.298 245.699 308.79 242.422 309.009 240.398 L 309.406 236.721 L 309.176 233.6 L 308.947 230.479 L 308.223 227.357 L 307.5 224.236 L 306.328 221.9 L 305.157 219.563 L 302.894 217.164 L 300.632 214.765 L 295.278 211.999 L 292.33 211.292 L 289.382 210.587 L 286.434 210.371 L 283.487 210.155 L 280.204 210.532 L 276.919 210.909 L 274.24 211.594 L 271.56 212.277 L 269.231 213.356 C 267.951 213.947 266.087 214.954 265.091 215.592 C 264.094 216.23 263.065 216.963 262.805 217.222 C 262.546 217.481 261.923 217.962 261.423 218.288 L 260.512 218.885 L 261.148 215.838 C 261.499 214.163 261.791 212.598 261.799 212.358 L 261.813 211.925 L 249.097 211.925 L 247.983 218.948 C 247.369 222.811 246.401 228.779 245.831 232.213 C 245.261 235.646 244.4 240.795 243.92 243.656 C 243.44 246.517 242.583 251.589 242.015 254.927 C 241.448 258.264 240.511 263.571 239.932 266.718 C 239.353 269.865 238.506 274.469 238.048 276.949 C 237.591 279.428 236.729 284.109 236.135 287.351 C 235.541 290.595 234.585 295.744 234.011 298.796 C 233.437 301.847 232.504 306.685 231.937 309.546 C 231.369 312.407 230.821 315.1 230.716 315.528 L 230.527 316.309 Z M 267.188 276.388 L 265.296 276.053 L 263.403 275.719 L 261.481 274.842 L 259.558 273.964 L 258.216 272.681 L 256.873 271.4 L 256.098 269.666 C 255.671 268.712 255.124 267.092 254.881 266.065 L 254.439 264.199 L 254.616 261.21 L 254.794 258.222 L 255.687 253.54 C 256.178 250.965 257.06 246.127 257.647 242.79 C 258.234 239.452 259.124 234.56 259.623 231.921 L 260.53 227.121 L 262.518 225.467 C 263.612 224.558 265.344 223.338 266.368 222.758 L 268.228 221.702 L 270.655 220.951 L 273.083 220.199 L 279.325 219.833 L 281.867 220.375 L 284.408 220.916 L 286.202 221.742 L 287.995 222.568 L 289.499 224.08 L 291.004 225.592 L 291.814 227.193 C 292.261 228.074 292.888 229.797 293.207 231.023 L 293.788 233.252 L 293.61 239.842 L 293.432 246.431 L 292.542 250.326 C 292.052 252.468 291.12 255.745 290.47 257.608 L 289.289 260.996 L 287.841 263.738 C 287.045 265.247 285.818 267.285 285.114 268.268 C 284.41 269.25 283.287 270.525 282.619 271.097 C 281.953 271.671 280.834 272.568 280.135 273.089 L 278.864 274.038 L 272.978 276.04 Z" style="fill: rgb(179, 19, 27);"/>
+</svg>

ui/src/components/icons/svg/icon-settings.svg

@@ -1,9 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>icon: settings </title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="project:-adding-metrics-1.4" transform="translate(-979.000000, -413.000000)" fill="#FFFFFF">
             <g id="metric:-cpu" transform="translate(208.000000, 391.000000)">

ui/src/components/icons/svg/input-confirm.svg

@@ -1,8 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>icon: confirmation</title>
-    <desc>Created with Sketch.</desc>
     <defs>
         <circle id="path-1" cx="9" cy="9" r="9"></circle>
         <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">

ui/src/components/icons/svg/instances-multiple.svg

@@ -0,0 +1,15 @@
+<svg width="18px" height="9px" viewBox="0 0 18 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-topology-of-services" transform="translate(-494.000000, -489.000000)" fill="#FFFFFF">
+            <g id="services-copy" transform="translate(213.000000, 426.000000)">
+                <g id="service:-nginx" transform="translate(263.000000, 0.000000)">
+                    <g id="metric">
+                        <g id="data-centers-&amp;-instanecs" transform="translate(18.000000, 59.000000)">
+                            <path d="M4.5,4 C2.015,4 0,6.015 0,8.5 C0,10.985 2.015,13 4.5,13 C6.985,13 9,10.985 9,8.5 C9,6.015 6.985,4 4.5,4 M13.0909091,4 C12.7145455,4 12.3512727,4.047 12,4.12 C14.184,4.576 15.8181818,6.359 15.8181818,8.5 C15.8181818,10.641 14.184,12.424 12,12.88 C12.3512727,12.953 12.7145455,13 13.0909091,13 C15.8018182,13 18,10.985 18,8.5 C18,6.015 15.8018182,4 13.0909091,4 M14,8.5 C14,10.985 11.8018182,13 9.09090909,13 C8.71454545,13 8.35127273,12.953 8,12.88 C10.184,12.424 11.8181818,10.641 11.8181818,8.5 C11.8181818,6.359 10.184,4.576 8,4.12 C8.35127273,4.047 8.71454545,4 9.09090909,4 C11.8018182,4 14,6.015 14,8.5" id="icon:-instances"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/jcb.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="750px" height="471px"
+	 viewBox="0 0 750 471" enable-background="new 0 0 750 471" xml:space="preserve">
+<title>Slice 1</title>
+<desc>Created with Sketch.</desc>
+<g>
+	<path id="path3494" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M617.242,346.766c0,41.615-33.729,75.36-75.357,75.36H132.759
+		V124.245c0-41.626,33.73-75.371,75.364-75.371h409.12V346.766L617.242,346.766L617.242,346.766z"/>
+	
+		<linearGradient id="path3496_1_" gradientUnits="userSpaceOnUse" x1="824.7424" y1="333.7813" x2="825.7424" y2="333.7813" gradientTransform="matrix(132.8743 0 0 -323.0226 -109129.5313 108054.6016)">
+		<stop  offset="0" style="stop-color:#007B40"/>
+		<stop  offset="1" style="stop-color:#55B330"/>
+	</linearGradient>
+	<path id="path3496" sketch:type="MSShapeGroup" fill="url(#path3496_1_)" d="M483.86,242.045c11.686,0.254,23.439-0.516,35.078,0.4
+		c11.787,2.199,14.627,20.043,4.156,25.887c-7.145,3.85-15.633,1.434-23.379,2.113H483.86V242.045L483.86,242.045z M525.694,209.9
+		c2.596,9.164-6.238,17.392-15.064,16.13h-26.77c0.188-8.642-0.367-18.022,0.273-26.209c10.723,0.302,21.547-0.616,32.209,0.48
+		C520.922,201.452,524.756,205.218,525.694,209.9L525.694,209.9z M590.119,73.997c0.498,17.501,0.072,35.927,0.215,53.783
+		c-0.033,72.596,0.07,145.195-0.057,217.789c-0.469,27.207-24.582,50.847-51.6,51.39c-27.045,0.11-54.094,0.017-81.143,0.047
+		v-109.75c29.471-0.153,58.957,0.308,88.416-0.231c13.666-0.858,28.635-9.875,29.271-24.914
+		c1.609-15.103-12.631-25.551-26.152-27.201c-5.197-0.135-5.045-1.515,0-2.117c12.895-2.787,23.021-16.133,19.227-29.499
+		c-3.234-14.058-18.771-19.499-31.695-19.472c-26.352-0.179-52.709-0.025-79.063-0.077c0.17-20.489-0.355-41,0.283-61.474
+		c2.088-26.716,26.807-48.748,53.447-48.27C537.555,73.998,563.838,73.998,590.119,73.997L590.119,73.997z"/>
+	
+		<linearGradient id="path3498_1_" gradientUnits="userSpaceOnUse" x1="824.7551" y1="333.7822" x2="825.7484" y2="333.7822" gradientTransform="matrix(133.4307 0 0 -323.0203 -109887.6875 108053.8203)">
+		<stop  offset="0" style="stop-color:#1D2970"/>
+		<stop  offset="1" style="stop-color:#006DBA"/>
+	</linearGradient>
+	<path id="path3498" sketch:type="MSShapeGroup" fill="url(#path3498_1_)" d="M159.742,125.041
+		c0.673-27.164,24.888-50.611,51.872-51.008c26.945-0.083,53.894-0.012,80.839-0.036c-0.074,90.885,0.146,181.776-0.111,272.657
+		c-1.038,26.834-24.989,49.834-51.679,50.309c-26.996,0.098-53.995,0.014-80.992,0.041V283.551
+		c26.223,6.195,53.722,8.832,80.474,4.723c15.991-2.574,33.487-10.426,38.901-27.016c3.984-14.191,1.741-29.126,2.334-43.691
+		v-33.825h-46.297c-0.208,22.371,0.426,44.781-0.335,67.125c-1.248,13.734-14.849,22.46-27.802,21.994
+		c-16.064,0.17-47.897-11.641-47.897-11.641C158.969,219.305,159.515,166.814,159.742,125.041L159.742,125.041z"/>
+	
+		<linearGradient id="path3500_1_" gradientUnits="userSpaceOnUse" x1="824.7424" y1="333.7813" x2="825.741" y2="333.7813" gradientTransform="matrix(132.9583 0 0 -323.0276 -109347.9219 108056.2656)">
+		<stop  offset="0" style="stop-color:#6E2B2F"/>
+		<stop  offset="1" style="stop-color:#E30138"/>
+	</linearGradient>
+	<path id="path3500" sketch:type="MSShapeGroup" fill="url(#path3500_1_)" d="M309.721,197.39
+		c-2.437,0.517-0.491-8.301-1.114-11.646c0.166-21.15-0.346-42.323,0.284-63.458c2.082-26.829,26.991-48.916,53.738-48.288h78.767
+		c-0.074,90.885,0.145,181.775-0.111,272.657c-1.039,26.834-24.992,49.833-51.682,50.309c-26.998,0.101-53.998,0.015-80.997,0.042
+		V272.707c18.44,15.129,43.5,17.484,66.472,17.525c17.318-0.006,34.535-2.676,51.353-6.67V260.79
+		c-18.953,9.446-41.234,15.446-62.244,10.019c-14.656-3.649-25.294-17.813-25.057-32.937c-1.698-15.729,7.522-32.335,22.979-37.011
+		c19.192-6.008,40.108-1.413,58.096,6.398c3.855,2.018,7.766,4.521,6.225-1.921v-17.899c-30.086-7.158-62.104-9.792-92.33-2.005
+		C325.352,187.902,316.828,191.645,309.721,197.39L309.721,197.39z"/>
+</g>
+</svg>

ui/src/components/icons/svg/maestro.svg

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="750px" height="471px"
+	 viewBox="0 0 750 471" enable-background="new 0 0 750 471" xml:space="preserve">
+<title>Slice 1</title>
+<desc>Created with Sketch.</desc>
+<g id="Page-1" sketch:type="MSPage">
+	<g id="maestro" sketch:type="MSLayerGroup">
+		<path id="Fill-1" sketch:type="MSShapeGroup" fill="#D9222A" d="M675,235.506c0,99.133-80.351,179.496-179.483,179.496
+			c-99.121,0-179.479-80.362-179.479-179.496c0-99.142,80.358-179.508,179.479-179.508C594.65,55.998,675,136.365,675,235.506"/>
+		<path id="Fill-2" sketch:type="MSShapeGroup" fill="#0097D0" d="M356.87,349.49c-4.958-6.014-9.524-12.359-13.675-19.009h63.612
+			c3.817-6.097,7.263-12.442,10.342-19.013h-84.292c-2.87-6.15-5.425-12.492-7.596-19h99.476c5.987-17.904,9.229-37.05,9.229-56.962
+			c0-13.046-1.392-25.763-4.028-38.013H320.074c1.392-6.479,3.142-12.816,5.209-19.008h99.441
+			c-2.184-6.508-4.721-12.85-7.592-19.004h-84.254c3.075-6.563,6.529-12.904,10.337-19.009h63.571
+			c-4.146-6.629-8.725-12.975-13.671-18.991h-36.225c5.57-6.767,11.629-13.117,18.112-19
+			c-31.854-28.884-74.138-46.483-120.517-46.483C155.359,55.998,75,136.365,75,235.506c0,99.133,80.358,179.496,179.487,179.496
+			c46.388,0,88.666-17.596,120.517-46.475c6.496-5.893,12.559-12.259,18.133-19.037H356.87"/>
+		<path id="Fill-3" sketch:type="MSShapeGroup" d="M651.074,335.544c0-3.2,2.596-5.796,5.801-5.796c3.199,0,5.791,2.596,5.791,5.796
+			c0,3.204-2.592,5.8-5.791,5.8C653.67,341.344,651.074,338.748,651.074,335.544L651.074,335.544L651.074,335.544z M656.875,339.952
+			c2.433,0,4.403-1.967,4.403-4.408c0-2.434-1.971-4.396-4.403-4.396c-2.434,0-4.409,1.962-4.409,4.396
+			C652.466,337.985,654.442,339.952,656.875,339.952L656.875,339.952L656.875,339.952z M656.087,338.09h-1.184v-5.092h2.15
+			c0.446,0,0.904,0.004,1.3,0.258c0.417,0.283,0.646,0.775,0.646,1.271c0,0.583-0.338,1.112-0.88,1.316l0.934,2.246h-1.316
+			l-0.775-2.009h-0.875V338.09L656.087,338.09z M656.087,335.211h0.658c0.246,0,0.505,0.016,0.726-0.101
+			c0.195-0.129,0.3-0.366,0.3-0.592c0-0.188-0.125-0.417-0.288-0.513c-0.212-0.125-0.541-0.1-0.762-0.1h-0.634V335.211
+			L656.087,335.211z"/>
+		<path id="Fill-4" sketch:type="MSShapeGroup" d="M372.446,284.006c-7.671,2.033-15.088,3.025-22.929,3.009
+			c-25.017-0.024-38.046-11.417-38.046-33.2c0-25.458,16.587-44.183,39.1-44.183c18.417,0,30.175,10.5,30.175,26.946
+			c0,5.458-0.796,10.771-2.745,18.296h-44.488c-1.583,10.633,6.188,15.305,19.413,15.305c7.925,0,15.092-1.426,23.024-4.613
+			L372.446,284.006L372.446,284.006z M360.483,239.856c0-1.608,2.476-13.034-10.399-13.284c-7.108,0-12.208,4.725-14.271,13.284
+			H360.483L360.483,239.856z"/>
+		<path id="Fill-5" sketch:type="MSShapeGroup" d="M387.517,234.865c0,9.404,5.296,15.9,17.329,20.737
+			c9.199,3.771,10.649,4.859,10.649,8.221c0,4.663-4.066,6.805-13.092,6.746c-6.778-0.05-12.962-0.871-20.262-2.896l-3.229,17.154
+			c6.487,1.504,15.588,2,23.65,2.188c24.024,0,35.116-7.866,35.116-24.866c0-10.217-4.625-16.234-16.033-20.713
+			c-9.538-3.809-10.658-4.638-10.658-8.083c0-4.05,3.779-6.1,11.149-6.1c4.463,0,10.579,0.413,16.38,1.108l3.258-17.242
+			c-5.912-0.825-14.883-1.483-20.075-1.483C396.25,209.635,387.442,221.094,387.517,234.865"/>
+		<path id="Fill-6" sketch:type="MSShapeGroup" d="M299.275,285.785h-18.662l0.445-7.82c-5.691,6.17-13.271,9.041-23.558,9.041
+			c-12.175,0-20.517-8.324-20.517-20.295c0-18.196,14.5-28.692,39.429-28.692c2.563,0,5.821,0.192,9.167,0.563
+			c0.691-2.433,0.879-3.479,0.879-4.808c0-4.979-3.921-6.813-14.412-6.813c-10.342,0.042-17.321,1.571-23.796,3.313l3.188-16.7
+			c11.195-2.846,18.529-3.941,26.825-3.941c19.304,0,29.499,7.566,29.499,21.796c0.167,3.795-1.158,11.413-1.82,14.746
+			C305.183,251.027,299.833,279.148,299.275,285.785L299.275,285.785L299.275,285.785z M282.896,252.594
+			c-2.366-0.242-3.396-0.313-5.013-0.313c-12.729,0-19.183,3.787-19.183,11.267c0,4.692,3.149,7.634,8.058,7.634
+			C275.905,271.182,282.508,263.531,282.896,252.594L282.896,252.594L282.896,252.594z"/>
+		<path id="Fill-7" sketch:type="MSShapeGroup" d="M477.004,284.606c-6.125,1.679-10.896,2.408-16.059,2.408
+			c-11.434,0-17.675-5.842-17.675-16.25c-0.358-2.858,2.434-16.059,3.066-19.737c0.634-3.691,10.538-57.492,10.538-57.492h22.212
+			l-3.362,17.8h11.392l-3.096,18.171h-11.441c0,0-6.279,31.529-6.279,33.933c0,3.825,2.316,5.488,7.633,5.488
+			c2.546,0,4.509-0.238,6.029-0.692L477.004,284.606"/>
+		<path id="Fill-8" sketch:type="MSShapeGroup" d="M576.25,209.631c-16.279,0-29,6.7-36.388,17.892l6.412-16.596
+			c-11.816-4.337-19.434,1.85-26.325,10.65c0,0-1.154,1.462-2.3,2.8v-13.05h-20.858c-2.825,23.029-7.82,46.379-11.729,69.446
+			l-0.942,5.021h22.438c2.125-11.708,3.875-21.213,5.617-28.788c4.767-20.787,12.787-27.141,24.829-24.333
+			c-2.779,5.979-4.305,12.892-4.305,20.554c0,18.58,10.092,33.788,35.15,33.788c25.287,0,43.596-13.509,43.596-44.309
+			C611.446,224.127,599.245,209.631,576.25,209.631L576.25,209.631L576.25,209.631z M569.721,268.947
+			c-7.926,0.125-12.729-6.524-12.729-16.471c0-11.791,7.013-25.112,18.275-25.112c9.087,0,12.199,7.204,12.199,14.879
+			C587.466,259.023,580.591,268.947,569.721,268.947L569.721,268.947L569.721,268.947z"/>
+		<path id="Fill-9" sketch:type="MSShapeGroup" d="M226.53,285.794h-22.342l13.279-69.954l-30.571,69.954H166.53l-3.726-69.55
+			l-13.32,69.55h-20.271l17.267-90.996h34.913l2.912,50.726l22.117-50.726h37.721L226.53,285.794"/>
+		<path id="Fill-10" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M613.15,274.385c0-3.195,2.596-5.795,5.796-5.795
+			c3.204,0,5.796,2.6,5.796,5.795c0,3.209-2.592,5.805-5.796,5.805C615.745,280.189,613.15,277.594,613.15,274.385L613.15,274.385
+			L613.15,274.385z M618.946,278.798c2.434,0,4.408-1.979,4.408-4.413c0-2.433-1.975-4.403-4.408-4.403s-4.408,1.971-4.408,4.403
+			C614.537,276.818,616.512,278.798,618.946,278.798L618.946,278.798L618.946,278.798z M618.162,276.932h-1.188v-5.084h2.15
+			c0.449,0,0.908,0,1.304,0.25c0.408,0.279,0.646,0.768,0.646,1.271c0,0.578-0.337,1.116-0.883,1.316l0.934,2.246h-1.317
+			l-0.771-2.009h-0.875V276.932L618.162,276.932z M618.162,274.044h0.658c0.242,0,0.504,0.017,0.725-0.097
+			c0.196-0.133,0.296-0.357,0.296-0.587c0-0.196-0.12-0.417-0.283-0.513c-0.212-0.129-0.541-0.096-0.763-0.096h-0.633V274.044
+			L618.162,274.044z"/>
+		<path id="Fill-11" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M378.054,278.398c-7.667,2.033-15.088,3.029-22.925,3.012
+			c-25.017-0.025-38.046-11.42-38.046-33.208c0-25.45,16.579-44.179,39.096-44.179c18.421,0,30.175,10.496,30.175,26.942
+			c0,5.467-0.8,10.771-2.741,18.3h-44.487c-1.584,10.629,6.179,15.308,19.408,15.308c7.925,0,15.087-1.424,23.029-4.616
+			L378.054,278.398L378.054,278.398z M366.091,234.248c0-1.604,2.472-13.033-10.399-13.279c-7.108,0-12.204,4.729-14.271,13.279
+			H366.091L366.091,234.248z"/>
+		<path id="Fill-12" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M393.129,229.252c0,9.408,5.287,15.9,17.325,20.746
+			c9.204,3.767,10.649,4.858,10.649,8.213c0,4.666-4.066,6.808-13.087,6.75c-6.784-0.047-12.967-0.871-20.263-2.896l-3.237,17.146
+			c6.491,1.516,15.596,2.012,23.653,2.199c24.025,0,35.121-7.871,35.121-24.871c0-10.217-4.629-16.236-16.041-20.712
+			c-9.538-3.809-10.654-4.638-10.654-8.083c0-4.05,3.783-6.1,11.146-6.1c4.471,0,10.583,0.417,16.388,1.113l3.25-17.246
+			c-5.913-0.825-14.879-1.483-20.066-1.483C401.854,204.027,393.05,215.481,393.129,229.252"/>
+		<path id="Fill-13" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M304.887,280.182h-18.666l0.45-7.821
+			c-5.696,6.158-13.275,9.033-23.559,9.033c-12.175,0-20.521-8.325-20.521-20.287c0-18.204,14.495-28.696,39.429-28.696
+			c2.563,0,5.816,0.192,9.171,0.563c0.691-2.433,0.875-3.475,0.875-4.808c0-4.983-3.917-6.813-14.408-6.813
+			c-10.342,0.042-17.321,1.575-23.796,3.313l3.184-16.696c11.199-2.85,18.529-3.946,26.829-3.946
+			c19.304,0,29.495,7.567,29.495,21.792c0.167,3.8-1.158,11.412-1.816,14.754C310.791,245.419,305.442,273.539,304.887,280.182
+			L304.887,280.182L304.887,280.182z M288.5,246.985c-2.358-0.245-3.392-0.313-5.013-0.313c-12.721,0-19.18,3.788-19.18,11.267
+			c0,4.695,3.154,7.633,8.055,7.633C281.517,265.572,288.12,257.919,288.5,246.985L288.5,246.985L288.5,246.985z"/>
+		<path id="Fill-14" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M482.608,279.002c-6.12,1.676-10.896,2.408-16.054,2.408
+			c-11.434,0-17.671-5.846-17.671-16.254c-0.362-2.854,2.434-16.059,3.063-19.737c0.634-3.692,10.537-57.492,10.537-57.492h22.209
+			l-3.354,17.8h11.392l-3.096,18.171h-11.441c0,0-6.283,31.53-6.283,33.933c0,3.825,2.32,5.479,7.633,5.479
+			c2.542,0,4.509-0.229,6.029-0.691L482.608,279.002"/>
+		<path id="Fill-15" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M593.079,236.635c0,16.775-6.88,26.709-17.755,26.709
+			c-7.921,0.112-12.725-6.525-12.725-16.475c0-11.792,7.008-25.113,18.271-25.113C589.962,221.756,593.079,228.969,593.079,236.635
+			L593.079,236.635L593.079,236.635z M617.058,237.102c0-18.579-12.208-33.079-35.195-33.079c-26.45,0-43.55,17.625-43.55,43.596
+			c0,18.578,10.083,33.791,35.149,33.791C598.75,281.41,617.058,267.898,617.058,237.102L617.058,237.102L617.058,237.102z"/>
+		<path id="Fill-16" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M502.396,205.719c-2.821,23.029-7.816,46.375-11.721,69.45
+			l-0.946,5.021h22.434c8.088-44.558,10.8-57.254,27.741-52.783l8.15-21.087c-11.816-4.337-19.425,1.854-26.309,10.658
+			c0.621-3.962,1.792-7.783,1.509-11.258H502.396"/>
+		<path id="Fill-17" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M232.138,280.189H209.8l13.275-69.958L192.5,280.189h-20.362
+			l-3.726-69.554l-13.32,69.554h-20.271l17.263-91h34.921l1.846,56.334l24.575-56.334h36.325L232.138,280.189"/>
+	</g>
+</g>
+</svg>

ui/src/components/icons/svg/mastercard.svg

@@ -18,6 +18,14 @@
 			c4.154,6.63,8.729,12.98,13.684,18.996h36.259c-5.571,6.771-11.634,13.134-18.13,19.013
 			c31.858,28.866,74.117,46.454,120.496,46.454C594.629,415.004,675,334.642,675,235.5C675,136.371,594.629,55.996,495.491,55.996"
 			/>
+		<path id="Fill-3" sketch:type="MSShapeGroup" d="M651.074,335.559c0-3.2,2.592-5.801,5.796-5.801s5.796,2.601,5.796,5.801
+			c0,3.199-2.592,5.8-5.796,5.8S651.074,338.758,651.074,335.559L651.074,335.559L651.074,335.559z M656.87,339.967
+			c2.434,0,4.408-1.975,4.408-4.408c0-2.438-1.975-4.404-4.408-4.404c-2.438,0-4.404,1.967-4.404,4.404
+			C652.466,337.992,654.433,339.967,656.87,339.967L656.87,339.967L656.87,339.967z M656.087,338.108H654.9v-5.096h2.15
+			c0.45,0,0.908,0,1.304,0.254c0.413,0.279,0.646,0.771,0.646,1.279c0,0.571-0.338,1.104-0.884,1.313l0.938,2.25h-1.316
+			l-0.779-2.017h-0.871V338.108L656.087,338.108z M656.087,335.217h0.658c0.246,0,0.505,0.021,0.726-0.1
+			c0.195-0.125,0.296-0.359,0.296-0.584c0-0.195-0.121-0.421-0.288-0.517c-0.208-0.129-0.537-0.101-0.758-0.101h-0.634V335.217
+			L656.087,335.217z"/>
 		<path id="Fill-4" sketch:type="MSShapeGroup" d="M212.587,255.154c-2.046-0.238-2.945-0.301-4.35-0.301
 			c-11.046,0-16.638,3.788-16.638,11.268c0,4.612,2.729,7.545,6.987,7.545C206.525,273.666,212.245,266.108,212.587,255.154
 			L212.587,255.154L212.587,255.154z M226.758,288.15h-16.146l0.371-7.676c-4.926,6.066-11.496,8.95-20.426,8.95
@@ -108,6 +116,14 @@
 		<path id="Fill-21" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M396.5,208.704c-2.446,22.917-6.779,46.13-10.167,69.063
 			l-0.888,4.976h19.5c6.963-45.275,8.646-54.117,19.571-53.009c1.75-9.267,4.991-17.383,7.399-21.479
 			c-8.154-1.7-12.717,2.913-18.679,11.675c0.471-3.788,1.325-7.467,1.162-11.225H396.5"/>
+		<path id="Fill-22" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M651.067,276.945c0-3.212,2.596-5.799,5.796-5.799
+			c3.204,0,5.796,2.587,5.796,5.799c0,3.196-2.592,5.797-5.796,5.797C653.662,282.742,651.067,280.142,651.067,276.945
+			L651.067,276.945L651.067,276.945z M656.863,281.35c2.438,0,4.404-1.975,4.404-4.404c0-2.433-1.967-4.408-4.404-4.408
+			c-2.434,0-4.408,1.976-4.408,4.408C652.454,279.375,654.429,281.35,656.863,281.35L656.863,281.35L656.863,281.35z
+			 M656.079,279.479h-1.188v-5.082h2.153c0.446,0,0.909,0.008,1.296,0.254c0.417,0.283,0.654,0.766,0.654,1.274
+			c0,0.575-0.337,1.112-0.888,1.317l0.942,2.236h-1.321l-0.779-2.008h-0.87V279.479L656.079,279.479z M656.079,276.6h0.653
+			c0.246,0,0.513,0.018,0.729-0.1c0.196-0.125,0.296-0.362,0.296-0.588c0-0.188-0.116-0.412-0.287-0.524
+			c-0.204-0.116-0.542-0.083-0.763-0.083h-0.629V276.6L656.079,276.6z"/>
 	</g>
 </g>
 </svg>

ui/src/components/icons/svg/notification-action.svg

@@ -0,0 +1,18 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <circle id="path-1" cx="9" cy="9" r="9"></circle>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-activity-feed-1.2" transform="translate(-229.000000, -717.000000)">
+            <g id="event" transform="translate(213.000000, 702.000000)">
+                <g id="icon:-user-action" transform="translate(16.000000, 15.000000)">
+                    <use id="Oval" stroke="#646464" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
+                    <path d="M9.16666667,9.53838165 C8.596,9.53838165 8.06733333,9.37568559 7.598,9.11398725 C6.08133333,9.70384701 5,11.2193435 5,13 L13,13 C13,11.2954991 12.0106667,9.83261921 10.596,9.19221982 C10.1613333,9.40753248 9.68066667,9.53838165 9.16666667,9.53838165 Z M9.16666667,8.15394201 C10.2713333,8.15394201 11.1666667,7.22415133 11.1666667,6.07697101 C11.1666667,4.92979069 10.2713333,4 9.16666667,4 C8.062,4 7.16666667,4.92979069 7.16666667,6.07697101 C7.16666667,7.22415133 8.062,8.15394201 9.16666667,8.15394201 Z" id="icon:-user" fill="#646464"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/notification-alert.svg

@@ -0,0 +1,12 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Service-rollback-1.2" transform="translate(-213.000000, -1151.000000)">
+            <g id="alert" transform="translate(211.000000, 1148.000000)">
+                <circle id="Oval" fill="#DA4B42" cx="11" cy="12" r="9"></circle>
+                <text id="!" font-family="LibreFranklin-Black, Libre Franklin" font-size="11" font-weight="700" line-spacing="24" fill="#FFFFFF">
+                    <tspan x="9.9765" y="14">!</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/notification-confirmation-inverted.svg

@@ -0,0 +1,18 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <circle id="path-1" cx="9" cy="9" r="9"></circle>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-activity-feed-1.2" transform="translate(-229.000000, -429.000000)">
+            <g id="event" transform="translate(213.000000, 414.000000)">
+                <g id="icon:-confirmation" transform="translate(16.000000, 15.000000)">
+                    <use id="Oval" stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
+                    <polygon id="tick" fill="#FFFFFF" points="12.017 5.00007 8.121 10.33607 6.634 8.22707 5 9.37907 8.091 13.76807 13.632 6.17907"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/notification-success.svg

@@ -0,0 +1,12 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-activity-feed-1.1.2" transform="translate(-213.000000, -429.000000)">
+            <g id="event" transform="translate(213.000000, 429.000000)">
+                <g id="icon:-confirmation">
+                    <circle id="Oval" fill="#00AF66" cx="9" cy="9" r="9"></circle>
+                    <polygon id="tick" fill="#FFFFFF" points="12.017 5.00007 8.121 10.33607 6.634 8.22707 5 9.37907 8.091 13.76807 13.632 6.17907"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/notification-warning-inverted.svg

@@ -0,0 +1,20 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <circle id="path-1" cx="11" cy="12" r="9"></circle>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-activity-feed-1.2" transform="translate(-229.000000, -831.000000)">
+            <g id="event" transform="translate(213.000000, 816.000000)">
+                <g id="icon:-error" transform="translate(14.000000, 12.000000)">
+                    <use id="Oval" stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
+                    <text id="!" font-family="LibreFranklin-Black, Libre Franklin" font-size="11" font-weight="700" line-spacing="24" fill="#FFFFFF">
+                        <tspan x="9.9765" y="14">!</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/notification-warning.svg

@@ -0,0 +1,20 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <circle id="path-1" cx="11" cy="12" r="9"></circle>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Project:-activity-feed-1.1.2" transform="translate(-213.000000, -657.000000)">
+            <g id="event" transform="translate(211.000000, 654.000000)">
+                <g id="icon:-error">
+                    <use id="Oval" stroke="#E4A700" mask="url(#mask-2)" stroke-width="4" fill="#E4A700" xlink:href="#path-1"></use>
+                    <text id="!" font-family="LibreFranklin-Black, Libre Franklin" font-size="11" font-weight="700" line-spacing="24" fill="#FFFFFF">
+                        <tspan x="9.9765" y="14">!</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/paypal.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="780px" height="501px"
+	 viewBox="0 0 780 501" enable-background="new 0 0 780 501" xml:space="preserve">
+<title>amex-outline</title>
+<desc>Created with Sketch.</desc>
+<g>
+	<path fill="#003087" d="M168.379,169.853c-8.399-5.774-19.359-8.668-32.88-8.668H83.153c-4.145,0-6.435,2.073-6.87,6.215
+		L55.018,300.883c-0.221,1.311,0.107,2.51,0.981,3.6c0.869,1.092,1.962,1.635,3.271,1.635h24.864c4.361,0,6.758-2.068,7.198-6.215
+		l5.888-35.986c0.215-1.744,0.982-3.162,2.291-4.254c1.308-1.09,2.944-1.803,4.907-2.13c1.963-0.324,3.814-0.487,5.562-0.487
+		c1.743,0,3.814,0.11,6.217,0.327c2.397,0.218,3.925,0.324,4.58,0.324c18.756,0,33.478-5.285,44.167-15.866
+		c10.684-10.577,16.032-25.243,16.032-44.004C180.976,184.96,176.774,175.636,168.379,169.853z M141.389,209.933
+		c-1.094,7.635-3.926,12.649-8.506,15.049c-4.581,2.403-11.124,3.598-19.629,3.598l-10.797,0.327l5.563-35.007
+		c0.434-2.397,1.851-3.597,4.252-3.597h6.218c8.72,0,15.049,1.257,18.975,3.761C141.389,196.574,142.698,201.865,141.389,209.933z"
+		/>
+	<path fill="#009CDE" d="M720.794,161.185h-24.208c-2.405,0-3.821,1.2-4.253,3.6l-21.267,136.099l-0.328,0.654
+		c0,1.096,0.437,2.127,1.311,3.109c0.868,0.98,1.963,1.471,3.27,1.471h21.595c4.138,0,6.429-2.068,6.871-6.215l21.265-133.813
+		v-0.325C725.049,162.712,723.627,161.185,720.794,161.185z"/>
+	<path fill="#003087" d="M428.31,213.856c0-1.088-0.439-2.126-1.306-3.106c-0.875-0.981-1.858-1.474-2.945-1.474h-25.192
+		c-2.404,0-4.366,1.096-5.889,3.271l-34.679,51.04l-14.395-49.075c-1.095-3.487-3.492-5.236-7.197-5.236h-24.541
+		c-1.093,0-2.074,0.492-2.941,1.474c-0.875,0.98-1.309,2.019-1.309,3.106c0,0.44,2.127,6.871,6.379,19.303
+		c4.252,12.435,8.832,25.849,13.74,40.245c4.908,14.393,7.469,22.031,7.688,22.898c-17.886,24.43-26.826,37.517-26.826,39.259
+		c0,2.838,1.416,4.254,4.253,4.254h25.192c2.398,0,4.36-1.088,5.889-3.27l83.427-120.399
+		C428.092,215.713,428.31,214.953,428.31,213.856z"/>
+	<path fill="#009CDE" d="M662.887,209.276h-24.866c-3.055,0-4.904,3.6-5.558,10.798c-5.677-8.721-16.031-13.088-31.083-13.088
+		c-15.704,0-29.066,5.89-40.077,17.668c-11.016,11.778-16.521,25.631-16.521,41.551c0,12.871,3.761,23.121,11.285,30.752
+		c7.525,7.639,17.612,11.451,30.266,11.451c6.323,0,12.757-1.311,19.3-3.926c6.544-2.617,11.665-6.105,15.379-10.469
+		c0,0.219-0.222,1.199-0.655,2.943c-0.44,1.748-0.655,3.059-0.655,3.926c0,3.494,1.414,5.234,4.254,5.234h22.576
+		c4.138,0,6.541-2.068,7.194-6.215l13.415-85.39c0.215-1.309-0.112-2.507-0.982-3.599
+		C665.284,209.823,664.196,209.276,662.887,209.276z M620.193,273.729c-5.562,5.453-12.268,8.178-20.12,8.178
+		c-6.328,0-11.449-1.742-15.377-5.234c-3.927-3.484-5.89-8.283-5.89-14.395c0-8.065,2.726-14.886,8.18-20.447
+		c5.447-5.562,12.214-8.343,20.285-8.343c6.101,0,11.173,1.8,15.212,5.397c4.032,3.6,6.054,8.563,6.054,14.889
+		C628.536,261.625,625.754,268.279,620.193,273.729z"/>
+	<path fill="#003087" d="M291.231,209.276h-24.865c-3.058,0-4.908,3.6-5.563,10.798c-5.889-8.721-16.25-13.088-31.081-13.088
+		c-15.704,0-29.065,5.89-40.078,17.668c-11.016,11.778-16.521,25.631-16.521,41.551c0,12.871,3.763,23.121,11.288,30.752
+		c7.525,7.639,17.61,11.451,30.262,11.451c6.104,0,12.433-1.311,18.975-3.926c6.543-2.617,11.778-6.105,15.704-10.469
+		c-0.875,2.617-1.309,4.908-1.309,6.869c0,3.494,1.417,5.234,4.253,5.234h22.574c4.141,0,6.543-2.068,7.198-6.215l13.413-85.39
+		c0.215-1.309-0.111-2.507-0.981-3.599C293.627,209.823,292.537,209.276,291.231,209.276z M248.535,273.891
+		c-5.563,5.35-12.382,8.016-20.447,8.016c-6.329,0-11.4-1.742-15.214-5.234c-3.819-3.484-5.726-8.283-5.726-14.395
+		c0-8.065,2.725-14.886,8.18-20.447c5.449-5.562,12.211-8.343,20.284-8.343c6.104,0,11.175,1.8,15.214,5.397
+		c4.032,3.6,6.052,8.563,6.052,14.889C256.878,261.844,254.097,268.553,248.535,273.891z"/>
+	<path fill="#009CDE" d="M540.036,169.853c-8.398-5.774-19.356-8.668-32.879-8.668h-52.019c-4.365,0-6.765,2.073-7.198,6.215
+		l-21.265,133.483c-0.221,1.311,0.106,2.51,0.981,3.6c0.866,1.092,1.962,1.635,3.271,1.635h26.826c2.617,0,4.361-1.416,5.235-4.252
+		l5.89-37.949c0.216-1.744,0.98-3.162,2.29-4.254c1.309-1.09,2.943-1.803,4.908-2.13c1.962-0.324,3.813-0.487,5.562-0.487
+		c1.743,0,3.814,0.11,6.214,0.327c2.399,0.218,3.93,0.324,4.58,0.324c18.759,0,33.479-5.285,44.168-15.866
+		c10.687-10.577,16.031-25.243,16.031-44.004C552.632,184.96,548.431,175.636,540.036,169.853z M506.502,223.673
+		c-4.799,3.271-11.997,4.906-21.592,4.906l-10.47,0.327l5.563-35.007c0.432-2.397,1.849-3.597,4.252-3.597h5.887
+		c4.797,0,8.614,0.218,11.454,0.653c2.831,0.439,5.561,1.799,8.178,4.089c2.619,2.29,3.926,5.618,3.926,9.979
+		C513.7,214.185,511.298,220.399,506.502,223.673z"/>
+</g>
+</svg>

ui/src/components/icons/svg/settings.svg

@@ -1,9 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
-    <title>icon: settings </title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="project:-adding-metrics-1.4" transform="translate(-979.000000, -413.000000)" fill="#FFFFFF">
             <g id="metric:-cpu" transform="translate(208.000000, 391.000000)">

ui/src/components/icons/svg/upload.svg

@@ -0,0 +1,12 @@
+<svg width="18px" height="24px" viewBox="0 0 18 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="creating-a-project-1.8-" transform="translate(-229.000000, -515.000000)" fill="#646464">
+            <g id="button:-upload" transform="translate(213.000000, 504.000000)">
+                <g id="icon:-upload" transform="translate(16.000000, 11.000000)">
+                    <path d="M5.0004,-0.0003 L0.0004,4.0007 L0.0004,23.9997 L18.0004,23.9997 L18.0004,-0.0003 L5.0004,-0.0003 Z M1.9994,4.9997 L5.0004,4.9997 L5.0004,2.0007 L16.0004,2.0007 L16.0004,22.0007 L1.9994,22.0007 L1.9994,4.9997 Z" id="Fill-1"></path>
+                    <path d="M9,9.9463 L9.044,10.0003 L8.956,10.0003 L9,9.9463 Z M8,11.1533 L8,17.0003 L10,17.0003 L10,11.1533 L11.23,12.6383 L12.77,11.3623 L9,6.8113 L5.23,11.3623 L6.77,12.6383 L8,11.1533 Z" id="Fill-2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ui/src/components/icons/svg/visa.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="750px" height="471px"
+	 viewBox="0 0 750 471" enable-background="new 0 0 750 471" xml:space="preserve">
+<title>Slice 1</title>
+<desc>Created with Sketch.</desc>
+<g id="visa" sketch:type="MSLayerGroup">
+	<path id="Shape" sketch:type="MSShapeGroup" fill="#0E4595" d="M278.198,334.228l33.36-195.763h53.358l-33.384,195.763H278.198
+		L278.198,334.228z"/>
+	<path id="path13" sketch:type="MSShapeGroup" fill="#0E4595" d="M524.307,142.687c-10.57-3.966-27.135-8.222-47.822-8.222
+		c-52.725,0-89.863,26.551-90.18,64.604c-0.297,28.129,26.514,43.821,46.754,53.185c20.77,9.597,27.752,15.716,27.652,24.283
+		c-0.133,13.123-16.586,19.116-31.924,19.116c-21.355,0-32.701-2.967-50.225-10.274l-6.877-3.112l-7.488,43.823
+		c12.463,5.466,35.508,10.199,59.438,10.445c56.09,0,92.502-26.248,92.916-66.884c0.199-22.27-14.016-39.216-44.801-53.188
+		c-18.65-9.056-30.072-15.099-29.951-24.269c0-8.137,9.668-16.838,30.559-16.838c17.447-0.271,30.088,3.534,39.936,7.5l4.781,2.259
+		L524.307,142.687"/>
+	<path id="Path" sketch:type="MSShapeGroup" fill="#0E4595" d="M661.615,138.464h-41.23c-12.773,0-22.332,3.486-27.941,16.234
+		l-79.244,179.402h56.031c0,0,9.16-24.121,11.232-29.418c6.123,0,60.555,0.084,68.336,0.084c1.596,6.854,6.492,29.334,6.492,29.334
+		h49.512L661.615,138.464L661.615,138.464z M596.198,264.872c4.414-11.279,21.26-54.724,21.26-54.724
+		c-0.314,0.521,4.381-11.334,7.074-18.684l3.607,16.878c0,0,10.217,46.729,12.352,56.527h-44.293V264.872L596.198,264.872z"/>
+	<path id="path16" sketch:type="MSShapeGroup" fill="#0E4595" d="M232.903,138.464L180.664,271.96l-5.565-27.129
+		c-9.726-31.274-40.025-65.157-73.898-82.12l47.767,171.204l56.455-0.064l84.004-195.386L232.903,138.464"/>
+	<path id="path18" sketch:type="MSShapeGroup" fill="#F2AE14" d="M131.92,138.464H45.879l-0.682,4.073
+		c66.939,16.204,111.232,55.363,129.618,102.415l-18.709-89.96C152.877,142.596,143.509,138.896,131.92,138.464"/>
+</g>
+</svg>

ui/src/components/icons/upload.js

@@ -0,0 +1,9 @@
+import { Baseline } from '../../shared/composers';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import UploadIcon from './svg/upload.svg';
+
+export default Baseline(
+  UploadIcon
+);

ui/src/components/label/index.js

@@ -1,11 +1,11 @@
-import { Baseline } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import { remcalc } from '../../shared/functions';
 import styled from 'styled-components';
 
 const Label = styled.label`
+  ${typography.semibold};
   font-size: ${remcalc(16)};
-  font-weight: 600;
   font-style: normal;
   font-stretch: normal;
   color: ${colors.base.secondary};

ui/src/components/list/description.js

@@ -1,14 +1,15 @@
 import { Subscriber } from 'react-broadcast';
-import { Baseline } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import { remcalc, is, isNot } from '../../shared/functions';
 import styled from 'styled-components';
 import Title from './title';
 import React from 'react';
 
 const StyledTitle = styled(Title)`
-  font-weight: normal;
   flex-grow: 2;
 
+  ${typography.normal};
+
   ${isNot('collapsed')`
     position: absolute;
     bottom: 0;

ui/src/components/list/subtitle.js

@@ -1,6 +1,6 @@
 import { Subscriber } from 'react-broadcast';
 import styled from 'styled-components';
-import { Baseline, regular } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import { remcalc, is } from '../../shared/functions';
 import { colors } from '../../shared/constants';
 import Title from './title';
@@ -10,7 +10,7 @@ const Span = styled.span`
   display: inline-block;
   flex-direction: column;
 
-  font-weight: normal;
+  ${typography.normal};
   font-style: normal;
   font-stretch: normal;
   font-size: ${remcalc(14)};
@@ -30,7 +30,7 @@ const StyledTitle = styled(Title)`
   display: inline-block;
   padding: 0 ${remcalc(18)};
 
-  ${regular};
+  ${typography.normal};
 
   ${is('collapsed')`
     display: flex;

ui/src/components/list/title.js

@@ -1,6 +1,6 @@
 import { Subscriber } from 'react-broadcast';
 import isString from 'lodash.isstring';
-import { Baseline, bold } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import { remcalc, is } from '../../shared/functions';
 import styled from 'styled-components';
@@ -11,7 +11,7 @@ const Container = styled.div`
   line-height: 1.5;
   color: ${colors.base.secondary};
 
-  ${bold}
+  ${typography.bold}
 
   display: flex;
   flex-direction: row;

ui/src/components/metric/button-icon.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { remcalc } from '../../shared/functions';
+import { colors } from '../../shared/constants';
+import { Baseline } from '../../shared/composers';
+import Button from '../button';
+
+const MetricButtonIcon = styled(Button)`
+  position: relative;
+  display: flex;
+  margin: 0;
+  padding: ${remcalc(18)} ${remcalc(24)};
+  float: right;
+  background-color: ${colors.base.primaryDesaturated};
+  line-height: 1.5;
+  border: none;
+  border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
+  cursor: pointer;
+  top: auto;
+  right: auto;
+  margin-left: 0 !important;
+  min-width: auto;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:active:hover,
+  &:active:focus {
+    background-color: ${colors.base.primaryHover};
+    border: none;
+    border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover};
+  }
+`;
+
+export default Baseline(
+  MetricButtonIcon
+);

ui/src/components/metric/close-button.js

@@ -1,36 +1,20 @@
-import React from 'react';
 import styled from 'styled-components';
-import { remcalc } from '../../shared/functions';
 import { colors } from '../../shared/constants';
 import { Baseline } from '../../shared/composers';
-import CloseIcon from './close.svg';
+import ButtonIcon from './button-icon';
+import CloseIcon from '../icons/close';
+import React from 'react';
 
-const StyledButton = styled.button`
+const StyledCloseIcon = styled(CloseIcon)`
-  position: relative;
-  display: flex;
-  margin: 0;
-  padding: ${remcalc(18)} ${remcalc(24)};
-  float: right;
-  background-color: ${colors.base.primaryDesaturated};
-  line-height: 1.5;
-  border: none;
-  border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
-  cursor: pointer;
-`;
-
-const StyledIcon = styled(CloseIcon)`
   fill: ${colors.base.white};
 `;
 
-const AddMetricButton = (props) => (
+const CloseButton = (props) => (
-  <StyledButton
+  <ButtonIcon name='close-button' {...props}>
-    name='close-button'
+    <StyledCloseIcon />
-    {...props}
+  </ButtonIcon>
-  >
-    <StyledIcon />
-  </StyledButton>
 );
 
 export default Baseline(
-  AddMetricButton
+  CloseButton
 );

ui/src/components/metric/select.js

@@ -31,8 +31,18 @@ const StyledSelect = styled.select`
   background-color: ${colors.base.primaryDesaturated};
   border: none;
   border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
-  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:active:hover,
+  &:active:focus {
+    background-color: ${colors.base.primaryHover};
+    border: none;
+    border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover};
+  }
 `;
 
 const Select = ({

ui/src/components/metric/settings-button.js

@@ -3,33 +3,10 @@ import styled from 'styled-components';
 import { remcalc } from '../../shared/functions';
 import { colors } from '../../shared/constants';
 import { Baseline } from '../../shared/composers';
-import Button from '../button';
+import ButtonIcon from './button-icon';
-import SettingsIcon from './icon-settings.svg';
+import SettingsIcon from '../icons/settings';
 
-const StyledButton = styled(Button)`
+const StyledSettingsIcon = styled(SettingsIcon)`
-  position: relative;
-  display: flex;
-  margin: 0;
-  padding: ${remcalc(18)} ${remcalc(24)};
-  color: ${colors.base.white};
-  float: right;
-  background-color: ${colors.base.primaryDesaturated};
-  line-height: 1.5;
-  border: none;
-  border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
-
-  &:hover,
-  &:focus,
-  &:active,
-  &:active:hover,
-  &:active:focus {
-    background-color: ${colors.base.primaryLight};
-    border: none;
-    border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover};
-  }
-`;
-
-const StyledIcon = styled(SettingsIcon)`
   fill: ${colors.base.primary};
   margin-right: ${remcalc(12)};
 `;
@@ -43,14 +20,14 @@ const AddMetricButton = ({
   const handleClick = (e) => onClick(metric);
 
   return (
-    <StyledButton
+    <ButtonIcon
       name='add-metric-button'
       onClick={handleClick}
       {...props}
     >
-      <StyledIcon />
+      <StyledSettingsIcon />
       {children}
-    </StyledButton>
+    </ButtonIcon>
   );
 };
 

ui/src/components/metric/title.js

@@ -1,4 +1,4 @@
-import { Baseline } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import { remcalc } from '../../shared/functions';
 import styled from 'styled-components';
@@ -8,8 +8,9 @@ const Title = styled.h3`
   display: flex;
   align-self: flex-start;
   margin: ${remcalc(18)} auto ${remcalc(18)} ${remcalc(24)} !important;
+
+  ${typography.normal};
   font-size: ${remcalc(16)};
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5;
   color: ${colors.base.white};

ui/src/components/mini-metric/subtitle.js

@@ -1,5 +1,5 @@
 import { remcalc } from '../../shared/functions';
-import { Baseline } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import styled from 'styled-components';
 
@@ -7,8 +7,9 @@ const Subtitle = styled.p`
   margin: 0;
   text-align: right;
   font-size: ${remcalc(12)};
+
+  ${typography.normal};
   line-height: ${remcalc(18)};
-  font-weight: normal;
   font-style: normal;
   font-stretch: normal;
   color: ${colors.regular};

ui/src/components/mini-metric/title.js

@@ -1,17 +1,19 @@
 import { remcalc } from '../../shared/functions';
-import { Baseline } from '../../shared/composers';
+import { Baseline, typography } from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import styled from 'styled-components';
 
 const Title = styled.h3`
   margin: 0;
+  margin-bottom: ${remcalc(3)} !important;
+
+  ${typography.semibold};
   text-align: right;
   font-size: ${remcalc(14)};
-  font-weight: 600;
   font-style: normal;
   line-height: 1.29;
+
   color: ${colors.semibold};
-  margin-bottom: ${remcalc(3)} !important;
 `;
 
 export default Baseline(

ui/src/components/modal/story.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@kadira/storybook';
 import Modal from './';
-import Close from '../close';
+import { Close } from '../icons';
 import React from 'react';
 
 storiesOf('Modal', module)

ui/src/components/notification/index.js

@@ -1,9 +1,10 @@
 import { remcalc } from '../../shared/functions';
 import { colors } from '../../shared/constants';
 import { baseBox, pseudoEl, Baseline } from '../../shared/composers';
+import { ButtonIcon } from '../button';
+import CloseIcon from '../icons/close';
 import styled from 'styled-components';
 import React from 'react';
-import Close from '../close';
 
 const StyledNotification = styled.div`
   display: inline-block;
@@ -35,7 +36,9 @@ const Notificaton = ({
   ...props
 }) => {
   const renderClose = !close ? null : (
-    <Close onClick={close} />
+    <ButtonIcon>
+      <CloseIcon onClick={close} />
+    </ButtonIcon>
   );
 
   return (

ui/src/components/payment-card/payment-card.js

@@ -3,14 +3,10 @@
 import { remcalc } from '../../shared/functions';
 import { Baseline } from '../../shared/composers';
 import { boxes, colors } from '../../shared/constants';
-import MastercardIcon from './mastercard.svg';
+import PaymentCardIcon, { types } from '../icons/payment-card';
 import styled from 'styled-components';
 import React from 'react';
 
-const icons = {
-  mastercard: MastercardIcon
-};
-
 const sizes = {
   small: {
     width: 50,
@@ -45,20 +41,15 @@ const PaymentCard = ({
   size = 'small',
   ...props
 }) => {
-  const icon = React.createElement(
-    icons[type],
-    sizes[size]
-  );
-
   const view = {
     small: () => (
       <SmallCard {...props}>
-        {icon}
+        <PaymentCardIcon type={type} {...sizes[size]} />
       </SmallCard>
     ),
     large: () => (
       <LargeCard {...props}>
-        {icon}
+        <PaymentCardIcon type={type} {...sizes[size]} />
       </LargeCard>
     )
   };
@@ -71,9 +62,7 @@ PaymentCard.propTypes = {
     'small',
     'large'
   ]),
-  type: React.PropTypes.oneOf([
+  type: React.PropTypes.oneOf(types).isRequired
-    'mastercard'
-  ]).isRequired
 };
 
 export default Baseline(

ui/src/components/topology-old/index.js

@@ -1,415 +0,0 @@
-import styled from 'styled-components';
-import { remcalc } from '../../shared/functions';
-import { Baseline } from '../../shared/composers';
-import { colors } from '../../shared/constants';
-import React from 'react';
-import d3 from 'd3';
-
-/* eslint-disable */
-function rightRoundedRect(x, y, width, height, radius) {
-  return 'M' + x + ',' + y // Move to top left (absolute)
-       + 'h ' + (width - 2 * radius) // Horizontal line to (relative)
-       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
-       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
-       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
-       + 'h ' + (2 * radius - width) // Horizontal lint to (relative)
-       + 'z '; // path back to start
-}
-/* eslint-enable */
-
-/* eslint-disable */
-function leftRoundedRect(x, y, width, height, radius) {
-  return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
-       + 'v ' + height // Vertical line to (relative)
-       + 'h ' + (2 * radius - width) // Horizontal line to (relative)
-       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
-       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
-       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
-       + 'z '; // path back to start
-}
-/* eslint-enable */
-
-function topRoundedRect(x, y, width, height, radius) {
-  return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-left
-       + 'v ' + -(height - radius) // Vertical line to (relative)
-       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arc
-       + 'h ' + -(2 * radius  - width) // Horizontal line to (relative)
-       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
-       + 'v ' + (height - radius) // Vertical line to (relative)
-       + 'h ' + (2 * radius - width) // Horizontal line to (relative)
-       + 'z '; // path back to start
-}
-
-function bottomRoundedRect(x, y, width, height, radius) {
-  return 'M' + x + ',' + -(y - (height - 2 * radius)) // Move to (absolute) start at bottom-right
-       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
-       + 'h ' + (width) // Horizontal line to (relative)
-       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
-       + 'a ' + -radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arc
-       + 'h ' + (2 * radius - width) // Horizontal line to (relative)
-       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
-       + 'z '; // path back to start
-}
-
-/* eslint-disable */
-function rect(x, y, width, height) {
-  return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right
-       + 'v ' + -(height) // Vertical line to (relative)
-       + 'h ' + width // Horizontal line to (relative)
-       + 'v ' + height // Vertical line to (relative)
-       + 'h ' + -(width) // Horizontal line to (relative)
-       + 'z '; // path back to start
-}
-/* eslint-enable */
-
-const StyledSVGContainer = styled.svg`
-  & {
-    .links line {
-      stroke: #343434;
-      stroke-opacity: 1;
-    }
-
-    .health, .health_warn {
-      font-family: "LibreFranklin";
-      font-size: ${remcalc(12)};
-      font-weight: bold;
-      font-style: normal;
-      font-stretch: normal;
-      text-align: center;
-    }
-
-    .health_warn {
-      font-size: ${remcalc(15)};
-    }
-
-    .stat {
-      font-family: "LibreFranklin";
-      font-size: ${remcalc(12)};
-      font-weight: normal;
-      font-style: normal;
-      font-stretch: normal;
-      line-height: 1.5;
-    }
-
-    .node_statistics {
-      font-family: "LibreFranklin";
-      font-size: ${remcalc(12)};
-      font-weight: normal;
-      font-style: normal;
-      font-stretch: normal;
-      line-height: 1.5;
-    }
-
-    .node_statistics p {
-      margin: 0 0 0 0;
-      color: rgba(255, 255, 255, 0.8);
-    }
-
-    .primary, .secondary {
-      font-family: "LibreFranklin";
-      font-size: ${remcalc(12)};
-      font-weight: normal;
-      font-style: normal;
-      font-stretch: normal;
-      line-height: 1.5;
-    }
-
-    .info_text {
-      font-family: "LibreFranklin";
-      font-size: ${remcalc(16)};
-      font-weight: 600;
-      font-style: normal;
-      font-stretch: normal;
-      line-height: 1.5;
-    }
-  }
-`;
-
-class TopologyGraph extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.svg = null;
-
-    const {
-      width,
-      height
-    } = props;
-
-    this.simulation = d3.forceSimulation()
-      .force('charge', d3.forceManyBody()
-        .strength(() => -50)
-        .distanceMin(() => 30))
-      .force('link', d3.forceLink().distance(() => 200).id((d) => d.id))
-      // TODO manually handle looking for collisions in the tick, we then get the BBox
-      // and keep moving things for a while to try to get a fit.
-      .force('collide',
-        d3.forceCollide().radius((d) => 220 + 0.5).iterations(15))
-      .force('center', d3.forceCenter(width * 1/3, height * 1/3));
-  }
-
-  componentDidMount() {
-    const component = this;
-
-    const {
-      simulation
-    } = this;
-
-    const svg = d3.select(this._refs.svg);
-    const {
-      width,
-      height,
-      graph = {
-        nodes: [],
-        links: []
-      }
-    } = this.props;
-
-    // Drawing the links between nodes
-    const link = svg.append('g')
-      .attr('class', 'links')
-      .selectAll('line')
-      .data(graph.links)
-      .enter().append('line')
-        .attr('stroke-width', remcalc(12));
-
-    // And svg group, to contain all of the attributes in @antonas' first prototype
-    svg.selectAll('.node')
-      .data(graph.nodes)
-      .enter()
-      .append('g')
-      .attr('class', 'node_group');
-
-    svg.selectAll('.node_group').each(function(d) {
-      // Create different type of node for services with Primaries + Secondaries
-      // We could extend this further to allow us to have as many nested services
-      // as wanted.
-      // TODO handle this per prop
-      // if (d.id === 'Percona') {
-      //   createExtendedNode(d3.select(this));
-      // } else {
-      component.createServiceNodes(d, d3.select(this));
-      // }
-    });
-
-    simulation
-        .nodes(graph.nodes)
-        .on('tick', ticked);
-
-    simulation.force('link')
-        .links(graph.links);
-
-    function contrain(dimension, r, z) {
-      return Math.max(0, Math.min(dimension - r, z));
-    }
-
-    function ticked() {
-      // TODO: Think of a common way of extracting the bounding boxes for each
-      // item and to grab the x{1,2} and y{1,2} values.
-      link
-        .attr('x1', function(d) {
-          let x;
-          svg.selectAll('.node_group').each(function(_, i) {
-            if (i !== d.source.index) return;
-            x = d3.select(this).node().getBBox().width;
-          });
-          return contrain(width, x, d.source.x) + 80;
-        })
-        .attr('y1', function(d) {
-          let y;
-          svg.selectAll('.node_group').each(function(_, i) {
-            if (i !== d.source.index) return;
-            y = d3.select(this).node().getBBox().height;
-          });
-          return contrain(height, y, d.source.y) + 24;
-        })
-        .attr('x2', function(d) {
-          let x;
-          svg.selectAll('.node_group').each(function(_, i) {
-            if (i !== d.target.index) return;
-            x = d3.select(this).node().getBBox().width;
-          });
-          return contrain(width, x, d.target.x) + 80;
-        })
-        .attr('y2', function(d) {
-          let y;
-          svg.selectAll('.node_group').each(function(_, i) {
-            if (i !== d.target.index) return;
-            y = d3.select(this).node().getBBox().height;
-          });
-          return contrain(height, y, d.target.y) + 24;
-        });
-
-      svg.selectAll('.node_group')
-         .attr('transform', function(d) {
-           const x = d3.select(this).node().getBBox().width;
-           const y = d3.select(this).node().getBBox().height;
-           return 'translate(' + contrain(width, x, d.x) + ','
-             + contrain(height, y, d.y) + ')';
-         });
-    }
-  }
-
-  createHealthCheckBadge(element, x, y) {
-    const paddingLeft = 30;
-    const health = element.append('g');
-
-    // TODO: replace these element with the designed SVG elements from
-    // @antonasdeduchovas' designs with full svg elements.
-
-    health.append('circle')
-      .attr('class', 'alert')
-      .attr('cx',  function() {
-        return element
-          .node()
-          .getBBox()
-          .width + paddingLeft;
-      })
-      .attr('cy', '24')
-      .attr('stroke-width', 0)
-      .attr('fill', (d) =>
-        d.id === 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)')
-      .attr('r', remcalc(9));
-
-    // An icon or label that exists within the circle, inside the infobox
-    health.append('text')
-    .attr('class', 'health')
-      .attr('x', function() {
-        return element
-          .node()
-          .getBBox()
-          .width + 3;
-      })
-      .attr('y', '29')
-      .attr('text-anchor', 'middle')
-      .attr('fill', colors.brandPrimaryColor)
-      .text((d) => d.id === 'Memcached' ? '!' : '❤');
-  }
-
-  createServiceNodeBody(data, element, d) {
-    const stats = element.append('g');
-    stats.append('path')
-    .attr('class', 'node')
-      .attr('d', d)
-      .attr('stroke', '#343434')
-      .attr('stroke-width', remcalc(1))
-      .attr('fill', '#464646');
-
-    const html = stats
-      .append('switch')
-      .append('foreignObject')
-        .attr('requiredFeatures',
-          'http://www.w3.org/TR/SVG11/feature#Extensibility')
-        .attr('x', 12)
-        .attr('y', 57)
-        .attr('width', 160)
-        .attr('height', 70)
-        // From here everything will be rendered with react using a ref.
-        // However for now these values are hard-coded.
-      .append('xhtml:div')
-        .attr('class', 'node_statistics');
-        // Remove with react + dyanmic data.
-
-    html.selectAll('.node_statistics').data(data.metrics).enter()
-      .append('p')
-        .text((d) => `${d.name}: ${d.stat}`);
-  }
-
-  createServiceNodes(data, elm) {
-    const component = this;
-
-    const {
-      dragged,
-      dragstarted,
-      dragended
-    } = this;
-
-    const width = 170;
-    const topHeight = 47;
-    const radius = 4;
-
-    // Box where label will live
-    elm.append('path')
-    .attr('class', 'node')
-      .attr('d', topRoundedRect('0', '0', width, topHeight, radius))
-      .attr('stroke', colors.topologyBackground)
-      .attr('stroke-width', remcalc(1))
-      .attr('fill', colors.brandSecondaryColor);
-
-    const text = elm.append('g');
-
-    text.append('text')
-    .attr('class', 'info_text')
-      .attr('x', '12')
-      .attr('y', '30')
-      .attr('text-anchor', 'start')
-      .attr('fill', colors.brandPrimaryColor)
-      .text(d => d.id);
-
-    // if (service is registered twice in the scheduler) {
-    //   Do not show healthcheck in the header
-    // } else {
-    this.createHealthCheckBadge(text);
-    // }
-
-    // if (service is registered twice in the scheduler) {
-    //   this.createServiceNodeBody(data, elm, rect('0',`-${topHeight}`, width, 78, 4));
-    // } else {
-    this.createServiceNodeBody(data, elm,
-      bottomRoundedRect('0', `-${topHeight}`, width, 78, 4));
-    // }
-
-    // <==== END ====>
-
-    // Set up movement for service nodes
-    elm.call(d3.drag()
-            .on('start', dragstarted.bind(component))
-            .on('drag', dragged.bind(component))
-            .on('end', dragended.bind(component)));
-  }
-
-
-  dragstarted(d) {
-    if (!d3.event.active) this.simulation.alphaTarget(0.3).restart();
-    d.fx = d.x;
-    d.fy = d.y;
-  }
-
-  dragged(d) {
-    d.fx = d3.event.x;
-    d.fy = d3.event.y;
-  }
-
-  dragended(d) {
-    if (!d3.event.active) this.simulation.alphaTarget(0);
-    d.fx = null;
-    d.fy = null;
-  }
-
-  ref(name) {
-    this._refs = this._refs || {};
-
-    return (el) => {
-      this._refs[name] = el;
-    };
-  }
-
-  render() {
-    return (
-      <StyledSVGContainer
-        innerRef={this.ref('svg')}
-        {...this.props}
-      />
-    );
-  }
-}
-
-TopologyGraph.propTypes = {
-  graph: React.PropTypes.object,
-  height: React.PropTypes.number,
-  width: React.PropTypes.number
-};
-
-export default Baseline(
-  TopologyGraph
-);

ui/src/components/topology-old/story.js

@@ -1,117 +0,0 @@
-import { storiesOf } from '@kadira/storybook';
-import Topology from './';
-import TopologyView from './view';
-import React from 'react';
-
-const services = {
-  nodes: [{
-    id: 'Nginx',
-    attrs: {
-      dcs: 1,
-      instances: 2,
-      healthy: true
-    },
-    metrics: [{
-      name: 'CPU',
-      stat: '50%'
-    }, {
-      name: 'Memory',
-      stat: '20%'
-    }, {
-      name: 'Network',
-      stat: '5.9KB/sec'
-    }]
-  }, {
-    id: 'WordPress',
-    attrs: {
-      dcs: 1,
-      instances: 2,
-      healthy: true
-    },
-    metrics: [{
-      name: 'CPU',
-      stat: '50%'
-    }, {
-      name: 'Memory',
-      stat: '20%'
-    }, {
-      name: 'Network',
-      stat: '5.9KB/sec'
-    }]
-  }, {
-    id: 'Memcached',
-    attrs: {
-      dcs: 1,
-      instances: 2,
-      healthy: true
-    },
-    metrics: [{
-      name: 'CPU',
-      stat: '50%'
-    }, {
-      name: 'Memory',
-      stat: '20%'
-    }, {
-      name: 'Network',
-      stat: '5.9KB/sec'
-    }]
-  }, {
-    id: 'Percona',
-    attrs: {
-      dcs: 1,
-      instances: 2,
-      healthy: true
-    },
-    metrics: [{
-      name: 'CPU',
-      stat: '50%'
-    }, {
-      name: 'Memory',
-      stat: '20%'
-    }, {
-      name: 'Network',
-      stat: '5.9KB/sec'
-    }]
-  }, {
-    id: 'NFS',
-    attrs: {
-      dcs: 1,
-      instances: 2,
-      healthy: true
-    },
-    metrics: [{
-      name: 'CPU',
-      stat: '50%'
-    }, {
-      name: 'Memory',
-      stat: '20%'
-    }, {
-      name: 'Network',
-      stat: '5.9KB/sec'
-    }]
-  }],
-  links: [{
-    source: 'Nginx',
-    target: 'WordPress'
-  }, {
-    source: 'WordPress',
-    target: 'Memcached'
-  }, {
-    source: 'WordPress',
-    target: 'NFS'
-  }, {
-    source: 'WordPress',
-    target: 'Percona'
-  }]
-};
-
-storiesOf('Topology', module)
-  .add('5 services', () => (
-    <TopologyView>
-      <Topology
-        graph={services}
-        height={500}
-        width={500}
-      />
-    </TopologyView>
-  ));

ui/src/components/topology-old/view.js

@@ -1,27 +0,0 @@
-import { remcalc } from '../../shared/functions';
-import { Baseline } from '../../shared/composers';
-import { colors } from '../../shared/constants';
-import styled from 'styled-components';
-import React from 'react';
-
-const TopologyView = styled.div`
-  border: ${remcalc(1)} solid ${colors.borderSecondary};
-  background-color: ${colors.brandSecondary};
-`;
-
-const Topology = ({
-  children,
-  ...props
-}) => (
-  <TopologyView {...props}>
-    {children}
-  </TopologyView>
-);
-
-Topology.propTypes = {
-  children: React.PropTypes.node
-};
-
-export default Baseline(
-  Topology
-);

ui/src/shared/composers/index.js

@@ -3,6 +3,13 @@ import camelCase from 'camel-case';
 import { boxes } from '../constants';
 import { unitcalc } from '../functions';
 
+import {
+  libreFranklin,
+  bold,
+  semibold,
+  normal
+} from './typography';
+
 const sides = [
   'top',
   'right',
@@ -98,12 +105,9 @@ export const clearfix = css`
   }
 `;
 
-export {
+export const typography = {
   libreFranklin,
-  libreFranklinSemiBold,
-  libreFranklinBold,
   bold,
-  regular,
+  semibold,
-  titleColor,
+  normal
-  bodyColor
+};
-} from './typography';

ui/src/shared/composers/typography.js

@@ -1,30 +1,26 @@
 import { css } from 'styled-components';
-import { colors } from '../../shared/constants';
 
 export const libreFranklin = `
-  font-family: 'LibreFranklin', Helvetica, sans-serif;
+  font-family: 'Libre Franklin',
-`;
+                -apple-system,
-
+                BlinkMacSystemFont,
-export const libreFranklinSemiBold = `
+                "Segoe UI",
-  font-family: 'LibreFranklin-Semi-Bold', Helvetica, sans-serif;
+                Roboto,
-`;
+                Oxygen-Sans,
-
+                Ubuntu,
-export const libreFranklinBold = `
+                Cantarell,
-  font-family: 'LibreFranklin-Bold', Helvetica, sans-serif;
+                Helvetica,
+                sans-serif;
 `;
 
 export const bold = css`
+  font-weight: 700;
+`;
+
+export const semibold = css`
   font-weight: 600;
 `;
 
-export const regular = css`
+export const normal = css`
-  font-weight: normal;
+  font-weight: 400;
-`;
-
-export const titleColor = css`
-  color: ${colors.base.secondary};
-`;
-
-export const bodyColor = css`
-  color: ${colors.base.text};
 `;

ui/test/index.js

@@ -25,7 +25,7 @@ test('renders <Button> without exploding', (t) => {
 });
 
 test('renders <Close> without exploding', (t) => {
-  const Close = require('../src/components/close').default;
+  const Close = require('../src/components/icons/close').default;
   const wrapper = shallow(<Close />);
   t.deepEqual(wrapper.length, 1);
 });