diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx index d1182433..e6214c02 100644 --- a/ui/src/components/Player/DetectionDialog.tsx +++ b/ui/src/components/Player/DetectionDialog.tsx @@ -1,3 +1,4 @@ +import CloseIcon from "@mui/icons-material/Close"; import { Box, Button, @@ -5,10 +6,12 @@ import { DialogActions, DialogContent, DialogTitle, + IconButton, Paper, TextField, ToggleButton, ToggleButtonGroup, + Typography, useMediaQuery, } from "@mui/material"; import { useTheme } from "@mui/material/styles"; @@ -126,9 +129,43 @@ export default function DetectionDialog({ onClose={handleClose} aria-labelledby="form-dialog-title" > - - {!submitted ? "Report what you heard" : "Thanks for submitting!"} - + theme.palette.grey[500], + }} + > + + + + {!submitted ? ( + + Report what you heard + + ) : ( + <> + theme.palette.primary.main, + }} + > + Thank you for reporting + + + Check out our reports to see how your support contributed to our + mission for marine conservation. + + + )} + {!submitted && ( ) : ( - - - + <> + + + + + )}