Fixed styling on document move

frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js

@@ -13,27 +13,38 @@ import Document from 'models/Document';
 import DocumentsStore from 'stores/DocumentsStore';
 
 const ResultWrapper = styled.div`
-display: flex;
-margin-bottom: 10px;
+  display: flex;
+  margin-bottom: 10px;
 
-color: ${color.text};
-cursor: default;
+  color: ${color.text};
+  cursor: default;
+`;
+
+const StyledChevronIcon = styled(ChevronIcon)`
+  padding-top: 2px;
+  width: 24px;
+  height: 24px; 
 `;
 
 const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
-padding-top: 3px;
-padding-left: 5px;
+  height: 32px;
+  padding-top: 3px;
+  padding-left: 5px;
 
-&:hover,
-&:active,
-&:focus {
-  margin-left: 0px;
-  border-radius: 2px;
-  background: ${color.black};
-  color: ${color.smokeLight};
-  outline: none;
-  cursor: pointer;
-}
+  &:hover,
+  &:active,
+  &:focus {
+    margin-left: 0px;
+    border-radius: 2px;
+    background: ${color.black};
+    color: ${color.smokeLight};
+    outline: none;
+    cursor: pointer;
+
+    ${StyledChevronIcon} svg {
+      fill: ${color.smokeLight};
+    }
+  }
 `;
 
 type Props = {
@@ -79,16 +90,16 @@ type Props = {
         {this.resultDocument &&
           <Flex>
             {' '}
-            <ChevronIcon />
+            <StyledChevronIcon />
             {' '}
             {this.resultDocument.pathToDocument
               .map(doc => <span key={doc.id}>{doc.title}</span>)
-              .reduce((prev, curr) => [prev, <ChevronIcon />, curr])}
+              .reduce((prev, curr) => [prev, <StyledChevronIcon />, curr])}
           </Flex>}
         {document &&
           <Flex>
             {' '}
-            <ChevronIcon />
+            <StyledChevronIcon />
             {' '}{document.title}
           </Flex>}
       </Component>