fix(632) - UI Polishing for Service List Page

packages/cp-frontend/src/components/services/list-item.js

@@ -24,9 +24,7 @@ import {
   Anchor
 } from 'joyent-ui-toolkit';
 
-const StyledCardHeader = styled(CardHeader)`
-  position: relative;
-`;
+const StyledCardHeader = styled(CardHeader)`position: relative;`;
 
 const TitleInnerContainer = styled.div`
   display: flex;
@@ -82,15 +80,18 @@ const GraphTitle = Small.extend`
   color: #494949;
 `;
 
+const HealthyIconStyled = styled(HealthyIcon)`
+  /* I SAID NO PRETTIER */
+  display: flex;
+`;
+
 const ChildTitle = styled(CardTitle)`
   padding: 0;
   flex: 0 1 auto;
   align-self: stretch;
 `;
 
-const ServiceView = styled(CardView)`
-  height: ${remcalc(120)};
-`;
+const ServiceView = styled(CardView)`height: ${remcalc(120)};`;
 
 const StatusContainer = styled(CardDescription)`
   display: flex;
@@ -170,7 +171,7 @@ const ServiceListItem = ({
   if (service.instancesActive) {
     const { total, healthy } = service.instancesHealthy;
     const iconHealthy = total === healthy ? 'HEALTHY' : 'NOT HEALTHY';
-    const icon = <HealthyIcon healthy={iconHealthy} />;
+    const icon = <HealthyIconStyled healthy={iconHealthy} />;
     const label = `${healthy} of ${total} healthy`;
 
     healthyInfo = (
@@ -229,4 +230,4 @@ ServiceListItem.propTypes = {
   service: PropTypes.object.isRequired // Define better
 };
 
-export default ServiceListItem;
+export default ServiceListItem;

packages/cp-frontend/src/containers/services/menu.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { compose } from 'react-apollo';
 import { Col, Row } from 'react-styled-flexboxgrid';
@@ -12,14 +13,16 @@ import { FormGroup, Toggle, ToggleList, Legend } from 'joyent-ui-toolkit';
 
 const StyledLegend = Legend.extend`
   float: left;
-  padding-top: ${unitcalc(2)};
-  margin-right: ${unitcalc(1.5)};
+  margin-bottom: ${unitcalc(1.5)};
 `;
 
-const PaddedRow = Row.extend`
-  margin-bottom: ${remcalc(18)}
-`;
+const PaddedRow = Row.extend`margin-bottom: ${remcalc(18)};`;
 
+const ToggleStyled = styled(Toggle)`
+  & + label {
+    padding: ${remcalc(16)};
+  }
+`;
 
 export const ServicesMenu = ({ location: { pathname }, history: { push } }) => {
   const toggleValue = pathname.split('-').pop();
@@ -38,15 +41,15 @@ export const ServicesMenu = ({ location: { pathname }, history: { push } }) => {
       <Title>Services</Title>
       <PaddedRow>
         <Col xs={5}>
+          <StyledLegend>Show</StyledLegend>
           <FormGroup name="service-view" value={toggleValue}>
-            <StyledLegend>View</StyledLegend>
             <ToggleList>
-              <Toggle value="list" onChange={handleToggle}>
+              <ToggleStyled value="list" onChange={handleToggle}>
                 List
-              </Toggle>
-              <Toggle value="topology" onChange={handleToggle}>
+              </ToggleStyled>
+              <ToggleStyled value="topology" onChange={handleToggle}>
                 Topology
-              </Toggle>
+              </ToggleStyled>
             </ToggleList>
           </FormGroup>
         </Col>

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="chZMTz"
+              id="bVVQYi"
               placeholder="Filename including extension…"
               type="text"
               value={undefined}

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="ugaHI"
+            id="SlzVp"
             placeholder="Filename including extension…"
             type="text"
             value={undefined}

packages/cp-frontend/test/unit/components/manifest/__snapshots__/name.js.snap

@@ -339,7 +339,7 @@ exports[`renders <Name /> without throwing 1`] = `
           >
             <label
               className="c4"
-              htmlFor="cDwPbP"
+              htmlFor="bRpkHS"
             >
               Name the new deployment group
             </label>
@@ -351,7 +351,7 @@ exports[`renders <Name /> without throwing 1`] = `
           </label>
           <input
             className="c6"
-            id="cDwPbP"
+            id="bRpkHS"
             name="name"
             onBlur={[Function]}
             onChange={[Function]}
@@ -725,7 +725,7 @@ exports[`renders <Name /> without throwing 2`] = `
           >
             <label
               className="c4"
-              htmlFor="hPlHB"
+              htmlFor="cfPoqo"
             >
               Name the new deployment group
             </label>
@@ -737,7 +737,7 @@ exports[`renders <Name /> without throwing 2`] = `
           </label>
           <input
             className="c6"
-            id="hPlHB"
+            id="cfPoqo"
             name="name"
             onBlur={[Function]}
             onChange={[Function]}

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="cDfjvW"
+          id="bZKUCn"
           name="replicas"
           onBlur={[Function]}
           onChange={[Function]}

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="cDbIHU"
+              id="bIxZkW"
               name="replicas"
               onBlur={[Function]}
               onChange={[Function]}

packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap

@@ -16,7 +16,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
   padding-top: 1.1875rem;
 }
 
-.c4 {
+.c5 {
   padding: 0.35em 0.75em 0.625em;
   display: inline-block;
   margin: 0;
@@ -33,7 +33,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c9 {
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -42,49 +42,49 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
   display: none;
 }
 
-.c9[type='checkbox'],
-.c9[type='radio'] {
+.c10[type='checkbox'],
+.c10[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c9[type='number']::-webkit-inner-spin-button,
-.c9[type='number']::-webkit-outer-spin-button {
+.c10[type='number']::-webkit-inner-spin-button,
+.c10[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c9[type='search'] {
+.c10[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c9[type='search']::-webkit-search-cancel-button,
-.c9[type='search']::-webkit-search-decoration {
+.c10[type='search']::-webkit-search-cancel-button,
+.c10[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c9::-webkit-file-upload-button {
+.c10::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c9:checked + label {
+.c10:checked + label {
   border-radius: 0.25rem;
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c9:selected + label {
+.c10:selected + label {
   border-radius: 0.25rem;
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c10 {
+.c11 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   position: absolute;
@@ -142,7 +142,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
   align-self: stretch;
 }
 
-.c5 {
+.c4 {
   box-sizing: border-box;
   color: inherit;
   display: table;
@@ -152,8 +152,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 600;
   float: left;
-  padding-top: 0.75rem;
-  margin-right: 0.5625rem;
+  margin-bottom: 0.5625rem;
 }
 
 .c2 {
@@ -176,6 +175,10 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
+.c9 + label {
+  padding: 1rem;
+}
+
 @media only screen and (min-width:0em) {
   .c3 {
     -webkit-flex-basis: 41.66666666666667%;
@@ -218,38 +221,38 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
     <div
       className="c3"
     >
-      <fieldset
+      <legend
         className="c4"
+      >
+        Show
+      </legend>
+      <fieldset
+        className="c5"
         style={undefined}
       >
         <div>
-          <legend
-            className="c5"
-          >
-            View
-          </legend>
           <ul
             className="c6"
           >
             <li
               className="c7"
-              id="bQvEpy"
+              id="bqlWiO"
             >
               <div
                 className="c8"
               >
                 <input
                   checked={false}
-                  className="c9"
-                  id="RSkeG"
+                  className="c9 c10"
+                  id="bYNDQU"
                   name="service-view"
                   onChange={[Function]}
                   type="radio"
                   value="list"
                 />
                 <label
-                  className="c10"
-                  htmlFor="RSkeG"
+                  className="c11"
+                  htmlFor="bYNDQU"
                 >
                   List
                 </label>
@@ -257,23 +260,23 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
             </li>
             <li
               className="c7"
-              id="bQvEpy"
+              id="bqlWiO"
             >
               <div
                 className="c8"
               >
                 <input
                   checked={false}
-                  className="c9"
-                  id="mtxuf"
+                  className="c9 c10"
+                  id="cpsYND"
                   name="service-view"
                   onChange={[Function]}
                   type="radio"
                   value="topology"
                 />
                 <label
-                  className="c10"
-                  htmlFor="mtxuf"
+                  className="c11"
+                  htmlFor="cpsYND"
                 >
                   Topology
                 </label>