Add a link to the Contributor Detail page from the Allocation detail page

src/components/EditAllocationInfo.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory } from 'react-router-dom'
 import {
     Collapse,
     Grid,
@@ -36,6 +37,8 @@ const EditAllocationInfo = (props) => {
 
     const [openPayments, setOpenPayments] = useState(false)
 
+    const history = useHistory()
+
     const handleClickPayments = () => {
         setOpenPayments(!openPayments)
     }
@@ -108,6 +111,10 @@ const EditAllocationInfo = (props) => {
         })
     }
 
+    const redirectToContributor = () => {
+        history.push('/contributor/' + allocation.contributor.id)
+    }
+
     return (
         <Grid
             container
@@ -125,8 +132,14 @@ const EditAllocationInfo = (props) => {
             <Grid item xs={6}>
                 <Typography>
                     {`Contributor`}
-                    <Typography color='primary'>
-                        {`${allocation.contributor.name}`}
+                    <Typography 
+                        className='redirect' 
+                        color='primary'
+                        onClick={redirectToContributor}
+                    >
+                        <span>
+                            {`${allocation.contributor.name}`}
+                        </span>
                     </Typography>
                 </Typography>
             </Grid>

src/styles/EditAllocationInfo.scss

@@ -0,0 +1,14 @@
+.EditAllocationInfo {
+
+}
+
+@media screen and (min-width: $sm) {
+    .EditAllocationInfo {
+        .redirect {
+            cursor: pointer;
+            :hover {
+                color: $grey
+            }
+        }
+    }
+}

src/styles/index.scss

@@ -39,6 +39,7 @@ code {
 @import './AllocationAddForm.scss';
 @import './AllocationOverview.scss';
 @import './ClientEditDialog';
+@import './EditAllocationInfo.scss';
 @import './EditAllocationRate.scss';
 @import './EmptyState.scss';
 @import './Header.scss';