fix(my-joy-beta): small fixes

2018-02-01 14:08:03 +00:00 · 2018-02-01 14:08:03 +00:00 · 864a693502
parent 47f2aa06c6
commit 864a693502
20 changed files with 180 additions and 303 deletions
--- a/packages/icons/src/dot.js
+++ b/packages/icons/src/dot.js
@ -7,4 +7,6 @@ export default styled.span`
  border-radius: 50%;
  background-color: ${props => props.theme[props.color]};
  display: inline-block;
+  margin-right: ${props => props.right || remcalc(0)};
+  margin-left: ${props => props.left || remcalc(0)};
 `;
--- a/packages/my-joy-beta/src/components/cns.js
+++ b/packages/my-joy-beta/src/components/cns.js
@ -43,7 +43,7 @@ export const Header = () => (

 export const Footer = ({ enabled, submitting, onToggle }) => (
  <Fragment>
-    <Margin bottom={4} top={4}>
+    <Margin bottom={4}>
      <FormGroup name="cns-enabled">
        <Flex alignCenter>
          <FormLabel disabled={submitting}>Disabled CNS</FormLabel>
@ -85,6 +85,7 @@ export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine })
              onBlur={null}
              type="text"
              placeholder="Example: mySQLdb"
+              required
              disabled={disabled || submitting}
            />
          </Margin>
@ -92,7 +93,7 @@ export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine })
      </FlexItem>
      <FlexItem>
        <Margin left={2}>
-          <Button type="submit" disabled={disabled || pristine} loading={submitting} inline>
+          <Button type="submit" loading={submitting} inline>
            Add
          </Button>
          <Divider height={remcalc(4)} transparent />
--- a/packages/my-joy-beta/src/components/create-instance/affinity.js
+++ b/packages/my-joy-beta/src/components/create-instance/affinity.js
@ -7,9 +7,14 @@ import remcalc from 'remcalc';

 import { H5, Select, Input, FormGroup } from 'joyent-ui-toolkit';

