From 8c9b9632a2248973b00e3f08717a20e811cd6733 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Tue, 6 Feb 2024 17:06:53 -0500
Subject: [PATCH] Stop audio/flag/note summary acting like a button (#2895)

---
 .../AnnouncementBanner/AnnouncementBanner.tsx |  2 +-
 src/components/Buttons/FlagButton.tsx         | 12 +++---
 .../EntryCellComponents/EntryNote.tsx         | 39 +++++++++----------
 src/components/WordCard/index.tsx             | 20 ++++++----
 src/types/theme.ts                            |  8 ++--
 5 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/src/components/AnnouncementBanner/AnnouncementBanner.tsx
index 5db0fffa96..124c375440 100644
--- 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
index 941b13c544..b759db86d3 100644
--- a/src/components/Buttons/FlagButton.tsx
+++ b/src/components/Buttons/FlagButton.tsx
@@ -1,10 +1,9 @@
 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;
@@ -12,6 +11,7 @@ interface FlagButtonProps {
   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
index b23fdadb9e..52991fb655 100644
--- 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
index 3d0ca53176..99d39e3f5b 100644
--- 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
index a8e839f6b4..dbc574d677 100644
--- 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,