From 4f7aee161aaf65928d4a260c69974b0c0bfb234c Mon Sep 17 00:00:00 2001 From: 7w1 Date: Fri, 8 May 2026 14:18:47 -0500 Subject: [PATCH 01/11] restore old chip style on default profile --- .changeset/restore-old-chip-style.md | 5 ++ .../components/user-profile/CreatorChip.tsx | 14 +++-- src/app/components/user-profile/PowerChip.tsx | 18 +++--- src/app/components/user-profile/UserChips.tsx | 60 +++++++++++-------- .../user-profile/UserRoomProfile.tsx | 58 ++++-------------- 5 files changed, 70 insertions(+), 85 deletions(-) create mode 100644 .changeset/restore-old-chip-style.md diff --git a/.changeset/restore-old-chip-style.md b/.changeset/restore-old-chip-style.md new file mode 100644 index 000000000..6ab6df875 --- /dev/null +++ b/.changeset/restore-old-chip-style.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Restores the old chip colors when custom profile themes aren't set. diff --git a/src/app/components/user-profile/CreatorChip.tsx b/src/app/components/user-profile/CreatorChip.tsx index 1e5bf84dc..c19dbdc79 100644 --- a/src/app/components/user-profile/CreatorChip.tsx +++ b/src/app/components/user-profile/CreatorChip.tsx @@ -93,6 +93,8 @@ export function CreatorChip({ } > : undefined} onClick={open} aria-pressed={!!cords} - className={css.UserHeroChip} - style={{ - backgroundColor: cardColor, - borderColor: backgroundColor, - color: textColor, - }} + className={cardColor ? css.UserHeroChip : undefined} + style={ + cardColor + ? { backgroundColor: cardColor, borderColor: backgroundColor, color: textColor } + : undefined + } > {tag.name} diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx index 58a54bd19..d09305d20 100644 --- a/src/app/components/user-profile/PowerChip.tsx +++ b/src/app/components/user-profile/PowerChip.tsx @@ -340,14 +340,18 @@ export function PowerChip({ } > diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx index c57532dd6..35ee66196 100644 --- a/src/app/components/user-profile/UserChips.tsx +++ b/src/app/components/user-profile/UserChips.tsx @@ -22,6 +22,7 @@ import { Avatar, } from 'folds'; import { useMatrixClient } from '$hooks/useMatrixClient'; +import { getMxIdServer } from '$utils/mxIdHelper'; import { useCloseUserRoomProfile } from '$state/hooks/userRoomProfile'; import { stopPropagation } from '$utils/keyboard'; import { copyToClipboard } from '$utils/dom'; @@ -57,6 +58,8 @@ export function ServerChip({ textColor?: string; backgroundColor?: string; }) { + const mx = useMatrixClient(); + const myServer = getMxIdServer(mx.getSafeUserId()); const navigate = useNavigate(); const closeProfile = useCloseUserRoomProfile(); const [copied, setCopied] = useTimeoutToggle(); @@ -154,6 +157,7 @@ export function ServerChip({ } > {server} @@ -261,7 +265,7 @@ export function ShareChip({ } > Share @@ -486,6 +494,7 @@ export function MutualRoomsChip({ } > } disabled={ @@ -493,12 +502,12 @@ export function MutualRoomsChip({ } onClick={open} aria-pressed={!!cords} - className={css.UserHeroChip} - style={{ - backgroundColor: cardColor, - borderColor: backgroundColor, - color: textColor, - }} + className={cardColor ? css.UserHeroChip : undefined} + style={ + cardColor + ? { backgroundColor: cardColor, borderColor: backgroundColor, color: textColor } + : undefined + } > {mutualRoomsState.status === AsyncStatus.Success && @@ -711,15 +720,16 @@ export function OptionsChip({ } > {ignoring ? ( diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index 59ca01b3e..85526a9db 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -515,6 +515,11 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly - {server && ( - - )} - + {server && } + {creator ? ( - + ) : ( - - )} - {userId !== myUserId && ( - - )} - {userId !== myUserId && ( - + )} + {userId !== myUserId && } + {userId !== myUserId && } {ignored && } {member && membership === bannedMembership && ( From 6d325c32fa82cbef9ce1f0f9c31925e7e73c0377 Mon Sep 17 00:00:00 2001 From: 7w1 Date: Fri, 8 May 2026 14:34:38 -0500 Subject: [PATCH 02/11] similar style for all chips in general --- .changeset/restore-old-chip-style.md | 2 +- .../components/user-profile/CreatorChip.tsx | 11 +++-- src/app/components/user-profile/PowerChip.tsx | 15 +++---- src/app/components/user-profile/UserChips.tsx | 45 +++++++------------ .../user-profile/UserRoomProfile.tsx | 26 +++++++---- src/app/components/user-profile/styles.css.ts | 10 +++++ 6 files changed, 56 insertions(+), 53 deletions(-) diff --git a/.changeset/restore-old-chip-style.md b/.changeset/restore-old-chip-style.md index 6ab6df875..9a4413884 100644 --- a/.changeset/restore-old-chip-style.md +++ b/.changeset/restore-old-chip-style.md @@ -2,4 +2,4 @@ default: patch --- -Restores the old chip colors when custom profile themes aren't set. +Various small adjustments to the themed profiles for better consistency. diff --git a/src/app/components/user-profile/CreatorChip.tsx b/src/app/components/user-profile/CreatorChip.tsx index c19dbdc79..e2cfc80cd 100644 --- a/src/app/components/user-profile/CreatorChip.tsx +++ b/src/app/components/user-profile/CreatorChip.tsx @@ -1,5 +1,6 @@ import type { RectCords } from 'folds'; import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, Text } from 'folds'; +import type { CSSProperties } from 'react'; import type { MouseEventHandler } from 'react'; import { useState } from 'react'; import FocusTrap from 'focus-trap-react'; @@ -23,11 +24,13 @@ export function CreatorChip({ innerColor, cardColor, textColor, + chipSurfaceStyle, }: { backgroundColor?: string; innerColor?: string; cardColor?: string; textColor?: string; + chipSurfaceStyle?: CSSProperties; }) { const mx = useMatrixClient(); const useAuthentication = useMediaAuthentication(); @@ -106,12 +109,8 @@ export function CreatorChip({ after={tagIconSrc ? : undefined} onClick={open} aria-pressed={!!cords} - className={cardColor ? css.UserHeroChip : undefined} - style={ - cardColor - ? { backgroundColor: cardColor, borderColor: backgroundColor, color: textColor } - : undefined - } + className={cardColor ? css.UserHeroChipThemed : undefined} + style={cardColor ? chipSurfaceStyle : undefined} > {tag.name} diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx index d09305d20..7c43737e2 100644 --- a/src/app/components/user-profile/PowerChip.tsx +++ b/src/app/components/user-profile/PowerChip.tsx @@ -20,6 +20,7 @@ import { Text, toRem, } from 'folds'; +import type { CSSProperties } from 'react'; import type { MouseEventHandler } from 'react'; import { useCallback, useState } from 'react'; import FocusTrap from 'focus-trap-react'; @@ -153,12 +154,14 @@ export function PowerChip({ innerColor, cardColor, textColor, + chipSurfaceStyle, }: { userId: string; backgroundColor?: string; innerColor?: string; cardColor?: string; textColor?: string; + chipSurfaceStyle?: CSSProperties; }) { const mx = useMatrixClient(); const room = useRoom(); @@ -342,16 +345,8 @@ export function PowerChip({ diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx index 35ee66196..d47f206cb 100644 --- a/src/app/components/user-profile/UserChips.tsx +++ b/src/app/components/user-profile/UserChips.tsx @@ -1,4 +1,5 @@ import type { KeyboardEventHandler, MouseEventHandler } from 'react'; +import type { CSSProperties } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import FocusTrap from 'focus-trap-react'; @@ -51,12 +52,14 @@ export function ServerChip({ cardColor, textColor, backgroundColor, + chipSurfaceStyle, }: { server: string; innerColor?: string; cardColor?: string; textColor?: string; backgroundColor?: string; + chipSurfaceStyle?: CSSProperties; }) { const mx = useMatrixClient(); const myServer = getMxIdServer(mx.getSafeUserId()); @@ -168,12 +171,8 @@ export function ServerChip({ } onClick={open} aria-pressed={!!cords} - className={cardColor ? css.UserHeroChip : undefined} - style={ - cardColor - ? { backgroundColor: cardColor, borderColor: backgroundColor, color: textColor } - : undefined - } + className={cardColor ? css.UserHeroChipThemed : undefined} + style={cardColor ? chipSurfaceStyle : undefined} > {server} @@ -189,12 +188,14 @@ export function ShareChip({ cardColor, textColor, backgroundColor, + chipSurfaceStyle, }: { userId: string; innerColor?: string; cardColor?: string; textColor?: string; backgroundColor?: string; + chipSurfaceStyle?: CSSProperties; }) { const [cords, setCords] = useState(); @@ -276,16 +277,8 @@ export function ShareChip({ } onClick={open} aria-pressed={!!cords} - className={cardColor ? css.UserHeroChip : undefined} - style={ - cardColor - ? { - backgroundColor: (!copied && cardColor) || undefined, - borderColor: backgroundColor, - color: textColor, - } - : undefined - } + className={cardColor ? css.UserHeroChipThemed : undefined} + style={cardColor && !copied && chipSurfaceStyle ? chipSurfaceStyle : undefined} > Share @@ -307,12 +300,14 @@ export function MutualRoomsChip({ innerColor, cardColor, textColor, + chipSurfaceStyle, }: { userId: string; backgroundColor?: string; innerColor?: string; cardColor?: string; textColor?: string; + chipSurfaceStyle?: CSSProperties; }) { const mx = useMatrixClient(); const mutualRoomSupported = useMutualRoomsSupport(); @@ -502,12 +497,8 @@ export function MutualRoomsChip({ } onClick={open} aria-pressed={!!cords} - className={cardColor ? css.UserHeroChip : undefined} - style={ - cardColor - ? { backgroundColor: cardColor, borderColor: backgroundColor, color: textColor } - : undefined - } + className={cardColor ? css.UserHeroChipThemed : undefined} + style={cardColor ? chipSurfaceStyle : undefined} > {mutualRoomsState.status === AsyncStatus.Success && @@ -542,12 +533,14 @@ export function OptionsChip({ innerColor, cardColor, textColor, + chipSurfaceStyle, }: { userId: string; backgroundColor?: string; innerColor?: string; cardColor?: string; textColor?: string; + chipSurfaceStyle?: CSSProperties; }) { const mx = useMatrixClient(); const [cords, setCords] = useState(); @@ -724,12 +717,8 @@ export function OptionsChip({ radii="Pill" onClick={open} aria-pressed={!!cords} - className={cardColor ? css.UserHeroChip : undefined} - style={ - cardColor - ? { backgroundColor: cardColor, borderColor: backgroundColor, color: textColor } - : undefined - } + className={cardColor ? css.UserHeroChipThemed : undefined} + style={cardColor ? chipSurfaceStyle : undefined} > {ignoring ? ( diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index 85526a9db..c6cc110d8 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -11,7 +11,7 @@ import { Text, toRem, } from 'folds'; -import type { SyntheticEvent } from 'react'; +import type { CSSProperties, SyntheticEvent } from 'react'; import { useCallback, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useAtomValue } from 'jotai'; @@ -515,9 +515,22 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly} onClick={handleMessage} - className={css.UserHeroChip} + className={showCustomHeroCard ? css.UserHeroChipThemed : css.UserHeroChip} style={{ marginLeft: 'auto', - backgroundColor: - backgroundColor !== color.Surface.Container ? cardColor : undefined, - borderColor: backgroundColor, - color: backgroundColor !== color.Surface.Container ? textColor : undefined, + ...(showCustomHeroCard && chipSurfaceStyle ? chipSurfaceStyle : {}), }} > Message diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts index 3ff2f6c10..d4fc0cc5f 100644 --- a/src/app/components/user-profile/styles.css.ts +++ b/src/app/components/user-profile/styles.css.ts @@ -86,6 +86,16 @@ export const UserHeroChip = style({ transform: 'translateY(-1px)', }, }); + +export const UserHeroChipThemed = style({ + borderStyle: 'solid', + borderWidth: '1px', + borderColor: 'transparent', + ':hover': { + filter: 'brightness(var(--user-hero-chip-hover-brightness, 0.94))', + transform: 'translateY(-1px)', + }, +}); export const UserHeroMenuItem = style({ borderStyle: 'hidden', borderWidth: '1px', From 052fb1f82e8b3b3847b49c0b88f3b75d2668d3d5 Mon Sep 17 00:00:00 2001 From: 7w1 Date: Fri, 8 May 2026 14:45:03 -0500 Subject: [PATCH 03/11] remove borders replace with slight shadows --- src/app/components/user-profile/UserRoomProfile.tsx | 11 ++--------- src/app/components/user-profile/styles.css.ts | 2 ++ 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index c6cc110d8..e0e916ffa 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -80,7 +80,6 @@ type UserExtendedSectionProps = { profile: UserProfile; htmlReactParserOptions: HTMLReactParserOptions; linkifyOpts: LinkifyOpts; - backgroundColor?: string; innerColor?: string; cardColor?: string; textColor?: string; @@ -97,7 +96,6 @@ function UserExtendedSection({ profile, htmlReactParserOptions, linkifyOpts, - backgroundColor, innerColor, cardColor, textColor, @@ -293,9 +291,7 @@ function UserExtendedSection({ style={{ backgroundColor: cardColor, borderRadius: config.radii.R400, - borderColor: backgroundColor, - borderStyle: 'solid', - borderWidth: '1px', + boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)', maxHeight: '200px', marginTop: config.space.S0, overflowY: 'auto', @@ -556,9 +552,7 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly @@ -590,7 +584,6 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly Date: Fri, 8 May 2026 14:53:04 -0500 Subject: [PATCH 04/11] adjust status message styling --- src/app/components/user-profile/UserHero.tsx | 17 ++++++++++++++++- src/app/components/user-profile/styles.css.ts | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx index f284296b2..e469da3e6 100644 --- a/src/app/components/user-profile/UserHero.tsx +++ b/src/app/components/user-profile/UserHero.tsx @@ -1,4 +1,5 @@ import { useMemo, useState } from 'react'; +import type { CSSProperties } from 'react'; import { Avatar, Box, @@ -78,10 +79,14 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs const isBackgroundDark = fetchedBrightness ? fetchedBrightness === 'dark' : undefined; const cardColor = shadeColor(backgroundColor, isBackgroundDark ? -80 : 80) ?? standardColors.Background.Container; + const innerColor = shadeColor(backgroundColor, isBackgroundDark ? -50 : 50) ?? backgroundColor; + const statusSurfaceColor = + shadeColor(innerColor, fetchedBrightness === 'light' ? -14 : 32) ?? cardColor; const textColor = ((fetchedBrightness === 'dark' || areColorsTooSimilar('#000000', cardColor)) && '#FFFFFF') || ((fetchedBrightness === 'light' || areColorsTooSimilar('#FFFFFF', cardColor)) && '#000000') || undefined; + const statusHoverBrightness = fetchedBrightness === 'light' ? 0.94 : 1.08; return ( @@ -153,6 +158,8 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs {status && status.length > 0 && (
setIsFullStatus(!isFullStatus) : undefined} className={css.UserHeroStatusTooltip} style={{ @@ -161,8 +168,16 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs transform: 'none', transition: 'none', display: 'flex', - backgroundColor: cardColor, + padding: `${toRem(8)} ${toRem(12)}`, + backgroundColor: statusSurfaceColor, color: textColor, + borderStyle: 'none', + borderWidth: 0, + outline: 'none', + boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.05)', + ...({ + '--user-hero-status-hover-brightness': String(statusHoverBrightness), + } as CSSProperties), }} > diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts index 87068bd37..652f6e0cd 100644 --- a/src/app/components/user-profile/styles.css.ts +++ b/src/app/components/user-profile/styles.css.ts @@ -59,7 +59,7 @@ export const UserHeroStatusTooltip = style({ justifySelf: 'left', cursor: 'pointer', ':hover': { - filter: 'brightness(0.8)', + filter: 'brightness(var(--user-hero-status-hover-brightness, 0.94))', transform: 'translateY(-1px)', }, }); From c38c779f7c610a332c551afab5be625e4d81a2f7 Mon Sep 17 00:00:00 2001 From: 7w1 Date: Fri, 8 May 2026 14:56:10 -0500 Subject: [PATCH 05/11] only apply status hover when expandable --- src/app/components/user-profile/UserHero.tsx | 5 ++++- src/app/components/user-profile/styles.css.ts | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx index e469da3e6..746a5d1e3 100644 --- a/src/app/components/user-profile/UserHero.tsx +++ b/src/app/components/user-profile/UserHero.tsx @@ -161,7 +161,10 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs radii="400" variant="Surface" onClick={isExpandable ? () => setIsFullStatus(!isFullStatus) : undefined} - className={css.UserHeroStatusTooltip} + className={classNames( + css.UserHeroStatusTooltip, + isExpandable && css.UserHeroStatusTooltipInteractive + )} style={{ maxHeight: isFullStatus ? toRem(105) : toRem(48), cursor: isExpandable ? 'pointer' : 'default', diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts index 652f6e0cd..20ce60b8c 100644 --- a/src/app/components/user-profile/styles.css.ts +++ b/src/app/components/user-profile/styles.css.ts @@ -57,6 +57,9 @@ export const UserHeroStatusContainer = style({ export const UserHeroStatusTooltip = style({ maxWidth: '98%', justifySelf: 'left', +}); + +export const UserHeroStatusTooltipInteractive = style({ cursor: 'pointer', ':hover': { filter: 'brightness(var(--user-hero-status-hover-brightness, 0.94))', From f50a31900ed7f84abcce81030fa126f7e81d4c08 Mon Sep 17 00:00:00 2001 From: 7w1 Date: Fri, 8 May 2026 15:06:08 -0500 Subject: [PATCH 06/11] change misc to clickable text instead of button effect --- .../components/user-profile/UserRoomProfile.tsx | 6 ++++-- src/app/components/user-profile/styles.css.ts | 15 +++++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index e0e916ffa..6bd0762b0 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -226,9 +226,9 @@ function UserExtendedSection({ () => (