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} />