From f9b31351679f252725ae7fdb813430969bab9a2a Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Mon, 19 Nov 2018 21:27:33 +0100
Subject: [PATCH] style: update toggle style

---
 app/components/UI/Toggle.js                    | 18 +++++++-----------
 .../__snapshots__/PaySummaryRow.spec.js.snap   |  4 ++--
 .../UI/__snapshots__/Toggle.spec.js.snap       | 18 +++++++-----------
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/app/components/UI/Toggle.js b/app/components/UI/Toggle.js
index 792c1ae5..9d331921 100644
--- a/app/components/UI/Toggle.js
+++ b/app/components/UI/Toggle.js
@@ -8,8 +8,8 @@ const Wrapper = styled.div`
   .switch {
     position: relative;
     display: inline-block;
-    width: 35px;
-    height: 22px;
+    width: 32px;
+    height: 18px;
   }
 
   .switch input {
@@ -33,24 +33,20 @@ const Wrapper = styled.div`
   .slider:before {
     position: absolute;
     content: '';
-    height: 20px;
-    width: 20px;
-    left: 1px;
-    bottom: 1px;
+    height: 10px;
+    width: 10px;
+    left: 4px;
+    top: 4px;
     background-color: white;
     transition: 0.4s;
     border-radius: 50%;
-    box-shadow: 1px 1px 3px ${props => props.theme.colors.invisibleGray};
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
   }
 
   input:checked + .slider {
     background-color: ${props => props.theme.colors.superGreen};
   }
 
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196f3;
-  }
-
   input:checked + .slider:before {
     transform: translateX(13px);
   }
diff --git a/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap b/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
index 6c985586..d35dd621 100644
--- a/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
+++ b/test/unit/components/Pay/__snapshots__/PaySummaryRow.spec.js.snap
@@ -8,13 +8,13 @@ exports[`component.Form.DataRow should render correctly 1`] = `
 >
   <Text
     fontWeight="normal"
-    width={0.4}
+    width={0.5}
   >
     left contnet
   </Text>
   <Text
     textAlign="right"
-    width={0.6}
+    width={0.5}
   >
     right content
   </Text>
diff --git a/test/unit/components/UI/__snapshots__/Toggle.spec.js.snap b/test/unit/components/UI/__snapshots__/Toggle.spec.js.snap
index b46877b2..888c8973 100644
--- a/test/unit/components/UI/__snapshots__/Toggle.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Toggle.spec.js.snap
@@ -8,8 +8,8 @@ exports[`component.UI.Toggle should render correctly 1`] = `
 .c0 .switch {
   position: relative;
   display: inline-block;
-  width: 35px;
-  height: 22px;
+  width: 32px;
+  height: 18px;
 }
 
 .c0 .switch input {
@@ -34,25 +34,21 @@ exports[`component.UI.Toggle should render correctly 1`] = `
 .c0 .slider:before {
   position: absolute;
   content: '';
-  height: 20px;
-  width: 20px;
-  left: 1px;
-  bottom: 1px;
+  height: 10px;
+  width: 10px;
+  left: 4px;
+  top: 4px;
   background-color: white;
   -webkit-transition: 0.4s;
   transition: 0.4s;
   border-radius: 50%;
-  box-shadow: 1px 1px 3px;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
 }
 
 .c0 input:checked + .slider {
   background-color: #39e673;
 }
 
-.c0 input:focus + .slider {
-  box-shadow: 0 0 1px #2196f3;
-}
-
 .c0 input:checked + .slider:before {
   -webkit-transform: translateX(13px);
   -ms-transform: translateX(13px);