diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js index 610bb3dc71f2ea039635f9e9ce33e1fb17dbc8db..64b817964491b9e0456964dac880135829a274e9 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 8a0011ade7631e4ce8b13253cf38f362da492150..0dc80e963a6f2ec7745d165385c977056a99b870 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 3f1678a9f0566fe2b9cc510b993173a14d8e272e..ab87bf293864aa2a492c7bb7227b47f17552bdea 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 366525f38f1000b06b61d1eae037ce2616857532..65f4741381934cc036f12ec8e1f797782fcd1bba 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>