fix: Remove task animation

jcmnunes · Mar 23, 2020 · 50176b9 · 50176b9
1 parent 64c0b6b
commit 50176b9
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 143 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@binarycapsule/editor": "^1.1.1",
-    "@binarycapsule/ui-capsules": "^1.10.2",
+    "@binarycapsule/ui-capsules": "^1.10.3",
     "@nivo/pie": "^0.61.1",
     "axios": "^0.19.2",
     "focus-visible": "^5.0.2",

diff --git a/frontend/src/components/day/Board/Task/Task.jsx b/frontend/src/components/day/Board/Task/Task.jsx
@@ -38,11 +38,6 @@ const Task = ({
       onChange={() => handleTaskCompletedStateChange(isActive, isCompleted, taskId, sectionId)}
     />
     <TaskTitle onDoubleClick={() => handleTaskRename()}>{children}</TaskTitle>
-    {/*
-    <StyledCopyButton>
-      <TaskCopyButton taskTitle={children} />
-    </StyledCopyButton>
-    */}
     <ScopeCode scopeCode={scopeCode} style={{ lineHeight: '23px' }} />
     {!isCompleted && (
       <Controls>

diff --git a/frontend/src/components/day/Board/Task/Task.styles.js b/frontend/src/components/day/Board/Task/Task.styles.js
@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components/macro';
+import styled, { css } from 'styled-components/macro';
 
 const getColors = props => {
   const colors = {
@@ -27,39 +27,19 @@ const getColors = props => {
   return colors;
 };
 
-const pulseAnimationIsActive = props => keyframes`
-  from {
-    border-color: ${props.theme.yellow100};
-    box-shadow: 0 0 0 4px ${props.theme.yellow050};
-  }
-
-  to {
-    border-color: ${props.theme.yellow700};
-    box-shadow: 0 0 0 4px ${props.theme.yellow200};
-  }
+export const StyledCopyButton = styled.div`
+  display: none;
+  height: 24px;
 `;
 
-const pulseAnimationInBreak = props => keyframes`
-  from {
-    border-color: ${props.theme.blue050};
-    box-shadow: 0 0 0 4px ${props.theme.blue050};
-  }
-
-  to {
-    border-color: ${props.theme.blue400};
-    box-shadow: 0 0 0 4px ${props.theme.blue100};
-  }
+const isActiveMixin = css`
+  border-color: ${({ theme }) => theme.yellow700};
+  box-shadow: 0 0 0 4px ${({ theme }) => theme.yellow200};
 `;
 
-const getAnimation = props => {
-  if (props.isInBreak) return pulseAnimationInBreak(props);
-  if (props.isActive) return pulseAnimationIsActive(props);
-  return null;
-};
-
-export const StyledCopyButton = styled.div`
-  display: none;
-  height: 24px;
+const isInBreakMixin = css`
+  border-color: ${({ theme }) => theme.blue400};
+  box-shadow: 0 0 0 4px ${({ theme }) => theme.blue100};
 `;
 
 export const StyledTask = styled.div`
@@ -74,10 +54,8 @@ export const StyledTask = styled.div`
   margin: 4px 0;
   color: ${props => (props.isCompleted ? props.theme.neutral300 : props.theme.neutral700)};
   cursor: pointer;
-  animation: ${props => getAnimation(props)};
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
+  ${({ isActive }) => isActive && isActiveMixin};
+  ${({ isInBreak }) => isInBreak && isInBreakMixin};
 
   &:hover {
     background-color: ${props =>