Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-05 20:56:13 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Migrate chat styles to module

Browse Source
This commit is contained in:
hfcRed 2026-01-03 10:59:20 +01:00
parent 7c6c08bc6b
commit d72197aba1
2 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/features/chat/components/Chat.module.css
View File

@ -20,6 +20,48 @@
gap: var(--s-2-5);
}
.messageInfo {
display: flex;
flex-direction: row;
gap: 0 var(--s-1-5);
align-items: center;
flex-wrap: wrap;
}
.avatarWrapper {
position: relative;
flex-shrink: 0;
}
.avatarWrapperStaff img {
border: 2px solid var(--color-text-accent);
border-radius: 50%;
}
.avatarBadge {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
font-size: var(--fonts-xxxxs);
font-weight: var(--bold);
padding: 1px 4px;
border-radius: var(--rounded-full);
white-space: nowrap;
}
.pronounsTag {
background-color: var(--color-bg-higher);
color: var(--color-text-accent);
font-size: var(--fonts-xxxs);
font-weight: var(--semi-bold);
padding: 1px 5px;
border-radius: var(--rounded-full);
white-space: nowrap;
}
.messageUser {
font-weight: var(--semi-bold);
font-size: var(--fonts-sm);
@ -31,9 +73,8 @@
}
.messageTime {
font-size: var(--fonts-xxs);
font-size: var(--fonts-xxxs);
color: var(--color-text-high);
margin-block-start: 3px;
}
.inputContainer {

10
app/features/chat/components/Chat.tsx
View File

@ -223,18 +223,18 @@ function Message({
<li className={styles.message}>
{user ? (
<div
className={clsx("chat__avatar-wrapper", {
"chat__avatar-wrapper--staff": user.title,
className={clsx(styles.avatarWrapper, {
[styles.avatarWrapperStaff]: user.title,
})}
>
<Avatar user={user} size="xs" />
{user.title ? (
<span className="chat__avatar-badge">{user.title}</span>
<span className={styles.avatarBadge}>{user.title}</span>
) : null}
</div>
) : null}
<div>
<div className="chat__message__info">
<div className={styles.messageInfo}>
<div
className={styles.messageUser}
style={
@ -246,7 +246,7 @@ function Message({
{user?.username ?? missingUserName}
</div>
{user?.pronouns ? (
<span className="chat__pronouns-tag">
<span className={styles.pronounsTag}>
{user.pronouns.subject}/{user.pronouns.object}
</span>
) : null}