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": { "rules": {
"selector-class-pattern": null, "selector-class-pattern": null,
"no-descending-specificity": 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 { .badge {
color: white; color: white;
background-color: var(--color-owncast-palette-0); background-color: var(--color-owncast-palette-0);
height: 18px; height: 16px;
width: 18px; width: 16px;
border-radius: calc(0.3 * var(--theme-rounded-corners)); border-radius: calc(0.4 * var(--theme-rounded-corners));
text-align: center; text-align: center;
padding: 2px; padding: 2px;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden; 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 React, { FC } from 'react';
import cn from 'classnames';
import styles from './ChatUserBadge.module.scss'; import styles from './ChatUserBadge.module.scss';
export type ChatUserBadgeProps = { export type ChatUserBadgeProps = {
@ -12,7 +13,7 @@ export const ChatUserBadge: FC<ChatUserBadgeProps> = ({ badge, userColor, title
const style = { color }; const style = { color };
return ( return (
<span style={style} className={styles.badge} title={title}> <span style={style} className={cn([styles.badge, 'chat-user-badge'])} title={title}>
{badge} {badge}
</span> </span>
); );

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

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