From 5a6fa9ae784c5942f1e37c7a0ae3acdd6337c459 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Fri, 16 Jun 2023 23:42:10 -0700
Subject: polishing

---
 extension/react-app/src/components/TextDialog.tsx | 28 +++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

(limited to 'extension/react-app/src/components/TextDialog.tsx')

diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx
index 167e12cf..31a385d5 100644
--- a/extension/react-app/src/components/TextDialog.tsx
+++ b/extension/react-app/src/components/TextDialog.tsx
@@ -1,5 +1,5 @@
 // Write a component that displays a dialog box with a text field and a button.
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { Button, buttonColor, secondaryDark, vscBackground } from ".";
 
@@ -28,6 +28,10 @@ const TextArea = styled.textarea`
   padding: 8px;
   outline: 1px solid black;
   font-family: Arial, Helvetica, sans-serif;
+
+  &:focus {
+    outline: 1px solid orange;
+  }
 `;
 
 const P = styled.p`
@@ -38,19 +42,39 @@ const P = styled.p`
 const TextDialog = (props: {
   showDialog: boolean;
   onEnter: (text: string) => void;
+  onClose: () => void;
 }) => {
   const [text, setText] = useState("");
   const textAreaRef = React.createRef<HTMLTextAreaElement>();
 
+  useEffect(() => {
+    if (textAreaRef.current) {
+      textAreaRef.current.focus();
+    }
+  }, [props.showDialog]);
+
   return (
     <DialogContainer hidden={!props.showDialog}>
       <Dialog>
         <P>Thanks for your feedback. We'll get back to you soon!</P>
-        <TextArea cols={50} rows={10} ref={textAreaRef}></TextArea>
+        <TextArea
+          cols={50}
+          rows={10}
+          ref={textAreaRef}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && e.metaKey && textAreaRef.current) {
+              props.onEnter(textAreaRef.current.value);
+              setText("");
+            } else if (e.key === "Escape") {
+              props.onClose();
+            }
+          }}
+        />
         <Button
           onClick={() => {
             if (textAreaRef.current) {
               props.onEnter(textAreaRef.current.value);
+              setText("");
             }
           }}
         >
-- 
cgit v1.2.3-70-g09d2