#97 - Adds icons

src/containers/detailsPage/data-row.jsx

@@ -2,6 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isArray } from 'lodash';
 
+function IconYes() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className="table-icon" viewBox="0 0 3.93 2.86">
+      <use href="#tick" fill="#323335" />
+    </svg>
+  );
+}
+function IconNo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className="table-icon" viewBox="0 0 3.06 3.06">
+      <use href="#cross" fill="#323335" />
+    </svg>
+  );
+}
+
 export function DataRow({ row }) {
   const {
     data,
@@ -17,15 +32,17 @@ export function DataRow({ row }) {
     if (data === 'yes') {
       value = url ? (
         <span>
-          yes | Go to
+          {IconYes()}
+          {' '}
+          | Go to
           {' '}
           <a className="link-gray" href={url} target="_blank" rel="noopener noreferrer">
             {label}
           </a>
         </span>
-      ) : 'yes';
+      ) : IconYes();
     } else {
-      value = 'no';
+      value = IconNo();
     }
   } else if (url) {
     value = (

src/containers/detailsPage/details-page.jsx

@@ -113,6 +113,12 @@ export default function DetailsPage() {
           ))
         }
       </div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3.06 3.06" style={{ display: 'none' }}>
+        <polygon id="cross" points="3.06 0.46 2.6 0 1.53 1.07 0.46 0 0 0.46 1.07 1.53 0 2.6 0.46 3.06 1.53 1.99 2.6 3.06 3.06 2.6 1.99 1.53 3.06 0.46" />
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3.93 2.86" style={{ display: 'none' }}>
+        <polygon id="tick" points="1.53 2.86 0 1.33 0.46 0.87 1.53 1.94 3.47 0 3.93 0.46 1.53 2.86" />
+      </svg>
     </Container>
   );
 }

src/containers/detailsPage/styled-container.jsx

@@ -114,5 +114,10 @@ const StyledContainer = styled.div`
         }
       }
     }
+
+    .table-icon {
+      width: 9px;
+      opacity: 0.87;
+    }
   }
 `;