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

2026-03-12 22:18:05 +11:00
parent 834de012b4
commit 67f3ae4d34
8 changed files with 471 additions and 304 deletions
--- a/src/app/components/user-profile/CreatorChip.tsx
+++ b/src/app/components/user-profile/CreatorChip.tsx
@@ -14,8 +14,9 @@ import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { SpaceSettingsPage } from '../../state/spaceSettings';
 import { RoomSettingsPage } from '../../state/roomSettings';
+import { getContrastingTextColor } from '../../utils/common';

-export function CreatorChip() {
+export function CreatorChip({ borderColor }: { borderColor?: string }) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const room = useRoom();
@@ -91,8 +92,13 @@ export function CreatorChip() {
        after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
        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}>
          {tag.name}
        </Text>
      </Chip>
--- a/src/app/components/user-profile/PowerChip.tsx
+++ b/src/app/components/user-profile/PowerChip.tsx
@@ -43,6 +43,7 @@ import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberP
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
+import { getContrastingTextColor } from '../../utils/common';

 type SelfDemoteAlertProps = {
  power: number;
@@ -144,7 +145,7 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
  );
 }

-export function PowerChip({ userId }: { userId: string }) {
+export function PowerChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
  const mx = useMatrixClient();
  const room = useRoom();
  const space = useSpaceOptionally();
@@ -332,8 +333,13 @@ export function PowerChip({ userId }: { userId: string }) {
          after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
          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}>
            {tag.name}
          </Text>
        </Chip>
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -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>
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import {
  Avatar,
  Box,
-  color,
  Icon,
  Icons,
  Modal,
@@ -38,11 +37,6 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
  const bannerUrl = useOtherUserBanner(userId, avatarMxc); // Now returns blob URL directly
  const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);

-  // Build gradient CSS if configured
-  const gradientStyle = profileStyle.gradient
-    ? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
-    : undefined;
-
  return (
    <Box
      direction="Column"
@@ -63,10 +57,9 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
          )
        )}
      </div>
-      <div className={css.UserHeroAvatarContainer} style={gradientStyle ? { background: gradientStyle } : undefined}>
+      <div className={css.UserHeroAvatarContainer}>
        <AvatarPresence
          className={css.UserAvatarContainer}
-          style={gradientStyle ? { background: gradientStyle } : undefined}
          badge={
            presence && <PresenceBadge presence={presence.presence} status={presence.status} />
          }
@@ -90,23 +83,6 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
            />
          </Avatar>
        </AvatarPresence>
