Add system message icons. Closes #10

This commit is contained in:
Infi 2021-08-07 00:34:01 +02:00
parent 25615cc16d
commit 34e8d54512
2 changed files with 39 additions and 0 deletions

View file

@ -124,6 +124,10 @@ export default styled.div<BaseMessageProps>`
time {
opacity: 1;
}
.system-message-icon {
display: none;
}
}
`;

View file

@ -1,3 +1,15 @@
import {
InfoCircle,
UserPlus,
UserMinus,
ArrowToRight,
ArrowToLeft,
UserX,
ShieldX,
EditAlt,
Edit,
MessageSquareEdit,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Message } from "revolt.js/dist/maps/Messages";
import { User } from "revolt.js/dist/maps/Users";
@ -40,6 +52,19 @@ interface Props {
hideInfo?: boolean;
}
const iconDictionary = {
user_added: UserPlus,
user_remove: UserMinus,
user_joined: ArrowToRight,
user_left: ArrowToLeft,
user_kicked: UserX,
user_banned: ShieldX,
channel_renamed: EditAlt,
channel_description_changed: Edit,
channel_icon_changed: MessageSquareEdit,
text: InfoCircle,
};
export const SystemMessage = observer(
({ attachContext, message, highlight, hideInfo }: Props) => {
const client = useClient();
@ -89,6 +114,15 @@ export const SystemMessage = observer(
data = { type: "text", content };
}
const SystemMessageIcon = iconDictionary[data.type] ?? InfoCircle;
const SystemIcon = styled(SystemMessageIcon)`
height: 1.33em;
width: 1.33em;
margin-right: 0.5em;
color: var(--tertiary-foreground);
`;
let children;
switch (data.type) {
case "text":
@ -161,6 +195,7 @@ export const SystemMessage = observer(
{!hideInfo && (
<MessageInfo>
<MessageDetail message={message} position="left" />
<SystemIcon className="system-message-icon" />
</MessageInfo>
)}
<SystemContent>{children}</SystemContent>