diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index daf845b..480bb13 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -12,7 +12,6 @@ import {
FaMobile,
FaUndo,
} from "react-icons/fa";
-
import { Switch } from "./components/ui/switch";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
@@ -42,6 +41,7 @@ import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
import TipLink from "./components/core/TipLink";
import SelectAndEditModeToggleButton from "./components/select-and-edit/SelectAndEditModeToggleButton";
import { useAppStore } from "./store/app-store";
+import KeyBadge from "./components/core/KeyBadge";
const IS_OPENAI_DOWN = false;
@@ -534,7 +534,7 @@ function App() {
onClick={() => doUpdate(updateInstruction)}
className="dark:text-white dark:bg-gray-700 update-btn"
>
- Update
+ Update
diff --git a/frontend/src/components/core/KeyBadge.tsx b/frontend/src/components/core/KeyBadge.tsx
new file mode 100644
index 0000000..f0564da
--- /dev/null
+++ b/frontend/src/components/core/KeyBadge.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { BsArrowReturnLeft } from "react-icons/bs";
+
+interface KeyBadgeProps {
+ letter: string;
+}
+
+const KeyBadge: React.FC = ({ letter }) => {
+ const icon =
+ letter.toLowerCase() === "enter" || letter.toLowerCase() === "return" ? (
+
+ ) : (
+ letter.toUpperCase()
+ );
+
+ return (
+
+ {icon}
+
+ );
+};
+
+export default KeyBadge;
diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx
index 9538de9..a23919a 100644
--- a/frontend/src/components/select-and-edit/EditPopup.tsx
+++ b/frontend/src/components/select-and-edit/EditPopup.tsx
@@ -3,6 +3,7 @@ import { Textarea } from "../ui/textarea";
import { Button } from "../ui/button";
import { addHighlight, getAdjustedCoordinates, removeHighlight } from "./utils";
import { useAppStore } from "../../store/app-store";
+import KeyBadge from "../core/KeyBadge";
interface EditPopupProps {
event: MouseEvent | null;
@@ -139,7 +140,7 @@ const EditPopup: React.FC = ({
className="dark:bg-gray-700 dark:text-white"
onClick={() => onUpdate(updateText)}
>
- Update
+ Update