Lower z-index and animation change (#461)

alanzanattadev · Dec 7, 2018 · 50b94ff · 50b94ff
1 parent fc2bc52
commit 50b94ff
Showing 1 changed file with 5 additions and 10 deletions.
diff --git a/lib/ExecutionControlEpic/ControlPanelFeature/Presenters/ToggleControlButton.js b/lib/ExecutionControlEpic/ControlPanelFeature/Presenters/ToggleControlButton.js
@@ -5,7 +5,7 @@ import React from "react";
 import styled from "styled-components";
 
 const ToggleControlBox = styled.div`
-  z-index: 11;
+  z-index: 2;
   display: flex;
   flex: 0 0 auto;
   align-items: stretch;
@@ -18,17 +18,16 @@ const ToggleControl = styled.div`
   height: 50px;
   border-radius: 25px;
   position: absolute;
-  right: ${props => (props.isActive ? "-16px" : "0")};
   display: flex;
+  transition: all ease 500ms;
+  right: ${props => (props.isActive ? "-25px" : "0")};
   flex: 0 0 auto;
   align-items: center;
-  transition: all ease 250ms;
   transform: translateY(-50%);
   opacity: 0.5;
   cursor: pointer;
   &:hover {
     opacity: 1;
-    right: -25px;
   }
 `;
 
@@ -48,12 +47,8 @@ const ToggleControlButton = ({
   hasControl: boolean,
   isActive: boolean,
 }) => (
-  <ToggleControlBox>
-    <ToggleControl
-      className="tool-panel-background-color"
-      onClick={() => toggleAction()}
-      isActive={isActive}
-    >
+  <ToggleControlBox onClick={() => toggleAction()}>
+    <ToggleControl className="tool-panel-background-color" isActive={isActive}>
       <ButtonIcon
         className={`icon icon-chevron-${hasControl ? "left" : "right"}`}
       />