Move Fade to its own component

Fixed todolist strikethrough styling with nested lists

app/components/Editor/components/TodoItem.js

@@ -40,8 +40,11 @@ export default class TodoItem extends Component {
 const ListItem = styled.li`
   padding-left: 1.4em;
   position: relative;
-  text-decoration: ${props => (props.checked ? 'line-through' : 'none')};
+
-  color: ${props => (props.checked ? color.slateDark : 'inherit')};
+  > p > span {
+    color: ${props => (props.checked ? color.slateDark : 'inherit')};
+    text-decoration: ${props => (props.checked ? 'line-through' : 'none')};
+  }
 `;
 
 const Input = styled.input`

app/components/Fade/Fade.js

@@ -0,0 +1,9 @@
+// @flow
+import styled from 'styled-components';
+import { fadeIn } from 'shared/styles/animations';
+
+const Fade = styled.span`
+  animation: ${fadeIn} ${props => props.timing || '250ms'} ease-in-out;
+`;
+
+export default Fade;

app/components/Fade/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Fade from './Fade';
+export default Fade;

app/components/LoadingListPlaceholder/LoadingListPlaceholder.js

@@ -1,9 +1,10 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { fadeIn, pulsate } from 'shared/styles/animations';
+import { pulsate } from 'shared/styles/animations';
 import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';
+import Fade from 'components/Fade';
 
 import { randomInteger } from 'shared/random';
 
@@ -27,10 +28,6 @@ export default (props: Object) => {
   );
 };
 
-const Fade = styled.span`
-  animation: ${fadeIn} 150ms ease-in-out;
-`;
-
 const Item = styled(Flex)`
   padding: 18px 0;
 `;

app/components/LoadingPlaceholder/ListPlaceholder.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import _ from 'lodash';
 import styled from 'styled-components';
-import { fadeIn } from 'shared/styles/animations';
 import Mask from './components/Mask';
+import Fade from 'components/Fade';
 import Flex from 'shared/components/Flex';
 
 type Props = {
@@ -23,10 +23,6 @@ const ListPlaceHolder = ({ count }: Props) => {
   );
 };
 
-const Fade = styled.span`
-  animation: ${fadeIn} 150ms ease-in-out;
-`;
-
 const Item = styled(Flex)`
   padding: 18px 0;
 `;

app/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,8 +1,7 @@
 // @flow
 import React from 'react';
-import styled from 'styled-components';
-import { fadeIn } from 'shared/styles/animations';
 import Mask from './components/Mask';
+import Fade from 'components/Fade';
 import Flex from 'shared/components/Flex';
 
 export default function LoadingPlaceholder(props: Object) {
@@ -17,7 +16,3 @@ export default function LoadingPlaceholder(props: Object) {
     </Fade>
   );
 }
-
-const Fade = styled.span`
-  animation: ${fadeIn} 150ms ease-in-out;
-`;

app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,9 +1,10 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { fadeIn, pulsate } from 'shared/styles/animations';
+import { pulsate } from 'shared/styles/animations';
 import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';
+import Fade from 'components/Fade';
 
 import { randomInteger } from 'shared/random';
 
@@ -12,7 +13,7 @@ const randomValues = Array.from(
   () => `${randomInteger(85, 100)}%`
 );
 
-export default (props: Object) => {
+const LoadingPlaceholder = (props: Object) => {
   return (
     <Fade>
       <Flex column auto {...props}>
@@ -25,13 +26,11 @@ export default (props: Object) => {
   );
 };
 
-const Fade = styled.span`
-  animation: ${fadeIn} 150ms ease-in-out;
-`;
-
 const Mask = styled(Flex)`
   height: ${props => (props.header ? 28 : 18)}px;
   margin-bottom: ${props => (props.header ? 32 : 14)}px;
   background-color: ${color.smoke};
   animation: ${pulsate} 1.3s infinite;
 `;
+
+export default LoadingPlaceholder;