diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx index 74413e8b..195a2283 100644 --- a/src/components/common/messaging/bars/ReplyBar.tsx +++ b/src/components/common/messaging/bars/ReplyBar.tsx @@ -1,9 +1,5 @@ -import { - At, - Reply as ReplyIcon, - File, - XCircle, -} from "@styled-icons/boxicons-regular"; +import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular"; +import { File, XCircle } from "@styled-icons/boxicons-solid"; import { observer } from "mobx-react-lite"; import { SYSTEM_USER_ID } from "revolt.js"; import styled from "styled-components"; @@ -31,13 +27,23 @@ interface Props { const Base = styled.div` display: flex; - padding: 0 22px; + height: 30px; + padding: 0 12px; user-select: none; align-items: center; background: var(--message-box); + + .username { + display: flex; + align-items: center; + gap: 6px; + font-weight: 600; + } + } - div { + > div { flex-grow: 1; + margin-bottom: 0; } .actions { @@ -48,9 +54,16 @@ const Base = styled.div` .toggle { gap: 4px; display: flex; - font-size: 0.7em; + font-size: 12px; align-items: center; + font-weight: 600; } + + /*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse + .actions > svg { + height: 25px; + } + }*/ `; // ! FIXME: Move to global config @@ -92,21 +105,29 @@ export default observer(({ channel, replies, setReplies }: Props) => { - - {message.attachments && - message.attachments.length > 0 && ( - +
+ +
+
+ {message.attachments && ( + <> + + {message.attachments.length > 1 ? + "Sent multiple attachments" : + "Sent an attachment"} + )} - {message.author_id === SYSTEM_USER_ID ? ( - - ) : ( - - )} + {message.author_id === SYSTEM_USER_ID ? ( + + ) : ( + + )} +