From c550fe2aeb8161c8de13a26f064e5f8e5b1d9068 Mon Sep 17 00:00:00 2001 From: Michele Cheow Date: Fri, 15 Mar 2024 21:11:19 -0700 Subject: [PATCH 1/7] added new accent color, teal --- ui/src/styles/theme.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ui/src/styles/theme.ts b/ui/src/styles/theme.ts index c646747c..66008864 100644 --- a/ui/src/styles/theme.ts +++ b/ui/src/styles/theme.ts @@ -13,6 +13,7 @@ declare module "@mui/material/styles" { accent2: Palette["primary"]; accent3: Palette["primary"]; accent4: Palette["primary"]; + accent5: Palette["primary"]; } interface PaletteOptions { base: PaletteOptions["primary"]; @@ -20,6 +21,7 @@ declare module "@mui/material/styles" { accent2: PaletteOptions["primary"]; accent3: PaletteOptions["primary"]; accent4: PaletteOptions["primary"]; + accent5: PaletteOptions["primary"]; } } @@ -81,6 +83,12 @@ const theme = createTheme({ }, name: "accent4", }), + accent5: helperTheme.palette.augmentColor({ + color: { + main: "#458AA8", + }, + name: "accent5", + }), error: { main: "#e9222f", }, From 650de6bdbd903049ec351cac02e444fd58f2ffbd Mon Sep 17 00:00:00 2001 From: Michele Cheow Date: Fri, 15 Mar 2024 21:13:08 -0700 Subject: [PATCH 2/7] =?UTF-8?q?added=20=E2=80=9CThank=20you=20for=20report?= =?UTF-8?q?ing=E2=80=9D=20text,=20expanded=20ternary=20to=20include=20diff?= =?UTF-8?q?erent=20DialogTitle=20based=20on=20if=20submitted=20or=20not?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/components/Player/DetectionDialog.tsx | 22 +++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx index d1182433..5a197453 100644 --- a/ui/src/components/Player/DetectionDialog.tsx +++ b/ui/src/components/Player/DetectionDialog.tsx @@ -126,9 +126,25 @@ export default function DetectionDialog({ onClose={handleClose} aria-labelledby="form-dialog-title" > - - {!submitted ? "Report what you heard" : "Thanks for submitting!"} - + {!submitted ? ( + + Report what you heard + + ) : ( + theme.palette.accent5.main, + fontWeight: 600, + }} + > + Thank you for reporting + + )} + {!submitted && ( Date: Thu, 21 Mar 2024 14:41:04 -0700 Subject: [PATCH 3/7] removed accent 5 from primary palette, changed modal title to primary blue color --- ui/src/components/Player/DetectionDialog.tsx | 2 +- ui/src/styles/theme.ts | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx index 5a197453..64a2a4f8 100644 --- a/ui/src/components/Player/DetectionDialog.tsx +++ b/ui/src/components/Player/DetectionDialog.tsx @@ -137,7 +137,7 @@ export default function DetectionDialog({ mt={4} align="center" sx={{ - color: (theme) => theme.palette.accent5.main, + color: (theme) => theme.palette.primary.main, fontWeight: 600, }} > diff --git a/ui/src/styles/theme.ts b/ui/src/styles/theme.ts index 66008864..c646747c 100644 --- a/ui/src/styles/theme.ts +++ b/ui/src/styles/theme.ts @@ -13,7 +13,6 @@ declare module "@mui/material/styles" { accent2: Palette["primary"]; accent3: Palette["primary"]; accent4: Palette["primary"]; - accent5: Palette["primary"]; } interface PaletteOptions { base: PaletteOptions["primary"]; @@ -21,7 +20,6 @@ declare module "@mui/material/styles" { accent2: PaletteOptions["primary"]; accent3: PaletteOptions["primary"]; accent4: PaletteOptions["primary"]; - accent5: PaletteOptions["primary"]; } } @@ -83,12 +81,6 @@ const theme = createTheme({ }, name: "accent4", }), - accent5: helperTheme.palette.augmentColor({ - color: { - main: "#458AA8", - }, - name: "accent5", - }), error: { main: "#e9222f", }, From 7edacb4d49f767d12c2cfbb6c4f0277ca21a0979 Mon Sep 17 00:00:00 2001 From: Michele Cheow Date: Tue, 26 Mar 2024 19:41:21 -0700 Subject: [PATCH 4/7] added markup/styles for updated thank you modal --- ui/src/components/Player/DetectionDialog.tsx | 72 +++++++++++++++----- 1 file changed, 55 insertions(+), 17 deletions(-) diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx index 64a2a4f8..bbdc7b67 100644 --- 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" > + theme.palette.grey[500], + }} + > + + + {!submitted ? ( Report what you heard ) : ( - theme.palette.primary.main, - fontWeight: 600, - }} - > - Thank you for reporting - + <> + theme.palette.primary.main, + fontWeight: 500, + }} + > + Thank you for reporting + + + Check out our reports to see how your support contributed to our + mission for marine conservation. + + )} {!submitted && ( @@ -216,11 +238,27 @@ export default function DetectionDialog({ ) : ( - - - + <> + + + + + )} From cd0af0cbf2fea88f6ea1b97b9039300c2f9e6c76 Mon Sep 17 00:00:00 2001 From: Michele Cheow Date: Thu, 28 Mar 2024 12:49:51 -0700 Subject: [PATCH 5/7] made link relative --- ui/src/components/Player/DetectionDialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx index bbdc7b67..4b952b32 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, @@ -25,7 +26,6 @@ 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, @@ -249,7 +249,7 @@ export default function DetectionDialog({ BACK @@ -252,7 +252,7 @@ export default function DetectionDialog({ target="_blank" color="primary" variant="contained" - sx={{ py: 2, px: isDesktop ? 6 : 3, mx: 2 }} + sx={{ py: 2, px: [3, 6], mx: 2 }} > SEE REPORTS