Merge branch 'master' into backend-models-clone

public/locales/en/translation.json

@@ -29,11 +29,9 @@
     "addNote": "Add a note",
     "domain": "Domain",
     "domainTitle": "Domain: {{ val1 }} ({{ val2 }})",
-    "gloss": "Gloss",
     "glosses": "Glosses",
     "pressEnter": "Press enter to save word",
-    "vernacular": "Vernacular",
-    "wordInDatabase": "This word is already in the database"
+    "vernacular": "Vernacular"
   },
   "appBar": {
     "dataEntry": "Data Entry",
@@ -61,12 +59,10 @@
     "usernameRequirements": "Username must be 3 characters or longer.",
     "usernameTaken": "Username not available.",
     "emailTaken": "Email address not available.",
-    "loggingIn": "Logging in...",
     "required": "Required",
     "confirmPassword": "Confirm Password",
     "confirmPasswordError": "Passwords do not match.",
-    "email": "Email",
-    "emailError": "Please enter a valid email."
+    "email": "Email"
   },
   "passwordReset": {
     "invalidURL": "Password Reset link is invalid.",
@@ -150,7 +146,6 @@
       "users": "Users"
     },
     "language": {
-      "header": "Language",
       "vernacular": "Vernacular",
       "vernacularLanguage": "Vernacular Language",
       "analysis": "Analysis",
@@ -209,7 +204,6 @@
       "delete": "Delete this speaker",
       "edit": "Edit speaker's name",
       "consent": {
-        "play": "Listen to the audio consent for this speaker",
         "add": "Add consent for this speaker",
         "record": "Record audio consent",
         "view": "View this speaker's image consent",
@@ -223,7 +217,6 @@
       "header": "Import Data",
       "body": "Imported data will be added to this project. The Combine will make no attempt to deduplicate, overwrite, or sync.",
       "chooseFile": "Choose File",
-      "done": "Done!",
       "notAllowed": "You have already imported a Lift file to this project."
     },
     "archive": {
@@ -249,25 +242,19 @@
       "on": "On",
       "hint": "In Data Entry, suggest existing Vernaculars similar to the Vernacular being typed."
     },
-    "definitions": {
-      "label": "Display Definitions",
-      "hint": "In Review Entries, show a Definitions column; in Merge Duplicates, show the Definition below the Gloss."
-    },
     "invite": {
       "inviteByEmailLabel": "Invite by Email",
       "userExists": "This user is already registered.",
       "or": "OR",
       "searchPlaceholder": "Search...",
       "searchTitle": "Find Users",
       "emailLabel": "Email",
-      "messageLabel": "Message",
       "toastSuccess": "User added to the project.",
       "toastFail": "Failed to add user to the project."
     }
   },
   "goal": {
     "selector": {
-      "selectOption": "Select this goal",
       "past": "You've completed:",
       "present": "Our recommendation:",
       "other": "Other options:",
@@ -297,7 +284,6 @@
   },
   "reviewEntries": {
     "title": "Review Entries",
-    "sense": "Sense",
     "noVernacular": "No vernacular input!",
     "noDefinition": "No definitions input",
     "noGloss": "No glosses input",
@@ -362,31 +348,18 @@
     "characterSet": {
       "title": "Vernacular Character Set:",
       "help": "Define the characters that are valid for this language",
-      "addButton": "Add Chars",
-      "addButtonTitle": "Add the characters in the box to the character set",
-      "deleteButton": "Delete Selected",
-      "deleteButtonTitle": "Remove the selected characters from the character set",
       "acceptedCharacters": "Accepted Characters",
       "rejectedCharacters": "Rejected Characters",
-      "noCharacters": "No characters yet! Type characters into the box below to get started.",
-      "required": "Add characters by entering them in this box",
       "advanced": "Advanced",
       "occurrences": "{{ val }} occurrences",
       "find": "Find",
-      "replace": "Replace",
       "replaceWith": "Replace with",
       "replaceAll": "Replace all occurrences of: {{ val }}",
       "replaceAllWith": "Replace with: {{ val }}",
       "findAndReplace": "Find & Replace",
       "findAndReplaceError": "Error processing: find ( {{ val1 }} ), replace ( {{  val2 }} )",
       "apply": "apply"
     },
-    "sampleWords": {
-      "title": "Sample Words",
-      "description": "Here are some words that don't fit your current character set:",
-      "ignore": "Ignore this word for now",
-      "add": "Add characters in this word to the set"
-    },
     "dialog": {
       "title": "Unsaved changes",
       "content": "Discard your changes to the character set?",
@@ -402,12 +375,8 @@
     "title": "Merge Duplicates",
     "helpText": {
       "dragCard": "Drag a card here to merge",
-      "root": "Drag words here to start merging them",
-      "dups": "Drag duplicate words here",
-      "sense": "Drag new sense here",
       "saveAndContinue": "Save changes and load a new set of words",
       "defer": "Discard changes and load a new set of words",
-      "list": "Drag this word to the right to start merging it with other words",
       "noDups": "Nothing to merge.",
       "delete": "Delete sense",
       "deleteDialog": "Delete this sense?",
@@ -463,8 +432,7 @@
     "add": "Add flag",
     "edit": "Edit flag",
     "remove": "Remove flag",
-    "save": "Save flag",
-    "text": "Text: "
+    "save": "Save flag"
   },
   "buttons": {
     "accept": "Accept",

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>

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"
       />

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}

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>
   ) : (

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,