eduardo/riseup-squad20
2
1
Fork 0
forked from RiseUP/riseup-squad20
Code Pull Requests Activity

fix: responsiveness of the "Foto do Perfil" card profile page

Browse Source
This commit is contained in:
M-Gabrielly 2025-12-03 22:40:47 -03:00
parent a83dc5e347
commit 0eb7fd7171
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
susconecta/app/paciente/page.tsx
View File

@ -1889,7 +1889,7 @@ export default function PacientePage() {
<h3 className="text-base sm:text-lg md:text-lg font-semibold mb-3 sm:mb-4">Foto do Perfil</h3> <h3 className="text-base sm:text-lg md:text-lg font-semibold mb-3 sm:mb-4">Foto do Perfil</h3>
{isEditingProfile ? ( {isEditingProfile ? (
<div className="space-y-3 sm:space-y-4"> <div className="flex justify-center">
<UploadAvatar <UploadAvatar
userId={profileData.id} userId={profileData.id}
currentAvatarUrl={profileData.foto_url || "/avatars/01.png"} currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}

28
susconecta/components/ui/upload-avatar.tsx
View File

@ -74,26 +74,28 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
: 'U' : 'U'
return ( return (
<div className="space-y-4"> <div className="w-full flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
<div className="flex items-center gap-4"> <div className="flex-shrink-0">
<Avatar className="h-20 w-20"> <Avatar className="h-20 w-20 sm:h-20 sm:w-20">
<AvatarImage src={currentAvatarUrl} alt={userName || 'Avatar'} /> <AvatarImage src={currentAvatarUrl} alt={userName || 'Avatar'} />
<AvatarFallback className="text-lg"> <AvatarFallback className="text-lg">
{initials} {initials}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
</div>
<div className="space-y-2"> <div className="flex-1 w-full min-w-0">
<div className="flex gap-2"> <div className="flex flex-col gap-2">
<div className="flex gap-2 flex-wrap">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => document.getElementById('avatar-upload')?.click()} onClick={() => document.getElementById('avatar-upload')?.click()}
disabled={isUploading} disabled={isUploading}
className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
> >
<Upload className="h-4 w-4 mr-2" /> <Upload className="h-4 w-4 mr-1 sm:mr-2" />
{isUploading ? 'Enviando...' : 'Upload'} <span className="hidden xs:inline">{isUploading ? 'Enviando...' : 'Upload'}</span>
</Button> </Button>
{currentAvatarUrl && ( {currentAvatarUrl && (
@ -101,10 +103,10 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
variant="outline" variant="outline"
size="sm" size="sm"
onClick={handleDownload} onClick={handleDownload}
className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
> >
<Download className="h-4 w-4 mr-2" /> <Download className="h-4 w-4 mr-1 sm:mr-2" />
Download <span className="hidden xs:inline">Download</span>
</Button> </Button>
)} )}
</div> </div>
@ -118,8 +120,8 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
disabled={isUploading} disabled={isUploading}
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground leading-snug">
Formatos aceitos: JPG, PNG, WebP (máx. 2MB) Formatos: JPG, PNG, WebP (máx. 2MB)
</p> </p>
{error && ( {error && (