From f36973cbdac2f0852f250bc749f534c1ed5a84ab Mon Sep 17 00:00:00 2001
From: "D. Ror." <imnasnainaec@gmail.com>
Date: Wed, 21 Aug 2024 13:01:48 -0400
Subject: [PATCH] [DataEntryTable] Improve submit/note/exit clarity (#3245)

---
 public/locales/en/translation.json                     |  2 +-
 public/locales/pt/translation.json                     |  2 +-
 src/components/Buttons/IconButtonWithTooltip.tsx       |  1 +
 src/components/Buttons/NoteButton.tsx                  |  6 ++++--
 .../DataEntry/DataEntryTable/NewEntry/index.tsx        |  2 +-
 src/components/DataEntry/DataEntryTable/index.tsx      | 10 +++++++++-
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 4b4b3fdebe..71f874e7de 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -30,7 +30,7 @@
     "domain": "Domain",
     "domainTitle": "Domain: {{ val1 }} ({{ val2 }})",
     "glosses": "Glosses",
-    "pressEnter": "Press enter to save word",
+    "pressEnter": "Press Enter to save word",
     "vernacular": "Vernacular"
   },
   "appBar": {
diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
index f61f914c70..675bb2a129 100644
--- a/public/locales/pt/translation.json
+++ b/public/locales/pt/translation.json
@@ -29,7 +29,7 @@
     "domain": "Domínio",
     "domainTitle": "Domínio: {{ val1 }} ({{ val2 }})",
     "glosses": "Glosas",
-    "pressEnter": "Pressione enter para salvar a palavra",
+    "pressEnter": "Pressione Enter para salvar a palavra",
     "vernacular": "Vernáculo"
   },
   "appBar": {
diff --git a/src/components/Buttons/IconButtonWithTooltip.tsx b/src/components/Buttons/IconButtonWithTooltip.tsx
index f0878bb37a..0809a68a72 100644
--- a/src/components/Buttons/IconButtonWithTooltip.tsx
+++ b/src/components/Buttons/IconButtonWithTooltip.tsx
@@ -6,6 +6,7 @@ interface IconButtonWithTooltipProps {
   disabled?: boolean;
   icon: ReactElement;
   text?: ReactNode;
+  /** `textId` will only be used if `text` is null or undefined. */
   textId?: string;
   size?: "large" | "medium" | "small";
   onClick?: MouseEventHandler<HTMLButtonElement>;
diff --git a/src/components/Buttons/NoteButton.tsx b/src/components/Buttons/NoteButton.tsx
index 8492e48f77..dc1307336a 100644
--- a/src/components/Buttons/NoteButton.tsx
+++ b/src/components/Buttons/NoteButton.tsx
@@ -7,6 +7,8 @@ import { EditTextDialog } from "components/Dialogs";
 interface NoteButtonProps {
   buttonId?: string;
   disabled?: boolean;
+  /** If `noteText` is empty and `updateNote` defined,
+   * the button will have default add-note hover text. */
   noteText: string;
   updateNote?: (newText: string) => void | Promise<void>;
 }
@@ -34,8 +36,8 @@ export default function NoteButton(props: NoteButtonProps): ReactElement {
         onClick={props.updateNote ? () => setNoteOpen(true) : undefined}
         side="top"
         size="small"
-        text={props.noteText}
-        textId="addWords.addNote"
+        text={props.noteText || undefined}
+        textId={props.updateNote ? "addWords.addNote" : undefined}
       />
       <EditTextDialog
         open={noteOpen}
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
index 43a8cafe00..c09be3863f 100644
--- a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
+++ b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
@@ -336,7 +336,7 @@ function EnterGrid(): ReactElement {
   const { t } = useTranslation();
   return (
     <Grid item xs={12} style={{ paddingLeft: theme.spacing(2) }}>
-      <Typography variant="caption">{t("addWords.pressEnter")}</Typography>
+      <Typography variant="body2">{t("addWords.pressEnter")}</Typography>
     </Grid>
   );
 }
diff --git a/src/components/DataEntry/DataEntryTable/index.tsx b/src/components/DataEntry/DataEntryTable/index.tsx
index 734d75b636..b38626adec 100644
--- a/src/components/DataEntry/DataEntryTable/index.tsx
+++ b/src/components/DataEntry/DataEntryTable/index.tsx
@@ -1009,6 +1009,14 @@ export default function DataEntryTable(
     [state.recentWords, updateWordInBackend]
   );
 
+  const isNewEntryInProgress =
+    state.newAudio.length ||
+    state.newGloss.trim() ||
+    state.newNote.trim() ||
+    state.newVern.trim();
+  const highlightExitButton =
+    state.recentWords.length > 0 && !isNewEntryInProgress;
+
   return (
     <form onSubmit={(e?: FormEvent<HTMLFormElement>) => e?.preventDefault()}>
       <input type="submit" style={{ display: "none" }} />
@@ -1114,7 +1122,7 @@ export default function DataEntryTable(
             id={exitButtonId}
             type="submit"
             variant="contained"
-            color={state.newVern.trim() ? "primary" : "secondary"}
+            color={highlightExitButton ? "primary" : "secondary"}
             style={{ marginTop: theme.spacing(2) }}
             endIcon={<ExitToApp />}
             tabIndex={-1}