jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-10-29 05:21:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Kit/circular avatars (#927)

Browse Source
This commit is contained in:
klopez4212
2026-06-10 19:53:45 +01:00
committed by GitHub
parent dbe973dacd
commit e5f0c32648
6 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/src/features/channels/ui/ChannelScreenHeader.tsx
View File

@@ -85,7 +85,7 @@ export function ChannelScreenHeader({
activeChannel?.channelType === "dm" ? (
<ProfileAvatar
avatarUrl={activeDmAvatarUrl}
className="h-6 w-6 rounded-md text-[10px]"
className="h-6 w-6 rounded-full text-[10px]"
iconClassName="h-3.5 w-3.5"
label={activeChannelTitle}
testId="chat-header-dm-avatar"

2
desktop/src/features/messages/ui/MessageRow.tsx
View File

@@ -205,7 +205,7 @@ export const MessageRow = React.memo(
const isThreadReplyLayout = layoutVariant === "thread-reply";
const guideBleedPx = isThreadReplyLayout ? 4 : 0;
const avatarSizeClass = "!h-9 !w-9";
const avatarButtonRadiusClass = "rounded-xl";
const avatarButtonRadiusClass = "rounded-full";
const respondToDotColor =
message.respondTo === "anyone"

15
desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
View File

@@ -21,11 +21,18 @@ function ParticipantAvatar({
<div
className={index > 0 ? "-ml-2" : ""}
data-testid="message-thread-summary-participant"
style={{ zIndex: 10 - index }}
style={{
zIndex: 10 - index,
...(index > 0 && {
mask: "radial-gradient(circle 16px at -4px 50%, transparent 99%, #fff 100%)",
WebkitMask:
"radial-gradient(circle 16px at -4px 50%, transparent 99%, #fff 100%)",
}),
}}
>
<UserAvatar
avatarUrl={participant.avatarUrl}
className="h-7 w-7 text-[10px] ring-2 ring-background"
className="h-7 w-7 text-[10px]"
displayName={participant.author}
size="sm"
/>
@@ -88,14 +95,14 @@ 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-[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"
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:-bottom-0.5 before:-left-0.5 before:-right-2 before:-top-0.5 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"
data-thread-head-id={message.id}
data-testid="message-thread-summary"
onClick={() => onOpenThread(message)}
style={{ marginLeft: `${marginLeftPx}px` }}
type="button"
>
<div className="flex shrink-0 items-center">
<div className="ml-0.5 flex shrink-0 items-center">
{summary.participants.map((participant, index) => (
<ParticipantAvatar
index={index}

6
desktop/src/features/sidebar/ui/SidebarSection.tsx
View File

@@ -70,7 +70,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-[6px] border border-sidebar-border/80 bg-sidebar-accent/80 text-[9px] text-sidebar-foreground shadow-none"
className="h-5 w-5 rounded-full border border-sidebar-border/80 bg-sidebar-accent/80 text-[9px] text-sidebar-foreground shadow-none"
iconClassName="h-3 w-3"
label={primaryParticipant.label}
/>
@@ -91,13 +91,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-[6px] 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-full 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-[6px] 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-full 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}
/>

2
desktop/src/shared/ui/ViewLoadingFallback.tsx
View File

@@ -47,7 +47,7 @@ function MessageRowsSkeleton() {
<>
{["first", "second", "third", "fourth", "fifth"].map((row, index) => (
<div className="flex gap-3" key={row}>
<Skeleton className="h-9 w-9 shrink-0 rounded-xl" />
<Skeleton className="h-9 w-9 shrink-0 rounded-full" />
<div className="min-w-0 flex-1 space-y-1 pt-0.5">
<div className="flex items-baseline gap-2">
<Skeleton className="h-3.5 w-28" />

2
desktop/src/shared/ui/avatar.tsx
View File

@@ -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-lg",
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className,
)}
{...props}