From acb2107fc9fd39d45b1cdb5da39d2f2edebedf46 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 7 Feb 2017 17:17:38 +0000
Subject: [PATCH] creating service view toggle component

---
 .../{service-item/index.js => service/item.js}     |  0
 frontend/src/components/service/view-toggle.js     | 14 ++++++++++++++
 frontend/src/containers/services/index.js          | 13 +++++++++++++
 ui/src/components/toggle/index.js                  |  6 +++---
 4 files changed, 30 insertions(+), 3 deletions(-)
 rename frontend/src/components/{service-item/index.js => service/item.js} (100%)
 create mode 100644 frontend/src/components/service/view-toggle.js

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