+const style = {
+  lineHeight: '48px',
+  fontSize: '18px'
+};
+
 const Values = touched => (
  <Margin right={1}>
-    <Select touched={touched} embedded width={remcalc(120)}>
+    <Select style={style} touched={touched} embedded width={remcalc(130)}>
      <option value="equalling">equalling</option>
      <option value="not-equalling">not equalling</option>
      <option value="containing">containing</option>
@ -20,39 +25,39 @@ const Values = touched => (
 );

 export const Rule = rule => (
-  <Margin top={2} bottom={4}>
+  <Margin bottom={4}>
    <Flex alignCenter wrap>
-      <H5 inline noMargin>
+      <H5 style={style} inline noMargin>
        The instance
      </H5>
      <FormGroup name="rule-instance-conditional" field={Field}>
        <Select
+          style={style}
          touched={rule['rule-instance-conditional']}
          width={remcalc(66)}
-          embedded
-        >
+          embedded>
          <option value="must">must</option>
          <option value="should">should</option>
        </Select>
      </FormGroup>
-      <H5 inline noMargin>
+      <H5 style={style} inline noMargin>
        be on
      </H5>
      <FormGroup name="rule-instance-placement" field={Field}>
        <Select
+          style={style}
          touched={rule['rule-instance-placement']}
          width={remcalc(90)}
-          embedded
-        >
+          embedded>
          <option value="same">the same</option>
          <option value="different">a different</option>
        </Select>
      </FormGroup>
-      <H5 inline noMargin>
+      <H5 style={style} inline noMargin>
        node as the instance(s) identified by the
      </H5>
      <FormGroup name="rule-type" field={Field}>
-        <Select touched={rule['rule-type']} width={remcalc(120)} embedded left>
+        <Select style={style} touched={rule['rule-type']} width={remcalc(120)} embedded left>
          <option value="name">instance name</option>
          <option value="tag">tag</option>
        </Select>
@ -61,6 +66,7 @@ export const Rule = rule => (
        <Fragment>
          <FormGroup name="rule-instance-tag-key" field={Field}>
            <Input
+              style={style}
              onBlur={null}
              small
              embedded
@ -69,7 +75,7 @@ export const Rule = rule => (
              placeholder="key"
            />
          </FormGroup>
-          <H5 inline noMargin>
+          <H5 style={style} inline noMargin>
            and value{' '}
          </H5>
          <FormGroup name="rule-instance-tag-value-pattern" field={Field}>
@ -77,6 +83,7 @@ export const Rule = rule => (
          </FormGroup>
          <FormGroup name="rule-instance-tag-value" field={Field}>
            <Input
+              style={style}
              onBlur={null}
              small
              embedded
@ -95,6 +102,7 @@ export const Rule = rule => (
            <Input
              onBlur={null}
              embedded
+              style={style}
              type="text"
              required
              placeholder="Example instance name: nginx"
@ -108,9 +116,8 @@ export const Rule = rule => (

 export const Header = rule => (
  <Fragment>
-    <b>{titleCase(rule['rule-instance-conditional'])}:</b> be on a{' '}
-    {rule['rule-instance-placement']} node as the instance(s) identified by the
-    instance {rule['rule-type']}
+    <b>{titleCase(rule['rule-instance-conditional'])}:</b> be on a {rule['rule-instance-placement']}{' '}
+    node as the instance(s) identified by the instance {rule['rule-type']}
    {rule['rule-type'] === 'name' ? (
      <Fragment>
        {' '}
--- a/packages/my-joy-beta/src/components/create-instance/network.js
+++ b/packages/my-joy-beta/src/components/create-instance/network.js
@ -38,56 +38,50 @@ const Box = styled.div`
 `;

 export const Collapsed = ({ name, fabric, ...network }) => (
-  <Row>
-    <Col xs={12} sm={8}>
-      <Margin inline right={3} top={3}>
-        <Box>
-          <Flex column>
-            <FlexItem>
-              <Margin left={3} right={3} top={2} bottom={2}>
-                <P>{name}</P>
-              </Margin>
-            </FlexItem>
-            <FlexItem>
-              <Divider height={remcalc(1)} />
-            </FlexItem>
-            <FlexItem>
-              <Margin left={3} right={3} top={2} bottom={2}>
-                <Flex>
-                  <Margin right={4}>
+  <Margin inline right={3} top={3}>
+    <Box>
+      <Flex column>
+        <FlexItem>
+          <Margin left={3} right={3} top={2} bottom={2}>
+            <P>{name}</P>
+          </Margin>
+        </FlexItem>
+        <FlexItem>
+          <Divider height={remcalc(1)} />
+        </FlexItem>
+        <FlexItem>
+          <Margin left={3} right={3} top={2} bottom={2}>
+            <Flex>
+              <Margin right={4}>
+                <FlexItem>
+                  <Flex alignCenter>
                    <FlexItem>
-                      <Flex alignCenter>
-                        <FlexItem>
-                          <Margin right={1}>
-                            {network.public ? <PublicIcon /> : <PrivateIcon />}
-                          </Margin>
-                        </FlexItem>
-                        <FlexItem>
-                          <P>{network.public ? 'Public' : 'Private'}</P>
-                        </FlexItem>
-                      </Flex>
+                      <Margin right={1}>{network.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
                    </FlexItem>
-                  </Margin>
-                  <Margin>
                    <FlexItem>
-                      <Flex alignCenter>
-                        <FlexItem>
-                          <Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
-                        </FlexItem>
-                        <FlexItem>
-                          <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
-                        </FlexItem>
-                      </Flex>
+                      <P>{network.public ? 'Public' : 'Private'}</P>
                    </FlexItem>
-                  </Margin>
-                </Flex>
+                  </Flex>
+                </FlexItem>
              </Margin>
-            </FlexItem>
-          </Flex>
-        </Box>
-      </Margin>
-    </Col>
-  </Row>
+              <Margin>
+                <FlexItem>
+                  <Flex alignCenter>
+                    <FlexItem>
+                      <Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
+                    </FlexItem>
+                    <FlexItem>
+                      <P>{fabric ? 'Fabric network' : 'Data center network'}</P>
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+              </Margin>
+            </Flex>
+          </Margin>
+        </FlexItem>
+      </Flex>
+    </Box>
+  </Margin>
 );

 export const Expanded = ({
@ -173,9 +167,7 @@ export const Expanded = ({
                              <FlexItem>
                                <Margin bottom={3}>
                                  <Flex alignCenter>
-                                    <Margin right={1}>
-                                      <DotIcon size={remcalc(12)} color="green" />
-                                    </Margin>
+                                    <DotIcon right={remcalc(6)} size={remcalc(12)} color="green" />
                                    <Small bold noMargin>
                                      Outbound internet access enabled
                                    </Small>
--- a/packages/my-joy-beta/src/components/create-instance/package.js
+++ b/packages/my-joy-beta/src/components/create-instance/package.js
@ -138,10 +138,10 @@ export const Package = ({
      </FormGroup>
    </TableTd>
    <TableTd right selected={selected}>
-      {bytes(memory, { decimalPlaces: 0 })}
+      {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
    </TableTd>
    <TableTd right selected={selected}>
-      {bytes(disk, { decimalPlaces: 0 })}
+      {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
      {ssd && (
        <Margin inline left={1}>
          <Sup badge>SSD</Sup>
@ -179,8 +179,7 @@ export const Packages = ({
            left
            middle
            xs="200"
-            actionable
-          >
+            actionable>
            <span>Name </span>
          </TableTh>
          <TableTh
@ -190,8 +189,7 @@ export const Packages = ({
            showSort={sortBy === 'memory'}
            right
            middle
-            actionable
-          >
+            actionable>
            <span>RAM </span>
          </TableTh>
          <TableTh
@ -201,8 +199,7 @@ export const Packages = ({
            showSort={sortBy === 'disk'}
            right
            middle
-            actionable
-          >
+            actionable>
            <span>Disk </span>
          </TableTh>
          {hasVms && (
@ -213,8 +210,7 @@ export const Packages = ({
              showSort={sortBy === 'vcpu'}
              right
              middle
-              actionable
-            >
+              actionable>
              <span>vCPU</span>
            </TableTh>
          )}
@ -225,8 +221,7 @@ export const Packages = ({
            showSort={sortBy === 'price'}
            right
            middle
-            actionable
-          >
+            actionable>
            <span>$/hour</span>
          </TableTh>
        </TableTr>
@ -234,29 +229,18 @@ export const Packages = ({
      <TableTbody>{children}</TableTbody>
    </Table>
    {!packages ? (
-      <Empty>
-        Sorry, but we weren’t able to find any packages with that filter
-      </Empty>
+      <Empty>Sorry, but we weren’t able to find any packages with that filter</Empty>
    ) : null}
  </form>
 );

-export const Overview = ({
-  name,
-  price,
-  memory,
-  vcpus,
-  hasVms,
-  ssd,
-  disk,
-  onCancel
-}) => (
+export const Overview = ({ name, price, memory, vcpus, hasVms, ssd, disk, onCancel }) => (
  <Fragment>
-    <H3 bold>{name}</H3>
+    <Margin bottom={2}><H3 bold noMargin>{name}</H3></Margin>
    <Flex alignCenter>
      <span>{price} $</span>
      <VerticalDivider />
-      <span>{bytes(memory, { decimalPlaces: 0 })}</span>
+      <span>{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}</span>
      {hasVms && (
        <Fragment>
          <VerticalDivider />
@ -264,7 +248,7 @@ export const Overview = ({
        </Fragment>
      )}
      <VerticalDivider />
-      <span>{bytes(disk, { decimalPlaces: 0 })} disk</span>
+      <span>{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })} disk</span>
      <VerticalDivider />
      {ssd && <span>SSD</span>}
    </Flex>
--- a/packages/my-joy-beta/src/components/instances/list.js
+++ b/packages/my-joy-beta/src/components/instances/list.js
@ -23,8 +23,7 @@ import {
  PopoverItem,
  PopoverDivider,
  DotIcon,
-  ActionsIcon,
-  Strong
+  ActionsIcon
 } from 'joyent-ui-toolkit';

 const stateColor = {
@ -39,7 +38,8 @@ const stateColor = {
 const A = styled(Anchor)`
  color: ${props => props.theme.text};
  text-decoration: none;
-`
+  font-weight: ${props => props.theme.font.weight.semibold};
+`;

 export const Item = ({
  id = '',
@ -60,20 +60,16 @@ export const Item = ({
      </FormGroup>
    </TableTd>
    <TableTd middle left>
-      <Strong><A to={`/instances/${name}`} component={Link}>
+      <A to={`/instances/${name}`} component={Link}>
        {name}
-      </A></Strong>
+      </A>
    </TableTd>
    <TableTd middle left>
      {mutating ? (
        <StatusLoader small />
      ) : (
        <span>
-          <DotIcon
-            size={remcalc(12)}
-            color={stateColor[state]}
-          />{' '}
-          {titleCase(state)}
+          <DotIcon size={remcalc(12)} color={stateColor[state]} /> {titleCase(state)}
        </span>
      )}
    </TableTd>
@ -143,8 +139,7 @@ export default ({
            showSort={sortBy === 'name'}
            left
            middle
-            actionable
-          >
+            actionable>
            <span>Name </span>
          </TableTh>
          <TableTh
@ -154,8 +149,7 @@ export default ({
            showSort={sortBy === 'state'}
            left
            middle
-            actionable
-          >
+            actionable>
            <span>Status </span>
          </TableTh>
          <TableTh
@ -166,8 +160,7 @@ export default ({
            showSort={sortBy === 'created'}
            left
            middle
-            actionable
-          >
+            actionable>
            <span>Created </span>
          </TableTh>
          <TableTh
@ -178,8 +171,7 @@ export default ({
            showSort={sortBy === 'id'}
            left
            middle
-            actionable
-          >
+            actionable>
            <span>Short ID </span>
          </TableTh>
          <TableTh xs="60" padding="0" />
--- a/packages/my-joy-beta/src/components/instances/summary.js
+++ b/packages/my-joy-beta/src/components/instances/summary.js
@ -136,7 +136,7 @@ export const CopiableField = ({ label, text, ...rest }) => (
    <Col xs={12} md={7}>
      <FormLabel>{label}</FormLabel>
      <InputIconWrapper {...rest}>
-        <Input onBlur={null} fluid value={text} />
+        <Input monospace onBlur={null} fluid value={text} />
        <CopyToClipboardTooltip>{text}</CopyToClipboardTooltip>
      </InputIconWrapper>
    </Col>
--- a/packages/my-joy-beta/src/components/instances/toolbar.js
+++ b/packages/my-joy-beta/src/components/instances/toolbar.js
@ -25,7 +25,7 @@ export const Toolbar = ({
      <FormGroup name="filter" fluid field={Field}>
        <FormLabel>{searchLabel}</FormLabel>
        <Margin top={0.5}>
-          <Input placeholder={searchPlaceholder} disabled={!searchable} fluid />
+          <Input placeholder={searchPlaceholder} disabled={!searchable} />
        </Margin>
      </FormGroup>
    </Col>
--- a/packages/my-joy-beta/src/components/key-value.js
+++ b/packages/my-joy-beta/src/components/key-value.js
@ -49,6 +49,7 @@ const PaddingMaxWidth = styled(Padding)`

 const Meta = styled(CardHeaderMeta)`
  height: ${remcalc(47)};
+  max-width: 98%;
 `;

 class ValueTextareaField extends PureComponent {
@ -166,9 +167,9 @@ export const KeyValue = ({
                  {initialValues.name ? (
                    <Fragment>
                      {expanded ? (
-                        <span>{`${initialValues.name}${type === 'metadata' ? '-' : ':'}`}</span>
+                        <span>{`${initialValues.name}${type === 'metadata' ? '—å' : ':'}`}</span>
                      ) : (
-                        <b>{`${initialValues.name}${type === 'metadata' ? '-' : ':'}`}</b>
+                        <b>{`${initialValues.name}${type === 'metadata' ? '—å' : ':'}`}</b>
                      )}
                      <span>{initialValues.value}</span>
                    </Fragment>
@ -215,7 +216,7 @@ export const KeyValue = ({
              />
            ) : null}
            {input !== 'textarea' && input !== 'input' ? input(submitting) : null}
-            <Margin top={2}>
+            <Margin top={1}>
              <Row between="xs" middle="xs">
                <Col xs={method === 'add' ? 12 : 7}>
                  <Button
--- a/packages/my-joy-beta/src/containers/create-instance/affinity.js
+++ b/packages/my-joy-beta/src/containers/create-instance/affinity.js
@ -42,7 +42,6 @@ export const Affinity = ({
  handleToggleExpanded,
  handleCancelEdit,
  handleChangeAddOpen,
-  handleNext,
  handleEdit,
  rule,
  step
@ -136,9 +135,6 @@ export const Affinity = ({
            Create Affinity Rule
          </Button>
        ) : null}
-        <Button type="submit" onClick={handleNext}>
-          Next
-        </Button>
      </Margin>
    ) : proceeded ? (
      <Margin top={2} bottom={4}>
@ -162,13 +158,6 @@ export default compose(
    rule: get(form, `${FORM_NAME_CREATE}.values`, {})
  })),
  connect(null, (dispatch, { affinityRules = [], history }) => ({
-    handleNext: () => {
-      dispatch(
-        set({ name: 'create-instance-affinity-proceeded', value: true })
-      );
-
-      return history.push(`/instances/~create/summary`);
-    },
    handleEdit: () => {
      return history.push(`/instances/~create/affinity`);
    },
--- a/packages/my-joy-beta/src/containers/create-instance/cns.js
+++ b/packages/my-joy-beta/src/containers/create-instance/cns.js
@ -39,40 +39,35 @@ const CNSContainer = ({
      id={step}
      onClick={!expanded && !proceeded && handleEdit}
      collapsed={!expanded && !proceeded}
-      icon={<CnsIcon />}
-    >
+      icon={<CnsIcon />}>
      Container Name Service
    </Title>
    {expanded ? (
      <Description>
-        Triton CNS is used to automatically update hostnames for your
-        instances*. You can serve multiple instances (with multiple IP
-        addresses) under the same hostname by matching the CNS service names.{' '}
+        Triton CNS is used to automatically update hostnames for your instances*. You can serve
+        multiple instances (with multiple IP addresses) under the same hostname by matching the CNS
+        service names.{' '}
        <a
          href="https://docs.joyent.com/private-cloud/install/cns"
          target="_blank"
-          rel="noopener noreferrer"
-        >
+          rel="noopener noreferrer">
          Read the docs
        </a>
      </Description>
    ) : null}
    <div>
      {expanded && cnsEnabled ? (
-        <Cns
-          hostnames={hostnames}
-          services={serviceNames}
-          onRemoveService={handleRemoveService}
-        >
-          <ReduxForm
-            form={`${CNS_FORM}-new-service`}
-            destroyOnUnmount={false}
-            forceUnregisterOnUnmount={true}
-            onSubmit={handleAddService}
-          >
-            {props => <AddServiceForm {...props} />}
-          </ReduxForm>
-        </Cns>
+        <Margin bottom={4}>
+          <Cns hostnames={hostnames} services={serviceNames} onRemoveService={handleRemoveService}>
+            <ReduxForm
+              form={`${CNS_FORM}-new-service`}
+              destroyOnUnmount={false}
+              forceUnregisterOnUnmount={true}
+              onSubmit={handleAddService}>
+              {props => <AddServiceForm {...props} />}
+            </ReduxForm>
+          </Cns>
+        </Margin>
      ) : null}
      {expanded ? (
        <Fragment>
@ -87,20 +82,8 @@ const CNSContainer = ({
      {proceeded && !expanded ? (
        <Fragment>
          <Margin bottom={4}>
-            <H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
+            <H3>{cnsEnabled ? 'CNS enabled' : 'CNS not enabled'}</H3>
          </Margin>
-          {cnsEnabled && serviceNames.length ? (
-            <Fragment>
-              <FormLabel>Existing CNS service name(s)</FormLabel>
-              <Margin top={0.5}>
-                <TagList>
-                  {serviceNames.map((value, index) => (
-                    <Tag key={index} value={value} />
-                  ))}
-                </TagList>
-              </Margin>
-            </Fragment>
-          ) : null}
          <Margin bottom={7}>
            <Button type="button" onClick={handleEdit} secondary>
              Edit
@ -120,11 +103,7 @@ export default compose(
    })
  }),
  connect(({ form, values }, { id }) => {
-    const instanceName = get(
-      form,
-      'create-instance-name.values.name',
-      '<instance-name>'
-    );
+    const instanceName = get(form, 'create-instance-name.values.name', '<instance-name>');

    const serviceNames = get(values, `${CNS_FORM}-services`, []);

@ -179,9 +158,7 @@ export default compose(
    handleToggleCnsEnabled: ({ target }) =>
      dispatch(set({ name: `${CNS_FORM}-enabled`, value: !cnsEnabled })),
    handleAddService: ({ name }) => {
-      const serviceName = punycode
-        .encode(name.toLowerCase().replace(/\s/g, '-'))
-        .replace(/-$/, '');
+      const serviceName = punycode.encode(name.toLowerCase().replace(/\s/g, '-')).replace(/-$/, '');

      dispatch([
        destroy(`${CNS_FORM}-new-service`),
--- a/packages/my-joy-beta/src/containers/create-instance/firewall.js
+++ b/packages/my-joy-beta/src/containers/create-instance/firewall.js
@ -112,7 +112,7 @@ const Firewall = ({
    ) : null}
    {proceeded && !expanded ? (
      <Margin bottom={4}>
-        <H3>{enabled ? 'Firewall Enabled' : 'Firewall Not Enabled'}</H3>
+        <H3>{enabled ? 'Firewall enabled' : 'Firewall not enabled'}</H3>
      </Margin>
    ) : null}
    {expanded ? (
--- a/packages/my-joy-beta/src/containers/create-instance/metadata.js
+++ b/packages/my-joy-beta/src/containers/create-instance/metadata.js
@ -60,7 +60,7 @@ export const Metadata = ({
    {proceeded || expanded ? (
      <Margin bottom={3}>
        <H3>
-          {metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}
+          {metadata.length} key—value pair{metadata.length === 1 ? '' : 's'}
        </H3>
      </Margin>
    ) : null}
--- a/packages/my-joy-beta/src/containers/create-instance/networks.js
+++ b/packages/my-joy-beta/src/containers/create-instance/networks.js
@ -137,7 +137,7 @@ export default compose(
            id
          };
        })
-        .sort((a, b) => a.name < b.name);
+        .sort((_, b) => b.selected);

      return {
        proceeded: get(values, 'create-instance-networks-proceeded', false),
--- a/packages/my-joy-beta/src/containers/create-instance/tags.js
+++ b/packages/my-joy-beta/src/containers/create-instance/tags.js
@ -58,7 +58,7 @@ export const Tags = ({
    ) : null}
    {proceeded || expanded ? (
      <Fragment>
-        <Margin bottom={3}>
+        <Margin bottom={4}>
          <H3>
            {tags.length} Tag{tags.length === 1 ? '' : 's'}
          </H3>
@ -73,7 +73,6 @@ export const Tags = ({
            />
          ))}
        </TagList>
-        <Divider height={remcalc(12)} transparent />
      </Fragment>
    ) : null}
    <ReduxForm
--- a/packages/my-joy-beta/src/containers/instances/cns.js
+++ b/packages/my-joy-beta/src/containers/instances/cns.js
@ -43,14 +43,13 @@ const CnsContainer = ({
  <ViewContainer main>
    <Margin bottom={1}>
      <Description>
-        Triton CNS is used to automatically update hostnames for your
-        instances*. You can serve multiple instances (with multiple IP
-        addresses) under the same hostname by matching the CNS service names.{' '}
+        Triton CNS is used to automatically update hostnames for your instances*. You can serve
+        multiple instances (with multiple IP addresses) under the same hostname by matching the CNS
+        service names.{' '}
        <a
          href="https://docs.joyent.com/private-cloud/install/cns"
          target="_blank"
-          rel="noopener noreferrer"
-        >
+          rel="noopener noreferrer">
          Read the docs
        </a>
      </Description>
@ -60,9 +59,7 @@ const CnsContainer = ({
      <Margin bottom={4}>
        <Message error>
          <MessageTitle>Ooops!</MessageTitle>
-          <MessageDescription>
-            An error occurred while loading your CNS services
-          </MessageDescription>
+          <MessageDescription>An error occurred while loading your CNS services</MessageDescription>
        </Message>
      </Margin>
    ) : null}
@ -75,22 +72,20 @@ const CnsContainer = ({
      </Margin>
    ) : null}
    {!loading && !disabled ? (
-      <Cns
-        services={services}
-        hostnames={hostnames}
-        onRemoveService={
-          !mutating && (name => handleRemoveService(name, services))
-        }
-      >
-        <ReduxForm
-          form={FORM_NAME}
-          destroyOnUnmount={false}
-          forceUnregisterOnUnmount={true}
-          onSubmit={val => handleAddService(val, services)}
-        >
-          {props => <AddServiceForm {...props} disabled={mutating} />}
-        </ReduxForm>
-      </Cns>
+      <Margin bottom={4}>
+        <Cns
+          services={services}
+          hostnames={hostnames}
+          onRemoveService={!mutating && (name => handleRemoveService(name, services))}>
+          <ReduxForm
+            form={FORM_NAME}
+            destroyOnUnmount={false}
+            forceUnregisterOnUnmount={true}
+            onSubmit={val => handleAddService(val, services)}>
+            {props => <AddServiceForm {...props} disabled={mutating} />}
+          </ReduxForm>
+        </Cns>
+      </Margin>
    ) : null}
    {!loading && !loadingError ? (
      <Footer
@ -163,16 +158,8 @@ export default compose(
      const toggling = get(values, `cns-${instance.id}-toggling`, false);
      const removing = get(values, `cns-${instance.id}-removing`, false);
      const enabled = get(values, `cns-${instance.id}-enabled`, undefined);
-      const togglingError = get(
-        values,
-        `cns-${instance.id}-toggling-error`,
-        null
-      );
-      const removingError = get(
-        values,
-        `cns-${instance.id}-removing-error`,
-        null
-      );
+      const togglingError = get(values, `cns-${instance.id}-toggling-error`, null);
+      const removingError = get(values, `cns-${instance.id}-removing-error`, null);
      const svcs = get(values, `cns-${instance.id}-svcs`, undefined);

      if (isBoolean(enabled)) {
@ -213,9 +200,7 @@ export default compose(
        return {
          ...hostname,
          values: services.map(name => {
-            const postfix = hostname.public
-              ? '.triton.zone'
-              : '.cns.joyent.com';
+            const postfix = hostname.public ? '.triton.zone' : '.cns.joyent.com';
            return `${name}.svc.${id}.${dataCenter}${postfix}`;
          })
        };
--- a/packages/my-joy-beta/src/containers/instances/metadata.js
+++ b/packages/my-joy-beta/src/containers/instances/metadata.js
@ -52,12 +52,7 @@ export const Metadata = ({

  const _add = addOpen ? (
    <ReduxForm form={ADD_FORM_NAME} onSubmit={handleCreate}>
-      {props => (
-        <MetadataAddForm
-          {...props}
-          onCancel={() => handleToggleAddOpen(false)}
-        />
-      )}
+      {props => <MetadataAddForm {...props} onCancel={() => handleToggleAddOpen(false)} />}
    </ReduxForm>
  ) : null;

@ -79,26 +74,27 @@ export const Metadata = ({
  const _metadata =
    !_loading &&
    metadata.map(({ form, initialValues, expanded, removing }) => (
-      <ReduxForm
-        form={form}
-        key={form}
-        initialValues={initialValues}
-        destroyOnUnmount={false}
-        onSubmit={handleUpdate}
-      >
-        {props => (
-          <MetadataEditForm
-            {...props}
-            /* yeah, we need this here too */
-            initialValues={initialValues}
-            onToggleExpanded={() => handleUpdateExpanded(form, !expanded)}
-            onCancel={() => handleCancel(form)}
-            onRemove={() => handleRemove(form)}
-            expanded={expanded}
-            removing={removing}
-          />
-        )}
-      </ReduxForm>
+      <Margin bottom={2}>
+        <ReduxForm
+          form={form}
+          key={form}
+          initialValues={initialValues}
+          destroyOnUnmount={false}
+          onSubmit={handleUpdate}>
+          {props => (
+            <MetadataEditForm
+              {...props}
+              /* yeah, we need this here too */
+              initialValues={initialValues}
+              onToggleExpanded={() => handleUpdateExpanded(form, !expanded)}
+              onCancel={() => handleCancel(form)}
+              onRemove={() => handleRemove(form)}
+              expanded={expanded}
+              removing={removing}
+            />
+          )}
+        </ReduxForm>
+      </Margin>
    ));

  const _error =
@ -106,9 +102,7 @@ export const Metadata = ({
      <Margin bottom={4}>
        <Message error>
          <MessageTitle>Ooops!</MessageTitle>
-          <MessageDescription>
-            An error occurred while loading your metadata
-          </MessageDescription>
+          <MessageDescription>An error occurred while loading your metadata</MessageDescription>
        </Message>
      </Margin>
    ) : null;
@ -186,22 +180,12 @@ export default compose(
      }))
    }),
    (dispatch, ownProps) => {
-      const {
-        instance,
-        metadata,
-        updateMetadata,
-        deleteMetadata,
-        refetch
-      } = ownProps;
+      const { instance, metadata, updateMetadata, deleteMetadata, refetch } = ownProps;

      return {
        handleCancel: form =>
-          dispatch([
-            set({ name: `${form}-expanded`, value: false }),
-            dispatch(reset(form))
-          ]),
-        handleToggleAddOpen: value =>
-          dispatch(set({ name: `add-metadata-open`, value })),
+          dispatch([set({ name: `${form}-expanded`, value: false }), dispatch(reset(form))]),
+        handleToggleAddOpen: value => dispatch(set({ name: `add-metadata-open`, value })),
        handleUpdateExpanded: (form, expanded) =>
          dispatch(set({ name: `${form}-expanded`, value: expanded })),
        handleCreate: async ({ name, value }) => {
@ -240,10 +224,7 @@ export default compose(
              deleteMetadata({
                variables: {
                  id: instance.id,
-                  name: get(
-                    find(metadata, ['form', form]),
-                    'initialValues.name'
-                  )
+                  name: get(find(metadata, ['form', form]), 'initialValues.name')
                }
              }),
              updateMetadata({
@ -273,10 +254,7 @@ export default compose(
          return refetch();
        },
        handleRemove: async form => {
-          dispatch([
-            set({ name: `${form}-removing`, value: true }),
-            startSubmit(form)
-          ]);
+          dispatch([set({ name: `${form}-removing`, value: true }), startSubmit(form)]);

          // call mutation
          const [err] = await intercept(
@ -295,10 +273,7 @@ export default compose(
            });
          }

-          dispatch([
-            stopSubmit(form),
-            set({ name: `${form}-removing`, value: false })
-          ]);
+          dispatch([stopSubmit(form), set({ name: `${form}-removing`, value: false })]);

          // fetch metadata again (even though we are polling)
          return refetch();
--- a/packages/my-joy-beta/src/containers/instances/tags.js
+++ b/packages/my-joy-beta/src/containers/instances/tags.js
@ -11,19 +11,9 @@ import get from 'lodash.get';
 import intercept from 'apr-intercept';
 import remcalc from 'remcalc';

-import {
-  ViewContainer,
-  StatusLoader,
-  Divider,
-  H3,
-  TagList
-} from 'joyent-ui-toolkit';
+import { ViewContainer, StatusLoader, Divider, H3, TagList } from 'joyent-ui-toolkit';

-import {
-  default as Tag,
-  AddForm as TagsAddForm,
-  EditForm as TagsEditForm
-} from '@components/tags';
+import { default as Tag, AddForm as TagsAddForm, EditForm as TagsEditForm } from '@components/tags';

 import ToolbarForm from '@components/instances/toolbar';
 import GetTags from '@graphql/list-tags.gql';
@ -55,8 +45,7 @@ export const Tags = ({
    <ReduxForm
      form={ADD_FORM_NAME}
      onSubmit={handleCreate}
-      onCancel={() => handleToggleAddOpen(false)}
-    >
+      onCancel={() => handleToggleAddOpen(false)}>
      {TagsAddForm}
    </ReduxForm>
  ) : null;
@ -69,7 +58,7 @@ export const Tags = ({
    : null;

  const _count = !_loading ? (
-    <Margin bottom={4} top={addOpen && 4}>
+    <Margin bottom={4} top={(addOpen || editing) ? 4: 0}>
      <H3>
        {tags.length} tag{tags.length === 1 ? '' : 's'}
      </H3>
@ -94,8 +83,7 @@ export const Tags = ({
    <ReduxForm
      form={editing.form}
      initialValues={{ name: editing.name, value: editing.value }}
-      onSubmit={handleEdit}
-    >
+      onSubmit={handleEdit}>
      {props => (
        <TagsEditForm
          {...props}
@ -177,8 +165,7 @@ export default compose(
      const editingTagName = get(values, 'editing-tag', null);
      const removingTagName = get(values, 'removing-tag', null);
      const removingTag = editingTagName === removingTagName;
-      const editingTag =
-        editingTagName && find(filtered, ['name', editingTagName]);
+      const editingTag = editingTagName && find(filtered, ['name', editingTagName]);

      return {
        ...ownProps,
@ -196,10 +183,8 @@ export default compose(
    },
    (dispatch, ownProps) => {
      return {
-        handleToggleAddOpen: value =>
-          dispatch(set({ name: `add-tags-open`, value })),
-        handleToggleEditing: value =>
-          dispatch(set({ name: `editing-tag`, value })),
+        handleToggleAddOpen: value => dispatch(set({ name: `add-tags-open`, value })),
+        handleToggleEditing: value => dispatch(set({ name: `editing-tag`, value })),
        handleEdit: async ({ name, value }, _, { form, initialValues }) => {
          const { instance, deleteTag, updateTags, refetch } = ownProps;

@ -231,8 +216,7 @@ export default compose(
            });
          };

-          const mutation =
-            initialValues.name === name ? updateValue : replaceTag;
+          const mutation = initialValues.name === name ? updateValue : replaceTag;

          const [err] = await intercept(mutation());

@ -243,11 +227,7 @@ export default compose(
            });
          }

-          dispatch([
-            set({ name: `editing-tag`, value: false }),
-            reset(form),
-            startSubmit(form)
-          ]);
+          dispatch([set({ name: `editing-tag`, value: false }), reset(form), startSubmit(form)]);

          // fetch tags again (even though we are polling)
          return refetch();
@ -255,10 +235,7 @@ export default compose(
        handleRemove: async (form, { name }) => {
          const { instance, deleteTag, refetch } = ownProps;

-          dispatch([
-            set({ name: `removing-tag`, value: name }),
-            startSubmit(form)
-          ]);
+          dispatch([set({ name: `removing-tag`, value: name }), startSubmit(form)]);

          // call mutation
          const [err] = await intercept(
--- a/packages/ui-toolkit/src/form/label.js
+++ b/packages/ui-toolkit/src/form/label.js
@ -7,7 +7,7 @@ import Label from '../label';

 const StyledLabel = Label.extend`
  margin-right: ${remcalc(12)};
-  font-weight: bold;
+  font-weight: ${props => props.theme.font.weight.semibold};
  white-space: pre;
  font-size: ${remcalc(13)};

--- a/packages/ui-toolkit/src/table/index.js
+++ b/packages/ui-toolkit/src/table/index.js
@ -162,10 +162,6 @@ const BaseTbody = styled.tbody`
  ${is('disabled')`
    border-color: ${props => props.theme.grey};
  `};
-
-  tr:first-child td {
-    border-top: none;
-  }
 `;

 const BaseTh = styled.th`