Use sx theme color functions (#3161)

sillsdev · Jun 28, 2024 · 2e5d278 · 2e5d278
1 parent 30509ca
commit 2e5d278
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 36 deletions.
diff --git 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<string>("");
@@ -47,7 +47,9 @@ export default function AnnouncementBanner(): ReactElement {
   }
 
   return banner ? (
-    <Toolbar style={{ ...margins, backgroundColor: themeColors.warning }}>
+    <Toolbar
+      sx={{ ...margins, backgroundColor: (t) => t.palette.warning.main }}
+    >
       <IconButton onClick={closeBanner} size="large">
         <Cancel />
       </IconButton>

diff --git 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 && (
         <CircularProgress
           size={24}
-          style={{
-            color: themeColors.success,
+          sx={{
+            color: (t) => t.palette.success.main,
             position: "absolute",
             top: "50%",
             left: "50%",

diff --git 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 && (
         <CircularProgress
           size={24}
-          style={{
-            color: themeColors.success,
+          sx={{
+            color: (t) => t.palette.success.main,
             position: "absolute",
             top: "50%",
             left: "50%",

diff --git 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(
           <IconButton
             tabIndex={-1}
             onClick={iconFunction()}
-            style={{ color: iconColor() }}
+            sx={{
+              color:
+                exportState.status === ExportStatus.Failure
+                  ? (t) => 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
@@ -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")}
       </Button>

diff --git 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,21 +19,21 @@ 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}`)}
     </Typography>
   );
 }
 
-function CharacterStatusStyle(status: CharacterStatus): { color: string } {
+function CharacterStatusSx(status: CharacterStatus): SxProps<Theme> {
   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
@@ -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 {
             </Grid>
             <Grid item>
               <IconButton id={EditDialogId.ButtonSave} onClick={saveAndClose}>
-                <Check style={{ color: themeColors.success }} />
+                <Check sx={{ color: (t) => t.palette.success.main }} />
               </IconButton>
               <IconButton
                 id={EditDialogId.ButtonCancel}
                 onClick={conditionalCancel}
               >
-                <Close style={{ color: themeColors.error }} />
+                <Close sx={{ color: (t) => t.palette.error.main }} />
               </IconButton>
             </Grid>
           </Grid>
@@ -474,7 +473,7 @@ export default function EditDialog(props: EditDialogProps): ReactElement {
                 <CardContent>
                   <IconButton onClick={toggleFlag}>
                     {newWord.flag.active ? (
-                      <FlagFilled sx={{ color: themeColors.error }} />
+                      <FlagFilled sx={{ color: (t) => t.palette.error.main }} />
                     ) : (
                       <FlagOutlined />
                     )}