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`] = `
-
+ Show + +
- - View -
  • @@ -257,23 +260,23 @@ exports[`renders without throwing 1`] = `