Fix performance lag on toggle

2 files changed, 36 insertions, 12 deletions

diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index ac6e3f7c7..9f9c39f9a 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -221,4 +221,7 @@ export const todos = {
   dragIndicator: {
     background: legacyStyles.themeGrayLight,
   },
+  resizeHandler: {
+    backgroundHover: styleTypes.primary.accent,
+  }
 };
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index d171bbd0a..288c1906f 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -4,9 +4,11 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import Webview from 'react-electron-web-view';
 import { Icon } from '@meetfranz/ui';
+
 import * as environment from '../../../environment';
 
-const TOGGLE_SIZE = 45;
+const OPEN_TODOS_BUTTON_SIZE = 45;
+const CLOSE_TODOS_BUTTON_SIZE = 35;
 
 const styles = theme => ({
   root: {
@@ -15,10 +17,9 @@ const styles = theme => ({
     borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
     zIndex: 300,
 
-    transition: 'all 0.5s',
-    transform: props => `translateX(${props.isVisible ? 0 : props.width}px)`,
+    transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
 
-    '&:hover $toggleTodosButton': {
+    '&:hover $closeTodosButton': {
       opacity: 1,
     },
   },
@@ -43,23 +44,23 @@ const styles = theme => ({
     width: 5,
     zIndex: 400,
     background: theme.todos.dragIndicator.background,
+
   },
-  toggleTodosButton: {
-    width: TOGGLE_SIZE,
-    height: TOGGLE_SIZE,
+  openTodosButton: {
+    width: OPEN_TODOS_BUTTON_SIZE,
+    height: OPEN_TODOS_BUTTON_SIZE,
     background: theme.todos.toggleButton.background,
     position: 'absolute',
     bottom: 80,
-    right: props => (props.width + (props.isVisible ? -TOGGLE_SIZE / 2 : 0)),
-    borderRadius: TOGGLE_SIZE / 2,
+    right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
+    borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
     opacity: props => (props.isVisible ? 0 : 1),
-    transition: 'all 0.5s',
+    transition: 'right 0.5s',
     zIndex: 600,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
-    // border: [1, 'solid', theme.todos.toggleButton.borderColor],
 
     borderTopRightRadius: props => (props.isVisible ? null : 0),
     borderBottomRightRadius: props => (props.isVisible ? null : 0),
@@ -69,6 +70,26 @@ const styles = theme => ({
       transition: 'all 0.5s',
     },
   },
+  closeTodosButton: {
+    width: CLOSE_TODOS_BUTTON_SIZE,
+    height: CLOSE_TODOS_BUTTON_SIZE,
+    background: theme.todos.toggleButton.background,
+    position: 'absolute',
+    bottom: 80,
+    right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
+    borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
+    opacity: 0,
+    transition: 'opacity 0.5s',
+    zIndex: 600,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
+
+    '& svg': {
+      fill: theme.todos.toggleButton.textColor,
+    },
+  },
 });
 
 @injectSheet(styles) @observer
@@ -179,7 +200,7 @@ class TodosWebview extends Component {
         >
           <button
             onClick={() => togglePanel()}
-            className={classes.toggleTodosButton}
+            className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
             type="button"
           >
             <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} />