diff --git a/client/components/panels/popup-chat.jsx b/client/components/panels/popup-chat.jsx
index 64750cb..07bb603 100644
--- a/client/components/panels/popup-chat.jsx
+++ b/client/components/panels/popup-chat.jsx
@@ -42,7 +42,7 @@ const PopupChat = props => {
- {chatlog.map(processLine)}
+ {chatlog.map((line, index) => processLine(line, index, authTokens.accessToken))}
@@ -84,8 +84,8 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
};
//render each line
-const processLine = (line, index) => {
- let content =
{line.username ? {line.username}: : ''}{line.text ? {line.text} : ''};
+const processLine = (line, index, accessToken) => {
+ let content =
{line.username ? {line.username}: : ''}{line.text ? {line.text} : ''}
;
//decorators
if (line.emphasis) {
@@ -96,7 +96,18 @@ const processLine = (line, index) => {
content =
{content};
}
- return
{content};
+ return
{content};
+};
+
+const processReport = (line, accessToken) => {
+ const yes = confirm('Report this message?');
+
+ if (yes) {
+ socket.emit('report', {
+ accessToken,
+ id: line.id
+ });
+ }
};
export default PopupChat;
\ No newline at end of file
diff --git a/client/styles/popup-chat.css b/client/styles/popup-chat.css
index 555dd42..7a2619e 100644
--- a/client/styles/popup-chat.css
+++ b/client/styles/popup-chat.css
@@ -45,11 +45,30 @@
min-height: 300px;
}
-.chat > .log .username {
+.chat > .log > .scrollable > .line {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.chat > .log > .scrollable > .line > .report {
+ color: red;
+ display: none;
+}
+
+.chat > .log > .scrollable > .line:hover {
+ background-color: #BBB;
+}
+
+.chat > .log > .scrollable > .line:hover > .report {
+ display: flex;
+}
+
+.chat > .log > .scrollable > .line > .content > .username {
font-weight: bold;
}
-.chat .scrollable {
+.chat > .log > .scrollable {
margin: 0;
padding: 10px;
min-height: 280px;