fix(user-profile): round the avatar surface plate and replace its outline with a box-shadow ring so corners no longer poke past the circle
This commit is contained in:
parent
7af69574f4
commit
ece9e922e3
1 changed files with 8 additions and 1 deletions
|
|
@ -36,9 +36,16 @@ export const UserAvatarContainer = style({
|
|||
top: 0,
|
||||
transform: 'translateY(-50%)',
|
||||
backgroundColor: color.Surface.Container,
|
||||
// Surface plate that punches through the cover banner — sits one DOM level
|
||||
// above the folds `<Avatar>`, so the global circle override on `.UserAvatar`
|
||||
// (commit ead1290) does not reach it. Round it explicitly to match.
|
||||
borderRadius: '50%',
|
||||
});
|
||||
export const UserHeroAvatar = style({
|
||||
outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
|
||||
// boxShadow rather than outline — `outline` ignores `border-radius`, so it
|
||||
// would draw a square ring around the circular avatar (the global circle
|
||||
// override lives in `user-avatar/UserAvatar.css.ts` since commit ead1290).
|
||||
boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Surface.Container}`,
|
||||
selectors: {
|
||||
'button&': {
|
||||
cursor: 'pointer',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue