diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 8e0eb82..8f39461 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -5,14 +5,13 @@ import {
Box,
Button,
Flex,
- IconButton,
Input,
Textarea,
useColorModeValue,
useTheme,
useToast,
+ VStack,
} from "@chakra-ui/core";
-import { CloseIcon } from "@chakra-ui/icons";
import { useHistory, useLocation } from "react-router-dom";
import { useLazyQuery } from "@apollo/client";
@@ -249,42 +248,51 @@ function SubmitPetForm() {
}
function FeedbackFormSection() {
- const [isOpen, setIsOpen] = React.useState(false);
- const borderColor = useColorModeValue("gray.300", "blue.400");
-
- const openButtonRef = React.useRef(null);
- const emailFieldRef = React.useRef(null);
- const elementAwaitingFocusRef = React.useRef(null);
-
- const openForm = React.useCallback(() => {
- setIsOpen(true);
-
- // Wait for the re-render to enable the field, then focus it.
- elementAwaitingFocusRef.current = emailFieldRef.current;
- }, [setIsOpen]);
-
- const closeForm = React.useCallback(() => {
- setIsOpen(false);
-
- // Wait for the re-render to enable the button, then focus it.
- elementAwaitingFocusRef.current = openButtonRef.current;
- }, [setIsOpen]);
-
- // This lil layout effect will focus whatever element is awaiting focus, then
- // clear it out. We use this to set up focus() calls, but wait until the next
- // layout finishes to actually call them.
- React.useLayoutEffect(() => {
- if (elementAwaitingFocusRef.current) {
- elementAwaitingFocusRef.current.focus();
- elementAwaitingFocusRef.current = null;
- }
- });
+ const pitchBorderColor = useColorModeValue("gray.300", "green.400");
+ const formBorderColor = useColorModeValue("gray.300", "blue.400");
return (
-
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+ );
+}
+
+function FeedbackFormContainer({ borderColor, children }) {
+ return (
+
-
-
-
-
-
- }
- size="xs"
- variant="ghost"
- onClick={closeForm}
- isDisabled={!isOpen}
- />
-
-
-
-
-
-
-
-
-
+ {children}
+
);
}
-function FeedbackFormPitch({ isDisabled, onClick, openButtonRef }) {
+function FeedbackFormPitch() {
return (
Hi friends! Welcome to the beta!
@@ -371,24 +315,17 @@ function FeedbackFormPitch({ isDisabled, onClick, openButtonRef }) {
This is the new Dress to Impress! It's ready for the future, and it even
works great on mobile! More coming soon!
-
- Got ideas? Send us your feedback →
+
+ ↓ Got ideas? Send them to us, please!{" "}
+
+ 💖
+
);
}
-function FeedbackForm({ isDisabled, onClose, emailFieldRef }) {
+function FeedbackForm() {
const [content, setContent] = React.useState("");
const [email, setEmail] = useLocalStorage("DTIFeedbackFormEmail", "");
const [isSending, setIsSending] = React.useState(false);
@@ -410,7 +347,6 @@ function FeedbackForm({ isDisabled, onClose, emailFieldRef }) {
setIsSending(false);
setContent("");
- onClose();
toast({
status: "success",
title: "Got it! We'll take a look soon.",
@@ -436,7 +372,7 @@ function FeedbackForm({ isDisabled, onClose, emailFieldRef }) {
setIsSending(true);
},
- [content, email, onClose, toast]
+ [content, email, toast]
);
return (
@@ -449,12 +385,6 @@ function FeedbackForm({ isDisabled, onClose, emailFieldRef }) {
gridTemplateColumns="1fr auto"
gridGap="2"
onSubmit={onSubmit}
- onKeyDown={(e) => {
- if (e.key === "Escape") {
- onClose();
- e.stopPropagation();
- }
- }}
>
setEmail(e.target.value)}
- ref={emailFieldRef}
- isDisabled={isDisabled}
/>