mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 12:18:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix: add spacing between user badges. Closes #3247

Browse source
This commit is contained in:
Gabe Kangas 2023-08-17 19:28:21 -07:00
parent 78cda4b8db
commit 364afd0e71
No known key found for this signature in database
GPG key ID: 4345B2060657F330
4 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/.stylelintrc.json
View file

@ -3,6 +3,7 @@
"rules": {
"selector-class-pattern": null,
"no-descending-specificity": null,
"selector-pseudo-class-no-unknown": null
"selector-pseudo-class-no-unknown": null,
"scss/at-extend-no-missing-placeholder": null
}
}

8
web/components/chat/ChatUserBadge/ChatUserBadge.module.scss
View file

@ -1,14 +1,14 @@
.badge {
color: white;
background-color: var(--color-owncast-palette-0);
height: 18px;
width: 18px;
border-radius: calc(0.3 * var(--theme-rounded-corners));
height: 16px;
width: 16px;
border-radius: calc(0.4 * var(--theme-rounded-corners));
text-align: center;
padding: 2px;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-size: 0.75rem;
font-size: 0.65rem;
}

3
web/components/chat/ChatUserBadge/ChatUserBadge.tsx
View file

@ -1,4 +1,5 @@
import React, { FC } from 'react';
import cn from 'classnames';
import styles from './ChatUserBadge.module.scss';
export type ChatUserBadgeProps = {
@ -12,7 +13,7 @@ export const ChatUserBadge: FC<ChatUserBadgeProps> = ({ badge, userColor, title
const style = { color };
return (
<span style={style} className={styles.badge} title={title}>
<span style={style} className={cn([styles.badge, 'chat-user-badge'])} title={title}>
{badge}
</span>
);

8
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View file

@ -27,12 +27,20 @@ $p-v-size: 2px;
}
.repeatUser {
// nolint: scss/at-extend-no-missing-placeholder
@extend .user;
display: none;
}
.userBadges {
margin-left: 3px;
display: flex;
justify-content: space-between;
> * {
margin-left: 3px;
}
}
.message {