Adding icons to ContactForm

src/components/ContactForm.jsx

@@ -2,12 +2,21 @@ import React from "react"
 
 import PropTypes from "prop-types"
 
+import Button from "@mui/material/Button"
 import TextField from "@mui/material/TextField"
+import InputAdornment from "@mui/material/InputAdornment"
+import PersonRoundedIcon from "@mui/icons-material/PersonRounded"
+import EmailRoundedIcon from "@mui/icons-material/EmailRounded"
+import LocalPhoneRoundedIcon from "@mui/icons-material/LocalPhoneRounded"
+import CommentRoundedIcon from "@mui/icons-material/CommentRounded"
+import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded"
 
 import Box from "@mui/material/Box"
 import { styled } from "@mui/material/styles"
 
-import ContactButton from "./ContactButton"
+import theme from "../assets/styles/myTheme"
+
+const myPalette = theme.palette
 
 const CustomTextField = styled(TextField)(({ theme, borderColor, textColor }) => ({
   "& label.Mui-focused": {
@@ -29,6 +38,17 @@ const CustomTextField = styled(TextField)(({ theme, borderColor, textColor }) =>
   },
 }))
 
+const CustomButton = styled(Button)(({ theme }) => ({
+  color: `${myPalette.secondary.text} !important`,
+  backgroundColor: `${myPalette.secondary.main} !important`,
+  paddingTop: "5px !important",
+  paddingBottom: "5px !important",
+  borderRadius: "5px !important",
+  "&:hover": {
+    backgroundColor: `${myPalette.secondary.light} !important`,
+  },
+}))
+
 function FormFooter({borderColor, textColor}) {
   const handleSubmit = (event) => {
     event.preventDefault()
@@ -52,6 +72,13 @@ function FormFooter({borderColor, textColor}) {
         label="Nombre"
         name="name"
         autoComplete="name"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <PersonRoundedIcon />
+            </InputAdornment>
+          ),
+        }}
       />
       <CustomTextField
         borderColor={borderColor}
@@ -64,6 +91,13 @@ function FormFooter({borderColor, textColor}) {
         type="email"
         id="email"
         autoComplete="email"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <EmailRoundedIcon />
+            </InputAdornment>
+          ),
+        }}
       />
       <CustomTextField
         borderColor={borderColor}
@@ -76,10 +110,43 @@ function FormFooter({borderColor, textColor}) {
         type="number"
         id="phone"
         autoComplete="phone"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <LocalPhoneRoundedIcon />
+            </InputAdornment>
+          ),
+        }}
+      />
+      <CustomTextField
+        multiline
+        borderColor={borderColor}
+        textColor={textColor}
+        margin="normal"
+        required
+        fullWidth
+        name="message"
+        label="Mensaje"
+        type="text"
+        id="message"
+        autoComplete="message"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <CommentRoundedIcon />
+            </InputAdornment>
+          ),
+        }}
       />
-      <ContactButton width="100%">
-        Contáctanos
-      </ContactButton>
+      <CustomButton
+        variant="contained"
+        type="submit"
+        fullWidth
+        sx={{ mt: 1, mb: 2 }}
+        endIcon={<ArrowForwardIosRoundedIcon />}
+      >
+        Consultar
+      </CustomButton >
     </Box>
   )
 }

src/components/ContactModal.jsx

@@ -14,7 +14,7 @@ import ContactForm from "./ContactForm"
 
 const myPalette = theme.palette
 
-const style = {
+const styleBox = {
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -29,6 +29,11 @@ const style = {
   }
 }
 
+const styleTitle = {
+  color: myPalette.primary.main,
+  textAlign: "center"
+}
+
 function ContactModal({ open, handleModalClose }) {
   const handleClose = () => {
     handleModalClose(false)
@@ -48,9 +53,9 @@ function ContactModal({ open, handleModalClose }) {
         }}
       >
         <Fade in={open}>
-          <Box sx={style}>
-            <Typography id="transition-modal-title" variant="h6" component="h2">
-              Text in a modal
+          <Box sx={styleBox}>
+            <Typography id="transition-modal-title" variant="h5" component="h1" sx={styleTitle}>
+              ¡Contáctanos!
             </Typography>
             <ContactForm borderColor={myPalette.primary.main} textColor={myPalette.primary.main} />
           </Box>

src/components/Footer.jsx

@@ -11,6 +11,8 @@ import ListItem from "@mui/material/ListItem"
 import ListItemText from "@mui/material/ListItemText"
 
 import ContactForm from "./ContactForm"
+import ContactButton from "./ContactButton"
+
 import { FooterContainer, NavLinkFooter } from "../assets/styles/styled"
 import myTheme from "../assets/styles/myTheme"