Stop audio/flag/note summary acting like a button (#2895)

sillsdev · Feb 6, 2024 · 8c9b963 · 8c9b963
1 parent 9f2d5c6
commit 8c9b963
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 40 deletions.
diff --git a/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/src/components/AnnouncementBanner/AnnouncementBanner.tsx
@@ -47,7 +47,7 @@ export default function AnnouncementBanner(): ReactElement {
   }
 
   return banner ? (
-    <Toolbar style={{ ...margins, backgroundColor: themeColors.warn }}>
+    <Toolbar style={{ ...margins, backgroundColor: themeColors.warning }}>
       <IconButton onClick={closeBanner} size="large">
         <Cancel />
       </IconButton>

diff --git a/src/components/Buttons/FlagButton.tsx b/src/components/Buttons/FlagButton.tsx
@@ -1,17 +1,17 @@
 import { Flag as FlagFilled, FlagOutlined } from "@mui/icons-material";
-import { Fragment, ReactElement, useEffect, useState } from "react";
+import { Fragment, type ReactElement, useEffect, useState } from "react";
 
-import { Flag } from "api/models";
+import { type Flag } from "api/models";
 import { IconButtonWithTooltip } from "components/Buttons";
 import { DeleteEditTextDialog } from "components/Dialogs";
-import { themeColors } from "types/theme";
 
 interface FlagButtonProps {
   flag: Flag;
   buttonId?: string;
   updateFlag?: (flag: Flag) => void;
 }
 
+/** A flag adding/editing/viewing button */
 export default function FlagButton(props: FlagButtonProps): ReactElement {
   const [open, setOpen] = useState<boolean>(false);
   const [active, setActive] = useState<boolean>();
@@ -43,7 +43,7 @@ export default function FlagButton(props: FlagButtonProps): ReactElement {
       <IconButtonWithTooltip
         icon={
           active ? (
-            <FlagFilled style={{ color: themeColors.error }} />
+            <FlagFilled sx={{ color: (t) => t.palette.error.main }} />
           ) : props.updateFlag ? (
             <FlagOutlined />
           ) : (
@@ -53,9 +53,7 @@ export default function FlagButton(props: FlagButtonProps): ReactElement {
         text={text}
         textId={active ? "flags.edit" : "flags.add"}
         size="small"
-        onClick={
-          props.updateFlag ? () => setOpen(true) : active ? () => {} : undefined
-        }
+        onClick={props.updateFlag ? () => setOpen(true) : undefined}
         buttonId={props.buttonId ?? "flag-button"}
         side="top"
       />

diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/EntryNote.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/EntryNote.tsx
@@ -1,8 +1,7 @@
 import { AddComment, Comment } from "@mui/icons-material";
-import { IconButton, Tooltip } from "@mui/material";
-import { ReactElement, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { type ReactElement, useState } from "react";
 
+import { IconButtonWithTooltip } from "components/Buttons";
 import { EditTextDialog } from "components/Dialogs";
 
 interface EntryNoteProps {
@@ -11,29 +10,27 @@ interface EntryNoteProps {
   updateNote?: (newText: string) => void | Promise<void>;
 }
 
-/**
- * A note adding/editing button
- */
+/** A note adding/editing/viewing button */
 export default function EntryNote(props: EntryNoteProps): ReactElement {
   const [noteOpen, setNoteOpen] = useState<boolean>(false);
-  const { t } = useTranslation();
-
-  const handleClick = (): void => {
-    if (props.updateNote) {
-      setNoteOpen(true);
-    }
-  };
 
   return (
     <>
-      <Tooltip
-        title={props.noteText ? props.noteText : t("addWords.addNote")}
-        placement="top"
-      >
-        <IconButton size="small" onClick={handleClick} id={props.buttonId}>
-          {props.noteText ? <Comment /> : <AddComment />}
-        </IconButton>
-      </Tooltip>
+      <IconButtonWithTooltip
+        buttonId={props.buttonId ?? "entry-note-button"}
+        icon={
+          props.noteText ? (
+            <Comment sx={{ color: (t) => t.palette.grey[700] }} />
+          ) : (
+            <AddComment sx={{ color: (t) => t.palette.grey[700] }} />
+          )
+        }
+        onClick={props.updateNote ? () => setNoteOpen(true) : undefined}
+        side="top"
+        size="small"
+        text={props.noteText}
+        textId="addWords.addNote"
+      />
       <EditTextDialog
         open={noteOpen}
         text={props.noteText}

diff --git a/src/components/WordCard/index.tsx b/src/components/WordCard/index.tsx
@@ -16,7 +16,6 @@ import { EntryNote } from "components/DataEntry/DataEntryTable/EntryCellComponen
 import { PronunciationsBackend } from "components/Pronunciations/PronunciationsBackend";
 import SenseCard from "components/WordCard/SenseCard";
 import SummarySenseCard from "components/WordCard/SummarySenseCard";
-import { themeColors } from "types/theme";
 import { TypographyWithFont } from "utilities/fontComponents";
 import { friendlySep, getDateTimeString } from "utilities/utilities";
 
@@ -44,8 +43,10 @@ export default function WordCard(props: WordCardProps): ReactElement {
   }, [editedBy, provenance]);
 
   return (
-    <Card style={{ backgroundColor: "lightgray", minWidth: "200px" }}>
-      <CardContent style={{ position: "relative" }}>
+    <Card
+      sx={{ backgroundColor: (t) => t.palette.grey[300], minWidth: "200px" }}
+    >
+      <CardContent sx={{ position: "relative" }}>
         {/* Vernacular */}
         <TypographyWithFont variant="h5" vernacular>
           {word.vernacular}
@@ -65,9 +66,9 @@ export default function WordCard(props: WordCardProps): ReactElement {
             buttonId={buttonIdFull(word.id)}
             icon={
               full ? (
-                <CloseFullscreen style={{ color: "black" }} />
+                <CloseFullscreen sx={{ color: (t) => t.palette.grey[900] }} />
               ) : (
-                <OpenInFull style={{ color: "gray" }} />
+                <OpenInFull sx={{ color: (t) => t.palette.grey[600] }} />
               )
             }
             onClick={() => setFull(!full)}
@@ -132,9 +133,12 @@ export default function WordCard(props: WordCardProps): ReactElement {
 
 export function AudioSummary(props: { count: number }): ReactElement {
   return props.count > 0 ? (
-    <IconButton>
-      <Badge badgeContent={props.count}>
-        <PlayArrow style={{ color: themeColors.success }} />
+    <IconButton disabled>
+      <Badge
+        badgeContent={props.count}
+        sx={{ color: (t) => t.palette.common.black }}
+      >
+        <PlayArrow sx={{ color: (t) => t.palette.success.main }} />
       </Badge>
     </IconButton>
   ) : (

diff --git a/src/types/theme.ts b/src/types/theme.ts
@@ -11,9 +11,9 @@ export type HEX = `#${string}`;
 export const themeColors: { [key: string]: HEX } = {
   primary: blue[600],
   secondary: grey[200],
-  error: red[600],
-  warn: orange[300],
-  success: green[600],
+  error: red[600], // also audio Record icons
+  warning: orange[300],
+  success: green[600], // also audio Play icons
   highlight: yellow[200],
   lightShade: blue[700], // AppBarTypes.ts
   darkShade: blue[900], // AppBarTypes.ts
@@ -26,6 +26,8 @@ const palette: PaletteOptions = {
   primary: { main: themeColors.primary },
   secondary: { main: themeColors.secondary },
   error: { main: themeColors.error },
+  warning: { main: themeColors.warning },
+  success: { main: themeColors.success },
   background: { default: themeColors.secondary },
   contrastThreshold: 3,
   tonalOffset: 0.2,