From 3f8db493976cf1d0418ea1171c1512eea75ce2a6 Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Fri, 28 Jun 2024 17:41:06 -0400 Subject: [PATCH] Retract #3161 due to broken placement styles (#3188) --- .../AnnouncementBanner/AnnouncementBanner.tsx | 6 ++---- src/components/Buttons/LoadingButton.tsx | 6 ++++-- src/components/Buttons/LoadingDoneButton.tsx | 10 ++++++---- .../ProjectExport/DownloadButton.tsx | 18 ++++++++++-------- .../ProjectSettings/ProjectArchive.tsx | 3 ++- .../ProgressBar/LinearProgressBar.tsx | 6 ++---- .../CharacterList/CharacterStatusText.tsx | 13 +++++++------ .../Cells/EditCell/EditDialog.tsx | 7 ++++--- 8 files changed, 37 insertions(+), 32 deletions(-) diff --git a/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/src/components/AnnouncementBanner/AnnouncementBanner.tsx index 924a33db8e..769199275c 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 from "types/theme"; +import theme, { themeColors } from "types/theme"; export default function AnnouncementBanner(): ReactElement { const [banner, setBanner] = useState(""); @@ -47,9 +47,7 @@ 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 12c3b05ae7..c3e39d631a 100644 --- a/src/components/Buttons/LoadingButton.tsx +++ b/src/components/Buttons/LoadingButton.tsx @@ -2,6 +2,8 @@ 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; @@ -23,8 +25,8 @@ export default function LoadingButton(props: LoadingProps): ReactElement { {props.loading && ( t.palette.success.main, + style={{ + color: themeColors.success, position: "absolute", top: "50%", left: "50%", diff --git a/src/components/Buttons/LoadingDoneButton.tsx b/src/components/Buttons/LoadingDoneButton.tsx index 53dd0200c0..2055123076 100644 --- a/src/components/Buttons/LoadingDoneButton.tsx +++ b/src/components/Buttons/LoadingDoneButton.tsx @@ -4,6 +4,8 @@ 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; @@ -27,8 +29,8 @@ export default function LoadingDoneButton( variant="contained" {...props.buttonProps} disabled={props.disabled || props.loading} - sx={{ - backgroundColor: props.done ? (t) => t.palette.success.main : undefined, + style={{ + backgroundColor: props.done ? themeColors.success : undefined, color: props.done ? "white" : undefined, ...props.buttonProps?.style, }} @@ -44,8 +46,8 @@ export default function LoadingDoneButton( {props.loading && !props.done && ( t.palette.success.main, + style={{ + color: themeColors.success, position: "absolute", top: "50%", left: "50%", diff --git a/src/components/ProjectExport/DownloadButton.tsx b/src/components/ProjectExport/DownloadButton.tsx index bd82cf724b..f354f5b0d1 100644 --- a/src/components/ProjectExport/DownloadButton.tsx +++ b/src/components/ProjectExport/DownloadButton.tsx @@ -18,6 +18,7 @@ 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 { @@ -111,6 +112,14 @@ 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: @@ -127,14 +136,7 @@ export default function DownloadButton( t.palette.error.main - : props.colorSecondary - ? (t) => t.palette.secondary.main - : (t) => t.palette.primary.main, - }} + style={{ color: iconColor() }} size="large" > {icon()} diff --git a/src/components/ProjectSettings/ProjectArchive.tsx b/src/components/ProjectSettings/ProjectArchive.tsx index 5b1d30b070..b52b461676 100644 --- a/src/components/ProjectSettings/ProjectArchive.tsx +++ b/src/components/ProjectSettings/ProjectArchive.tsx @@ -5,6 +5,7 @@ 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; @@ -39,7 +40,7 @@ export default function ProjectArchive( color={props.warn ? "secondary" : "primary"} onClick={() => setOpen(true)} id={`proj-${props.projectId}-${props.archive ? "archive" : "restore"}`} - sx={props.warn ? { color: (t) => t.palette.error.main } : {}} + style={props.warn ? { color: themeColors.error } : {}} > {t(props.archive ? "buttons.archive" : "buttons.restore")} diff --git a/src/components/Statistics/ProgressBar/LinearProgressBar.tsx b/src/components/Statistics/ProgressBar/LinearProgressBar.tsx index b336dff075..6330d42e53 100644 --- a/src/components/Statistics/ProgressBar/LinearProgressBar.tsx +++ b/src/components/Statistics/ProgressBar/LinearProgressBar.tsx @@ -1,7 +1,5 @@ -import Box from "@mui/material/Box"; -import LinearProgress from "@mui/material/LinearProgress"; -import Typography from "@mui/material/Typography"; -import { ReactElement } from "react"; +import { Box, LinearProgress, Typography } from "@mui/material"; +import { type ReactElement } from "react"; import { useTranslation } from "react-i18next"; interface ProgressBarProps { diff --git a/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx b/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx index eaffee3ff7..a57a44c8db 100644 --- a/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx +++ b/src/goals/CharacterInventory/CharInv/CharacterList/CharacterStatusText.tsx @@ -1,8 +1,9 @@ -import { type SxProps, type Theme, Typography } from "@mui/material"; +import { 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; @@ -19,7 +20,7 @@ export default function CharacterStatusText( variant="body2" color="textSecondary" component="p" - sx={CharacterStatusSx(props.status)} + style={CharacterStatusStyle(props.status)} display={props.inline ? "inline" : "initial"} > {t(`buttons.${props.status}`)} @@ -27,13 +28,13 @@ export default function CharacterStatusText( ); } -function CharacterStatusSx(status: CharacterStatus): SxProps { +function CharacterStatusStyle(status: CharacterStatus): { color: string } { switch (status) { case CharacterStatus.Accepted: - return { color: (t) => t.palette.success.main }; + return { color: themeColors.success }; case CharacterStatus.Rejected: - return { color: (t) => t.palette.error.main }; + return { color: themeColors.error }; case CharacterStatus.Undecided: - return { color: (t) => t.palette.primary.main }; + return { color: themeColors.primary }; } } diff --git a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx index 13e38872b0..da2cfaa718 100644 --- a/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx +++ b/src/goals/ReviewEntries/ReviewEntriesTable/Cells/EditCell/EditDialog.tsx @@ -44,6 +44,7 @@ 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, @@ -350,13 +351,13 @@ export default function EditDialog(props: EditDialogProps): ReactElement { - t.palette.success.main }} /> + - t.palette.error.main }} /> + @@ -473,7 +474,7 @@ export default function EditDialog(props: EditDialogProps): ReactElement { {newWord.flag.active ? ( - t.palette.error.main }} /> + ) : ( )}