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

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>