diff --git a/src/app/perfil/[id]/components/GroupButton.js b/src/app/perfil/[id]/components/GroupButton.js index 3569c177f8b5ac550b768e506f94f08c7cd520c3..1cbdd496e1123b34c35cd9dd2c4abea69f69e18e 100644 --- a/src/app/perfil/[id]/components/GroupButton.js +++ b/src/app/perfil/[id]/components/GroupButton.js @@ -85,11 +85,11 @@ export default function GroupButton({ profileData, idLogin }) { return ( <> - <div className='pb-4 flex flex-row justify-between mr-10'> - <div className='flex flex-row gap-4 ' > + <div className='pb-4 flex flex-row max-lg:flex-col justify-between max-lg:items-center max-lg:pt-8 max-lg:mr-0 mr-10'> + <div className='flex flex-row gap-4 max-sm:flex-col max-sm:items-center' > {idLogin == profileData["id"] ? <button - className={`text-[16px] rounded-[10px] normal-case h-10 font-bold w-48 text-white bg-secondary hover:bg-secondary-hover `} + className={`text-[16px] rounded-[10px] normal-case h-10 font-bold w-48 text-white bg-secondary hover:bg-secondary-hover `} alt="Editar meu perfil" onClick={() => router.push(`/editar/${idLogin}`)} > @@ -105,7 +105,7 @@ export default function GroupButton({ profileData, idLogin }) { {follow ? "Seguindo o perfil" : "Seguir o perfil"} </button> } - <div className='max-[1024px]:grid max-[1024px]:justify-items-center'> + <div className=''> <button className="border text-[16px] outline outline-1 pr-2 outline-outlineColor text-text-filter border-main rounded-[10px] normal-case h-10 font-semibold w-52 hover:bg-main-hover " onClick={() => setShareOpen(true)} @@ -116,7 +116,7 @@ export default function GroupButton({ profileData, idLogin }) { </button> </div> </div> - <div className=''> + <div > {idLogin !== profileData["id"] && <button className=" text-[16px] hover:bg-transparent hover:text-red text-main-text rounded-[10px] normal-case h-10 font-bold " diff --git a/src/app/perfil/[id]/components/UserCard.js b/src/app/perfil/[id]/components/UserCard.js index 073a99c454607373d832c39e81ce20d94edef950..d253fd9aadeda94fba40589e4ba02a3fca2e1104 100644 --- a/src/app/perfil/[id]/components/UserCard.js +++ b/src/app/perfil/[id]/components/UserCard.js @@ -170,7 +170,7 @@ export default function UserCard({ profileData, idLogin }) { return ( <> <div className='flex pt-[5%] flex-col mx-[5%] '> - <div className='flex rounded-2xl gap-4 bg-white outline outline-1 outline-outlineColor' > + <div className='flex max-lg:flex-col rounded-2xl gap-4 max-lg:items-center bg-white outline outline-1 outline-outlineColor' > <div className='p-10 h-full items-center'> {/*a imagem do usuário tem nomes diferentes no backend se for usuário público ou não */} {profileData["avatar"] ? @@ -180,20 +180,20 @@ export default function UserCard({ profileData, idLogin }) { } </div> - <div className='flex flex-col pt-12 pb-6 justify-between w-full'> + <div className='flex flex-col pt-12 max-lg:pt-2 pb-6 justify-between w-full '> <div className=' flex flex-col justify-start '> - <div className='flex flex-row items-center text-main-text font-bold text-4xl mb-6'> - <div className='bg-gray-color rounded-full w-[28px] h-[28px] mx-4 aspect-square' /> {profileData["name"]} + <div className='flex flex-row items-center text-main-text font-bold max-sm:text-3xl text-4xl mb-6'> + <div className='bg-gray-color shrink-0 rounded-full max-lg:w-[20px] max-lg:h-[20px] w-[28px] h-[28px] mx-4 aspect-square' /> {profileData["name"]} </div> - {profileData["email"] && <div className='mb-3 flex flex-row items-center text-text-filter text-2xl '> - <div className='bg-gray-color rounded-full w-[28px] h-[28px] mx-4 aspect-square' /> + {profileData["email"] && <div className='mb-3 truncate flex flex-row items-center text-text-filter max-sm:text-base text-2xl '> + <div className='bg-gray-color shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' /> {profileData["email"]}</div>} <div className='mb-3'> {translateItems && - <div className='flex flex-row items-center mt-1 text-text-filter text-xl'> - <div className='bg-gray-color rounded-full w-[28px] h-[28px] mx-4 aspect-square' /> + <div className='flex flex-row items-center mt-1 text-text-filter max-sm:text-base text-xl'> + <div className='bg-gray-color shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' /> {translateItems}</div> } </div>