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
21fe3039c4
commit
14a28873ee
1 changed files with 8 additions and 1 deletions
|
|
@ -36,9 +36,16 @@ export const UserAvatarContainer = style({
|
||||||
top: 0,
|
top: 0,
|
||||||
transform: 'translateY(-50%)',
|
transform: 'translateY(-50%)',
|
||||||
backgroundColor: color.Surface.Container,
|
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({
|
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: {
|
selectors: {
|
||||||
'button&': {
|
'button&': {
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue