Issue #114: Fix contrast contact card

src/app/ajuda/page.js

@@ -12,7 +12,7 @@ export default function Help() {
 
   let info = [
     {
-      image: <ImArrowUp color="#FFFFFF" size="50%"/>,
+      image: <ImArrowUp className="text-button-filters" size="50%"/>,
       title: "Publicando Recursos",
       questions: [
         "Por que enviar um recurso?",
@@ -21,7 +21,7 @@ export default function Help() {
       ]
     },
     {
-      image: <BiSearchAlt color="#FFFFFF" size="50%"/>,
+      image: <BiSearchAlt className="text-button-filters" size="50%"/>,
       title: "Encontrando Recursos",
       questions: [
         "Como fazer uma busca?",
@@ -30,7 +30,7 @@ export default function Help() {
       ]
     },
     {
-      image: <BiSolidMessageAlt color="#FFFFFF" size="50%"/>,
+      image: <BiSolidMessageAlt className="text-button-filters" size="50%"/>,
       title: "Participando da  Rede",
       questions: [
         "Como comentar ou avaliar um recurso?",
@@ -38,7 +38,7 @@ export default function Help() {
       ]
     },
     {
-      image: <HiPencilAlt color="#FFFFFF" size="50%"/>,
+      image: <HiPencilAlt className="text-button-filters" size="50%"/>,
       title: "Gerenciando a Conta",
       questions: [
         "Por que se cadastrar?",

src/app/components/MenuProfile.js

@@ -5,6 +5,7 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
+import MarkunreadIcon from '@mui/icons-material/Markunread';
 import Logout from "@mui/icons-material/Logout";
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
@@ -47,7 +48,6 @@ const items = [
     icon: AccessibilityNewRoundedIcon,
     target: 3
   }
-
 ];
 
 function getRandomBg(id) {

src/app/contato/page.js

 "use client";
 import { Card } from "@mui/material";
-import { useState, useEffect } from "react";
+import { useState, useLayoutEffect } from "react";
 import Overlay from "../components/Overlay";
 import { TextField, Button, InputLabel } from "@mui/material";
 import mecredApi from "@/axiosConfig";
 import { Modal } from "@mui/material";
+import theme from "@/app/theme";
+
 
 export default function Contact() {
   const [userName, setUserName] = useState("");
@@ -13,6 +15,13 @@ export default function Contact() {
   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);
   };
@@ -26,7 +35,7 @@ export default function Contact() {
     setUserMessage(e.target.value);
   };
 
-  const sendMessage = async (event, name, email, message) => {
+  const sendMessage = async (event) => {
     event.preventDefault();
     await mecredApi
       .post("/contacts", {
@@ -83,16 +92,25 @@ export default function Contact() {
               <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"
                 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"
                 required
                 label="E-mail"
                 alt="E-mail"
@@ -100,10 +118,18 @@ export default function Contact() {
                 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"
                 required
                 multiline
                 rows={5}
@@ -112,6 +138,13 @@ export default function Contact() {
                 sx={{
                   width: 346,
                   marginTop: 2,
+                  
+                  ".MuiOutlinedInput-root": {
+                    color: theme.palette.primary.contrastText
+                  },
+                  ".MuiInputBase-input": {
+                    color: theme.palette.primary.contrastText
+                  }
                 }}
                 onChange={handleUserMessageChange}
               />

src/app/globals.css

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

src/app/themes/tema_especial.css

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

src/app/themes/theme_high_contrast.css

@@ -27,6 +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;
 }
 
 .text-main-text[data-theme="theme_high_contrast"]  {

tailwind.config.js

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