From 2e5d278a5562a108a06daadd3b7ad93d8ea419ba Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Fri, 28 Jun 2024 14:28:53 -0400 Subject: [PATCH] Use sx theme color functions (#3161) --- .../AnnouncementBanner/AnnouncementBanner.tsx | 6 ++++-- src/components/Buttons/LoadingButton.tsx | 6 ++---- src/components/Buttons/LoadingDoneButton.tsx | 10 ++++------ .../ProjectExport/DownloadButton.tsx | 18 ++++++++---------- .../ProjectSettings/ProjectArchive.tsx | 3 +-- .../CharacterList/CharacterStatusText.tsx | 15 +++++++-------- .../Cells/EditCell/EditDialog.tsx | 7 +++---- 7 files changed, 29 insertions(+), 36 deletions(-) diff --git a/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/src/components/AnnouncementBanner/AnnouncementBanner.tsx index 769199275c..924a33db8e 100644 --- a/src/components/AnnouncementBanner/AnnouncementBanner.tsx +++ b/src/components/AnnouncementBanner/AnnouncementBanner.tsx @@ -16,7 +16,7 @@ import { topBarHeight } from "components/LandingPage/TopBar"; import { useAppSelector } from "rootRedux/hooks"; import { type StoreState } from "rootRedux/types"; import { Path } from "types/path"; -import theme, { themeColors } from "types/theme"; +import theme from "types/theme"; export default function AnnouncementBanner(): ReactElement { const [banner, setBanner] = useState(""); @@ -47,7 +47,9 @@ export default function AnnouncementBanner(): ReactElement { } return banner ? ( - + t.palette.warning.main }} + > diff --git a/src/components/Buttons/LoadingButton.tsx b/src/components/Buttons/LoadingButton.tsx index c3e39d631a..12c3b05ae7 100644 --- a/src/components/Buttons/LoadingButton.tsx +++ b/src/components/Buttons/LoadingButton.tsx @@ -2,8 +2,6 @@ import { Button, CircularProgress } from "@mui/material"; import { type ButtonProps } from "@mui/material/Button"; import { type ReactElement, type ReactNode } from "react"; -import { themeColors } from "types/theme"; - interface LoadingProps { buttonProps?: ButtonProps & { "data-testid"?: string }; children?: ReactNode; @@ -25,8 +23,8 @@ export default function LoadingButton(props: LoadingProps): ReactElement { {props.loading && ( t.palette.success.main, position: "absolute", top: "50%", left: "50%", diff --git a/src/components/Buttons/LoadingDoneButton.tsx b/src/components/Buttons/LoadingDoneButton.tsx index 2055123076..53dd0200c0 100644 --- a/src/components/Buttons/LoadingDoneButton.tsx +++ b/src/components/Buttons/LoadingDoneButton.tsx @@ -4,8 +4,6 @@ import { ButtonProps } from "@mui/material/Button"; import { ReactElement, ReactNode } from "react"; import { useTranslation } from "react-i18next"; -import { themeColors } from "types/theme"; - interface LoadingDoneProps { buttonProps?: ButtonProps; children?: ReactNode; @@ -29,8 +27,8 @@ export default function LoadingDoneButton( variant="contained" {...props.buttonProps} disabled={props.disabled || props.loading} - style={{ - backgroundColor: props.done ? themeColors.success : undefined, + sx={{ + backgroundColor: props.done ? (t) => t.palette.success.main : undefined, color: props.done ? "white" : undefined, ...props.buttonProps?.style, }} @@ -46,8 +44,8 @@ export default function LoadingDoneButton( {props.loading && !props.done && ( t.palette.success.main, position: "absolute", top: "50%", left: "50%", diff --git a/src/components/ProjectExport/DownloadButton.tsx b/src/components/ProjectExport/DownloadButton.tsx index f354f5b0d1..bd82cf724b 100644 --- a/src/components/ProjectExport/DownloadButton.tsx +++ b/src/components/ProjectExport/DownloadButton.tsx @@ -18,7 +18,6 @@ import { import { ExportStatus } from "components/ProjectExport/Redux/ExportProjectReduxTypes"; import { useAppDispatch, useAppSelector } from "rootRedux/hooks"; import { type StoreState } from "rootRedux/types"; -import { themeColors } from "types/theme"; import { getDateTimeString } from "utilities/utilities"; function makeExportName(projectName: string): string { @@ -112,14 +111,6 @@ export default function DownloadButton( } } - function iconColor(): `#${string}` { - return exportState.status === ExportStatus.Failure - ? themeColors.error - : props.colorSecondary - ? themeColors.secondary - : themeColors.primary; - } - function iconFunction(): () => void { switch (exportState.status) { case ExportStatus.Failure: @@ -136,7 +127,14 @@ export default function DownloadButton( t.palette.error.main + : props.colorSecondary + ? (t) => t.palette.secondary.main + : (t) => t.palette.primary.main, + }} size="large" > {icon()} diff --git a/src/components/ProjectSettings/ProjectArchive.tsx b/src/components/ProjectSettings/ProjectArchive.tsx index b52b461676..5b1d30b070 100644 --- a/src/components/ProjectSettings/ProjectArchive.tsx +++ b/src/components/ProjectSettings/ProjectArchive.tsx @@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next"; import { archiveProject, restoreProject } from "backend"; import { ButtonConfirmation } from "components/Dialogs"; -import { themeColors } from "types/theme"; interface ProjectArchiveProps extends ButtonProps { archive?: boolean; @@ -40,7 +39,7 @@ export default function ProjectArchive( color={props.warn ? "secondary" : "primary"} onClick={() => setOpen(true)} id={`proj-${props.projectId}-${props.archive ? "archive" : "restore"}`} - style={props.warn ? { color: themeColors.error } : {}} + sx={props.warn ? { color: (t) => t.palette.error.main } : {}} > {t(props.archive ? "buttons.archive" : "buttons.restore")} diff --git a/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx b/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx index 0012f9076a..eaffee3ff7 100644 --- a/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx +++ b/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx @@ -1,9 +1,8 @@ -import Typography from "@mui/material/Typography"; -import { ReactElement } from "react"; +import { type SxProps, type Theme, Typography } from "@mui/material"; +import { type ReactElement } from "react"; import { useTranslation } from "react-i18next"; import { CharacterStatus } from "goals/CharacterInventory/CharacterInventoryTypes"; -import { themeColors } from "types/theme"; interface CharacterStatusTextProps { status: CharacterStatus; @@ -20,7 +19,7 @@ export default function CharacterStatusText( variant="body2" color="textSecondary" component="p" - style={CharacterStatusStyle(props.status)} + sx={CharacterStatusSx(props.status)} display={props.inline ? "inline" : "initial"} > {t(`buttons.${props.status}`)} @@ -28,13 +27,13 @@ export default function CharacterStatusText( ); } -function CharacterStatusStyle(status: CharacterStatus): { color: string } { +function CharacterStatusSx(status: CharacterStatus): SxProps { switch (status) { case CharacterStatus.Accepted: - return { color: themeColors.success }; + return { color: (t) => t.palette.success.main }; case CharacterStatus.Rejected: - return { color: themeColors.error }; + return { color: (t) => t.palette.error.main }; case CharacterStatus.Undecided: - return { color: themeColors.primary }; + return { color: (t) => t.palette.primary.main }; } } diff --git a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx index da2cfaa718..13e38872b0 100644 --- a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx +++ b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx @@ -44,7 +44,6 @@ import { } from "goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/utilities"; import { useAppDispatch, useAppSelector } from "rootRedux/hooks"; import { type StoreState, type StoreStateDispatch } from "rootRedux/types"; -import { themeColors } from "types/theme"; import { type FileWithSpeakerId, newPronunciation, @@ -351,13 +350,13 @@ export default function EditDialog(props: EditDialogProps): ReactElement { - + t.palette.success.main }} /> - + t.palette.error.main }} /> @@ -474,7 +473,7 @@ export default function EditDialog(props: EditDialogProps): ReactElement { {newWord.flag.active ? ( - + t.palette.error.main }} /> ) : ( )}