Issue #114: FIX rewrite contact page

src/app/ajuda/page.js

@@ -56,9 +56,9 @@ export default function Help() {
         <div className="text-main-text mt-5 text-2xl font-bold">Ajuda e Suporte</div>
       </div>
       <div className="flex justify-center mt-4">
-        <div className="text-main-text text-lg">Entre em contato para enviar dúvidas, sugestões ou críticas.</div>
+        <p className="text-main-text text-lg max-sm:text-center">Entre em contato para enviar dúvidas, sugestões ou críticas.</p>
       </div>
-      <div className="flex justify-center gap-10 mt-8">
+      <div className="flex justify-center gap-10 mt-8 max-sm:flex-col items-center">
         {info.map((item, index) => (
         <button onClick={() => router.push("/topicosAjuda")} key={index}>
             <Card
@@ -86,7 +86,7 @@ export default function Help() {
         </button>
         ))}
       </div>
-      <div className="flex justify-center flex-col items-center mt-8">
+      <div className="flex justify-center flex-col items-center mt-8 max-sm:mb-8">
         <div className="text-main-text mt-5 text-2xl font-bold">Não encontrou o que precisa?</div>
         <div className="text-main-text text-lg mt-4 ml-3">Entre em contato com nossa equipe</div>
         <button onClick={() => router.push("/contato")} className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Voltar para página de contato</button>

src/app/contato/page.js

@@ -9,39 +9,31 @@ import theme from "@/app/theme";
 
 
 export default function Contact() {
-  const [userName, setUserName] = useState("");
-  const [userEmail, setUserEmail] = useState("");
-  const [userMessage, setUserMessage] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
   const [successOpen, setSuccessOpen] = useState(false)
 
-  useLayoutEffect(() => {
-    const tailwindPrimaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--input-text'); // Replace with your actual CSS variable name
-    theme.palette.primary.contrastText = tailwindPrimaryColor.trim();
-
-  }, [userName, userEmail, userMessage])
-
-
-  const handleUserNameChange = (e) => {
-    setUserName(e.target.value);
-  };
+  function verifyForm (formData) {
+    if (formData.get('name') === "" || formData.get('email') === "" || formData.get('contents') === "") {
+      return false;
+    }
+    return true;
+  } 
 
-  const handleUserEmailChange = (e) => {
-    setUserEmail(e.target.value);
+  const sendMessage = async (event) => {
+    event.preventDefault();
 
-  };
+    const formData = new FormData(event.target);
 
-  const handleUserMessageChange = (e) => {
-    setUserMessage(e.target.value);
-  };
+    if (!verifyForm(formData)) {
+      alert('Por favor, preencha todos os campos.');
+      return;
+    } 
     
-  const sendMessage = async (event) => {
-    event.preventDefault();
     await mecredApi
       .post("/contacts", {
-        name: userName,
-        email: userEmail,
-        message: userMessage,
+        name: formData.get('name'),
+        email: formData.get('email'),
+        message: formData.get('contents'),
       })
       .then((response) => {
         setSuccessOpen(true);
@@ -75,7 +67,7 @@ export default function Contact() {
       <ModalSucess open={successOpen} onClose={() => { setSuccessOpen(false) }} />
       <div className="flex justify-center">
         <Card
-          className="text-text-filter bg-white outline outline-1 outline-outlineColor"
+          className="text-text-filter bg-white outline outline-1 outline-outlineColor max-sm:h-max"
           sx={{
             display: "flex",
             flexDirection: "column",
@@ -91,65 +83,37 @@ export default function Contact() {
             <div className="flex flex-col justify-center text-center items-center gap-8 mt-16 ">
               <p className="text-2xl font-bold">Contato</p>
               <p className="text-xl font-light">Entre em contato para enviar dúvidas, sugestões ou críticas.</p>
-              <TextField
-                className="outline outline-1 outline-outlineColor"
+              <div>
+                <p className="text-main-text text-left text-sm">Nome*</p>
+                <input
+                  className="flex flex-row justify-center items-center w-80 h-12 border-text-main-text border rounded text-main-text
+                  pl-2 bg-transparent focus:outline-none focus:border-input-focus border-500"
+                  type="text"
+                  name="name"
                   required
-                label="Nome"
-                alt="Nome"
-                sx={{
-                  width: 346,
-                  marginTop: 2,
-                 
-                  ".MuiOutlinedInput-root": {
-                    color: theme.palette.primary.contrastText
-                  },
-                  ".MuiInputBase-input": {
-                    color: theme.palette.primary.contrastText,
-                  }
-                }}
-                onChange={handleUserNameChange}
                 />
-              <TextField
-                className="outline outline-1 outline-outlineColor"
+              </div>
+              <div>
+                <p className="text-main-text text-left text-sm">E-mail*</p>
+                <input
+                  className="flex flex-row justify-center items-center w-80 h-12 border-text-main-text border rounded text-main-text 
+                  pl-2 bg-transparent focus:outline-none focus:border-input-focus border-500"
+                  type="text"
+                  name="email"
                   required
-                label="E-mail"
-                alt="E-mail"
-                type="email"
-                sx={{
-                  width: 346,
-                  marginTop: 2,
-
-                  ".MuiOutlinedInput-root": {
-                    color: theme.palette.primary.contrastText
-                  },
-                  ".MuiInputBase-input": {
-                    color: theme.palette.primary.contrastText
-                  }
-                }}
-                onChange={handleUserEmailChange}
                 />
-              <TextField
-                className="outline outline-1 outline-outlineColor"
+              </div>
+              <div>
+                <p className="text-main-text text-left text-sm">Mensagem*</p>
+                <textarea
+                  className="flex flex-row justify-center items-center w-80 h-36 border-text-main-text border rounded text-main-text 
+                  p-2 bg-transparent focus:outline-none focus:border-input-focus border-500"
+                  name="contents"
                   required
-                multiline
-                rows={5}
-                label="Mensagem"
-                alt="Mensagem"
-                sx={{
-                  width: 346,
-                  marginTop: 2,
-                  
-                  ".MuiOutlinedInput-root": {
-                    color: theme.palette.primary.contrastText
-                  },
-                  ".MuiInputBase-input": {
-                    color: theme.palette.primary.contrastText
-                  }
-                }}
-                onChange={handleUserMessageChange}
-              />
+                ></textarea>
+              </div>
               <Button
-                className="bg-secondary text-white hover:bg-secondary-hover normal-case font-bold w-80 text-lg"
+                className="bg-secondary text-white hover:bg-main-hover normal-case font-bold w-80 text-lg"
                 type="submit"
                 alt="Enviar mensagem"
                 title="Enviar mensagem"

src/app/globals.css

@@ -45,7 +45,7 @@
                   rgba(245, 249, 249, 1)),
                   url("/images/fundo.webp");
         --logo: url("/mecred.svg");
-        --input-text: #000000;
+        --input-focus: #00bacc;
     }
     @import "themes/theme_high_contrast.css";
     @import "themes/tema_especial.css";

src/app/themes/tema_especial.css

@@ -14,6 +14,6 @@ html[data-theme="tema_especial"] {
     --button-filters: #771244;
     --text-filter: #ffffff;
     --gray-color: #ffff00;
-    --input-text: #ffffff;
+    --input-focus: #ffffff;
 
 }
\ No newline at end of file

src/app/themes/theme_high_contrast.css

@@ -27,7 +27,7 @@ html[data-theme="theme_high_contrast"] {
             rgba(0, 0, 0, 1)),
             url("/images/fundo.webp");
     --logo: url("/mecred_white.svg");
-    --input-text: #ffffff;
+    --input-focus: #00bacc;
 }
 
 .text-main-text[data-theme="theme_high_contrast"]  {

tailwind.config.js

@@ -35,7 +35,7 @@ module.exports = {
         "grey-button": 'var(--grey-button)',
         "blue-button": 'var(--blue-button)',
         "white-draw": 'var(--white-draw)',
-        "input-text": 'var(--input-text)',
+        "input-focus": 'var(--input-focus)',
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",