style: update toggle style

app/components/UI/Toggle.js

@@ -8,8 +8,8 @@ const Wrapper = styled.div`
   .switch {
     position: relative;
     display: inline-block;
-    width: 35px;
+    width: 32px;
-    height: 22px;
+    height: 18px;
   }
 
   .switch input {
@@ -33,24 +33,20 @@ const Wrapper = styled.div`
   .slider:before {
     position: absolute;
     content: '';
-    height: 20px;
+    height: 10px;
-    width: 20px;
+    width: 10px;
-    left: 1px;
+    left: 4px;
-    bottom: 1px;
+    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);
   }

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>

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;
+  width: 32px;
-  height: 22px;
+  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;
+  height: 10px;
-  width: 20px;
+  width: 10px;
-  left: 1px;
+  left: 4px;
-  bottom: 1px;
+  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);