diff --git a/web/.stylelintrc.json b/web/.stylelintrc.json index d7ebd0283..d39c4253f 100644 --- a/web/.stylelintrc.json +++ b/web/.stylelintrc.json @@ -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 } } \ No newline at end of file diff --git a/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss b/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss index 018be3af0..d5dec448a 100644 --- a/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss +++ b/web/components/chat/ChatUserBadge/ChatUserBadge.module.scss @@ -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; } diff --git a/web/components/chat/ChatUserBadge/ChatUserBadge.tsx b/web/components/chat/ChatUserBadge/ChatUserBadge.tsx index 14a795701..7c7dd7b7b 100644 --- a/web/components/chat/ChatUserBadge/ChatUserBadge.tsx +++ b/web/components/chat/ChatUserBadge/ChatUserBadge.tsx @@ -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 = ({ badge, userColor, title const style = { color }; return ( - + {badge} ); diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss index 1f6319d94..e55c23876 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss @@ -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 {