litruv/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add avatar border color customization and improve text contrast across user profile components

Browse Source
This commit is contained in:
Litruv
2026-03-12 23:08:05 +11:00
parent 67f3ae4d34
commit 37f4297972
8 changed files with 127 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/presence/Presence.tsx
View File

@@ -62,14 +62,15 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
type AvatarPresenceProps = {
badge: ReactNode;
variant?: ContainerColor;
badgeBackgroundColor?: string;
};
export const AvatarPresence = as<'div', AvatarPresenceProps>(
({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
({ as: AsAvatarPresence, badge, variant = 'Surface', badgeBackgroundColor, children, ...props }, ref) => (
<Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
{badge && (
<div
className={css.AvatarPresenceBadge}
style={{ backgroundColor: color[variant].Container }}
style={{ backgroundColor: badgeBackgroundColor || color[variant].Container }}
>
{badge}
</div>

8
src/app/components/user-profile/CreatorChip.tsx
View File

@@ -1,4 +1,4 @@
import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
import { Chip, color, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
import React, { MouseEventHandler, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import { isKeyHotkey } from 'is-hotkey';
@@ -80,6 +80,7 @@ export function CreatorChip({ borderColor }: { borderColor?: string }) {
>
<Chip
variant="Success"
fill={borderColor ? 'Soft' : 'None'}
outlined
radii="Pill"
before={
@@ -95,8 +96,9 @@ export function CreatorChip({ borderColor }: { borderColor?: string }) {
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
color: getContrastingTextColor(borderColor),
opacity: 1
} : { backgroundColor: color.Surface.Container, opacity: 1 }}
>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{tag.name}

7
src/app/components/user-profile/PowerChip.tsx
View File

@@ -2,6 +2,7 @@ import {
Box,
Button,
Chip,
color,
config,
Dialog,
Header,
@@ -319,6 +320,7 @@ export function PowerChip({ userId, borderColor }: { userId: string; borderColor
>
<Chip
variant={error ? 'Critical' : 'SurfaceVariant'}
fill={borderColor ? 'Soft' : 'None'}
radii="Pill"
before={
cords ? (
@@ -336,8 +338,9 @@ export function PowerChip({ userId, borderColor }: { userId: string; borderColor
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
color: getContrastingTextColor(borderColor),
opacity: 1
} : { backgroundColor: color.Surface.Container, opacity: 1 }}
>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{tag.name}

25
src/app/components/user-profile/UserChips.tsx
View File

@@ -8,6 +8,7 @@ import {
PopOut,
Menu,
MenuItem,
color,
config,
Text,
Line,
@@ -125,6 +126,7 @@ export function ServerChip({ server, borderColor }: { server: string; borderColo
>
<Chip
variant={myServer === server ? 'SurfaceVariant' : 'Warning'}
fill={borderColor ? 'Soft' : 'None'}
radii="Pill"
before={
cords ? (
@@ -138,8 +140,9 @@ export function ServerChip({ server, borderColor }: { server: string; borderColo
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
color: getContrastingTextColor(borderColor),
opacity: 1
} : { backgroundColor: color.Surface.Container, opacity: 1 }}
>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{server}
@@ -212,6 +215,7 @@ export function ShareChip({ userId, borderColor }: { userId: string; borderColor
>
<Chip
variant={copied ? 'Success' : 'SurfaceVariant'}
fill={borderColor ? 'Soft' : 'None'}
radii="Pill"
before={
cords ? (
@@ -225,8 +229,9 @@ export function ShareChip({ userId, borderColor }: { userId: string; borderColor
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
color: getContrastingTextColor(borderColor),
opacity: 1
} : { backgroundColor: color.Surface.Container, opacity: 1 }}
>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
Share
@@ -413,6 +418,7 @@ export function MutualRoomsChip({ userId, borderColor }: { userId: string; borde
>
<Chip
variant="SurfaceVariant"
fill={borderColor ? 'Soft' : 'None'}
radii="Pill"
before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
disabled={
@@ -423,8 +429,9 @@ export function MutualRoomsChip({ userId, borderColor }: { userId: string; borde
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
color: getContrastingTextColor(borderColor),
opacity: 1
} : { backgroundColor: color.Surface.Container, opacity: 1 }}
>
<Text size="B300" style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{mutualRoomsState.status === AsyncStatus.Success &&
@@ -521,14 +528,16 @@ export function OptionsChip({ userId, borderColor }: { userId: string; borderCol
>
<Chip
variant="SurfaceVariant"
fill={borderColor ? 'Soft' : 'None'}
radii="Pill"
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
color: getContrastingTextColor(borderColor),
opacity: 1
} : { backgroundColor: color.Surface.Container, opacity: 1 }}
>
{ignoring ? (
<Spinner variant="Secondary" size="50" />

14
src/app/components/user-profile/UserHero.tsx
View File

@@ -60,6 +60,8 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
<div className={css.UserHeroAvatarContainer}>
<AvatarPresence
className={css.UserAvatarContainer}
style={profileStyle.avatarBorderColor ? { backgroundColor: profileStyle.avatarBorderColor } : undefined}
badgeBackgroundColor={profileStyle.avatarBorderColor}
badge={
presence && <PresenceBadge presence={presence.presence} status={presence.status} />
}
@@ -69,10 +71,14 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
className={css.UserHeroAvatar}
size="500"
style={profileStyle.avatarBorderColor ? {
outline: `${toRem(4)} solid ${profileStyle.avatarBorderColor}`,
outlineOffset: toRem(-1),
} : undefined}
style={{
width: toRem(72),
height: toRem(72),
...(profileStyle.avatarBorderColor ? {
outline: `${toRem(4)} solid ${profileStyle.avatarBorderColor}`,
outlineOffset: toRem(-1),
} : {}),
}}
>
<UserAvatar
className={css.UserHeroAvatarImg}

26
src/app/components/user-profile/UserRoomProfile.tsx
View File

@@ -23,7 +23,7 @@ import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
import { CreatorChip } from './CreatorChip';
import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
import { DirectCreateSearchParams } from '../../pages/paths';
import { getContrastingTextColor } from '../../utils/common';
import { getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../utils/common';
import classNames from 'classnames';
import { BreakWord, LineClamp3 } from '../../styles/Text.css';
import colorMXID from '../../../util/colorMXID';
@@ -87,6 +87,10 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
(canKickUser && membership === Membership.Join) ||
(canBanUser && membership !== Membership.Ban);
const profileColor = profileStyle.avatarBorderColor ? stripAlphaFromColor(profileStyle.avatarBorderColor) : colorMXID(userId);
const profileTextShadow = `0 1px 4px ${getTextShadowColor(profileColor)}`;
const pillBgColor = profileStyle.avatarBorderColor ? stripAlphaFromColor(profileStyle.avatarBorderColor) : undefined;
return (
<Box direction="Column">
<UserHero
@@ -111,7 +115,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
<Text
size="H4"
className={classNames(BreakWord, LineClamp3)}
style={{ color: getMemberDisplayName(room, userId) !== userId ? (profileStyle.avatarBorderColor || colorMXID(userId)) : undefined }}
style={{ color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined, textShadow: profileTextShadow }}
>
{getMemberDisplayName(room, userId)}
</Text>
@@ -120,7 +124,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
<Text
size="T200"
className={BreakWord}
style={{ color: profileStyle.avatarBorderColor || colorMXID(userId), opacity: 0.8 }}
style={{ color: profileColor, textShadow: profileTextShadow }}
>
{userId}
</Text>
@@ -129,8 +133,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
{presence?.status && (
<Box
style={{
backgroundColor: profileStyle.avatarBorderColor || color.Surface.Container,
border: profileStyle.avatarBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
backgroundColor: pillBgColor || color.Surface.Container,
border: pillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
padding: `${toRem(6)} ${toRem(10)}`,
borderRadius: toRem(16),
maxWidth: toRem(250),
@@ -140,7 +144,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
size="T300"
className={BreakWord}
style={{
color: profileStyle.avatarBorderColor ? getContrastingTextColor(profileStyle.avatarBorderColor) : undefined
color: pillBgColor ? getContrastingTextColor(pillBgColor) : undefined
}}
>
{presence.status}
@@ -150,9 +154,9 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
{/* Chips Row */}
<Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
{server && <ServerChip server={server} borderColor={profileStyle.avatarBorderColor} />}
<ShareChip userId={userId} borderColor={profileStyle.avatarBorderColor} />
{creator ? <CreatorChip borderColor={profileStyle.avatarBorderColor} /> : <PowerChip userId={userId} borderColor={profileStyle.avatarBorderColor} />}
{server && <ServerChip server={server} borderColor={pillBgColor} />}
<ShareChip userId={userId} borderColor={pillBgColor} />
{creator ? <CreatorChip borderColor={pillBgColor} /> : <PowerChip userId={userId} borderColor={pillBgColor} />}
</Box>
{/* Message Button */}
@@ -172,8 +176,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
{/* Additional Chips if needed */}
{userId !== myUserId && (
<Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
<MutualRoomsChip userId={userId} borderColor={profileStyle.avatarBorderColor} />
<OptionsChip userId={userId} borderColor={profileStyle.avatarBorderColor} />
<MutualRoomsChip userId={userId} borderColor={pillBgColor} />
<OptionsChip userId={userId} borderColor={pillBgColor} />
</Box>
)}
</Box>