RiseUP/riseup-squad20
1
0
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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>
{isEditingProfile ? (
<div className="space-y-3 sm:space-y-4">
<div className="flex justify-center">
<UploadAvatar
userId={profileData.id}
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'
return (
<div className="space-y-4">
<div className="flex items-center gap-4">
<Avatar className="h-20 w-20">
<div className="w-full flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
<div className="flex-shrink-0">
<Avatar className="h-20 w-20 sm:h-20 sm:w-20">
<AvatarImage src={currentAvatarUrl} alt={userName || 'Avatar'} />
<AvatarFallback className="text-lg">
{initials}
</AvatarFallback>
</Avatar>
</div>
<div className="space-y-2">
<div className="flex gap-2">
<div className="flex-1 w-full min-w-0">
<div className="flex flex-col gap-2">
<div className="flex gap-2 flex-wrap">
<Button
variant="outline"
size="sm"
onClick={() => document.getElementById('avatar-upload')?.click()}
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" />
{isUploading ? 'Enviando...' : 'Upload'}
<Upload className="h-4 w-4 mr-1 sm:mr-2" />
<span className="hidden xs:inline">{isUploading ? 'Enviando...' : 'Upload'}</span>
</Button>
{currentAvatarUrl && (
@ -101,10 +103,10 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
variant="outline"
size="sm"
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
<Download className="h-4 w-4 mr-1 sm:mr-2" />
<span className="hidden xs:inline">Download</span>
</Button>
)}
</div>
@ -118,8 +120,8 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
disabled={isUploading}
/>
<p className="text-xs text-muted-foreground">
Formatos aceitos: JPG, PNG, WebP (máx. 2MB)
<p className="text-xs text-muted-foreground leading-snug">
Formatos: JPG, PNG, WebP (máx. 2MB)
</p>
{error && (