fix(628) UI Polish for Creating Deployment Group & Deployment Group List

2024-11-28 06:00:06 +02:00 · 2017-10-03 13:24:06 +01:00 · 2017-10-03 13:24:06 +01:00 · 7a4161d5a8
commit 7a4161d5a8
parent b151b4fd4a
21 changed files with 2387 additions and 2058 deletions
--- a/packages/cp-frontend/.eslintrc
+++ b/packages/cp-frontend/.eslintrc
@ -6,6 +6,7 @@
    // temp
    "no-undef": 1,
    "no-debugger": 1,
-    "no-negated-condition": 0
+    "no-negated-condition": 0,
+    "jsx-a11y/href-no-hash": 0
  }
 }
--- a/packages/cp-frontend/package.json
+++ b/packages/cp-frontend/package.json
@ -6,6 +6,7 @@
  "main": "build/",
  "scripts": {
    "dev": "REACT_APP_GQL_PORT=3000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
+    "start-now": "REACT_APP_GQL_PORT=8080 PORT=3069 REACT_APP_GQL_HOSTNAME=joyent-cp-gql-mock-server-sxcvsebikv.now.sh react-scripts start",
    "start": "PORT=3069 react-scripts start",
    "build": "NODE_ENV=production react-scripts build",
    "lint:css": "echo 0",
--- a/packages/cp-frontend/src/assets/Import.svg
+++ b/packages/cp-frontend/src/assets/Import.svg
@ -0,0 +1,26 @@
+<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>Import</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-2061 2768)">
+<clipPath id="clip-0" clip-rule="evenodd">
+<path d="M 2061 -2768L 2085 -2768L 2085 -2744L 2061 -2744L 2061 -2768Z" fill="#FFFFFF"/>
+</clipPath>
+<g id="Import" clip-path="url(#clip-0)">
+<path d="M 2061 -2768L 2085 -2768L 2085 -2744L 2061 -2744L 2061 -2768Z" fill="#FFFFFF"/>
+<g id="Bottom">
+<use xlink:href="#path0_fill" transform="translate(2061 -2754)" fill="#464646"/>
+</g>
+<g id="Line">
+<use xlink:href="#path1_fill" transform="matrix(1 0 0 1 2072 -2768)" fill="#464646"/>
+</g>
+<g id="Arrow">
+<use xlink:href="#path2_fill" transform="translate(2067.29 -2755)" fill="#464646"/>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" fill-rule="evenodd" d="M 0 0L 2 0L 2 8L 22 8L 22 0L 24 0L 24 10L 22 10L 2 10L 0 10L 0 0Z"/>
+<path id="path1_fill" fill-rule="evenodd" d="M 0 0L 2 0L 2 18L 0 18L 0 0Z"/>
+<path id="path2_fill" fill-rule="evenodd" d="M 1.41431 0L 0 1.41431L 4.29468 5.70557L 4.94971 6.36401L 5.70874 7.11987L 11.4143 1.41455L 10 0.000244141L 5.70728 4.29297L 1.41431 0Z"/>
+</defs>
+</svg>
--- a/packages/cp-frontend/src/components/manifest/environment.js
+++ b/packages/cp-frontend/src/components/manifest/environment.js
@ -49,7 +49,7 @@ export const Environment = ({
        loading={loading}
        type="submit"
      >
-        Continue
+        Next
      </Button>
    </ButtonsRow>
  ) : null;
--- a/packages/cp-frontend/src/components/manifest/label.js
+++ b/packages/cp-frontend/src/components/manifest/label.js
@ -0,0 +1,10 @@
+import { FormLabel } from 'joyent-ui-toolkit';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const StyledFormLabel = styled(FormLabel)`
+  margin-top: ${remcalc(24)};
+  margin-bottom: ${props => props.bottomSpace ? remcalc(16) : remcalc(6)};
+`;
+
+export default StyledFormLabel;
--- a/packages/cp-frontend/src/components/manifest/manifest.js
+++ b/packages/cp-frontend/src/components/manifest/manifest.js
@ -1,13 +1,12 @@
 import React from 'react';
-import { FormGroup, FormMeta, Button, FormLabel } from 'joyent-ui-toolkit';
+import { FormGroup, FormMeta, Button } from 'joyent-ui-toolkit';
 import { Row } from 'react-styled-flexboxgrid';
 import remcalc from 'remcalc';
 import { Field } from 'redux-form';
 import { MEditor } from './editors';
+import StyledFormLabel from './label';

-const ButtonsRow = Row.extend`
-  margin: ${remcalc(29)} 0 ${remcalc(60)} 0;
-`;
+const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;

 export const Manifest = ({
  handleSubmit,
@ -19,7 +18,7 @@ export const Manifest = ({
  <form onSubmit={handleSubmit}>
    <FormGroup reduxForm>
      <FormMeta left>
-        <FormLabel>Project manifest</FormLabel>
+        <StyledFormLabel bottomSpace>Project manifest</StyledFormLabel>
      </FormMeta>
      <Field name="manifest" defaultValue={defaultValue} component={MEditor} />
    </FormGroup>
@ -32,7 +31,7 @@ export const Manifest = ({
        loading={loading}
        type="submit"
      >
-        Environment
+        Next
      </Button>
    </ButtonsRow>
  </form>
--- a/packages/cp-frontend/src/components/manifest/name.js
+++ b/packages/cp-frontend/src/components/manifest/name.js
@ -1,11 +1,11 @@
 import React from 'react';
 import { Row, Col } from 'react-styled-flexboxgrid';
 import remcalc from 'remcalc';
+import StyledFormLabel from './label';

 import {
  FormMeta,
  Button,
-  FormLabel,
  Input,
  Small,
  FormGroup
@ -19,7 +19,7 @@ export const Name = ({ handleSubmit, onCancel, dirty }) => (
      <Col xs={12} md={4} lg={4}>
        <FormGroup name="name" reduxForm>
          <FormMeta left>
-            <FormLabel>Name the new deployment group</FormLabel>
+            <StyledFormLabel>Name the new deployment group</StyledFormLabel>
            <Small>
              Your services will be deployed to eu-east-1 data center.
            </Small>
--- a/packages/cp-frontend/src/components/manifest/progress.js
+++ b/packages/cp-frontend/src/components/manifest/progress.js
@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';

 import {
  Progressbar,
@ -6,20 +7,27 @@ import {
  ProgressbarButton
 } from 'joyent-ui-toolkit';

+const StyledProgressbarButton = styled(ProgressbarButton)`
+  svg {
+    margin-top: 1px;
+    margin-left: 1px;
+  }
+`;
+
 const Progress = ({ stage, create, edit }) => {
  const _nameCompleted = stage !== 'name';
  const _nameActive = stage === 'name';

  const _name = !create ? null : (
    <ProgressbarItem>
-      <ProgressbarButton
+      <StyledProgressbarButton
        zIndex="10"
        completed={_nameCompleted}
        active={_nameActive}
        first
      >
        Name the group
-      </ProgressbarButton>
+      </StyledProgressbarButton>
    </ProgressbarItem>
  );

@ -28,14 +36,14 @@ const Progress = ({ stage, create, edit }) => {

  const _manifest = (
    <ProgressbarItem>
-      <ProgressbarButton
+      <StyledProgressbarButton
        zIndex="9"
        completed={_manifestCompleted}
        active={_manifestActive}
        first={edit}
      >
-        Define Services
-      </ProgressbarButton>
+        Define services
+      </StyledProgressbarButton>
    </ProgressbarItem>
  );

@ -44,13 +52,13 @@ const Progress = ({ stage, create, edit }) => {

  const _environment = (
    <ProgressbarItem>
-      <ProgressbarButton
+      <StyledProgressbarButton
        zIndex="8"
        completed={_environmentCompleted}
        active={_environmentActive}
      >
-        Define Environment
-      </ProgressbarButton>
+        Define environment
+      </StyledProgressbarButton>
    </ProgressbarItem>
  );

@ -58,9 +66,9 @@ const Progress = ({ stage, create, edit }) => {

  const _review = (
    <ProgressbarItem>
-      <ProgressbarButton zIndex="7" active={_reviewActive} last>
+      <StyledProgressbarButton zIndex="7" active={_reviewActive} last>
        Review and deploy
-      </ProgressbarButton>
+      </StyledProgressbarButton>
    </ProgressbarItem>
  );

--- a/packages/cp-frontend/src/components/manifest/review.js
+++ b/packages/cp-frontend/src/components/manifest/review.js
@ -7,9 +7,9 @@ import {
  Divider,
  H3,
  P,
-  Chevron,
  typography,
-  Card
+  Card,
+  Message
 } from 'joyent-ui-toolkit';
 import forceArray from 'force-array';
 import styled from 'styled-components';
@ -54,14 +54,21 @@ const ServiceCard = Card.extend`

 const Dl = styled.dl`margin: 0;`;

-const EnvironmentChevron = styled(Chevron)`float: right;`;
+const Chevron = styled.svg`
+  transform: ;
+  float: right;
+  position: relative;
+  margin-top: 16px;
+  transform: ${props =>
+    props.down ? 'rotate(90deg) scale(3)' : 'rotate(270deg) scale(3)'};
+`;

 const EnvironmentReview = ({ environment }) => {
  const value = environment
    .map(({ name, value }) => `${name}=${value}`)
    .join('\n');

-  return <EEditor input={{ value }} />;
+  return <EEditor readOnly input={{ value }} />;
 };

 export const Review = ({
@ -71,8 +78,10 @@ export const Review = ({
  dirty,
  loading,
  environmentToggles,
+  datacenter,
  ...state
 }) => {
+  console.log(datacenter);
  const serviceList = forceArray(state.services).map(({ name, config }) => (
    <ServiceCard key={name}>
      <ServiceName>{name}</ServiceName>
@ -90,10 +99,18 @@ export const Review = ({
          onClick={() => onEnvironmentToggle(name)}
        >
          Environment variables{' '}
-          <EnvironmentChevron
+          { /* I'M SORRY */ }
+          <Chevron
+            width="20"
+            height="7"
+            viewBox="0 0 10 20"
            down={!environmentToggles[name]}
-            up={environmentToggles[name]}
-          />
+          >
+            <path
+              fill="#464646"
+              d="M 1.1206 0L 0 1.36044L 3.49581 4.8L 0 8.23956L 1.1206 9.6L 6 4.8L 1.1206 0Z"
+            />
+          </Chevron>
        </ServiceEnvironmentTitle>
      ) : null}
      {config.environment &&
@ -106,12 +123,18 @@ export const Review = ({

  return (
    <form onSubmit={handleSubmit}>
+      <Message
+        title="Reviewing"
+        message="Review names of services, images being used and packages you chose or that have been recommended to you"
+        type="EDUCATIONAL"
+      />
      {serviceList}
+      <P>A single instance of each service will be deployed.</P>
      <ButtonsRow>
        <Button type="button" onClick={onCancel} disabled={loading} secondary>
          Cancel
        </Button>
-        <Button disabled={loading} loading={loading} type="submit">
+        <Button loading={loading} type="submit">
          Confirm and Deploy
        </Button>
      </ButtonsRow>
@ -119,5 +142,4 @@ export const Review = ({
  );
 };

-
-export default Review
+export default Review;
--- a/packages/cp-frontend/src/containers/deployment-groups/list.js
+++ b/packages/cp-frontend/src/containers/deployment-groups/list.js
@ -14,10 +14,9 @@ import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql';
 import DeploymentGroupsImportableQuery from '@graphql/DeploymentGroupsImportable.gql';
 import { H3, Small, IconButton, BinIcon } from 'joyent-ui-toolkit';
 import { withNotFound, GqlPaths } from '@containers/navigation';
+import ImportIcon from '../../assets/Import.svg';

-const DGsRows = Row.extend`
-  margin-top: ${remcalc(-7)};
-`;
+const DGsRows = Row.extend`margin-top: ${remcalc(-7)};`;

 const Box = styled.div`
  position: relative;
@ -162,7 +161,9 @@ export const DeploymentGroupList = ({
      <Col xs={12} sm={4} md={3} lg={3} key={slug}>
        <BoxCreate>
          <StyledCreateLink to={`${match.path}/~import/${slug}`}>
-            <Oval>&#10549;</Oval>
+            <Oval>
+              <ImportIcon />
+            </Oval>
            <CreateTitle>{name}</CreateTitle>
          </StyledCreateLink>
        </BoxCreate>
--- a/packages/cp-frontend/test/unit/components/manifest/snapshots/environment.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/snapshots/environment.js.snap
@ -505,7 +505,7 @@ exports[`renders <TestEnvironmentForm /> without throwing 1`] = `
          >
            <input
              className="c13 c14"
-              id="bVVQYi"
+              id="boppOm"
              placeholder="Filename including extension…"
              type="text"
              value={undefined}
--- a/packages/cp-frontend/test/unit/components/manifest/snapshots/files.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/snapshots/files.js.snap
@ -192,7 +192,7 @@ exports[`renders <Files /> without throwing 1`] = `
        >
          <input
            className="c4 c5"
-            id="SlzVp"
+            id="UJhJl"
            placeholder="Filename including extension…"
            type="text"
            value={undefined}
--- a/packages/cp-frontend/test/unit/components/manifest/snapshots/name.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/snapshots/name.js.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders <Name /> without throwing 1`] = `
-.c8 {
+.c9 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -46,47 +46,47 @@ exports[`renders <Name /> without throwing 1`] = `
  border: solid 0.0625rem;
 }

-.c8::-moz-focus-inner,
-.c8[type='button']::-moz-focus-inner,
-.c8[type='reset']::-moz-focus-inner,
-.c8[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c8:-moz-focusring,
-.c8[type='button']:-moz-focusring,
-.c8[type='reset']:-moz-focusring,
-.c8[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c8:focus {
+.c9:focus {
  outline: 0;
  text-decoration: none;
 }

-.c8:hover {
+.c9:hover {
  border: solid 0.0625rem;
 }

-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
  background-image: none;
  outline: 0;
 }

-.c8[disabled] {
+.c9[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c8 + button {
+.c9 + button {
  margin-left: 1.25rem;
 }

-.c9 {
+.c10 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -132,43 +132,43 @@ exports[`renders <Name /> without throwing 1`] = `
  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }

-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c9:focus {
+.c10:focus {
  outline: 0;
  text-decoration: none;
 }

-.c9:hover {
+.c10:hover {
  border: solid 0.0625rem;
 }

-.c9:active,
-.c9:active:hover,
-.c9:active:focus {
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
  background-image: none;
  outline: 0;
 }

-.c9[disabled] {
+.c10[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c9 + button {
+.c10 + button {
  margin-left: 1.25rem;
 }

@ -200,7 +200,7 @@ exports[`renders <Name /> without throwing 1`] = `
  padding-left: 0.5rem;
 }

-.c5 {
+.c6 {
  font-size: 80%;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
@ -225,7 +225,7 @@ exports[`renders <Name /> without throwing 1`] = `
  -webkit-padding-after: 0;
 }

-.c6 {
+.c7 {
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
@ -245,11 +245,11 @@ exports[`renders <Name /> without throwing 1`] = `
  outline: 0;
 }

-.c6:focus {
+.c7:focus {
  outline: 0;
 }

-.c4 {
+.c5 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
@ -269,7 +269,12 @@ exports[`renders <Name /> without throwing 1`] = `
  display: block;
 }

-.c7 {
+.c4 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.375rem;
+}
+
+.c8 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -338,20 +343,20 @@ exports[`renders <Name /> without throwing 1`] = `
            form="testNameForm"
          >
            <label
-              className="c4"
-              htmlFor="bRpkHS"
+              className="c4 c5"
+              htmlFor="cfHyyk"
            >
              Name the new deployment group
            </label>
            <small
-              className="c5"
+              className="c6"
            >
              Your services will be deployed to eu-east-1 data center.
            </small>
          </label>
          <input
-            className="c6"
-            id="bRpkHS"
+            className="c7"
+            id="cfHyyk"
            name="name"
            onBlur={[Function]}
            onChange={[Function]}
@ -366,17 +371,17 @@ exports[`renders <Name /> without throwing 1`] = `
    </div>
  </div>
  <div
-    className="c7"
+    className="c8"
  >
    <button
-      className="c8"
+      className="c9"
      onClick={[Function]}
      type="button"
    >
      Cancel
    </button>
    <button
-      className="c9"
+      className="c10"
      disabled={true}
      type="submit"
    >
@ -387,7 +392,7 @@ exports[`renders <Name /> without throwing 1`] = `
 `;

 exports[`renders <Name /> without throwing 2`] = `
-.c8 {
+.c9 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -432,47 +437,47 @@ exports[`renders <Name /> without throwing 2`] = `
  border: solid 0.0625rem;
 }

-.c8::-moz-focus-inner,
-.c8[type='button']::-moz-focus-inner,
-.c8[type='reset']::-moz-focus-inner,
-.c8[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c8:-moz-focusring,
-.c8[type='button']:-moz-focusring,
-.c8[type='reset']:-moz-focusring,
-.c8[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c8:focus {
+.c9:focus {
  outline: 0;
  text-decoration: none;
 }

-.c8:hover {
+.c9:hover {
  border: solid 0.0625rem;
 }

-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
  background-image: none;
  outline: 0;
 }

-.c8[disabled] {
+.c9[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c8 + button {
+.c9 + button {
  margin-left: 1.25rem;
 }

-.c9 {
+.c10 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -518,43 +523,43 @@ exports[`renders <Name /> without throwing 2`] = `
  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }

-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c9:focus {
+.c10:focus {
  outline: 0;
  text-decoration: none;
 }

-.c9:hover {
+.c10:hover {
  border: solid 0.0625rem;
 }

-.c9:active,
-.c9:active:hover,
-.c9:active:focus {
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
  background-image: none;
  outline: 0;
 }

-.c9[disabled] {
+.c10[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c9 + button {
+.c10 + button {
  margin-left: 1.25rem;
 }

@ -586,7 +591,7 @@ exports[`renders <Name /> without throwing 2`] = `
  padding-left: 0.5rem;
 }

-.c5 {
+.c6 {
  font-size: 80%;
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
@ -611,7 +616,7 @@ exports[`renders <Name /> without throwing 2`] = `
  -webkit-padding-after: 0;
 }

-.c6 {
+.c7 {
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
@ -631,11 +636,11 @@ exports[`renders <Name /> without throwing 2`] = `
  outline: 0;
 }

-.c6:focus {
+.c7:focus {
  outline: 0;
 }

-.c4 {
+.c5 {
  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
@ -655,7 +660,12 @@ exports[`renders <Name /> without throwing 2`] = `
  display: block;
 }

-.c7 {
+.c4 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.375rem;
+}
+
+.c8 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -724,20 +734,20 @@ exports[`renders <Name /> without throwing 2`] = `
            form="testNameForm"
          >
            <label
-              className="c4"
-              htmlFor="cfPoqo"
+              className="c4 c5"
+              htmlFor="KxdOh"
            >
              Name the new deployment group
            </label>
            <small
-              className="c5"
+              className="c6"
            >
              Your services will be deployed to eu-east-1 data center.
            </small>
          </label>
          <input
-            className="c6"
-            id="cfPoqo"
+            className="c7"
+            id="KxdOh"
            name="name"
            onBlur={[Function]}
            onChange={[Function]}
@ -752,17 +762,17 @@ exports[`renders <Name /> without throwing 2`] = `
    </div>
  </div>
  <div
-    className="c7"
+    className="c8"
  >
    <button
-      className="c8"
+      className="c9"
      onClick={[Function]}
      type="button"
    >
      Cancel
    </button>
    <button
-      className="c9"
+      className="c10"
      disabled={true}
      type="submit"
    >
--- a/packages/cp-frontend/test/unit/components/manifest/snapshots/progress.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/snapshots/progress.js.snap
--- a/packages/cp-frontend/test/unit/components/manifest/snapshots/review.js.snap
+++ b/packages/cp-frontend/test/unit/components/manifest/snapshots/review.js.snap
@ -1,26 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders <Review /> without throwing 1`] = `
-.c3 {
+.c10 {
  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
  animation: iCqDak 1.5s ease-out 0s infinite;
 }

-.c4 {
+.c11 {
  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
  animation: iCqDak 1.5s ease-out 0s infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
 }

-.c5 {
+.c12 {
  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
  animation: iCqDak 1.5s ease-out 0s infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
 }

-.c1 {
+.c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -66,47 +66,47 @@ exports[`renders <Review /> without throwing 1`] = `
  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }

-.c1::-moz-focus-inner,
-.c1[type='button']::-moz-focus-inner,
-.c1[type='reset']::-moz-focus-inner,
-.c1[type='submit']::-moz-focus-inner {
+.c8::-moz-focus-inner,
+.c8[type='button']::-moz-focus-inner,
+.c8[type='reset']::-moz-focus-inner,
+.c8[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c1:-moz-focusring,
-.c1[type='button']:-moz-focusring,
-.c1[type='reset']:-moz-focusring,
-.c1[type='submit']:-moz-focusring {
+.c8:-moz-focusring,
+.c8[type='button']:-moz-focusring,
+.c8[type='reset']:-moz-focusring,
+.c8[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c1:focus {
+.c8:focus {
  outline: 0;
  text-decoration: none;
 }

-.c1:hover {
+.c8:hover {
  border: solid 0.0625rem;
 }

-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
  background-image: none;
  outline: 0;
 }

-.c1[disabled] {
+.c8[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c1 + button {
+.c8 + button {
  margin-left: 1.25rem;
 }

-.c2 {
+.c9 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -149,50 +149,90 @@ exports[`renders <Review /> without throwing 1`] = `
  background-image: none;
  border-radius: 0.25rem;
  border: solid 0.0625rem;
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }

-.c2::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c2:-moz-focusring,
-.c2[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c2:focus {
+.c9:focus {
  outline: 0;
  text-decoration: none;
 }

-.c2:hover {
+.c9:hover {
  border: solid 0.0625rem;
 }

-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
  background-image: none;
  outline: 0;
 }

-.c2[disabled] {
+.c9[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c2 + button {
+.c9 + button {
  margin-left: 1.25rem;
 }

+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c5 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c7 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -218,8 +258,35 @@ exports[`renders <Review /> without throwing 1`] = `
  <div
    className="c0"
  >
-    <button
+    <div
      className="c1"
+      type="EDUCATIONAL"
+    />
+    <div
+      className="c2"
+    >
+      <h3
+        className="c3 c4"
+      >
+        Reviewing
+      </h3>
+      <p
+        className="c5 c6"
+      >
+        Review names of services, images being used and packages you chose or that have been recommended to you
+      </p>
+    </div>
+  </div>
+  <p
+    className="c6"
+  >
+    A single instance of each service will be deployed.
+  </p>
+  <div
+    className="c7"
+  >
+    <button
+      className="c8"
      disabled={true}
      onClick={[Function]}
      type="button"
@ -227,8 +294,7 @@ exports[`renders <Review /> without throwing 1`] = `
      Cancel
    </button>
    <button
-      className="c2"
-      disabled={true}
+      className="c9"
      type="submit"
    >
      <svg
@ -236,21 +302,21 @@ exports[`renders <Review /> without throwing 1`] = `
        width="28"
      >
        <rect
-          className="c3"
+          className="c10"
          height="6"
          width="6"
          x="2"
          y="2"
        />
        <rect
-          className="c4"
+          className="c11"
          height="6"
          width="6"
          x="11"
          y="2"
        />
        <rect
-          className="c5"
+          className="c12"
          height="6"
          width="6"
          x="20"
@ -263,7 +329,7 @@ exports[`renders <Review /> without throwing 1`] = `
 `;

 exports[`renders <Review /> without throwing 2`] = `
-.c1 {
+.c9 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -308,47 +374,47 @@ exports[`renders <Review /> without throwing 2`] = `
  border: solid 0.0625rem;
 }

-.c1::-moz-focus-inner,
-.c1[type='button']::-moz-focus-inner,
-.c1[type='reset']::-moz-focus-inner,
-.c1[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c1:-moz-focusring,
-.c1[type='button']:-moz-focusring,
-.c1[type='reset']:-moz-focusring,
-.c1[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c1:focus {
+.c9:focus {
  outline: 0;
  text-decoration: none;
 }

-.c1:hover {
+.c9:hover {
  border: solid 0.0625rem;
 }

-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
  background-image: none;
  outline: 0;
 }

-.c1[disabled] {
+.c9[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c1 + button {
+.c9 + button {
  margin-left: 1.25rem;
 }

-.c2 {
+.c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -393,47 +459,88 @@ exports[`renders <Review /> without throwing 2`] = `
  border: solid 0.0625rem;
 }

-.c2::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c8::-moz-focus-inner,
+.c8[type='button']::-moz-focus-inner,
+.c8[type='reset']::-moz-focus-inner,
+.c8[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c2:-moz-focusring,
-.c2[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c8:-moz-focusring,
+.c8[type='button']:-moz-focusring,
+.c8[type='reset']:-moz-focusring,
+.c8[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c2:focus {
+.c8:focus {
  outline: 0;
  text-decoration: none;
 }

-.c2:hover {
+.c8:hover {
  border: solid 0.0625rem;
 }

-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
  background-image: none;
  outline: 0;
 }

-.c2[disabled] {
+.c8[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c2 + button {
+.c8 + button {
  margin-left: 1.25rem;
 }

+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c5 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c7 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -459,8 +566,35 @@ exports[`renders <Review /> without throwing 2`] = `
  <div
    className="c0"
  >
-    <button
+    <div
      className="c1"
+      type="EDUCATIONAL"
+    />
+    <div
+      className="c2"
+    >
+      <h3
+        className="c3 c4"
+      >
+        Reviewing
+      </h3>
+      <p
+        className="c5 c6"
+      >
+        Review names of services, images being used and packages you chose or that have been recommended to you
+      </p>
+    </div>
+  </div>
+  <p
+    className="c6"
+  >
+    A single instance of each service will be deployed.
+  </p>
+  <div
+    className="c7"
+  >
+    <button
+      className="c8"
      disabled={undefined}
      onClick={[Function]}
      type="button"
@ -468,8 +602,7 @@ exports[`renders <Review /> without throwing 2`] = `
      Cancel
    </button>
    <button
-      className="c2"
-      disabled={undefined}
+      className="c9"
      type="submit"
    >
      Confirm and Deploy
@ -479,7 +612,7 @@ exports[`renders <Review /> without throwing 2`] = `
 `;

 exports[`renders <Review /> without throwing 3`] = `
-.c1 {
+.c9 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -524,47 +657,47 @@ exports[`renders <Review /> without throwing 3`] = `
  border: solid 0.0625rem;
 }

-.c1::-moz-focus-inner,
-.c1[type='button']::-moz-focus-inner,
-.c1[type='reset']::-moz-focus-inner,
-.c1[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c1:-moz-focusring,
-.c1[type='button']:-moz-focusring,
-.c1[type='reset']:-moz-focusring,
-.c1[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c1:focus {
+.c9:focus {
  outline: 0;
  text-decoration: none;
 }

-.c1:hover {
+.c9:hover {
  border: solid 0.0625rem;
 }

-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
  background-image: none;
  outline: 0;
 }

-.c1[disabled] {
+.c9[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c1 + button {
+.c9 + button {
  margin-left: 1.25rem;
 }

-.c2 {
+.c8 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -609,47 +742,88 @@ exports[`renders <Review /> without throwing 3`] = `
  border: solid 0.0625rem;
 }

-.c2::-moz-focus-inner,
-.c2[type='button']::-moz-focus-inner,
-.c2[type='reset']::-moz-focus-inner,
-.c2[type='submit']::-moz-focus-inner {
+.c8::-moz-focus-inner,
+.c8[type='button']::-moz-focus-inner,
+.c8[type='reset']::-moz-focus-inner,
+.c8[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c2:-moz-focusring,
-.c2[type='button']:-moz-focusring,
-.c2[type='reset']:-moz-focusring,
-.c2[type='submit']:-moz-focusring {
+.c8:-moz-focusring,
+.c8[type='button']:-moz-focusring,
+.c8[type='reset']:-moz-focusring,
+.c8[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c2:focus {
+.c8:focus {
  outline: 0;
  text-decoration: none;
 }

-.c2:hover {
+.c8:hover {
  border: solid 0.0625rem;
 }

-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
  background-image: none;
  outline: 0;
 }

-.c2[disabled] {
+.c8[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c2 + button {
+.c8 + button {
  margin-left: 1.25rem;
 }

+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
 .c0 {
+  position: relative;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  border: 0.0625rem solid;
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+}
+
+.c2 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c3 {
+  margin: 0 3.375rem 0.09375rem 3.375rem;
+  font-weight: 600;
+}
+
+.c5 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+.c7 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
@ -675,8 +849,35 @@ exports[`renders <Review /> without throwing 3`] = `
  <div
    className="c0"
  >
-    <button
+    <div
      className="c1"
+      type="EDUCATIONAL"
+    />
+    <div
+      className="c2"
+    >
+      <h3
+        className="c3 c4"
+      >
+        Reviewing
+      </h3>
+      <p
+        className="c5 c6"
+      >
+        Review names of services, images being used and packages you chose or that have been recommended to you
+      </p>
+    </div>
+  </div>
+  <p
+    className="c6"
+  >
+    A single instance of each service will be deployed.
+  </p>
+  <div
+    className="c7"
+  >
+    <button
+      className="c8"
      disabled={undefined}
      onClick={[Function]}
      type="button"
@ -684,8 +885,7 @@ exports[`renders <Review /> without throwing 3`] = `
      Cancel
    </button>
    <button
-      className="c2"
-      disabled={undefined}
+      className="c9"
      type="submit"
    >
      Confirm and Deploy
--- a/packages/cp-frontend/test/unit/components/service/snapshots/scale.js.snap
+++ b/packages/cp-frontend/test/unit/components/service/snapshots/scale.js.snap
@ -358,7 +358,7 @@ exports[`renders <Scale /> without throwing 1`] = `
      >
        <input
          className="c7 c8"
-          id="bZKUCn"
+          id="crSnva"
          name="replicas"
          onBlur={[Function]}
          onChange={[Function]}
--- a/packages/cp-frontend/test/unit/containers/deployment-groups/snapshots/create.js.snap
+++ b/packages/cp-frontend/test/unit/containers/deployment-groups/snapshots/create.js.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
-.c8 {
+.c9 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -46,43 +46,43 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  border: solid 0.0625rem;
 }

-.c8::-moz-focus-inner,
-.c8[type='button']::-moz-focus-inner,
-.c8[type='reset']::-moz-focus-inner,
-.c8[type='submit']::-moz-focus-inner {
+.c9::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
+.c9[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }

-.c8:-moz-focusring,
-.c8[type='button']:-moz-focusring,
-.c8[type='reset']:-moz-focusring,
-.c8[type='submit']:-moz-focusring {
+.c9:-moz-focusring,
+.c9[type='button']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
+.c9[type='submit']:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
 }

-.c8:focus {
+.c9:focus {
  outline: 0;
  text-decoration: none;
 }

-.c8:hover {
+.c9:hover {
  border: solid 0.0625rem;
 }

-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
  background-image: none;
  outline: 0;
 }

-.c8[disabled] {
+.c9[disabled] {
  cursor: not-allowed;
  pointer-events: none;
 }

-.c8 + button {
+.c9 + button {
  margin-left: 1.25rem;
 }

@ -90,39 +90,39 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  float: left;
 }

-.c6 {
+.c7 {
  -webkit-fill: none;
  fill: none;
 }

+.c13 {
+  -webkit-fill: none;
+  fill: none;
+}
+
+.c6 {
+  display: inline-block;
+  border-radius: 50%;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: inherit;
+  border: 0.0625rem solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0.0625rem solid;
+}
+
 .c12 {
-  -webkit-fill: none;
-  fill: none;
-}
-
-.c5 {
-  display: inline-block;
-  border-radius: 50%;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: inherit;
-  border: 0.0625rem solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: 0.0625rem solid;
-}
-
-.c11 {
  display: inline-block;
  border-radius: 50%;
  width: 1.125rem;
@ -143,7 +143,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  align-items: center;
 }

-.c7 {
+.c8 {
  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
  background-color: #FFFFFF;
  color: #464646;
@ -154,27 +154,27 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  cursor: default;
 }

-.c7:focus {
+.c8:focus {
  background-color: #FFFFFF;
  border: none;
  color: #464646;
 }

-.c7:hover {
+.c8:hover {
  background-color: #FFFFFF;
  border: none;
  color: #464646;
 }

-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
  background-color: #FFFFFF;
  border: none;
  color: #464646;
 }

-.c4 {
+.c5 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -200,7 +200,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  border-right: none;
 }

-.c10 {
+.c11 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -222,7 +222,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  border-right: none;
 }

-.c14 {
+.c15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -244,7 +244,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  border-right: none;
 }

-.c15 {
+.c16 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -265,7 +265,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  border-right: 0.0625rem solid;
 }

-.c9 {
+.c10 {
  position: absolute;
  top: 0;
  right: -1.6875rem;
@ -278,7 +278,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
 }

-.c13 {
+.c14 {
  position: absolute;
  top: 0;
  right: -1.6875rem;
@ -291,7 +291,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  margin: 0.4rem 0.625rem 0.4rem 0.625rem;
 }

-.c16 {
+.c17 {
  position: absolute;
  top: 0;
  right: -1.6875rem;
@ -311,6 +311,11 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
  padding: 0;
 }

+.c4 svg {
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
 .c0 {
  margin-right: auto;
  margin-left: auto;
@ -370,14 +375,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
      className="c3"
    >
      <div
-        className="c4"
+        className="c4 c5"
      >
        <span
-          className="c5"
+          className="c6"
        >
          <svg
            active={false}
-            className="c6 "
+            className="c7 "
            completed={true}
            first={true}
            height="9"
@ -396,12 +401,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
          </svg>
        </span>
        <button
-          className="c7 c8"
+          className="c8 c9"
        >
          Name the group
        </button>
        <span
-          className="c9"
+          className="c10"
        />
      </div>
    </li>
@ -409,14 +414,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
      className="c3"
    >
      <div
-        className="c10"
+        className="c4 c11"
      >
        <span
-          className="c11"
+          className="c12"
        >
          <svg
            active={false}
-            className="c12 "
+            className="c13 "
            completed={false}
            first={undefined}
            height="9"
@ -435,12 +440,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
          </svg>
        </span>
        <button
-          className="c7 c8"
+          className="c8 c9"
        >
-          Define Services
+          Define services
        </button>
        <span
-          className="c13"
+          className="c14"
        />
      </div>
    </li>
@ -448,14 +453,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
      className="c3"
    >
      <div
-        className="c14"
+        className="c4 c15"
      >
        <span
-          className="c11"
+          className="c12"
        >
          <svg
            active={false}
-            className="c12 "
+            className="c13 "
            completed={false}
            first={undefined}
            height="9"
@ -474,12 +479,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
          </svg>
        </span>
        <button
-          className="c7 c8"
+          className="c8 c9"
        >
-          Define Environment
+          Define environment
        </button>
        <span
-          className="c13"
+          className="c14"
        />
      </div>
    </li>
@ -487,14 +492,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
      className="c3"
    >
      <div
-        className="c15"
+        className="c4 c16"
      >
        <span
-          className="c11"
+          className="c12"
        >
          <svg
            active={false}
-            className="c12 "
+            className="c13 "
            completed={undefined}
            first={undefined}
            height="9"
@ -513,12 +518,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
          </svg>
        </span>
        <button
-          className="c7 c8"
+          className="c8 c9"
        >
          Review and deploy
        </button>
        <span
-          className="c16"
+          className="c17"
        />
      </div>
    </li>
--- a/packages/cp-frontend/test/unit/containers/service/snapshots/scale.js.snap
+++ b/packages/cp-frontend/test/unit/containers/service/snapshots/scale.js.snap
@ -516,7 +516,7 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
          >
            <input
              className="c12 c13"
-              id="bIxZkW"
+              id="eOODr"
              name="replicas"
              onBlur={[Function]}
              onChange={[Function]}
--- a/packages/cp-frontend/test/unit/containers/services/snapshots/menu.js.snap
+++ b/packages/cp-frontend/test/unit/containers/services/snapshots/menu.js.snap
@ -236,7 +236,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
          >
            <li
              className="c7"
-              id="bqlWiO"
+              id="cFKBMb"
            >
              <div
                className="c8"
@ -244,7 +244,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
                <input
                  checked={false}
                  className="c9 c10"
-                  id="bYNDQU"
+                  id="cjjZVT"
                  name="service-view"
                  onChange={[Function]}
                  type="radio"
@ -252,7 +252,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
                />
                <label
                  className="c11"
-                  htmlFor="bYNDQU"
+                  htmlFor="cjjZVT"
                >
                  List
                </label>
@ -260,7 +260,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
            </li>
            <li
              className="c7"
-              id="bqlWiO"
+              id="cFKBMb"
            >
              <div
                className="c8"
@ -268,7 +268,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
                <input
                  checked={false}
                  className="c9 c10"
-                  id="cpsYND"
+                  id="RPTcm"
                  name="service-view"
                  onChange={[Function]}
                  type="radio"
@ -276,7 +276,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
                />
                <label
                  className="c11"
-                  htmlFor="cpsYND"
+                  htmlFor="RPTcm"
                >
                  Topology
                </label>
--- a/packages/cp-gql-mock-server/.yarnclean
+++ b/packages/cp-gql-mock-server/.yarnclean
--- a/packages/cp-gql-mock-server/package.json
+++ b/packages/cp-gql-mock-server/package.json
@ -10,7 +10,7 @@
    "lint-ci": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-gql-mock-server.xml",
    "test": "NODE_ENV=test nyc --reporter=lcov --reporter=text ava --verbose",
    "test-ci": "NODE_ENV=test nyc --report-dir=$CIRCLE_ARTIFACTS/cp-gql-mock-server --reporter=lcov --reporter=text ava --verbose --tap | tap-xunit > $CIRCLE_TEST_REPORTS/test/cp-gql-mock-server.xml",
-    "start": "node src/index.js",
+    "start": "PORT=4000 node src/index.js",
    "dev": "PORT=3000 nodemon src/index.js",
    "prepublish": "echo 0"
  },
@ -36,12 +36,14 @@
  },
  "devDependencies": {
    "apollo-client": "^1.9.2",
+    "apr-for-each": "^1.0.6",
    "ava": "^0.22.0",
    "delay": "^2.0.0",
    "eslint": "^4.5.0",
    "eslint-config-joyent-portal": "3.0.0",
    "execa": "^0.8.0",
    "lodash.sortby": "^4.7.0",
+    "lodash.uniq": "^4.5.0",
    "mz": "^2.6.0",
    "node-fetch": "^1.7.2",
    "nodemon": "^1.11.0",
@ -49,8 +51,12 @@
    "tap-xunit": "^1.7.0"
  },
  "ava": {
-    "files": ["test/*.js"],
-    "source": ["src/*.js"],
+    "files": [
+      "test/*.js"
+    ],
+    "source": [
+      "src/*.js"
+    ],
    "failFast": true
  }
 }