added markup/styles for updated thank you modal

orcasound · Mar 27, 2024 · 7edacb4 · 7edacb4
1 parent f7844d0
commit 7edacb4
Showing 1 changed file with 55 additions and 17 deletions.
diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx
@@ -5,10 +5,12 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  IconButton,
   Paper,
   TextField,
   ToggleButton,
   ToggleButtonGroup,
+  Typography,
   useMediaQuery,
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
@@ -23,6 +25,7 @@ import whaleFlukeIconImage from "@/public/icons/whale-fluke-gray.svg";
 import { analytics } from "@/utils/analytics";
 
 import DetectionCategoryButton from "./DetectionCategoryButton";
+import CloseIcon from "@mui/icons-material/Close";
 
 export default function DetectionDialog({
   children,
@@ -126,23 +129,42 @@ export default function DetectionDialog({
         onClose={handleClose}
         aria-labelledby="form-dialog-title"
       >
+        <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="h3"
-            mt={4}
-            align="center"
-            sx={{
-              color: (theme) => theme.palette.primary.main,
-              fontWeight: 600,
-            }}
-          >
-            Thank you for reporting
-          </DialogTitle>
+          <>
+            <DialogTitle
+              id="form-dialog-title"
+              variant="h4"
+              mt={8}
+              align="center"
+              sx={{
+                color: (theme) => theme.palette.primary.main,
+                fontWeight: 500,
+              }}
+            >
+              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 && (
@@ -216,11 +238,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: isDesktop ? 6 : 3, mx: 2 }}
+              >
+                BACK
+              </Button>
+              <Button
+                href="https://beta.orcasound.net/reports"
+                target="_blank"
+                color="primary"
+                variant="contained"
+                sx={{ py: 2, px: isDesktop ? 6 : 3, mx: 2 }}
+              >
+                SEE REPORTS
+              </Button>
+            </DialogActions>
+          </>
         )}
       </Dialog>
     </>