diff --git a/src/components/Inbox/DialogAvatar.module.scss b/src/components/Inbox/DialogAvatar.module.scss index 0bf16d19..6c6c341a 100644 --- a/src/components/Inbox/DialogAvatar.module.scss +++ b/src/components/Inbox/DialogAvatar.module.scss @@ -18,8 +18,14 @@ border-radius: 50%; border: 3px solid #fff; } + > .imageHolder { + background-size: cover; + width: 100%; + height: 100%; + background-repeat: no-repeat; + border-radius: 100%; + } - > img, > .letter { display: block; border-radius: 100%; @@ -32,4 +38,13 @@ line-height: 10px; color: #fff; } + + &.small { + width: 24px; + height: 24px; + + > .letter { + font-size: 14px; + } + } } diff --git a/src/components/Inbox/DialogAvatar.tsx b/src/components/Inbox/DialogAvatar.tsx index d0d46e86..e6609366 100644 --- a/src/components/Inbox/DialogAvatar.tsx +++ b/src/components/Inbox/DialogAvatar.tsx @@ -4,9 +4,10 @@ import styles from './DialogAvatar.module.scss' import { clsx } from 'clsx' type Props = { - url: string name: string + url?: string online?: boolean + size?: 'small' } const colors = [ @@ -35,11 +36,11 @@ const DialogAvatar = (props: Props) => { return (