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;
+  display: flex;
-margin-bottom: 10px;
+  margin-bottom: 10px;
 
-color: ${color.text};
+  color: ${color.text};
-cursor: default;
+  cursor: default;
+`;
+
+const StyledChevronIcon = styled(ChevronIcon)`
+  padding-top: 2px;
+  width: 24px;
+  height: 24px; 
 `;
 
 const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
-padding-top: 3px;
+  height: 32px;
-padding-left: 5px;
+  padding-top: 3px;
+  padding-left: 5px;
 
-&:hover,
+  &:hover,
-&:active,
+  &:active,
-&:focus {
+  &: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>