Customizing width of ContactButton

src/assets/styles/myTheme.js

@@ -5,16 +5,17 @@ const theme = createTheme({
   palette: {
     primary: {
       main: "#074B6B",
-      light: lightBlue[900],
-      dark: "#07415C",
+      light: "#437799",
+      dark: "#002340",
       contrastText: "#fff",
       text: "#404040",
     },
     secondary: {
-      main: cyan[400],
-      light: cyan[300],
-      dark: cyan[700],
+      main: "#26c6da",
+      light: "#6ff9ff",
+      dark: "#0095a8",
       contrastText: "#fff",
+      text: "#002340"
     },
   }
 })

src/components/ContactButton.jsx

@@ -6,12 +6,12 @@ import { styled } from "@mui/material/styles"
 import Button from "@mui/material/Button"
 import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded"
 
-import theme from "./palette"
+import theme from "../assets/styles/myTheme"
 
 const myPalette = theme.palette
 
 const CustomButton = styled(Button)(({ theme }) => ({
-  color: `${myPalette.secondary.contrastText} !important`,
+  color: `${myPalette.secondary.text} !important`,
   backgroundColor: `${myPalette.secondary.main} !important`,
   paddingTop: "5px !important",
   paddingBottom: "5px !important",
@@ -22,16 +22,16 @@ const CustomButton = styled(Button)(({ theme }) => ({
 }))
 
 ContactButton.propTypes = {
-  children: PropTypes.element.isRequired,
+  children: PropTypes.string.isRequired,
+  width: PropTypes.string,
 }
 
-function ContactButton({ children }) {
+function ContactButton({ children, width }) {
   return (
     <CustomButton
       variant="contained"
       type="submit"
-      fullWidth
-      sx={{ mt: 1, mb: 2 }}
+      sx={{ mt: 1, mb: 2, width: width }}
       endIcon={<ArrowForwardIosRoundedIcon />}
     >
       { children }

src/components/FormFooter.jsx

@@ -84,8 +84,8 @@ function FormFooter() {
           style: { color: myPalette.primary.contrastText}, 
         }}
       />
-      <ContactButton>
-        Contactar
+      <ContactButton width="100%">
+        Contáctanos
       </ContactButton>
     </Box>
   )

src/components/Hero.jsx

@@ -20,7 +20,6 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "flex-end",
-    color: "#ffffff",
     backgroundImage: `url(${HeroBg})`,
     position: "relative",
     backgroundSize: "cover",
@@ -44,13 +43,14 @@ function Banner() {
           align="right"
           sx={{
             width: "50%",
-            mb: 4
+            mb: 4,
+            color: "#ffffff"
           }}
         >
           Ayudamos a que las Empresas operen <span className={classes.highlighter}>digitalmente</span>, cumplan con las regulaciones, y <span className={classes.highlighter}>crezcan</span> sin aumentar personal
         </Typography>
-        <ContactButton>
-          Contactar
+        <ContactButton width="180px">
+          Contáctanos
         </ContactButton>
       </Box>
     </>