1 files changed, 42 insertions, 29 deletions

diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx
index ea5727f0..9597b578 100644
--- a/extension/react-app/src/components/TextDialog.tsx
+++ b/extension/react-app/src/components/TextDialog.tsx
@@ -1,7 +1,9 @@
 // Write a component that displays a dialog box with a text field and a button.
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { Button, buttonColor, secondaryDark, vscBackground } from ".";
+import { Button, secondaryDark, vscBackground, vscForeground } from ".";
+import { isMetaEquivalentKeyPressed } from "../util";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 
 const ScreenCover = styled.div`
   position: absolute;
@@ -20,13 +22,13 @@ const DialogContainer = styled.div`
 `;
 
 const Dialog = styled.div`
-  background-color: white;
+  color: ${vscForeground};
+  background-color: ${vscBackground};
   border-radius: 8px;
   padding: 8px;
   display: flex;
   flex-direction: column;
-  /* box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5); */
-  border: 2px solid ${buttonColor};
+  box-shadow: 0 0 10px 0 ${vscForeground};
   width: fit-content;
   margin: auto;
 `;
@@ -37,14 +39,16 @@ const TextArea = styled.textarea`
   padding: 8px;
   outline: 1px solid black;
   resize: none;
+  background-color: ${secondaryDark};
+  color: ${vscForeground};
 
   &:focus {
-    outline: 1px solid ${buttonColor};
+    outline: 1px solid ${vscForeground};
   }
 `;
 
 const P = styled.p`
-  color: black;
+  color: ${vscForeground};
   margin: 8px auto;
 `;
 
@@ -53,6 +57,7 @@ const TextDialog = (props: {
   onEnter: (text: string) => void;
   onClose: () => void;
   message?: string;
+  entryOn?: boolean;
 }) => {
   const [text, setText] = useState("");
   const textAreaRef = React.createRef<HTMLTextAreaElement>();
@@ -76,29 +81,37 @@ const TextDialog = (props: {
         }}
       >
         <Dialog>
-          <P>{props.message || ""}</P>
-          <TextArea
-            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("");
-              }
-            }}
-          >
-            Enter
-          </Button>
+          <ReactMarkdown>{props.message || ""}</ReactMarkdown>
+          {props.entryOn && (
+            <>
+              <TextArea
+                rows={10}
+                ref={textAreaRef}
+                onKeyDown={(e) => {
+                  if (
+                    e.key === "Enter" &&
+                    isMetaEquivalentKeyPressed(e) &&
+                    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("");
+                  }
+                }}
+              >
+                Enter
+              </Button>
+            </>
+          )}
         </Dialog>
       </DialogContainer>
     </ScreenCover>