Merge pull request #287 from jorilallo/ui-improves

Small UX Improves

frontend/components/DocumentPreview/DocumentPreview.js

@@ -24,9 +24,16 @@ const StyledStar = styled(({ solid, ...props }) => <Icon {...props} />).attrs({
   top: 1px;
   margin-left: 4px;
   opacity: ${props => (props.solid ? '1 !important' : 0)};
-  transition: opacity 100ms ease-in-out;
+  transition: all 100ms ease-in-out;
 
   ${props => props.solid && 'polygon { fill: #000};'}
+
+  &:hover {
+    transform: scale(1.1);
+  }
+  &:active {
+    transform: scale(0.95);
+  }
 `;
 
 const DocumentLink = styled(Link)`

frontend/components/Editor/components/TodoItem.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import { color } from 'styles/constants';
 import type { Props } from '../types';
 
 export default class TodoItem extends Component {
@@ -22,7 +23,7 @@ export default class TodoItem extends Component {
     const { children, checked, readOnly } = this.props;
 
     return (
-      <ListItem>
+      <ListItem checked={checked}>
         <Input
           type="checkbox"
           checked={checked}
@@ -39,6 +40,8 @@ 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')};
 `;
 
 const Input = styled.input`