xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix avatar styling

Browse source
This commit is contained in:
Robert Long 2021-12-17 11:01:40 -08:00
parent bcb4ccf66d
commit 473a027702
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/Avatar.module.css
View file

@ -6,6 +6,7 @@
justify-content: center; justify-content: center;
pointer-events: none; pointer-events: none;
font-weight: 600; font-weight: 600;
overflow: hidden;
} }
.avatar img { .avatar img {
@ -18,13 +19,24 @@
fill: #ffffff; fill: #ffffff;
} }
.sm { .avatar span {
padding-top: 1px;
}
.xs {
width: 22px; width: 22px;
height: 22px; height: 22px;
border-radius: 22px; border-radius: 22px;
font-size: 14px; font-size: 14px;
} }
.sm {
width: 32px;
height: 32px;
border-radius: 32px;
font-size: 15px;
}
.md { .md {
width: 36px; width: 36px;
height: 36px; height: 36px;

4
src/Facepile.jsx
View file

@ -13,7 +13,7 @@ export function Facepile({ className, participants, ...rest }) {
{participants.slice(0, 3).map((member, i) => ( {participants.slice(0, 3).map((member, i) => (
<Avatar <Avatar
key={member.userId} key={member.userId}
size="sm" size="xs"
fallback={member.name.slice(0, 1).toUpperCase()} fallback={member.name.slice(0, 1).toUpperCase()}
className={styles.avatar} className={styles.avatar}
style={{ left: i * 22 }} style={{ left: i * 22 }}
@ -22,7 +22,7 @@ export function Facepile({ className, participants, ...rest }) {
{participants.length > 3 && ( {participants.length > 3 && (
<Avatar <Avatar
key="additional" key="additional"
size="sm" size="xs"
fallback={`+${participants.length - 3}`} fallback={`+${participants.length - 3}`}
className={styles.avatar} className={styles.avatar}
style={{ left: 3 * 22 }} style={{ left: 3 * 22 }}