ContactModal component and set dynamically ContactForm colors

src/components/ContactButton.jsx

@@ -8,6 +8,8 @@ import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRound
 
 import theme from "../assets/styles/myTheme"
 
+import ContactModal from "./ContactModal"
+
 const myPalette = theme.palette
 
 const CustomButton = styled(Button)(({ theme }) => ({
@@ -21,22 +23,31 @@ const CustomButton = styled(Button)(({ theme }) => ({
   },
 }))
 
-ContactButton.propTypes = {
-  children: PropTypes.string.isRequired,
-  width: PropTypes.string,
-}
-
 function ContactButton({ children, width }) {
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = (value) => setOpen(value) 
+
   return (
-    <CustomButton
-      variant="contained"
-      type="submit"
-      sx={{ mt: 1, mb: 2, width: width }}
-      endIcon={<ArrowForwardIosRoundedIcon />}
-    >
-      { children }
-    </CustomButton>
+    <>
+      <CustomButton
+        variant="contained"
+        type="submit"
+        sx={{ mt: 1, mb: 2, width: width }}
+        endIcon={<ArrowForwardIosRoundedIcon />}
+        onClick={handleOpen}
+      >
+        { children }
+      </CustomButton >
+
+      <ContactModal handleModalClose={handleClose} open={open}/>
+    </>
   )
 }
 
+ContactButton.propTypes = {
+  children: PropTypes.string.isRequired,
+  width: PropTypes.string,
+}
+
 export default ContactButton

src/components/FormFooter.jsx → src/components/ContactForm.jsx

 import React from "react"
 
+import PropTypes from "prop-types"
+
 import TextField from "@mui/material/TextField"
+
 import Box from "@mui/material/Box"
-import { withStyles } from "@material-ui/core"
+import { styled } from "@mui/material/styles"
 
 import ContactButton from "./ContactButton"
 
-import theme from "../assets/styles/myTheme"
-
-const myPalette = theme.palette
-
-const CustomTextField = withStyles({
-  root: {
-    "& label.Mui-focused": {
-      color: "white",
+const CustomTextField = styled(TextField)(({ theme, borderColor, textColor }) => ({
+  "& label.Mui-focused": {
+    color: textColor,
+  },
+  "& .MuiInput-underline:after": {
+    borderBottomColor: borderColor,
+  },
+  "& .MuiOutlinedInput-root": {
+    "& fieldset": {
+      borderColor: borderColor,
     },
-    "& .MuiInput-underline:after": {
-      borderBottomColor: myPalette.primary.main,
+    "&:hover fieldset": {
+      borderColor: borderColor,
     },
-    "& .MuiOutlinedInput-root": {
-      "& fieldset": {
-        borderColor: myPalette.primary.main,
-      },
-      "&:hover fieldset": {
-        borderColor: myPalette.primary.main,
-      },
-      "&.Mui-focused fieldset": {
-        borderColor: myPalette.primary.main,
-      },
+    "&.Mui-focused fieldset": {
+      borderColor: borderColor,
     },
   },
-})(TextField)
+}))
 
-function FormFooter() {
+function FormFooter({borderColor, textColor}) {
   const handleSubmit = (event) => {
     event.preventDefault()
     const data = new FormData(event.currentTarget)
@@ -45,7 +42,9 @@ function FormFooter() {
 
   return (
     <Box component="form" onSubmit={handleSubmit} noValidate>
-      <CustomTextField
+      <CustomTextField 
+        borderColor={borderColor}
+        textColor={textColor}
         margin="normal"
         required
         fullWidth
@@ -53,12 +52,10 @@ function FormFooter() {
         label="Nombre"
         name="name"
         autoComplete="name"
-        autoFocus
-        InputLabelProps={{
-          style: { color: myPalette.primary.contrastText}, 
-        }}
       />
       <CustomTextField
+        borderColor={borderColor}
+        textColor={textColor}
         margin="normal"
         required
         fullWidth
@@ -67,11 +64,10 @@ function FormFooter() {
         type="email"
         id="email"
         autoComplete="email"
-        InputLabelProps={{
-          style: { color: myPalette.primary.contrastText}, 
-        }}
       />
       <CustomTextField
+        borderColor={borderColor}
+        textColor={textColor}
         margin="normal"
         required
         fullWidth
@@ -80,9 +76,6 @@ function FormFooter() {
         type="number"
         id="phone"
         autoComplete="phone"
-        InputLabelProps={{
-          style: { color: myPalette.primary.contrastText}, 
-        }}
       />
       <ContactButton width="100%">
         Contáctanos
@@ -91,4 +84,9 @@ function FormFooter() {
   )
 }
 
+FormFooter.propTypes = {
+  borderColor: PropTypes.string.isRequired,
+  textColor: PropTypes.string.isRequired,
+}
+
 export default FormFooter

src/components/ContactModal.jsx

+import * as React from "react"
+
+import PropTypes from "prop-types"
+
+import Backdrop from "@mui/material/Backdrop"
+import Box from "@mui/material/Box"
+import Modal from "@mui/material/Modal"
+import Fade from "@mui/material/Fade"
+import Typography from "@mui/material/Typography"
+
+import theme from "../assets/styles/myTheme"
+
+import ContactForm from "./ContactForm"
+
+const myPalette = theme.palette
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "background.paper",
+  boxShadow: 24,
+  borderRadius: "0px 20px 0px 0px",
+  p: 4,
+  "&:focus": {
+    outline: "none",
+  }
+}
+
+function ContactModal({ open, handleModalClose }) {
+  const handleClose = () => {
+    handleModalClose(false)
+  }
+
+  return (
+    <div>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <Typography id="transition-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <ContactForm borderColor={myPalette.primary.main} textColor={myPalette.primary.main} />
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  )
+}
+
+ContactModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  handleModalClose: PropTypes.func.isRequired,
+}
+
+export default ContactModal

src/components/Footer.jsx

@@ -10,7 +10,7 @@ import List from "@mui/material/List"
 import ListItem from "@mui/material/ListItem"
 import ListItemText from "@mui/material/ListItemText"
 
-import FormFooter from "./FormFooter"
+import ContactForm from "./ContactForm"
 import { FooterContainer, NavLinkFooter } from "../assets/styles/styled"
 import myTheme from "../assets/styles/myTheme"
 
@@ -50,7 +50,7 @@ function Footer() {
               <Typography component="h5" className={classes.title}>
                 Contáctanos
               </Typography>
-              <FormFooter />
+              <ContactForm borderColor={myPalette.primary.main} textColor={myPalette.primary.contrastText}/>
             </Grid>
             <Grid item xs={12} sm={12} md={3}>
               <Typography component="h5" className={classes.title}>

src/components/Hero.jsx

@@ -11,7 +11,7 @@ import ContactButton from "./ContactButton"
 
 const myPalette = myTheme.palette
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   container: {
     height: "80vh",
     width: "100%",

src/components/Navbar.jsx

@@ -76,6 +76,6 @@ function Navbar(props) {
       </AppBar>
     </HideOnScroll>
   )
-};
+}
 
 export default Navbar