support small

This commit is contained in:
SrGooglo 2023-04-10 16:21:32 +00:00
parent 358508b760
commit 0125d107cd
2 changed files with 34 additions and 7 deletions

View File

@ -54,7 +54,13 @@ export default (props) => {
}
return <div
className={classnames("userPreview", { ["clickable"]: typeof props.onClick === "function" })}
className={classnames(
"userPreview",
{
["clickable"]: typeof props.onClick === "function",
["small"]: props.small
}
)}
>
<div className="avatar" onClick={handleOnClick}>
<Image

View File

@ -1,8 +1,11 @@
.userPreview {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 10px;
svg {
fill: var(--app-color);
margin-left: 6px;
@ -12,13 +15,25 @@
cursor: pointer;
}
&.small {
font-size: 0.8em;
gap: 7px;
.avatar {
width: 30px;
height: 30px;
}
}
.avatar {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
align-self: center;
justify-self: center;
width: 40px;
height: 40px;
@ -28,6 +43,8 @@
height: 100%;
}
transform: translate(0, 3px);
img {
object-fit: cover;
@ -45,17 +62,21 @@
align-items: flex-start;
justify-content: center;
text-align: start;
width: fit-content;
height: fit-content;
color: var(--background-color-contrast);
h1 {
align-self: start;
color: var(--background-color-contrast);
font-size: 1.1rem;
font-size: 1em;
margin: 0;
}
span {
color: var(--text-color);
font-size: 0.8em;
margin: 0;
}