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

feat: add border color customization for user profile chips and improve text contrast

Browse Source
This commit is contained in:
Litruv
2026-03-12 22:18:05 +11:00
parent 834de012b4
commit 67f3ae4d34
8 changed files with 471 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,8 +42,9 @@ import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
import { CutoutCard } from '../cutout-card';
import { SettingTile } from '../setting-tile';
import { getContrastingTextColor } from '../../utils/common';
export function ServerChip({ server }: { server: string }) {
export function ServerChip({ server, borderColor }: { server: string; borderColor?: string }) {
const mx = useMatrixClient();
const myServer = getMxIdServer(mx.getSafeUserId());
const navigate = useNavigate();
@@ -134,8 +135,13 @@ export function ServerChip({ server }: { server: string }) {
}
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
<Text size="B300" truncate>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{server}
</Text>
</Chip>
@@ -143,7 +149,7 @@ export function ServerChip({ server }: { server: string }) {
);
}
export function ShareChip({ userId }: { userId: string }) {
export function ShareChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
const [cords, setCords] = useState<RectCords>();
const [copied, setCopied] = useTimeoutToggle();
@@ -216,8 +222,13 @@ export function ShareChip({ userId }: { userId: string }) {
}
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
<Text size="B300" truncate>
<Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
Share
</Text>
</Chip>
@@ -231,7 +242,7 @@ type MutualRoomsData = {
directs: Room[];
};
export function MutualRoomsChip({ userId }: { userId: string }) {
export function MutualRoomsChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
const mx = useMatrixClient();
const mutualRoomSupported = useMutualRoomsSupport();
const mutualRoomsState = useMutualRooms(userId);
@@ -409,8 +420,13 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
}
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
<Text size="B300">
<Text size="B300" style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
{mutualRoomsState.status === AsyncStatus.Success &&
`${mutualRoomsState.data.length} Mutual Rooms`}
{mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
@@ -437,7 +453,7 @@ export function IgnoredUserAlert() {
);
}
export function OptionsChip({ userId }: { userId: string }) {
export function OptionsChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
const mx = useMatrixClient();
const [cords, setCords] = useState<RectCords>();
@@ -503,11 +519,21 @@ export function OptionsChip({ userId }: { userId: string }) {
</FocusTrap>
}
>
<Chip variant="SurfaceVariant" radii="Pill" onClick={open} aria-pressed={!!cords}>
<Chip
variant="SurfaceVariant"
radii="Pill"
onClick={open}
aria-pressed={!!cords}
style={borderColor ? {
backgroundColor: borderColor,
border: 'none',
color: getContrastingTextColor(borderColor)
} : undefined}
>
{ignoring ? (
<Spinner variant="Secondary" size="50" />
) : (
<Icon size="50" src={Icons.HorizontalDots} />
<Icon size="50" src={Icons.HorizontalDots} style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined} />
)}
</Chip>
</PopOut>