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