mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
Unify avatar radius (#892)
This commit is contained in:
klopez4212
@@ -178,7 +178,7 @@ export function AddTeamToChannelDialog({
|
||||
>
|
||||
<ProfileAvatar
|
||||
avatarUrl={persona.avatarUrl}
|
||||
className="h-5 w-5 rounded-full text-[9px]"
|
||||
className="h-5 w-5 text-[9px]"
|
||||
label={persona.displayName}
|
||||
/>
|
||||
<span className="text-xs font-medium">
|
||||
|
||||
@@ -112,7 +112,7 @@ function MessageItem({
|
||||
{!isAssistant ? (
|
||||
<UserAvatar
|
||||
avatarUrl={authorProfile?.avatarUrl ?? null}
|
||||
className="mr-2 mt-1 h-5 w-5 shrink-0 rounded-full text-[8px]"
|
||||
className="mr-2 mt-1 h-5 w-5 shrink-0 text-[8px]"
|
||||
displayName={authorLabel}
|
||||
size="xs"
|
||||
/>
|
||||
|
||||
@@ -52,7 +52,7 @@ export function PersonaCatalogDetailsSheet({
|
||||
<div className="flex items-start gap-3">
|
||||
<ProfileAvatar
|
||||
avatarUrl={persona.avatarUrl}
|
||||
className="h-12 w-12 rounded-xl text-sm"
|
||||
className="h-12 w-12 text-sm"
|
||||
label={persona.displayName}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
|
||||
@@ -422,7 +422,7 @@ export function TeamDialog({
|
||||
/>
|
||||
<ProfileAvatar
|
||||
avatarUrl={persona.avatarUrl}
|
||||
className="h-6 w-6 rounded-full text-[10px]"
|
||||
className="h-6 w-6 text-[10px]"
|
||||
label={persona.displayName}
|
||||
/>
|
||||
<span className="text-sm">{persona.displayName}</span>
|
||||
|
||||
@@ -161,7 +161,7 @@ export function TeamsSection({
|
||||
{visible.map((persona) => (
|
||||
<ProfileAvatar
|
||||
avatarUrl={persona.avatarUrl}
|
||||
className="h-6 w-6 rounded-full border-2 border-card text-[10px]"
|
||||
className="h-6 w-6 border-2 border-card text-[10px]"
|
||||
key={persona.id}
|
||||
label={persona.displayName}
|
||||
/>
|
||||
|
||||
@@ -49,7 +49,7 @@ function SelectionChipButton({
|
||||
<ProfileAvatar
|
||||
avatarUrl={avatarUrl}
|
||||
className={cn(
|
||||
"h-6 w-6 rounded-full text-[10px]",
|
||||
"h-6 w-6 text-[10px]",
|
||||
selected
|
||||
? "bg-primary/20 text-primary ring-1 ring-primary/20"
|
||||
: "bg-background/80 text-muted-foreground ring-1 ring-border/70",
|
||||
@@ -161,7 +161,7 @@ export function AddChannelBotPersonasSection({
|
||||
<div className="flex items-center gap-2">
|
||||
<ProfileAvatar
|
||||
avatarUrl={persona.avatarUrl}
|
||||
className="h-7 w-7 rounded-full text-[10px] bg-primary-foreground/20 text-primary-foreground"
|
||||
className="h-7 w-7 text-[10px] bg-primary-foreground/20 text-primary-foreground"
|
||||
iconClassName="h-3.5 w-3.5"
|
||||
label={persona.displayName}
|
||||
/>
|
||||
|
||||
@@ -158,7 +158,7 @@ export function AddChannelBotTeamsSection({
|
||||
>
|
||||
<ProfileAvatar
|
||||
avatarUrl={persona.avatarUrl}
|
||||
className="h-4 w-4 rounded-full text-[8px] bg-primary-foreground/20 text-primary-foreground"
|
||||
className="h-4 w-4 text-[8px] bg-primary-foreground/20 text-primary-foreground"
|
||||
label={persona.displayName}
|
||||
/>
|
||||
<span className="text-[10px] text-primary-foreground">
|
||||
|
||||
@@ -135,7 +135,7 @@ export function AgentSessionThreadPanel({
|
||||
>
|
||||
<UserAvatar
|
||||
avatarUrl={avatarUrl}
|
||||
className="h-5 w-5 shrink-0 rounded-full text-[8px]"
|
||||
className="h-5 w-5 shrink-0 text-[8px]"
|
||||
displayName={agent.name}
|
||||
size="xs"
|
||||
/>
|
||||
|
||||
@@ -181,7 +181,7 @@ export function BotActivityComposerAction({
|
||||
<UserAvatar
|
||||
avatarUrl={agentAvatarUrl(agent)}
|
||||
className={cn(
|
||||
"rounded-full border border-background",
|
||||
"border border-background",
|
||||
isInline
|
||||
? "!h-[18px] !w-[18px] shadow-xs ring-1 ring-primary/25 text-[7px]"
|
||||
: "!h-5 !w-5 text-[8px]",
|
||||
@@ -243,7 +243,7 @@ export function BotActivityComposerAction({
|
||||
>
|
||||
<UserAvatar
|
||||
avatarUrl={agentAvatarUrl(agent)}
|
||||
className="!h-6 !w-6 shrink-0 rounded-full text-[9px]"
|
||||
className="!h-6 !w-6 shrink-0 text-[9px]"
|
||||
displayName={agent.name}
|
||||
/>
|
||||
<span className="min-w-0 flex-1 truncate">{agent.name}</span>
|
||||
|
||||
@@ -121,7 +121,7 @@ export function MembersSidebarMemberCard({
|
||||
<div className="relative shrink-0">
|
||||
<ProfileAvatar
|
||||
avatarUrl={profileAvatarUrl ?? null}
|
||||
className="h-9 w-9 rounded-full text-[11px] shadow-none"
|
||||
className="h-9 w-9 text-[11px] shadow-none"
|
||||
iconClassName="h-4 w-4"
|
||||
label={memberAvatarLabel}
|
||||
/>
|
||||
|
||||
@@ -54,7 +54,7 @@ export function QuickBotBar({ personas, pending, onAdd }: QuickBotBarProps) {
|
||||
<button
|
||||
aria-label={`Add ${persona.displayName}`}
|
||||
className={cn(
|
||||
"relative flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
|
||||
"relative flex h-7 w-7 shrink-0 items-center justify-center rounded-lg",
|
||||
"border border-border/50 shadow-xs",
|
||||
"transition-transform duration-150 hover:scale-110",
|
||||
"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
|
||||
@@ -70,7 +70,7 @@ export function QuickBotBar({ personas, pending, onAdd }: QuickBotBarProps) {
|
||||
{persona.avatarUrl ? (
|
||||
<img
|
||||
alt={persona.displayName}
|
||||
className="h-full w-full rounded-full object-cover"
|
||||
className="h-full w-full rounded-lg object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
src={rewriteRelayUrl(persona.avatarUrl)}
|
||||
/>
|
||||
@@ -80,7 +80,7 @@ export function QuickBotBar({ personas, pending, onAdd }: QuickBotBarProps) {
|
||||
</span>
|
||||
)}
|
||||
{isThisPending ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center rounded-full bg-background/70">
|
||||
<div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/70">
|
||||
<Spinner className="h-3.5 w-3.5 text-primary" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -133,7 +133,7 @@ export function InboxListPane({
|
||||
<div className="relative">
|
||||
<UserAvatar
|
||||
avatarUrl={item.avatarUrl}
|
||||
className="h-8 w-8 rounded-xl"
|
||||
className="h-8 w-8"
|
||||
displayName={item.senderLabel}
|
||||
size="md"
|
||||
/>
|
||||
|
||||
@@ -105,7 +105,7 @@ export function InboxMessageRow({
|
||||
<div className="relative shrink-0">
|
||||
<UserAvatar
|
||||
avatarUrl={message.avatarUrl}
|
||||
className="h-8 w-8 shrink-0 rounded-xl"
|
||||
className="h-8 w-8 shrink-0"
|
||||
displayName={message.authorLabel}
|
||||
size="md"
|
||||
/>
|
||||
|
||||
@@ -26,9 +26,11 @@ function formatLastReplyTime(unixSeconds: number): string {
|
||||
}
|
||||
|
||||
function ParticipantAvatar({
|
||||
hasNextParticipant,
|
||||
participant,
|
||||
index,
|
||||
}: {
|
||||
hasNextParticipant: boolean;
|
||||
participant: TimelineThreadSummaryParticipant;
|
||||
index: number;
|
||||
}) {
|
||||
@@ -40,7 +42,7 @@ function ParticipantAvatar({
|
||||
>
|
||||
<UserAvatar
|
||||
avatarUrl={participant.avatarUrl}
|
||||
className="h-8 w-8 rounded-full border-2 border-background text-[10px]"
|
||||
className={`h-8 w-8 text-[10px] ${hasNextParticipant ? "ring-2 ring-background" : ""}`}
|
||||
displayName={participant.author}
|
||||
size="sm"
|
||||
/>
|
||||
@@ -103,7 +105,7 @@ export function MessageThreadSummaryRow({
|
||||
|
||||
<button
|
||||
aria-label={summaryAriaLabel}
|
||||
className="group relative isolate inline-flex h-8 w-fit max-w-full cursor-pointer items-center gap-1.5 rounded-full text-left text-xs font-medium text-muted-foreground transition-[color,opacity] before:pointer-events-none before:absolute before:inset-y-0 before:left-0 before:-right-2 before:-z-10 before:rounded-full before:content-[''] before:transition-[background-color,box-shadow] hover:text-foreground hover:opacity-90 hover:before:bg-background/95 hover:before:ring-1 hover:before:ring-border/70 focus-visible:outline-hidden focus-visible:before:bg-background/95 focus-visible:before:ring-1 focus-visible:before:ring-ring"
|
||||
className="group relative isolate inline-flex h-8 w-fit max-w-full cursor-pointer items-center gap-1.5 rounded-[12px] text-left text-xs font-medium text-muted-foreground transition-[color,opacity] before:pointer-events-none before:absolute before:-bottom-0.5 before:-left-0.5 before:-right-2 before:-top-0.5 before:-z-10 before:rounded-[12px] before:content-[''] before:transition-[background-color,box-shadow] hover:text-foreground hover:opacity-90 hover:before:bg-background/95 hover:before:ring-1 hover:before:ring-border/70 focus-visible:outline-hidden focus-visible:before:bg-background/95 focus-visible:before:ring-1 focus-visible:before:ring-ring"
|
||||
data-thread-head-id={message.id}
|
||||
data-testid="message-thread-summary"
|
||||
onClick={() => onOpenThread(message)}
|
||||
@@ -113,6 +115,7 @@ export function MessageThreadSummaryRow({
|
||||
<div className="flex shrink-0 items-center">
|
||||
{summary.participants.map((participant, index) => (
|
||||
<ParticipantAvatar
|
||||
hasNextParticipant={index < summary.participants.length - 1}
|
||||
index={index}
|
||||
key={participant.id}
|
||||
participant={participant}
|
||||
|
||||
@@ -101,7 +101,7 @@ export function TypingIndicatorRow({
|
||||
<div
|
||||
key={pubkey}
|
||||
className={cn(
|
||||
"relative shrink-0 rounded-full ring-1 ring-background",
|
||||
"relative shrink-0 rounded-lg ring-1 ring-background",
|
||||
isActivityVariant ? "h-[18px] w-[18px]" : "h-5 w-5",
|
||||
index > 0 && "-ml-1.5",
|
||||
)}
|
||||
@@ -111,7 +111,6 @@ export function TypingIndicatorRow({
|
||||
avatarUrl={profile?.avatarUrl ?? null}
|
||||
label={label}
|
||||
className={cn(
|
||||
"rounded-full",
|
||||
isActivityVariant
|
||||
? "h-[18px] w-[18px] text-[7px]"
|
||||
: "h-5 w-5 text-[8px]",
|
||||
|
||||
@@ -77,7 +77,7 @@ export function AvatarUpload({
|
||||
<div className="relative h-20 w-20 shrink-0">
|
||||
<ProfileAvatar
|
||||
avatarUrl={avatarUrl || null}
|
||||
className="h-full w-full rounded-3xl text-xl"
|
||||
className="h-full w-full text-xl"
|
||||
iconClassName="h-6 w-6"
|
||||
label={previewName}
|
||||
testId={`${testIdPrefix}-preview`}
|
||||
|
||||
@@ -143,7 +143,7 @@ export function ProfilePopover({
|
||||
<div className="relative shrink-0">
|
||||
<ProfileAvatar
|
||||
avatarUrl={avatarUrl}
|
||||
className="h-8 w-8 rounded-xl text-xs"
|
||||
className="h-8 w-8 text-xs"
|
||||
iconClassName="h-4 w-4"
|
||||
label={displayName}
|
||||
/>
|
||||
|
||||
@@ -283,12 +283,12 @@ export function UserProfilePanel({
|
||||
{profile?.avatarUrl ? (
|
||||
<img
|
||||
alt={displayName}
|
||||
className="aspect-square w-full rounded-2xl object-cover shadow-xs"
|
||||
className="aspect-square w-full rounded-lg object-cover shadow-xs"
|
||||
referrerPolicy="no-referrer"
|
||||
src={rewriteRelayUrl(profile.avatarUrl)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex aspect-square w-full items-center justify-center rounded-2xl bg-secondary text-5xl font-semibold text-secondary-foreground shadow-xs">
|
||||
<div className="flex aspect-square w-full items-center justify-center rounded-lg bg-secondary text-5xl font-semibold text-secondary-foreground shadow-xs">
|
||||
{displayName.slice(0, 2).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -172,12 +172,12 @@ export function UserProfilePopover({
|
||||
{profile?.avatarUrl ? (
|
||||
<img
|
||||
alt={profile.displayName ?? "User avatar"}
|
||||
className="h-10 w-10 shrink-0 rounded-xl object-cover shadow-xs"
|
||||
className="h-10 w-10 shrink-0 rounded-lg object-cover shadow-xs"
|
||||
referrerPolicy="no-referrer"
|
||||
src={rewriteRelayUrl(profile.avatarUrl)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-secondary text-xs font-semibold text-secondary-foreground shadow-xs">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-secondary text-xs font-semibold text-secondary-foreground shadow-xs">
|
||||
{(profile?.displayName ?? pubkey.slice(0, 2))
|
||||
.slice(0, 2)
|
||||
.toUpperCase()}
|
||||
|
||||
@@ -82,7 +82,7 @@ function ReplyParentContext({
|
||||
>
|
||||
<UserAvatar
|
||||
avatarUrl={parentAvatarUrl}
|
||||
className="!h-4 !w-4 shrink-0 rounded-md"
|
||||
className="!h-4 !w-4 shrink-0"
|
||||
displayName={parentDisplayName ?? "Parent note author"}
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -251,7 +251,7 @@ export function TopbarSearch({
|
||||
resultProfiles?.[result.hit.pubkey.toLowerCase()]
|
||||
?.avatarUrl ?? null
|
||||
}
|
||||
className="h-7 w-7 rounded-md"
|
||||
className="h-7 w-7"
|
||||
displayName={resolveUserLabel({
|
||||
currentPubkey,
|
||||
profiles: resultProfiles,
|
||||
|
||||
@@ -758,7 +758,7 @@ function ProviderRow({
|
||||
) : (
|
||||
<ProfileAvatar
|
||||
avatarUrl={avatarUrl ?? null}
|
||||
className="h-5 w-5 shrink-0 rounded-full text-[8px] bg-muted text-muted-foreground ring-1 ring-border/50"
|
||||
className="h-5 w-5 shrink-0 text-[8px] bg-muted text-muted-foreground ring-1 ring-border/50"
|
||||
label={label}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -180,7 +180,7 @@ export function NewDirectMessageDialog({
|
||||
>
|
||||
<ProfileAvatar
|
||||
avatarUrl={user.avatarUrl}
|
||||
className="h-5 w-5 rounded-full text-[10px] shadow-none"
|
||||
className="h-5 w-5 text-[10px] shadow-none"
|
||||
iconClassName="h-3 w-3"
|
||||
label={formatUserName(user)}
|
||||
/>
|
||||
@@ -238,7 +238,7 @@ export function NewDirectMessageDialog({
|
||||
>
|
||||
<ProfileAvatar
|
||||
avatarUrl={user.avatarUrl}
|
||||
className="h-9 w-9 rounded-2xl text-xs shadow-none"
|
||||
className="h-9 w-9 text-xs shadow-none"
|
||||
iconClassName="h-4 w-4"
|
||||
label={formatUserName(user)}
|
||||
/>
|
||||
|
||||
@@ -99,7 +99,7 @@ export function SidebarProfileCard({
|
||||
>
|
||||
<ProfileAvatar
|
||||
avatarUrl={profile?.avatarUrl ?? null}
|
||||
className="h-8 w-8 rounded-xl text-xs"
|
||||
className="h-8 w-8 text-xs"
|
||||
iconClassName="h-4 w-4"
|
||||
label={resolvedDisplayName}
|
||||
testId="sidebar-profile-avatar"
|
||||
|
||||
@@ -67,7 +67,7 @@ function DmChannelIcon({
|
||||
<span className="relative flex h-5 w-5 shrink-0 items-center justify-center">
|
||||
<ProfileAvatar
|
||||
avatarUrl={primaryParticipant.avatarUrl}
|
||||
className="h-5 w-5 rounded-full border border-sidebar-border/80 bg-sidebar-accent/80 text-[9px] text-sidebar-foreground shadow-none"
|
||||
className="h-5 w-5 rounded-[6px] border border-sidebar-border/80 bg-sidebar-accent/80 text-[9px] text-sidebar-foreground shadow-none"
|
||||
iconClassName="h-3 w-3"
|
||||
label={primaryParticipant.label}
|
||||
/>
|
||||
@@ -88,13 +88,13 @@ function DmChannelIcon({
|
||||
<span className="relative flex h-5 w-7 shrink-0 items-center">
|
||||
<ProfileAvatar
|
||||
avatarUrl={primaryParticipant.avatarUrl}
|
||||
className="absolute left-0 top-0 h-[18px] w-[18px] rounded-full border-2 border-sidebar bg-sidebar-accent/80 text-[8px] text-sidebar-foreground shadow-none"
|
||||
className="absolute left-0 top-0 h-[18px] w-[18px] rounded-[6px] border-2 border-sidebar bg-sidebar-accent/80 text-[8px] text-sidebar-foreground shadow-none"
|
||||
iconClassName="h-2.5 w-2.5"
|
||||
label={primaryParticipant.label}
|
||||
/>
|
||||
<ProfileAvatar
|
||||
avatarUrl={secondaryParticipant.avatarUrl}
|
||||
className="absolute bottom-0 right-0 h-[18px] w-[18px] rounded-full border-2 border-sidebar bg-sidebar-accent/80 text-[8px] text-sidebar-foreground shadow-none"
|
||||
className="absolute bottom-0 right-0 h-[18px] w-[18px] rounded-[6px] border-2 border-sidebar bg-sidebar-accent/80 text-[8px] text-sidebar-foreground shadow-none"
|
||||
iconClassName="h-2.5 w-2.5"
|
||||
label={secondaryParticipant.label}
|
||||
/>
|
||||
|
||||
@@ -31,9 +31,7 @@ export function UserAvatar({
|
||||
const initials = getInitials(displayName);
|
||||
|
||||
return (
|
||||
<Avatar
|
||||
className={cn(sizeClasses[size], "rounded-lg shadow-xs", className)}
|
||||
>
|
||||
<Avatar className={cn(sizeClasses[size], "shadow-xs", className)}>
|
||||
{avatarUrl ? (
|
||||
<AvatarImage
|
||||
alt={`${displayName} avatar`}
|
||||
@@ -45,7 +43,7 @@ export function UserAvatar({
|
||||
) : null}
|
||||
<AvatarFallback
|
||||
className={cn(
|
||||
"rounded-lg font-semibold",
|
||||
"font-semibold",
|
||||
accent
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-secondary text-secondary-foreground",
|
||||
|
||||
@@ -10,7 +10,7 @@ const Avatar = React.forwardRef<
|
||||
<AvatarPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -23,7 +23,7 @@ export function PubkeyAvatar({
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className={`flex items-center justify-center rounded-full font-medium text-white ${sizeClasses}`}
|
||||
className={`flex items-center justify-center rounded-lg font-medium text-white ${sizeClasses}`}
|
||||
style={{ backgroundColor: `hsl(${hue}, 55%, 45%)` }}
|
||||
>
|
||||
{pubkey.slice(0, 2)}
|
||||
|
||||
Reference in New Issue
Block a user