From bafc4919013ce93c60df71ee6f6e092bbeeb75d7 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 21 Oct 2017 15:34:00 -0700
Subject: [PATCH] Document stars

---
 .../DocumentPreview/DocumentPreview.js          | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/components/DocumentPreview/DocumentPreview.js b/frontend/components/DocumentPreview/DocumentPreview.js
index 14ec4e2b..d9da9bd8 100644
--- a/frontend/components/DocumentPreview/DocumentPreview.js
+++ b/frontend/components/DocumentPreview/DocumentPreview.js
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
-import Icon from 'components/Icon';
+import StarredIcon from 'components/Icon/StarredIcon';
 import PublishingInfo from './components/PublishingInfo';
 
 type Props = {
@@ -15,18 +15,13 @@ type Props = {
   innerRef?: Function,
 };
 
-const StyledStar = styled(({ solid, ...props }) => <Icon {...props} />).attrs({
-  type: 'Star',
-  color: color.text,
-})`
-  width: 16px;
-  height: 16px;
-  top: 1px;
-  margin-left: 4px;
+const StyledStar = styled(({ solid, ...props }) => (
+  <StarredIcon color={solid ? color.black : color.text} {...props} />
+))`
+  position: absolute;
   opacity: ${props => (props.solid ? '1 !important' : 0)};
   transition: all 100ms ease-in-out;
-
-  ${props => props.solid && 'polygon { fill: #000};'}
+  margin-left: 2px;
 
   &:hover {
     transform: scale(1.1);