diff --git a/packages/cp-frontend/src/components/services/list-item.js b/packages/cp-frontend/src/components/services/list-item.js
index 7e918f8f..b258e4c7 100644
--- a/packages/cp-frontend/src/components/services/list-item.js
+++ b/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 = ;
+ const icon = ;
const label = `${healthy} of ${total} healthy`;
healthyInfo = (
@@ -229,4 +230,4 @@ ServiceListItem.propTypes = {
service: PropTypes.object.isRequired // Define better
};
-export default ServiceListItem;
\ No newline at end of file
+export default ServiceListItem;
diff --git a/packages/cp-frontend/src/containers/services/menu.js b/packages/cp-frontend/src/containers/services/menu.js
index 3c4bc255..0d648912 100644
--- a/packages/cp-frontend/src/containers/services/menu.js
+++ b/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 } }) => {
Services
+ Show
- View
-
+
List
-
-
+
+
Topology
-
+
diff --git a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap
index 6c261fd7..90703498 100644
--- 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 without throwing 1`] = `
>
without throwing 1`] = `
>
without throwing 1`] = `
>
@@ -351,7 +351,7 @@ exports[`renders without throwing 1`] = `
without throwing 2`] = `
>
@@ -737,7 +737,7 @@ exports[`renders without throwing 2`] = `
without throwing 1`] = `
>
without throwing 1`] = `
>
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 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 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 without throwing 1`] = `
align-self: stretch;
}
-.c5 {
+.c4 {
box-sizing: border-box;
color: inherit;
display: table;
@@ -152,8 +152,7 @@ exports[`renders 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 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 without throwing 1`] = `