Normalize desktop icon sizing (#1088)

This commit is contained in:
klopez4212
2026-06-17 18:08:53 +01:00
committed by GitHub
parent 771086fd69
commit 1a37ee3951
20 changed files with 26 additions and 26 deletions

View File

@@ -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}

View File

@@ -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>
);

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>
);
}

View File

@@ -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>

View File

@@ -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"

View File

@@ -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

View File

@@ -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>

View File

@@ -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>
);
}

View File

@@ -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(

View File

@@ -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>

View File

@@ -232,7 +232,7 @@ export function NotificationSettingsCard({
</>
) : (
<>
<ChevronDown className="h-3.5 w-3.5" />
<ChevronDown className="h-4 w-4" />
View all
</>
)}

View File

@@ -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"

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>

View File

@@ -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: {