From 50f714d7b8a5e0c66e8db41f939cf2a964663931 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Sat, 17 Jun 2023 12:06:25 -0700
Subject: more ui details

---
 extension/react-app/src/components/TextDialog.tsx | 77 ++++++++++++++---------
 1 file changed, 48 insertions(+), 29 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 31a385d5..e50a7686 100644
--- a/extension/react-app/src/components/TextDialog.tsx
+++ b/extension/react-app/src/components/TextDialog.tsx
@@ -3,6 +3,13 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { Button, buttonColor, secondaryDark, vscBackground } from ".";
 
+const ScreenCover = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(168, 168, 168, 0.5);
+`;
+
 const DialogContainer = styled.div`
   position: absolute;
   top: 50%;
@@ -28,9 +35,10 @@ const TextArea = styled.textarea`
   padding: 8px;
   outline: 1px solid black;
   font-family: Arial, Helvetica, sans-serif;
+  resize: none;
 
   &:focus {
-    outline: 1px solid orange;
+    outline: 1px solid ${buttonColor};
   }
 `;
 
@@ -54,34 +62,45 @@ const TextDialog = (props: {
   }, [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}
-          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>
-      </Dialog>
-    </DialogContainer>
+    <ScreenCover
+      onClick={() => {
+        props.onClose();
+      }}
+      hidden={!props.showDialog}
+    >
+      <DialogContainer
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <Dialog>
+          <P>Thanks for your feedback. We'll get back to you soon!</P>
+          <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("");
+              }
+            }}
+          >
+            Enter
+          </Button>
+        </Dialog>
+      </DialogContainer>
+    </ScreenCover>
   );
 };
 
-- 
cgit v1.2.3-70-g09d2