diff --git a/src/components/CaptureDetailDialog.js b/src/components/CaptureDetailDialog.js index 8ff1af6b7..8ebf04888 100644 --- a/src/components/CaptureDetailDialog.js +++ b/src/components/CaptureDetailDialog.js @@ -16,6 +16,7 @@ import { verificationStates } from '../common/variables'; import { CaptureDetailContext } from '../context/CaptureDetailContext'; import CopyNotification from './common/CopyNotification'; import { CopyButton } from './common/CopyButton'; +import { Link } from '@material-ui/core'; const useStyles = makeStyles((theme) => ({ chipRoot: { @@ -66,6 +67,14 @@ const useStyles = makeStyles((theme) => ({ box: { padding: theme.spacing(4), }, + imageLink: { + position: 'absolute', + bottom: 0, + margin: '0 auto', + left: '50%', + transform: 'translate(-50%, -50%)', + color: '#fff', + }, })); function CaptureDetailDialog(props) { @@ -172,12 +181,30 @@ function CaptureDetailDialog(props) { }, { label: 'Created', value: dateCreated.toLocaleString() }, { label: 'Note', value: renderCapture.note }, + { + label: 'Original Image URL', + value: renderCapture.imageUrl, + copy: true, + link: true, + image: true, + }, ].map((item) => ( {item.label} {item.link ? ( - + // a link is either a GrowerID (item.image == false) or OriginalImage (item.image == true) + item.image ? ( + + Open in new tab + + ) : ( + + ) ) : ( item.value || '---' )}