-        {presence?.status && (
-          <Box
-            className={css.UserStatusBubble}
-            style={{
-              backgroundColor: color.Surface.Container,
-              border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
-              padding: `${toRem(6)} ${toRem(10)}`,
-              borderRadius: toRem(16),
-              maxWidth: toRem(250),
-              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-            }}
-          >
-            <Text size="T300" className={BreakWord}>
-              {presence.status}
-            </Text>
-          </Box>
-        )}
        {viewAvatar && (
          <Overlay open backdrop={<OverlayBackdrop />}>
            <OverlayCenter>
@@ -150,6 +126,7 @@ export function UserHeroName({ displayName, userId, avatarMxc }: UserHeroNamePro
          size="H4"
          className={classNames(BreakWord, LineClamp3)}
          title={displayName ?? username}
+          style={{ color: userColor || colorMXID(userId) }}
        >
          {displayName ?? username ?? userId}
        </Text>
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, config, Icon, Icons, Text } from 'folds';
+import { Box, Button, color, config, Icon, Icons, Text, toRem } from 'folds';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { UserHero, UserHeroName } from './UserHero';
@@ -9,6 +9,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useUserPresence } from '../../hooks/useUserPresence';
+import { useOtherUserProfileStyle } from '../../hooks/useUserProfileStyle';
 import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { PowerChip } from './PowerChip';
@@ -22,6 +23,10 @@ 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 classNames from 'classnames';
+import { BreakWord, LineClamp3 } from '../../styles/Text.css';
+import colorMXID from '../../../util/colorMXID';

 type UserRoomProfileProps = {
  userId: string;
@@ -58,6 +63,12 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
  const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;

  const presence = useUserPresence(userId);
+  const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
+
+  // Build gradient CSS if configured
+  const gradientStyle = profileStyle.gradient
+    ? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
+    : undefined;

  const handleMessage = () => {
    closeUserRoomProfile();
@@ -67,6 +78,15 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
    navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
  };

+  const hasBottomContent =
+    ignored ||
+    (!!member && membership === Membership.Ban) ||
+    (!!member && membership === Membership.Leave && !!member.events.member && member.events.member.getSender() !== userId) ||
+    (!!member && membership === Membership.Invite) ||
+    (canInvite && membership === Membership.Leave) ||
+    (canKickUser && membership === Membership.Join) ||
+    (canBanUser && membership !== Membership.Ban);
+
  return (
    <Box direction="Column">
      <UserHero
@@ -75,37 +95,89 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
        avatarMxc={avatarMxc}
        presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
      />
-      <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
-        <Box direction="Column" gap="400">
-          <Box gap="400" alignItems="Start">
-            <UserHeroName
-              displayName={displayName}
-              userId={userId}
-              avatarMxc={avatarMxc}
-            />
-            {userId !== myUserId && (
-              <Box shrink="No">
-                <Button
-                  size="300"
-                  variant="Primary"
-                  fill="Solid"
-                  radii="300"
-                  before={<Icon size="50" src={Icons.Message} filled />}
-                  onClick={handleMessage}
-                >
-                  <Text size="B300">Message</Text>
-                </Button>
-              </Box>
-            )}
-          </Box>
-          <Box alignItems="Center" gap="200" wrap="Wrap">
-            {server && <ServerChip server={server} />}
-            <ShareChip userId={userId} />
-            {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
-            {userId !== myUserId && <MutualRoomsChip userId={userId} />}
-            {userId !== myUserId && <OptionsChip userId={userId} />}
+      <Box 
+        direction="Column" 
+        gap="200" 
+        alignItems="Center"
+        style={{ 
+          padding: config.space.S400, 
+          paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
+          marginTop: toRem(-36),
+          background: gradientStyle,
+          textAlign: 'center'
+        }}
+      >
+        {/* Display Name */}
+        <Text
+          size="H4"
+          className={classNames(BreakWord, LineClamp3)}
+          style={{ color: getMemberDisplayName(room, userId) !== userId ? (profileStyle.avatarBorderColor || colorMXID(userId)) : undefined }}
+        >
+          {getMemberDisplayName(room, userId)}
+        </Text>
+        
+        {/* Username */}
+        <Text
+          size="T200"
+          className={BreakWord}
+          style={{ color: profileStyle.avatarBorderColor || colorMXID(userId), opacity: 0.8 }}
+        >
+          {userId}
+        </Text>
+        
+        {/* Status Pill */}
+        {presence?.status && (
+          <Box
+            style={{
+              backgroundColor: profileStyle.avatarBorderColor || color.Surface.Container,
+              border: profileStyle.avatarBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+              padding: `${toRem(6)} ${toRem(10)}`,
+              borderRadius: toRem(16),
+              maxWidth: toRem(250),
+            }}
+          >
+            <Text 
+              size="T300" 
+              className={BreakWord}
+              style={{
+                color: profileStyle.avatarBorderColor ? getContrastingTextColor(profileStyle.avatarBorderColor) : undefined
+              }}
+            >
+              {presence.status}
+            </Text>
          </Box>
+        )}
+        
+        {/* 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} />}
        </Box>
+        
+        {/* Message Button */}
+        {userId !== myUserId && (
+          <Button
+            size="300"
+            variant="Primary"
+            fill="Solid"
+            radii="300"
+            before={<Icon size="50" src={Icons.Message} filled />}
+            onClick={handleMessage}
+          >
+            <Text size="B300">Message</Text>
+          </Button>
+        )}
+        
+        {/* 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} />
+          </Box>
+        )}
+      </Box>
+      {hasBottomContent && <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
        {ignored && <IgnoredUserAlert />}
        {member && membership === Membership.Ban && (
          <UserBanAlert
@@ -141,7 +213,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
          canKick={canKickUser && membership === Membership.Join}
          canBan={canBanUser && membership !== Membership.Ban}
        />
-      </Box>
+      </Box>}
    </Box>
  );
 }
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -16,7 +16,7 @@ export const UserHero = style({

 export const UserHeroCoverContainer = style({
  position: 'relative',
-  height: toRem(96),
+  height: toRem(140),
  overflow: 'hidden',
 });
 export const UserHeroCover = style({
@@ -39,15 +39,16 @@ export const UserHeroAvatarContainer = style({
 });
 export const UserAvatarContainer = style({
  position: 'absolute',
-  left: config.space.S400,
+  left: '50%',
  top: 0,
-  transform: 'translateY(-50%)',
+  transform: 'translate(-50%, -50%)',
  backgroundColor: color.Surface.Container,
 });

 export const UserStatusBubble = style({
  position: 'absolute',
-  left: `calc(${config.space.S400} + ${toRem(64)} + ${config.space.S200})`,
+  left: '50%',
+  transform: 'translateX(-50%)',
  bottom: toRem(-8),
  zIndex: 2,
 });