From 76d8d3d8509dbd408962b8440f81c100365cb5a5 Mon Sep 17 00:00:00 2001
From: Guilherme Eduardo <gegs23@inf.ufpr.br>
Date: Tue, 8 Apr 2025 10:38:01 -0300
Subject: [PATCH] Issue #282: FIX profile edition on HC
---
src/app/components/Overlay.js | 2 +-
src/app/editar/[id]/components/EditForm.js | 2 +-
src/app/editar/[id]/components/UpdateInfo.js | 66 ++++++++++++++++---
.../editar/[id]/components/UpdatePassword.js | 45 ++++++++++---
4 files changed, 96 insertions(+), 19 deletions(-)
diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js
index 610bb3dc..64b81796 100644
--- a/src/app/components/Overlay.js
+++ b/src/app/components/Overlay.js
@@ -87,7 +87,7 @@ export default function Overlay({
:
// Páginas com três colunas e que não precisam de h-full
<div
- className="grid w-full h-dvh pt-[160px] text-base 2xl:grid-cols-[150px_minmax(0,1fr)_500px] xl:grid-cols-[150px_minmax(0,1fr)_400px] grid-cols-[150px_minmax(0,1fr)]"
+ className="grid w-full pt-[160px] text-base 2xl:grid-cols-[150px_minmax(0,1fr)_500px] xl:grid-cols-[150px_minmax(0,1fr)_400px] grid-cols-[150px_minmax(0,1fr)]"
>
<div className="min-h-0">
<SideBar setFilterState={setFilterState} filterState={filterState} />
diff --git a/src/app/editar/[id]/components/EditForm.js b/src/app/editar/[id]/components/EditForm.js
index 8a0011ad..0dc80e96 100644
--- a/src/app/editar/[id]/components/EditForm.js
+++ b/src/app/editar/[id]/components/EditForm.js
@@ -4,7 +4,7 @@ import UpdateInfo from "./UpdateInfo";
export default function EditForm({ user }) {
return (
- <div className="w-full bg-white-HC-dark rounded-lg shadow-lg">
+ <div className="w-full bg-white-HC-dark rounded-lg shadow-lg outline outline-1 outline-ice-HC-white">
<UpdateInfo user={user}/>
<Divider className="mt-5 mx-4"/>
<UpdatePassword user={user} />
diff --git a/src/app/editar/[id]/components/UpdateInfo.js b/src/app/editar/[id]/components/UpdateInfo.js
index 3f1678a9..ab87bf29 100644
--- a/src/app/editar/[id]/components/UpdateInfo.js
+++ b/src/app/editar/[id]/components/UpdateInfo.js
@@ -202,7 +202,7 @@ export default function UpdateInfo({ user }) {
<ModalNotSucess open={notSucessOpen} onClose={() => { setNotSucessOpen(false) }} />
<ModalSucess open={sucessOpen} onClose={() => { setSucessOpen(false) }} />
<form onSubmit={handleSubmit}>
- <label className="text-3xl text-darkGray-HC-white-underline font-bold mt-3 flex justify-center">Editar Perfil</label>
+ <label className="text-3xl text-darkGray-HC-white font-bold mt-3 flex justify-center">Editar Perfil</label>
<div className="flex flex-col mt-4 items-center">
<label className="text-xl text-darkGray-HC-white font-bold mx-6">Foto de perfil</label>
<div className="flex flex-col items-center my-2">
@@ -222,7 +222,7 @@ export default function UpdateInfo({ user }) {
<button
type="button"
- className="bg-turquoise text-white-HC-dark-underline rounded-lg mt-2 px-4 py-2"
+ className="bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark text-white-HC-dark-underline hover:text-white rounded-lg mt-2 px-4 py-2 outline outline-1 outline-ice-HC-white"
onClick={() => setChangePhoto(true)}
>
Editar Foto
@@ -233,11 +233,27 @@ export default function UpdateInfo({ user }) {
</div>
<div className="mx-4 mt-4">
- <label className=" text-xl text-darkGray-HC-white-underline font-bold ">Nome Completo *</label>
+ <label className=" text-xl text-darkGray-HC-white font-bold ">Nome Completo *</label>
<TextField
onChange={handleNameChange}
- className="w-[100%] mt-2"
+ className="w-[100%] mt-2 outline outline-1 outline-ice-HC-white text-ice-HC-white"
defaultValue={user["name"]}
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'var(--mediumGray-HC-white)', // cor da borda
+ },
+ '&:hover fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // ao passar o mouse
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // quando estiver focado
+ },
+ "& input": {
+ color: "var(--darkGray-HC-white)",
+ },
+ },
+ }}
/>
</div>
<div className="mx-4">
@@ -248,23 +264,55 @@ export default function UpdateInfo({ user }) {
onChange={handleDescriptionChange}
helperText={`${description.length}/160`}
error={description.length > 160}
- className="w-[100%]"
+ className="w-[100%] outline outline-1 outline-ice-HC-white"
defaultValue={user["description"]}
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'var(--mediumGray-HC-white)', // cor da borda
+ },
+ '&:hover fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // ao passar o mouse
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // quando estiver focado
+ },
+ "& input": {
+ color: "var(--darkGray-HC-white)",
+ },
+ },
+ }}
/>
</div>
<div className="mx-4 mt-8">
- <label className=" text-xl text-darkGray-HC-white-underline font-bold ">Email *</label>
+ <label className=" text-xl text-darkGray-HC-white font-bold">Email *</label>
<TextField
onChange={handleEmailChange}
- className="w-[100%] mt-2"
+ className="w-[100%] mt-2 outline outline-1 outline-ice-HC-white"
defaultValue={user["email"]}
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'var(--mediumGray-HC-white)', // cor da borda
+ },
+ '&:hover fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // ao passar o mouse
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // quando estiver focado
+ },
+ "& input": {
+ color: "var(--darkGray-HC-white)",
+ },
+ },
+ }}
/>
</div>
<div className="flex justify-end mt-5 mr-4">
- <button type="button" onClick={() => router.push(`/perfil/${user["id"]}`)} className="bg-white-HC-dark text-darkGray-HC-white-underline p-2 rounded-lg hover:bg-ice-HC-dark-hover mr-1 ">Voltar para perfil</button>
- <button type="submit" className="bg-turquoise text-white-HC-dark-underline p-2 rounded-lg hover:bg-turquoise-hover ml-1 ">Salvar alterações</button>
+ <button type="button" onClick={() => router.push(`/perfil/${user["id"]}`)} className="bg-white-HC-dark hover:bg-white text-darkGray-HC-white-underline hover:text-darkGray-HC-dark p-2 rounded-lg mr-1 outline outline-1 outline-ice-HC-white ">Voltar para perfil</button>
+ <button type="submit" className="bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark text-white-HC-dark-underline hover:text-white p-2 rounded-lg ml-1 outline outline-1 outline-ice-HC-white">Salvar alterações</button>
</div>
</form>
</div>
diff --git a/src/app/editar/[id]/components/UpdatePassword.js b/src/app/editar/[id]/components/UpdatePassword.js
index 366525f3..65f47413 100644
--- a/src/app/editar/[id]/components/UpdatePassword.js
+++ b/src/app/editar/[id]/components/UpdatePassword.js
@@ -136,25 +136,54 @@ export default function UpdatePassword({ user }) {
<ModalSucess open={sucessOpen} onClose={() => { setSucessOpen(false) }} />
<form onSubmit={handleSubmit}>
<div className="mx-4 mt-8 flex flex-col">
- <label className=" text-xl text-darkGray-HC-white-underline font-bold ">Alterar senha</label>
- <label className=" text-base text-darkGray-HC-white-underline mt-4 ">Nova senha *</label>
+ <label className=" text-xl text-darkGray-HC-white font-bold ">Alterar senha</label>
+ <label className=" text-base text-darkGray-HC-white mt-4 ">Nova senha *</label>
<TextField
onChange={handleNew}
type="password"
- className="w-[100%] mt-2"
+ className="w-[100%] mt-2 outline outline-1 outline-ice-HC-white"
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'var(--mediumGray-HC-white)', // cor da borda
+ },
+ '&:hover fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // ao passar o mouse
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // quando estiver focado
+ },
+ },
+ }}
/>
- <label className=" text-base text-darkGray-HC-white-underline mt-4 ">Repita nova senha *</label>
+ <label className=" text-base text-darkGray-HC-white mt-4 ">Repita nova senha *</label>
<TextField
onChange={handleRepeat}
type="password"
- className="w-[100%] mt-2"
+ className="w-[100%] mt-2 outline outline-1 outline-ice-HC-white"
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'var(--mediumGray-HC-white)', // cor da borda
+ },
+ '&:hover fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // ao passar o mouse
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'var(--turquoise-HC-white)', // quando estiver focado
+ },
+ "& input": {
+ color: "var(--darkGray-HC-white)",
+ },
+ },
+ }}
/>
{!equal && <label className="text-sm text-red-700 mt-1">*Senhas devem ser iguais</label>}
</div>
- <div className="flex justify-end mb-5 mr-4">
+ <div className="flex justify-end mb-5 mr-4 ">
- <button type="button" onClick={() => router.push(`/perfil/${user["id"]}`)} className="bg-white-HC-dark text-darkGray-HC-white-underline p-2 mt-5 rounded-lg hover:bg-ice-HC-dark-hover mr-1 ">Voltar para perfil</button>
- <button type="submit" className="bg-turquoise text-white-HC-dark-underline p-2 mt-5 rounded-lg hover:bg-turquoise-hover ml-1">Salvar nova senha</button>
+ <button type="button" onClick={() => router.push(`/perfil/${user["id"]}`)} className="bg-white-HC-dark text-darkGray-HC-white-underline p-2 mt-5 rounded-lg hover:bg-white hover:text-darkGray-HC-dark mr-1 outline outline-1 outline-ice-HC-white">Voltar para perfil</button>
+ <button type="submit" className="bg-turquoise-HC-white text-white-HC-dark-underline hover:text-white p-2 mt-5 rounded-lg hover:bg-darkTurquoise-HC-dark ml-1 outline outline-1 outline-ice-HC-white">Salvar nova senha</button>
</div>
</form>
--
GitLab