creating service view toggle component

frontend/src/components/service/view-toggle.js

@@ -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;

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 (
     <Row>
       <Column xs={12}>
+        <H2>Services</H2>
+        <div>
+          <span>View</span>
+          <Toggle
+          />
+        </div>
         {empty}
         {serviceList}
       </Column>

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;