mirror of
https://github.com/block/buzz.git
synced 2026-10-27 12:40:30 +00:00
Normalize desktop icon sizing (#1088)
This commit is contained in:
@@ -180,7 +180,7 @@ export function AddChannelBotPersonasSection({
|
||||
: "bg-muted/60 text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<Check className="h-2.5 w-2.5" />
|
||||
<Check className="h-4 w-4" />
|
||||
In channel
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
@@ -130,7 +130,7 @@ export function AddChannelBotTeamsSection({
|
||||
: "bg-muted/60 text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<Check className="h-2.5 w-2.5" />
|
||||
<Check className="h-4 w-4" />
|
||||
{allInChannel
|
||||
? "All in channel"
|
||||
: `${inChannelCount} in channel`}
|
||||
@@ -165,7 +165,7 @@ export function AddChannelBotTeamsSection({
|
||||
{persona.displayName}
|
||||
</span>
|
||||
{personaInChannel ? (
|
||||
<Check className="h-2.5 w-2.5 text-emerald-300" />
|
||||
<Check className="h-4 w-4 text-emerald-300" />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -730,7 +730,7 @@ function AddMemberSearchResultRow({
|
||||
{formatAddCandidateName(user)}
|
||||
</span>
|
||||
<span className="inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
|
||||
<Bot aria-hidden="true" className="h-3 w-3" />
|
||||
<Bot aria-hidden="true" className="h-4 w-4" />
|
||||
agent
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -148,7 +148,7 @@ export function MembersSidebarMemberCard({
|
||||
{memberLabel}
|
||||
</span>
|
||||
<span className="inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
|
||||
<Bot aria-hidden="true" className="h-3 w-3" />
|
||||
<Bot aria-hidden="true" className="h-4 w-4" />
|
||||
{roleLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -143,7 +143,7 @@ export function FeedSection({
|
||||
return (
|
||||
<section>
|
||||
<div className="flex items-center gap-2 pb-2">
|
||||
<Icon className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@@ -185,10 +185,10 @@ export function MicControls({
|
||||
style={micMeterBarStyle(rightBarHeight)}
|
||||
/>
|
||||
</span>
|
||||
<ChevronUp className="hidden h-3 w-3 group-data-[state=open]:block group-focus-visible:block group-hover:block" />
|
||||
<ChevronUp className="hidden h-4 w-4 group-data-[state=open]:block group-focus-visible:block group-hover:block" />
|
||||
</span>
|
||||
) : (
|
||||
<ChevronUp className="h-3 w-3" />
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
@@ -117,7 +117,7 @@ export function HuddleParticipantsControl({
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
@@ -159,7 +159,7 @@ function HexAvatar({
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
{size === "lg" ? shortId : <UsersRound className="h-3.5 w-3.5" />}
|
||||
{size === "lg" ? shortId : <UsersRound className="h-4 w-4" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -181,7 +181,7 @@ export const ComposerAttachments = React.memo(function ComposerAttachments({
|
||||
className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl bg-background/55 text-foreground/70 backdrop-blur-[1px]"
|
||||
data-composer-media-spoiler=""
|
||||
>
|
||||
<HatGlasses className="h-5 w-5" />
|
||||
<HatGlasses className="h-4 w-4" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -514,7 +514,7 @@ export function MessageThreadPanel({
|
||||
{!isAtBottom ? (
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-36 z-20 flex justify-center px-4">
|
||||
<Button
|
||||
className="pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-border/50 bg-background/85 px-2.5 text-2xs font-medium text-muted-foreground shadow-xs backdrop-blur-sm hover:bg-muted/70 hover:text-foreground [&_svg]:size-3.5"
|
||||
className="pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-border/50 bg-background/85 px-2.5 text-2xs font-medium text-muted-foreground shadow-xs backdrop-blur-sm hover:bg-muted/70 hover:text-foreground [&_svg]:size-4"
|
||||
data-testid="thread-scroll-to-latest"
|
||||
onClick={() => scrollToBottom("smooth")}
|
||||
size="sm"
|
||||
|
||||
@@ -279,7 +279,7 @@ export const MessageTimeline = React.memo(function MessageTimeline({
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
className="pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-primary/40 bg-primary/10 px-2.5 text-2xs font-medium text-primary shadow-xs backdrop-blur-sm hover:bg-primary/20 [&_svg]:size-3.5"
|
||||
className="pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-primary/40 bg-primary/10 px-2.5 text-2xs font-medium text-primary shadow-xs backdrop-blur-sm hover:bg-primary/20 [&_svg]:size-4"
|
||||
data-testid="message-unread-pill"
|
||||
onClick={handleJumpToOldestUnread}
|
||||
size="sm"
|
||||
@@ -402,7 +402,7 @@ export const MessageTimeline = React.memo(function MessageTimeline({
|
||||
"flex shrink-0 items-center justify-center rounded-full bg-muted/70 text-muted-foreground",
|
||||
hasDescription
|
||||
? "h-12 w-12 [&_svg]:h-6 [&_svg]:w-6"
|
||||
: "h-10 w-10 [&_svg]:h-5 [&_svg]:w-5",
|
||||
: "h-10 w-10 [&_svg]:h-4 [&_svg]:w-4",
|
||||
)}
|
||||
data-testid={
|
||||
action.testId
|
||||
|
||||
@@ -776,7 +776,7 @@ export function AnimatedAvatarCapture({
|
||||
) : phase === "starting" ? (
|
||||
<div className="absolute inset-0 grid place-items-center rounded-full bg-background/70 text-center shadow-inner">
|
||||
<div className="grid justify-items-center gap-2 px-4">
|
||||
<Spinner aria-label="Starting camera" className="h-5 w-5" />
|
||||
<Spinner aria-label="Starting camera" className="h-4 w-4" />
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
Starting camera
|
||||
</span>
|
||||
|
||||
@@ -313,7 +313,7 @@ export function AvatarOutlineToggle({
|
||||
title={enabled ? "Outline on" : "Outline off"}
|
||||
type="button"
|
||||
>
|
||||
<Icon aria-hidden="true" className="h-5 w-5" />
|
||||
<Icon aria-hidden="true" className="h-4 w-4" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -505,7 +505,7 @@ function ProfileQuickAction({
|
||||
: "bg-muted/60 text-foreground hover:bg-muted/80",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
|
||||
@@ -150,7 +150,7 @@ function ReminderRow({
|
||||
onClick={() => void handleComplete()}
|
||||
title="Complete"
|
||||
>
|
||||
<Check className="h-3.5 w-3.5" />
|
||||
<Check className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
@@ -160,7 +160,7 @@ function ReminderRow({
|
||||
onClick={() => void handleSnooze()}
|
||||
title="Snooze 1 hour"
|
||||
>
|
||||
<RotateCcw className="h-3.5 w-3.5" />
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
@@ -170,7 +170,7 @@ function ReminderRow({
|
||||
onClick={() => void handleCancel()}
|
||||
title="Cancel"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -232,7 +232,7 @@ export function NotificationSettingsCard({
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
View all
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -766,7 +766,7 @@ export function ProfileSettingsCard({
|
||||
this device.
|
||||
</p>
|
||||
</div>
|
||||
<ChevronDown className="h-5 w-5 shrink-0 text-muted-foreground transition-[color,transform] duration-150 ease-out group-open:rotate-180 group-hover/identity:text-foreground group-focus-visible/identity:text-foreground" />
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-[color,transform] duration-150 ease-out group-open:rotate-180 group-hover/identity:text-foreground group-focus-visible/identity:text-foreground" />
|
||||
</summary>
|
||||
<div
|
||||
className="border-t border-border/55 divide-y divide-border/55"
|
||||
|
||||
@@ -95,7 +95,7 @@ export function SoundPicker({
|
||||
<span className="truncate">{value}</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Waveform className="h-6 w-15 opacity-70" name={value} />
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground" />
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
@@ -171,7 +171,7 @@ export function CreateChannelDialog({
|
||||
>
|
||||
<DurationIcon className="h-4 w-4" />
|
||||
{durationLabel}
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground/70" />
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground/70" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start" className="w-72 p-1">
|
||||
|
||||
@@ -582,7 +582,7 @@ export function NewDirectMessageDialog({
|
||||
{user.isAgent ? (
|
||||
<Bot
|
||||
aria-label="agent"
|
||||
className="h-3.5 w-3.5 text-muted-foreground"
|
||||
className="h-4 w-4 text-muted-foreground"
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/shared/lib/cn";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4.5 [&_svg]:shrink-0",
|
||||
"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
Reference in New Issue
Block a user