feat: add border color customization for user profile chips and improve text contrast
This commit is contained in:
@@ -37,7 +37,7 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { UserAvatar } from '../../../components/user-avatar';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { useAuthenticatedMediaUrl } from '../../../hooks/useAuthenticatedMediaUrl';
|
||||
import { nameInitials } from '../../../utils/common';
|
||||
import { nameInitials, getContrastingTextColor } from '../../../utils/common';
|
||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { useFilePicker } from '../../../hooks/useFilePicker';
|
||||
import { useObjectURL } from '../../../hooks/useObjectURL';
|
||||
@@ -570,7 +570,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
|
||||
style={{
|
||||
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
borderRadius: toRem(8),
|
||||
width: '100%',
|
||||
width: toRem(340),
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
}}
|
||||
@@ -579,7 +579,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
|
||||
<Box
|
||||
style={{
|
||||
position: 'relative',
|
||||
aspectRatio: '460 / 96',
|
||||
height: toRem(140),
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
@@ -682,121 +682,25 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
{/* Status Bubble - sibling to banner button, NOT inside it */}
|
||||
<Box
|
||||
onMouseEnter={() => setHoveredArea('status')}
|
||||
onMouseLeave={() => setHoveredArea(null)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `calc(${config.space.S400} + ${toRem(64)} + ${config.space.S300})`,
|
||||
bottom: toRem(8),
|
||||
zIndex: 2,
|
||||
backgroundColor: color.Surface.Container,
|
||||
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
borderRadius: toRem(12),
|
||||
maxWidth: toRem(200),
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
|
||||
}}
|
||||
>
|
||||
{isEditingStatus ? (
|
||||
<Input
|
||||
style={{ width: toRem(150), minWidth: toRem(100) }}
|
||||
variant="Background"
|
||||
size="300"
|
||||
autoFocus
|
||||
value={editedStatus}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setEditedStatus(e.target.value)
|
||||
}
|
||||
onKeyDown={handleStatusKeyDown}
|
||||
onBlur={handleStatusSave}
|
||||
disabled={savingStatus}
|
||||
placeholder="Set a custom status..."
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: toRem(4),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
as="button"
|
||||
onClick={() => {
|
||||
setEditedStatus(presence?.status || '');
|
||||
setIsEditingStatus(true);
|
||||
}}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
size="T200"
|
||||
className={BreakWord}
|
||||
style={{
|
||||
opacity: presence?.status ? 1 : 0.5,
|
||||
fontStyle: presence?.status ? 'normal' : 'italic',
|
||||
}}
|
||||
>
|
||||
{presence?.status || 'Click to set a custom status...'}
|
||||
</Text>
|
||||
</Box>
|
||||
{presence?.status && hoveredArea === 'status' && (
|
||||
<>
|
||||
<Icon size="50" src={Icons.Pencil} />
|
||||
<Box
|
||||
as="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleRemoveStatus();
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: color.Critical.Main,
|
||||
borderRadius: toRem(8),
|
||||
padding: toRem(2),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
border: 'none',
|
||||
}}
|
||||
>
|
||||
<Icon size="50" src={Icons.Cross} fill="white" />
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Avatar and Name Section */}
|
||||
{/* Avatar Container - matches UserHeroAvatarContainer height */}
|
||||
<Box
|
||||
style={{
|
||||
position: 'relative',
|
||||
paddingLeft: config.space.S400,
|
||||
paddingRight: config.space.S400,
|
||||
paddingBottom: config.space.S400,
|
||||
background: previewGradient,
|
||||
height: toRem(29),
|
||||
}}
|
||||
>
|
||||
{/* Avatar */}
|
||||
{/* Avatar - centered */}
|
||||
<Box
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: config.space.S400,
|
||||
left: '50%',
|
||||
top: 0,
|
||||
transform: 'translateY(-50%)',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: toRem(8),
|
||||
}}
|
||||
onMouseEnter={() => setHoveredArea('avatar')}
|
||||
@@ -806,7 +710,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
|
||||
as="button"
|
||||
onClick={handleAvatarClick}
|
||||
style={{
|
||||
background: previewGradient || color.Surface.Container,
|
||||
backgroundColor: color.Surface.Container,
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
@@ -849,6 +753,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
|
||||
marginTop: toRem(4),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@@ -892,146 +797,299 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Name Section - offset for avatar */}
|
||||
<Box
|
||||
style={{
|
||||
paddingTop: toRem(40),
|
||||
}}
|
||||
>
|
||||
<Box grow="Yes" direction="Column" gap="100">
|
||||
<Box alignItems="Center" gap="200" wrap="Wrap">
|
||||
{/* Color Picker - left of name */}
|
||||
<HexColorPickerPopOut
|
||||
picker={
|
||||
<Box direction="Column" gap="200">
|
||||
<HexColorPicker color={localColor} onChange={setLocalColor} />
|
||||
<Box gap="100" alignItems="Center">
|
||||
<Input
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
style={{ width: toRem(100) }}
|
||||
value={localColor}
|
||||
onChange={(e) => {
|
||||
setLocalColor(e.target.value);
|
||||
setColorError(undefined);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Primary"
|
||||
fill="Solid"
|
||||
radii="300"
|
||||
onClick={handleColorSave}
|
||||
disabled={savingColor}
|
||||
>
|
||||
<Text size="B300">{savingColor ? 'Saving...' : 'Save'}</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
{colorError && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
{colorError}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
onRemove={userColor ? handleColorRemove : undefined}
|
||||
>
|
||||
{(onOpen) => (
|
||||
<Box
|
||||
as="button"
|
||||
onClick={onOpen}
|
||||
disabled={savingColor}
|
||||
style={{
|
||||
width: toRem(24),
|
||||
height: toRem(24),
|
||||
borderRadius: toRem(6),
|
||||
backgroundColor: userColor ?? localColor,
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
flexShrink: 0,
|
||||
{/* Profile Info Section - matches UserRoomProfile gradient section */}
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="400"
|
||||
alignItems="Center"
|
||||
style={{
|
||||
padding: config.space.S400,
|
||||
paddingTop: `calc(${config.space.S400} + ${toRem(36)})`,
|
||||
marginTop: toRem(-36),
|
||||
background: previewGradient,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{/* Display Name with Color Picker */}
|
||||
<Box alignItems="Center" gap="200" justifyContent="Center">
|
||||
<HexColorPickerPopOut
|
||||
picker={
|
||||
<Box direction="Column" gap="200">
|
||||
<HexColorPicker color={localColor} onChange={setLocalColor} />
|
||||
<Box gap="100" alignItems="Center">
|
||||
<Input
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
style={{ width: toRem(100) }}
|
||||
value={localColor}
|
||||
onChange={(e) => {
|
||||
setLocalColor(e.target.value);
|
||||
setColorError(undefined);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Primary"
|
||||
fill="Solid"
|
||||
radii="300"
|
||||
onClick={handleColorSave}
|
||||
disabled={savingColor}
|
||||
>
|
||||
<Text size="B300">{savingColor ? 'Saving...' : 'Save'}</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
{colorError && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
{colorError}
|
||||
</Text>
|
||||
)}
|
||||
</HexColorPickerPopOut>
|
||||
{isEditingName ? (
|
||||
<Input
|
||||
autoFocus
|
||||
value={editedName}
|
||||
onChange={(e) => setEditedName(e.target.value)}
|
||||
onKeyDown={handleNameKeyDown}
|
||||
onBlur={handleNameSave}
|
||||
variant="Background"
|
||||
size="400"
|
||||
disabled={savingName}
|
||||
style={{
|
||||
fontSize: 'var(--token.font-size.H400)',
|
||||
fontWeight: 'var(--token.font-weight.H400)',
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
</Box>
|
||||
}
|
||||
onRemove={userColor ? handleColorRemove : undefined}
|
||||
>
|
||||
{(onOpen) => (
|
||||
<Box
|
||||
as="button"
|
||||
onClick={onOpen}
|
||||
disabled={savingColor}
|
||||
style={{
|
||||
width: toRem(24),
|
||||
height: toRem(24),
|
||||
borderRadius: toRem(6),
|
||||
backgroundColor: userColor ?? localColor,
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</HexColorPickerPopOut>
|
||||
{isEditingName ? (
|
||||
<Input
|
||||
autoFocus
|
||||
value={editedName}
|
||||
onChange={(e) => setEditedName(e.target.value)}
|
||||
onKeyDown={handleNameKeyDown}
|
||||
onBlur={handleNameSave}
|
||||
variant="Background"
|
||||
size="400"
|
||||
disabled={savingName}
|
||||
style={{
|
||||
fontSize: 'var(--token.font-size.H400)',
|
||||
fontWeight: 'var(--token.font-weight.H400)',
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
as="button"
|
||||
onClick={() => {
|
||||
setEditedName(profile.displayName || getMxIdLocalPart(userId) || userId);
|
||||
setIsEditingName(true);
|
||||
}}
|
||||
onMouseEnter={() => setHoveredArea('name')}
|
||||
onMouseLeave={() => setHoveredArea(null)}
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
margin: `${toRem(-4)} ${toRem(-8)}`,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
size="H4"
|
||||
className={classNames(BreakWord, LineClamp3)}
|
||||
title={profile.displayName || getMxIdLocalPart(userId)}
|
||||
style={{ color: userColor || colorMXID(userId) }}
|
||||
>
|
||||
{profile.displayName || getMxIdLocalPart(userId) || userId}
|
||||
</Text>
|
||||
{hoveredArea === 'name' && (
|
||||
<Box
|
||||
as="button"
|
||||
onClick={() => {
|
||||
setEditedName(profile.displayName || getMxIdLocalPart(userId) || userId);
|
||||
setIsEditingName(true);
|
||||
}}
|
||||
onMouseEnter={() => setHoveredArea('name')}
|
||||
onMouseLeave={() => setHoveredArea(null)}
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
margin: `${toRem(-4)} ${toRem(-8)}`,
|
||||
position: 'relative',
|
||||
textAlign: 'left',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: toRem(-32),
|
||||
backgroundColor: color.Surface.Container,
|
||||
borderRadius: toRem(20),
|
||||
padding: toRem(6),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
pointerEvents: 'none',
|
||||
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
size="H4"
|
||||
className={classNames(BreakWord, LineClamp3)}
|
||||
title={profile.displayName || getMxIdLocalPart(userId)}
|
||||
>
|
||||
{profile.displayName || getMxIdLocalPart(userId) || userId}
|
||||
</Text>
|
||||
{hoveredArea === 'name' && (
|
||||
<Box
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: toRem(-32),
|
||||
backgroundColor: color.Surface.Container,
|
||||
borderRadius: toRem(20),
|
||||
padding: toRem(6),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
pointerEvents: 'none',
|
||||
border: `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
}}
|
||||
>
|
||||
<Icon size="50" src={Icons.Pencil} />
|
||||
</Box>
|
||||
)}
|
||||
<Icon size="50" src={Icons.Pencil} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box alignItems="Center" gap="200" wrap="Wrap">
|
||||
<Text
|
||||
size="T200"
|
||||
className={BreakWord}
|
||||
title={userId}
|
||||
style={{ color: userColor || colorMXID(userId) }}
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Username */}
|
||||
<Text
|
||||
size="T200"
|
||||
className={BreakWord}
|
||||
title={userId}
|
||||
style={{ color: userColor || colorMXID(userId), opacity: 0.8 }}
|
||||
>
|
||||
{userId}
|
||||
</Text>
|
||||
|
||||
{/* Status Pill - Editable */}
|
||||
<Box
|
||||
onMouseEnter={() => setHoveredArea('status')}
|
||||
onMouseLeave={() => setHoveredArea(null)}
|
||||
style={{
|
||||
backgroundColor: previewBorderColor || color.Surface.Container,
|
||||
border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
padding: `${toRem(6)} ${toRem(10)}`,
|
||||
borderRadius: toRem(16),
|
||||
maxWidth: toRem(250),
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{isEditingStatus ? (
|
||||
<Input
|
||||
style={{ width: toRem(150), minWidth: toRem(100), textAlign: 'center' }}
|
||||
variant="Background"
|
||||
size="300"
|
||||
autoFocus
|
||||
value={editedStatus}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setEditedStatus(e.target.value)
|
||||
}
|
||||
onKeyDown={handleStatusKeyDown}
|
||||
onBlur={handleStatusSave}
|
||||
disabled={savingStatus}
|
||||
placeholder="Set a custom status..."
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: toRem(4),
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
as="button"
|
||||
onClick={() => {
|
||||
setEditedStatus(presence?.status || '');
|
||||
setIsEditingStatus(true);
|
||||
}}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{userId}
|
||||
</Text>
|
||||
<Text
|
||||
size="T300"
|
||||
className={BreakWord}
|
||||
style={{
|
||||
opacity: presence?.status ? 1 : 0.5,
|
||||
fontStyle: presence?.status ? 'normal' : 'italic',
|
||||
color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
|
||||
}}
|
||||
>
|
||||
{presence?.status || 'Click to set a custom status...'}</Text>
|
||||
</Box>
|
||||
{presence?.status && hoveredArea === 'status' && (
|
||||
<>
|
||||
<Icon size="50" src={Icons.Pencil} style={{ color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined }} />
|
||||
<Box
|
||||
as="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleRemoveStatus();
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: color.Critical.Main,
|
||||
borderRadius: toRem(8),
|
||||
padding: toRem(2),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
border: 'none',
|
||||
}}
|
||||
>
|
||||
<Icon size="50" src={Icons.Cross} fill="white" />
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Chips Row - Placeholder chips */}
|
||||
<Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: previewBorderColor || color.Surface.Container,
|
||||
border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
borderRadius: toRem(16),
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
size="B300"
|
||||
style={{
|
||||
color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
|
||||
}}
|
||||
>
|
||||
ruv.wtf
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: previewBorderColor || color.Surface.Container,
|
||||
border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
borderRadius: toRem(16),
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
size="B300"
|
||||
style={{
|
||||
color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
|
||||
}}
|
||||
>
|
||||
Share
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: previewBorderColor || color.Surface.Container,
|
||||
border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
|
||||
padding: `${toRem(4)} ${toRem(8)}`,
|
||||
borderRadius: toRem(16),
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
size="B300"
|
||||
style={{
|
||||
color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
|
||||
}}
|
||||
>
|
||||
Admin
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Profile Style Settings */}
|
||||
<Box
|
||||
|
||||
Reference in New Issue
Block a user