Add link to reports from detection submit modal (#379)

* added new accent color, teal

* added “Thank you for reporting” text, expanded ternary to include different DialogTitle based on if submitted or not

* removed accent 5 from primary palette, changed modal title to primary blue color

* added markup/styles for updated thank you modal

* made link relative

* removed font weight

* removed isDesktop ternary operator

---------

Co-authored-by: Paul Cretu <paul.s.cretu@gmail.com>

ui/src/components/Player/DetectionDialog.tsx

@@ -1,14 +1,17 @@
+import CloseIcon from "@mui/icons-material/Close";
 import {
   Box,
   Button,
   Dialog,
   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"
       >
-        <DialogTitle id="form-dialog-title">
-          {!submitted ? "Report what you heard" : "Thanks for submitting!"}
-        </DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+
+        {!submitted ? (
+          <DialogTitle id="form-dialog-title">
+            Report what you heard
+          </DialogTitle>
+        ) : (
+          <>
+            <DialogTitle
+              id="form-dialog-title"
+              variant="h4"
+              mt={8}
+              align="center"
+              sx={{
+                color: (theme) => theme.palette.primary.main,
+              }}
+            >
+              Thank you for reporting
+            </DialogTitle>
+            <Typography variant="body1" mb={2} mx={8} align="center">
+              Check out our reports to see how your support contributed to our
+              mission for marine conservation.
+            </Typography>
+          </>
+        )}
+
         {!submitted && (
           <DialogContent>
             <ToggleButtonGroup
@@ -200,11 +237,27 @@ export default function DetectionDialog({
             </Button>
           </DialogActions>
         ) : (
-          <DialogActions>
-            <Button onClick={handleClose} color="primary">
-              CLOSE
-            </Button>
-          </DialogActions>
+          <>
+            <DialogActions sx={{ justifyContent: "center", mb: 10 }}>
+              <Button
+                onClick={handleClose}
+                color="primary"
+                variant="outlined"
+                sx={{ py: 2, px: [3, 6], mx: 2 }}
+              >
+                BACK
+              </Button>
+              <Button
+                href="/reports"
+                target="_blank"
+                color="primary"
+                variant="contained"
+                sx={{ py: 2, px: [3, 6], mx: 2 }}
+              >
+                SEE REPORTS
+              </Button>
+            </DialogActions>
+          </>
         )}
       </Dialog>
     </>