creating service view toggle component

This commit is contained in:
Alex Windett 2017-02-07 17:17:38 +00:00
parent 34208cbe67
commit acb2107fc9
4 changed files with 30 additions and 3 deletions

View File

@ -0,0 +1,14 @@
const React = require('react');
const Toggle = require('@ui/components/toggle');
const ServiceToggle = () => {
return (
<div>
<span>View</span>
<Toggle />
</div>
);
};
module.exports = ServiceToggle;

View File

@ -8,6 +8,9 @@ const selectors = require('@state/selectors');
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const BaseELements = require('@ui/components/base-elements');
const Toggle = require('@ui/components/toggle');
const {
connect
} = ReactRedux;
@ -18,6 +21,10 @@ const {
servicesByProjectIdSelector
} = selectors;
const {
H2,
} = BaseELements;
const Services = ({
org = {},
project = {},
@ -39,6 +46,12 @@ const Services = ({
return (
<Row>
<Column xs={12}>
<H2>Services</H2>
<div>
<span>View</span>
<Toggle
/>
</div>
{empty}
{serviceList}
</Column>

View File

@ -29,7 +29,7 @@ const StyledText = styled.span`
const StyledDiv = styled.div`
display: inline-block;
background-color: ${colors.brandInactive};
background-color: ${colors.base.grey};
${baseBox()}
`;
@ -48,7 +48,7 @@ const StyledInput0 = styled.input`
& + span {
background: linear-gradient(to right,
transparent 50%,
${colors.brandSecondary} 50%);
${colors.base.white} 50%);
background-position: left bottom;
box-shadow: inset
${remcalc(-7)} 0 ${remcalc(9)} ${remcalc(-7)}
@ -69,7 +69,7 @@ const StyledInput1 = styled.input`
& + span {
background: linear-gradient(to right,
${colors.brandSecondary} 50%,
${colors.base.white} 50%,
transparent 50%);
background-position: right bottom;