diff --git a/public/icons/chat-reply.svg b/public/icons/chat-reply.svg new file mode 100644 index 00000000..05727042 --- /dev/null +++ b/public/icons/chat-reply.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/menu.svg b/public/icons/menu.svg new file mode 100644 index 00000000..b3abb20a --- /dev/null +++ b/public/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Inbox/Message.module.scss b/src/components/Inbox/Message.module.scss index 0dd8ea1d..b6cb4173 100644 --- a/src/components/Inbox/Message.module.scss +++ b/src/components/Inbox/Message.module.scss @@ -1,29 +1,60 @@ +$actionsWidth: 32px * 2; + .Message { display: flex; flex-direction: column; margin: 3.2rem 0; - position: relative; .body { - background: #f6f6f6; - font-size: 14px; - max-width: 60%; - border-radius: 16px; - padding: 12px 16px; position: relative; display: flex; - margin-right: auto; + flex-direction: row; - p { - margin: 0; + .text { + display: inline-flex; + max-width: 60%; + margin-right: auto; + background: #f6f6f6; + font-size: 14px; + border-radius: 16px; + padding: 12px 16px; + position: relative; + z-index: 1; + + p { + margin: 0; + } + + a { + color: inherit; + text-decoration: underline; + + &:hover { + color: inherit; + } + } } - a { - color: inherit; - text-decoration: underline; + .actions { + position: absolute; + display: flex; + flex-direction: row; + width: $actionsWidth; + height: 32px; + cursor: pointer; + top: 50%; + transform: translateY(-50%); + opacity: 0; + right: -$actionsWidth/2; + z-index: -1; + transition: 0.3s ease-in-out; + } - &:hover { - color: inherit; + &:hover { + .actions { + z-index: 1; + opacity: 1; + right: -$actionsWidth; } } } @@ -52,10 +83,26 @@ &.own { .body { justify-content: flex-end; - margin-left: auto; - margin-right: unset; - background: #000; - color: #fff; + + .text { + margin-left: auto; + margin-right: unset; + background: #000; + color: #fff; + } + + .actions { + right: unset; + left: -$actionsWidth/2; + flex-direction: row-reverse; + .reply { + transform: scaleX(-1); + } + } + + &:hover .actions { + left: -$actionsWidth; + } } .time { diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx index b317ae2d..bd629394 100644 --- a/src/components/Inbox/Message.tsx +++ b/src/components/Inbox/Message.tsx @@ -22,9 +22,6 @@ const Message = (props: Props) => { const user = props.members?.find((m) => m.id === Number(props.content.author)) return (
- {/*
*/} - {/* /!**!/*/} - {/*
*/}
@@ -32,7 +29,13 @@ const Message = (props: Props) => {
-
+
+
+ + +
+
+
{formattedTime(props.content.createdAt)}