diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx
index 11132c97f4..14df7766a1 100644
--- a/src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx
+++ b/src/components/DataEntry/DataEntryTable/NewEntry/SenseDialog.tsx
@@ -1,8 +1,9 @@
+import { Close } from "@mui/icons-material";
import {
Dialog,
DialogContent,
- Divider,
Grid,
+ IconButton,
MenuList,
Typography,
} from "@mui/material";
@@ -50,7 +51,7 @@ export default function SenseDialog(props: SenseDialogProps): ReactElement {
interface SenseListProps {
selectedWord: Word;
- closeDialog: (gloss: string) => void;
+ closeDialog: (gloss?: string) => void;
analysisLang: string;
}
@@ -95,11 +96,7 @@ export function SenseList(props: SenseListProps): ReactElement {
);
};
- const menuItems: ReactElement[] = [];
- for (const s of props.selectedWord.senses) {
- menuItems.push(menuItem(s));
- menuItems.push();
- }
+ const menuItems = props.selectedWord.senses.map(menuItem);
menuItems.push(
props.closeDialog("")}>
{t("addWords.newSenseFor")}
@@ -109,7 +106,16 @@ export function SenseList(props: SenseListProps): ReactElement {
return (
<>
+ {/* Cancel button */}
+ props.closeDialog()}
+ style={{ position: "absolute", right: 0, top: 0 }}
+ >
+
+
+ {/* Header */}
{t("addWords.selectSense")}
+ {/* Sense options */}
{menuItems}
>
);
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem.ts b/src/components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem.ts
index 0410fedf5b..2cb3895f4f 100644
--- a/src/components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem.ts
+++ b/src/components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem.ts
@@ -4,6 +4,9 @@ import { withStyles } from "@mui/styles";
// Copied from customized menus at https://material-ui.com/components/menus/
const StyledMenuItem = withStyles((theme) => ({
root: {
+ border: "1px solid gray",
+ borderRadius: "8px",
+ marginTop: "8px",
"&:focus": {
backgroundColor: theme.palette.primary.main,
"& .MuiListItemIcon-root, & .MuiListItemText-primary": {
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx
index 77e96dc084..b489398dff 100644
--- a/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx
+++ b/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx
@@ -1,8 +1,9 @@
+import { Close } from "@mui/icons-material";
import {
Dialog,
DialogContent,
- Divider,
Grid,
+ IconButton,
MenuList,
Typography,
} from "@mui/material";
@@ -50,7 +51,7 @@ export default function VernDialog(props: vernDialogProps): ReactElement {
interface VernListProps {
vernacularWords: Word[];
- closeDialog: (wordId: string) => void;
+ closeDialog: (wordId?: string) => void;
analysisLang?: string;
}
@@ -96,11 +97,7 @@ export function VernList(props: VernListProps): ReactElement {
);
};
- const menuItems: ReactElement[] = [];
- for (const w of props.vernacularWords) {
- menuItems.push(menuItem(w));
- menuItems.push();
- }
+ const menuItems = props.vernacularWords.map(menuItem);
menuItems.push(
props.closeDialog("")}>
{t("addWords.newEntryFor")}
@@ -110,7 +107,16 @@ export function VernList(props: VernListProps): ReactElement {
return (
<>
+ {/* Cancel button */}
+ props.closeDialog()}
+ style={{ position: "absolute", right: 0, top: 0 }}
+ >
+
+
+ {/* Header */}
{t("addWords.selectEntry")}
+ {/* Entry options */}
{menuItems}
>
);