Skip to content

Normalize desktop icon sizing #1088

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
klopez4212 merged 1 commit into from
Jun 17, 2026
Merged

Normalize desktop icon sizing #1088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion desktop/src/features/channels/ui/AddChannelBotPersonasSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions desktop/src/features/channels/ui/AddChannelBotTeamsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`}
Expand Down Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/channels/ui/MembersSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/channels/ui/MembersSidebarMemberCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/home/ui/FeedSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions desktop/src/features/huddle/components/MicControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions desktop/src/features/huddle/components/ParticipantList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
);
}
2 changes: 1 addition & 1 deletion desktop/src/features/messages/ui/ComposerAttachments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/messages/ui/MessageThreadPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions desktop/src/features/messages/ui/MessageTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/profile/ui/AnimatedAvatarCapture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/profile/ui/AnimatedAvatarControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/profile/ui/UserProfilePanelSections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
6 changes: 3 additions & 3 deletions desktop/src/features/reminders/ui/RemindersPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/settings/ui/NotificationSettingsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ export function NotificationSettingsCard({
</>
) : (
<>
<ChevronDown className="h-3.5 w-3.5" />
<ChevronDown className="h-4 w-4" />
View all
</>
)}
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/settings/ui/ProfileSettingsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/settings/ui/SoundPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/sidebar/ui/CreateChannelDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/sidebar/ui/NewDirectMessageDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/shared/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down