diff --git a/src/app/components/Header.js b/src/app/components/Header.js
index 167a90cb7bb3f65a90b939ac889a4ac43352a21c..7ae1eaf4445ff27a41c6c3017139531c9dc3009f 100644
--- a/src/app/components/Header.js
+++ b/src/app/components/Header.js
@@ -53,7 +53,8 @@ function DefaultContent({
/> */}
<img
className="w-[59px] h-[50px] bg-no-repeat bg-center bg-contain bg-logo-square invertLogo-HC-white"
- src={"/mecred_square.svg"}
+ src={"/mecred_square.svg"}
+ alt="MECRED logo"
/>
<div className="md:hidden text-darkGray-HC-white text-sm font-light w-full">
A Rede Social da Educação
@@ -102,7 +103,7 @@ function DefaultContent({
) : (
<button
type="button"
- className="group bg-orange hover:bg-darkGray-HC-white px-4 h-10 mr-14 max-sm:ml-2 rounded text-white-HC-dark-underline flex items-center font-bold flex-shrink-0"
+ className="group bg-orange-HC-white hover:bg-darkOrange-HC-dark px-4 h-10 mr-14 max-sm:ml-2 rounded text-white-HC-dark-underline flex items-center font-bold flex-shrink-0 hover:text-white-HC-underline outline outline-1 outline-ice-HC-white"
onClick={loginBarrier}
>
Entrar
diff --git a/src/app/components/MenuProfile.js b/src/app/components/MenuProfile.js
index 9aedc9f284d8439fd86edfd897782f790012d01c..a4fa7f394f3c858a1f611c11371b375caae129e4 100644
--- a/src/app/components/MenuProfile.js
+++ b/src/app/components/MenuProfile.js
@@ -135,7 +135,7 @@ export default function AccountMenu() {
alt="Acessar meu perfil"
>
{(userData["avatar_file_name"] === "") || (userData["avatar_file_name"] === null) ? (
- <div className={`flex items-center max-sm:-ml-px justify-center text-xl font-bold text-ice-HC-dark rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
+ <div className={`flex items-center max-sm:-ml-px justify-center text-xl font-bold text-ice-HC-dark bg-turquoise-HC-white rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
) : (
<Avatar
src={
@@ -176,7 +176,7 @@ export default function AccountMenu() {
>
<MenuItem className="ml-1" sx={{ 'pointer-events': 'none' }} >
{(userData["avatar_file_name"] === "") || (userData["avatar_file_name"] === null) ? (
- <div className={`flex items-center justify-center pt-1 text-xl font-bold text-ice-HC-dark rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
+ <div className={`flex items-center justify-center pt-1 text-xl font-bold text-ice-HC-dark bg-turquoise-HC-white rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
) : (
<Avatar
src={
@@ -191,14 +191,14 @@ export default function AccountMenu() {
<p className="row-span-2 text-xs"> {userData["uid"]} </p>
</div>
</MenuItem>
- <hr className="border-gray-color h-1 my-2 "/>
+ <hr className="border-mediumGray-HC-white h-1 my-2 "/>
<Link href={`/perfil/${id}`} className="flex mb-2">
<MenuItem >
- <AccountCircleRoundedIcon className="mr-4 text-turquoise-HC-white-underline text-3xl" />
+ <AccountCircleRoundedIcon className="mr-4 text-turquoise-HC-white text-3xl" />
<p className="text-turquoise-HC-white-underline ">Acessar meu Perfil</p>
</MenuItem>
</Link>
- <hr className="border-gray-color h-1 my-2 "/>
+ <hr className="border-mediumGray-HC-white h-1 my-2 "/>
{items.map((item, index) => {
return (
<Link href={item.href} key={index}>
@@ -209,8 +209,8 @@ export default function AccountMenu() {
</Link>
);
})}
- <hr className="border-gray-color h-1 my-2 "/>
- <MenuItem className="flex items-center justify-center text-darkGray-HC-white text-sm" onClick={handleLogout}>
+ <hr className="border-mediumGray-HC-white h-1 my-2 "/>
+ <MenuItem className="flex items-center justify-center text-darkGray-HC-white-underline text-sm" onClick={handleLogout}>
<p>Sair da minha conta</p>
</MenuItem>
</Menu>
diff --git a/src/app/components/ModalNotifications.js b/src/app/components/ModalNotifications.js
index b33c487b9ac46283173dc649c631fbcb317f3c16..84c12fb7be09256ce0d8881c0d30ab118f9b80f1 100644
--- a/src/app/components/ModalNotifications.js
+++ b/src/app/components/ModalNotifications.js
@@ -80,10 +80,10 @@ export default function ModalNotifications({ countNotifications, notifications,
>
<div className='flex pr-2' >
<div className='text-lg py-3 font-bold text-darkGray-HC-white pl-6 pr-16'> Notificações </div>
- <button className='text-darkGray-HC-white-underline text-sm bg-lightGray-HC-dark rounded-xl px-2 h-10 mt-1 mr-1 hover:bg-mediumGray-HC-white hover:text-darkGray-HC-dark-underline outline outline-1 outline-ice-HC-white' onClick={setViewdAllNotification}> Marcar como lidas </button>
- </div>
+ <button className='text-darkGray-HC-white-underline text-sm bg-mediumGray-HC-dark rounded-xl px-2 h-10 mt-1 mr-1 hover:bg-mediumGray-HC-white hover:text-darkGray-HC-dark-underline outline outline-1 outline-ice-HC-white' onClick={setViewdAllNotification}> Marcar como lidas </button>
+ </div>t
<div className='px-4'>
- <hr className='border-lightGray-HC-white' />
+ <hr className='border-mediumGray-HC-white' />
</div>
<div className='w-80 h-80' >
diff --git a/src/app/entrar/components/LoginInfo.js b/src/app/entrar/components/LoginInfo.js
index 1a91bac22ffb28819bc357aaea2aa520a1768297..0d51178dc0b17642e06b0f26189b29d75399bbad 100644
--- a/src/app/entrar/components/LoginInfo.js
+++ b/src/app/entrar/components/LoginInfo.js
@@ -58,7 +58,7 @@ export default function LoginInfo() {
return (
<div key={i} className={`bg-${card["color"]} py-4 rounded-xl m-2 grid justify-items-center`} style={{ width: '7em', height: '7em' }}>
<Image className={`w-14 h-14 invertIcon-HC-black ${card["name"] === "Contribua" && `rotate-180`}`} alt={card["name"]} src={card["icon"]} width={10} height={10} />
- <p className="text-white-HC-dark-underline pt-1">{card["name"]}</p>
+ <p className="text-white-HC-dark pt-1">{card["name"]}</p>
</div>
)
})}
diff --git a/src/app/entrar/components/PasswordModal.js b/src/app/entrar/components/PasswordModal.js
index b7f7e870251979abbedef6418a7a8fa09aaf8d28..34cbc949f354a4983eebd7023764016dd924f4d0 100644
--- a/src/app/entrar/components/PasswordModal.js
+++ b/src/app/entrar/components/PasswordModal.js
@@ -70,10 +70,10 @@ export default function PasswordModal({ open, handleClose }) {
},
}}
>
- <Box className="bg-white-HC-dark p-5 flex flex-col items-center border-none rounded-xl">
+ <Box className="bg-white-HC-dark outline outline-1 outline-ice-HC-white p-5 flex flex-col items-center border-none rounded-xl">
<div className="flex flex-row justify-between mb-2">
- <h1 className="text-turquoise-HC-underline text-2xl font-bold m-2 mb-5 mr-4">Vamos encontrar sua conta</h1>
- <CloseIcon onClick={handleClose} sx={{ color: "#6c8080", fontSize: "30px", marginTop:"5px" }} />
+ <h1 className="text-turquoise-HC-white text-2xl font-bold m-2 mb-5 mr-4">Vamos encontrar sua conta</h1>
+ <CloseIcon onClick={handleClose} sx={{ color: "var(--darkGray-HC-white)", fontSize: "30px", marginTop:"5px" }} />
</div>
<div>
{feedbackMessage ? (
@@ -81,20 +81,24 @@ export default function PasswordModal({ open, handleClose }) {
{feedbackMessage}
</Alert>
) : null}
- <TextField
- fullWidth
- onChange={(e) => setUserEmail(e.target.value)}
- label="E-mail *"
- type="email"
- className="mb-5"
- value={userEmail}
- error={!userEmail && error}
- alt="E-mail (obrigatório)"
- />
+ <div className="w-full mb-3">
+ <label htmlFor="email" className="block text-sm font-medium text-darkGray-HC-white mb-1">
+ E-mail *
+ </label>
+ <input
+ id="email"
+ type="email"
+ className="w-full px-5 py-2 border border-mediumGray-HC-white rounded-md focus:outline-none focus:ring-2 focus:ring-turquoise-HC-white"
+ onChange={(e) => setUserEmail(e.target.value)}
+ error={!userEmail && error}
+ value={userEmail}
+ alt="E-mail (obrigatório)"
+ />
+ </div>
<Button
fullWidth
disableElevation
- className="bg-turquoise text-white-HC-dark-underline hover:bg-turquoise-hover"
+ className="bg-turquoise-HC-white text-white-HC-dark-underline hover:bg-darkTurquoise-HC-dark hover:text-white font-bold py-2 rounded-md outline outline-1 outline-ice-HC-white"
onClick={() => handleSubmitPswd()}
alt="Enviar"
>
diff --git a/src/app/entrar/components/SignupModal.js b/src/app/entrar/components/SignupModal.js
index 23c240035fcb3b7424cd237e4d85c70125bfcea8..c9a7e052248eddc25921a8f87edeb65a8d8885d9 100644
--- a/src/app/entrar/components/SignupModal.js
+++ b/src/app/entrar/components/SignupModal.js
@@ -82,10 +82,10 @@ export default function SignupModal({ open, handleClose }) {
},
}}
>
- <Box className="bg-white-HC-dark sm:w-1/2 xl:w-1/4 p-5 flex flex-col items-center border-none rounded-xl">
+ <Box className="bg-white-HC-dark outline outline-1 outline-ice-HC-white sm:w-1/2 xl:w-1/4 p-5 flex flex-col items-center border-none rounded-xl">
<div className="flex w-full">
- <h1 className="text-turquoise-HC-underline text-center w-full flex-1 text-2xl font-bold m-5">Cadastre-se</h1>
- <CloseIcon onClick={handleClose} sx={{ color: "#6c8080", fontSize: "30px", marginTop: "5px" }} className="" />
+ <h1 className="text-turquoise-HC-white text-center w-full flex-1 text-2xl font-bold m-5">Cadastre-se</h1>
+ <CloseIcon onClick={handleClose} sx={{ color: "var(--darkGray-HC-white)", fontSize: "30px", marginTop: "5px" }} className="" />
</div>
<form onSubmit={handleSubmit} className="flex flex-col w-full">
@@ -94,103 +94,104 @@ export default function SignupModal({ open, handleClose }) {
{feedbackMessage}
</Alert>
) : null}
- <TextField
- fullWidth
- onChange={(e) => setUserName(e.target.value)}
- label="Nome Completo *"
- className="my-5"
- value={userName}
- error={!userName && error}
- alt="Nome Completo (obrigatório)"
- />
- <TextField
- fullWidthConfirmation
- onChange={(e) => setUserEmail(e.target.value)}
- label="E-mail *"
- type="email"
- className="mb-5 flex"
- value={userEmail}
- error={!userEmail && error}
- alt="E-mail (obrigatório)"
- />
- <FormControl className="flex" variant="outlined">
- <InputLabel htmlFor="outlined-adornment-password">Senha*</InputLabel>
- <OutlinedInput
- fullWidth
- endAdornment={
- <InputAdornment position="end">
- <IconButton
- aria-label={
- showPassword ? 'hide the password' : 'display the password'
- }
- onClick={handleClickShowPassword}
- onMouseDown={handleMouseDownPassword}
- onMouseUp={handleMouseUpPassword}
- edge="end"
- >
- {showPassword ? <img src="ocultar-senha.svg" alt="Ocultar senha" /> : <img src="ver-senha.svg" alt="Ver senha" />}
- </IconButton>
- </InputAdornment>
- }
- onChange={(e) => setUserPassword(e.target.value)}
- type={showPassword ? 'text' : 'password'}
- label="Senha *"
- className="mb-1"
- value={userPassword}
- error={!userPassword && error}
- alt="Senha (obrigatório)"
+ <div className="w-full mb-3">
+ <label htmlFor="nome" className="block text-sm font-medium text-darkGray-HC-white mb-1">
+ Nome Completo *
+ </label>
+ <input
+ id="nome"
+ type="text"
+ className="w-full px-3 py-2 border border-mediumGray-HC-white rounded-md focus:outline-none focus:ring-2 focus:ring-turquoise-HC-white"
+ onChange={(e) => setUserName(e.target.value)}
+ value={userName}
+ alt="Nome Completo (obrigatório)"
/>
- </FormControl>
- <div className="mb-4 ml-1">
- <p className="text-darkGray-HC-white-underline text-sm">A senha deve ter no mínimo 8 caracteres.</p>
</div>
- <FormControl className="flex" variant="outlined">
- <InputLabel htmlFor="outlined-adornment-password">Confirmar senha*</InputLabel>
- <OutlinedInput
- fullWidth
- endAdornment={
- <InputAdornment position="end">
- <IconButton
- aria-label={
- showPasswordConfirmation ? 'hide the password' : 'display the password'
- }
- onClick={handleClickShowPasswordConfirmation}
- onMouseDown={handleMouseDownPassword}
- onMouseUp={handleMouseUpPassword}
- edge="end"
- >
- {showPassword ? <img src="ocultar-senha.svg" alt="Ocultar senha" /> : <img src="ver-senha.svg" alt="Ver senha" />}
- </IconButton>
- </InputAdornment>
- }
- onChange={(e) => setUserPasswordConfirmation(e.target.value)}
- type={showPasswordConfirmation ? 'text' : 'password'}
- label="Confirmar senha *"
- className="mb-5"
- value={userPasswordConfirmation}
- error={
- userPasswordConfirmation != userPassword &&
- userPasswordConfirmation != ""
- }
- helperText={
- userPasswordConfirmation.length > 0 &&
- userPasswordConfirmation != userPassword &&
- helperText
- }
- alt="Confirmar senha (obrigatório)"
+ <div className="w-full mb-3">
+ <label htmlFor="email" className="block text-sm font-medium text-darkGray-HC-white mb-1">
+ E-mail *
+ </label>
+ <input
+ id="email"
+ type="email"
+ className="w-full px-3 py-2 border border-mediumGray-HC-white rounded-md focus:outline-none focus:ring-2 focus:ring-turquoise-HC-white"
+ onChange={(e) => setUserEmail(e.target.value)}
+ value={userEmail}
+ alt="E-mail (obrigatório)"
/>
- </FormControl>
-
+ </div>
+ <div className="w-full mb-3">
+ <label htmlFor="password" className="block text-sm font-medium text-darkGray-HC-white mb-1">
+ Senha *
+ </label>
+ <div className="relative">
+ <input
+ id="password"
+ type={showPassword ? 'text' : 'password'}
+ className="w-full px-3 py-2 border border-mediumGray-HC-white rounded-md focus:outline-none focus:ring-2 focus:ring-turquoise-HC-white"
+ onChange={(e) => setUserPassword(e.target.value)}
+ value={userPassword}
+ alt="Senha (obrigatório)"
+ />
+ <button
+ type="button"
+ onClick={handleClickShowPassword}
+ className="absolute inset-y-0 right-0 pr-3 flex items-center text-mediumGray-HC-dark text-sm leading-5"
+ >
+ {showPassword ? (
+ <img src="ocultar-senha.svg" alt="Ocultar senha" />
+ ) : (
+ <img src="ver-senha.svg" alt="Ver senha" />
+ )}
+ </button>
+ </div>
+ {error && !userPassword && (
+ <p className="text-red-HC-white text-sm mt-1">A senha é obrigatória.</p>
+ )}
+ </div>
+ <div className="mb-4 ml-1">
+ <p className="text-darkGray-HC-white text-sm">A senha deve ter no mínimo 8 caracteres.</p>
+ </div>
+ <div className="w-full mb-4">
+ <label htmlFor="passwordConfirmation" className="block text-sm font-medium text-darkGray-HC-white mb-1">
+ Confirmar senha *
+ </label>
+ <div className="relative">
+ <input
+ id="passwordConfirmation"
+ type={showPasswordConfirmation ? 'text' : 'password'}
+ className="w-full px-3 py-2 border border-mediumGray-HC-white rounded-md focus:outline-none focus:ring-2 focus:ring-turquoise-HC-white"
+ onChange={(e) => setUserPasswordConfirmation(e.target.value)}
+ value={userPasswordConfirmation}
+ alt="Confirmar senha (obrigatório)"
+ />
+ <button
+ type="button"
+ onClick={handleClickShowPasswordConfirmation}
+ className="absolute inset-y-0 right-0 pr-3 flex items-center text-mediumGray-HC-dark text-sm leading-5"
+ >
+ {showPasswordConfirmation ? (
+ <img src="ocultar-senha.svg" alt="Ocultar senha" />
+ ) : (
+ <img src="ver-senha.svg" alt="Ver senha" />
+ )}
+ </button>
+ </div>
+ {userPasswordConfirmation.length > 0 && userPasswordConfirmation !== userPassword && (
+ <p className="text-red-HC-white text-sm mt-1">{helperText}</p>
+ )}
+ </div>
<Button
fullWidth
disableElevation
- className="bg-turquoise text-white-HC-dark-underline hover:bg-turquoise-hover"
+ className="bg-turquoise-HC-white text-white-HC-dark-underline hover:bg-darkTurquoise-HC-dark hover:text-white font-bold py-2 rounded-md outline outline-1 outline-ice-HC-white"
type="submit"
alt="Enviar"
>
Enviar
</Button>
+
{/* <Divider flexItem className="mt-2">
<p className="text-darkGray-HC-white-underline text-base">OU</p>
</Divider> */}
diff --git a/src/app/globals.css b/src/app/globals.css
index d3c95227270e91e4744185e8979833f66576f2b0..8e751398eec0ad33112bd183ae227f233c315e69 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -51,6 +51,7 @@
--white-HC-dark-underline: #ffffff;
--orange: #ed6f24;
--darkOrange-HC-gray: #de5518;
+ --darkOrange-HC-white: #de5518;
--darkOrange-HC-dark: #de5518;
--darkGray-HC-dark: #6c8080;
--darkGray-HC-white: #6c8080;
diff --git a/src/app/themes/theme_high_contrast.css b/src/app/themes/theme_high_contrast.css
index 6e6f6c264203fa4d9a5e9cd23906a7a64bf60c4d..0a02a1dabc39a46201d7b6d34d9ffcc87a65e85e 100644
--- a/src/app/themes/theme_high_contrast.css
+++ b/src/app/themes/theme_high_contrast.css
@@ -14,6 +14,7 @@ html[data-theme="theme_high_contrast"] {
--darkTurquoise-HC-dark: #000000;
--darkOrange-HC-gray: #8d8d99;
--darkOrange-HC-dark: #000000;
+ --darkOrange-HC-white: #ffffff;
--darkGray-HC-dark: #000000;
--darkGray-HC-dark-underline: #000000;
--darkGray-HC-white: #ffffff;
diff --git a/tailwind.config.js b/tailwind.config.js
index b61ec70631a6831503c3d5f76c0d5e0d43b3d8e0..dbbbab7ffb7348bc183c8762f49ce85c78ba8a8d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -46,6 +46,7 @@ module.exports = {
"orange": 'var(--orange)',
"darkOrange-HC-gray": 'var(--darkOrange-HC-gray)',
"darkOrange-HC-dark": 'var(--darkOrange-HC-dark)',
+ "darkOrange-HC-white": 'var(--darkOrange-HC-white)',
"darkGray-HC-dark": 'var(--darkGray-HC-dark)',
"darkGray-HC-white": 'var(--darkGray-HC-white)',
"darkGray-HC-white-underline": 'var(--darkGray-HC-white-underline)',