diff --git a/src/components/ChatMessage.jsx b/src/components/ChatMessage.jsx
index 9371c63..9917bef 100644
--- a/src/components/ChatMessage.jsx
+++ b/src/components/ChatMessage.jsx
@@ -7,7 +7,11 @@ import { useSelector, useDispatch } from 'react-redux';
import { showContextMenu } from '../actions';
import { MarkdownParagraph } from './Markdown';
-import { colorFromText, setBrightness } from '../core/utils';
+import {
+ colorFromText,
+ setBrightness,
+ getDateTimeString,
+} from '../core/utils';
import { parseParagraph } from '../core/MarkdownParser';
@@ -17,6 +21,7 @@ function ChatMessage({
country,
windowId,
msg,
+ ts,
}) {
if (!name) {
return null;
@@ -43,7 +48,7 @@ function ChatMessage({
const pArray = parseParagraph(msg);
return (
-
+
{
(!isInfo && !isEvent)
@@ -81,14 +86,17 @@ function ChatMessage({
{name}
:
+
+ {getDateTimeString(ts)}
+
>
)
}
-
+
-
-
+
+
);
}
diff --git a/src/core/MarkdownParser.js b/src/core/MarkdownParser.js
index 6e6f0e2..c38e809 100644
--- a/src/core/MarkdownParser.js
+++ b/src/core/MarkdownParser.js
@@ -369,6 +369,7 @@ function parseOpts(inOpts) {
export function parseParagraph(text, inOpts) {
const opts = parseOpts(inOpts);
const mText = new MString(text);
+ console.log('parse', text);
return parseMParagraph(mText, opts);
}
diff --git a/src/core/utils.js b/src/core/utils.js
index 4d58a12..4dda499 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -374,3 +374,17 @@ export function getExt(link) {
}
return link.slice(posDot, paramStart);
}
+
+/*
+ * convert timestamp to human readable date/time string
+ * @param timestamp Unix timestamp in seconds
+ * @return descriptive string of time
+ */
+export function getDateTimeString(timestamp) {
+ const curDate = new Date();
+ const date = new Date(timestamp * 1000);
+ if (date.getDate() !== curDate.getDate()) {
+ return date.toLocaleString();
+ }
+ return date.toLocaleTimeString();
+}
diff --git a/src/styles/default.css b/src/styles/default.css
index 387a903..55c26d6 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -667,18 +667,26 @@ tr:nth-child(even) {
.chatname {
font-size: 13px;
white-space: nowrap;
- display: inline-block;
+ display: flex;
+}
+.chatts {
+ color: #83839f;
+ font-size: 10px;
+ flex-grow: 1;
+ text-align: right;
}
.chatmsg {
- color: #030303;
font-size: 13px;
user-select: text;
margin: 0;
- display: flex;
- flex-direction: row;
+}
+.chatmsg:hover {
+ background-color: #ececec;
}
.msg {
- flex: 1;
+ color: #2d2d2d;
+ padding-left: 15px;
+ color:
}
.msg.info {
color: #cc0000;
diff --git a/src/styles/theme-dark-round.css b/src/styles/theme-dark-round.css
index 1c5340e..72b66bd 100644
--- a/src/styles/theme-dark-round.css
+++ b/src/styles/theme-dark-round.css
@@ -136,8 +136,11 @@ tr:nth-child(even) {
background-color: rgba(187, 187, 187, 0.75);
}
-.chatmsg {
- color: white;
+.chatmsg:hover {
+ background-color: #474747;
+}
+.msg {
+ color: #f3f3f3;
}
.msg.info{
color: #ff91a6;
diff --git a/src/styles/theme-dark-sstraight.css b/src/styles/theme-dark-sstraight.css
index fe8b9a4..f6f13b3 100644
--- a/src/styles/theme-dark-sstraight.css
+++ b/src/styles/theme-dark-sstraight.css
@@ -141,8 +141,11 @@ tr:nth-child(even) {
background-color: rgba(187, 187, 187, 0.75);
}
-.chatmsg {
- color: #fffcf7;
+.chatmsg:hover {
+ background-color: #474747;
+}
+.msg {
+ color: #f3f3f3;
}
.msg.info{
color: #ff91a6;
diff --git a/src/styles/theme-dark.css b/src/styles/theme-dark.css
index 67263a3..b51252e 100644
--- a/src/styles/theme-dark.css
+++ b/src/styles/theme-dark.css
@@ -121,8 +121,11 @@ tr:nth-child(even) {
background-color: rgba(187, 187, 187, 0.75);
}
-.chatmsg {
- color: white;
+.chatmsg:hover {
+ background-color: #474747;
+}
+.msg {
+ color: #f3f3f3;
}
.msg.info{
color: #ff91a6;