diff --git a/frontend/src/components/service-item/index.js b/frontend/src/components/service/item.js similarity index 100% rename from frontend/src/components/service-item/index.js rename to frontend/src/components/service/item.js diff --git a/frontend/src/components/service/view-toggle.js b/frontend/src/components/service/view-toggle.js new file mode 100644 index 00000000..1a506946 --- /dev/null +++ b/frontend/src/components/service/view-toggle.js @@ -0,0 +1,14 @@ +const React = require('react'); +const Toggle = require('@ui/components/toggle'); + +const ServiceToggle = () => { + + return ( +
+ View + +
+ ); +}; + +module.exports = ServiceToggle; \ No newline at end of file diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js index 3a82717f..02f894a0 100644 --- a/frontend/src/containers/services/index.js +++ b/frontend/src/containers/services/index.js @@ -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 ( +

Services

+
+ View + +
{empty} {serviceList}
diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js index b32b9de9..67b20b94 100644 --- a/ui/src/components/toggle/index.js +++ b/ui/src/components/toggle/index.js @@ -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;