From d2adff01914671340e6d56a11ea649226ec960e7 Mon Sep 17 00:00:00 2001
From: Martin Krulis <krulis@d3s.mff.cuni.cz>
Date: Wed, 20 Jul 2022 21:21:13 +0200
Subject: [PATCH] Improving appearance of date time, adding full time in
 overlay for comment times.

---
 .../widgets/Comments/Comment/Comment.js       |  2 +-
 .../widgets/Comments/Comment/Status/Posted.js | 19 ++++++++++++++++---
 src/components/widgets/DateTime/DateTime.js   | 13 ++++++++-----
 src/components/widgets/DateTime/DateTime.less |  4 ----
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/widgets/Comments/Comment/Comment.js b/src/components/widgets/Comments/Comment/Comment.js
index ccd2ec80a..9d7245a02 100644
--- a/src/components/widgets/Comments/Comment/Comment.js
+++ b/src/components/widgets/Comments/Comment/Comment.js
@@ -47,7 +47,7 @@ const Comment = ({
           })}>
           <Link to={USER_URI_FACTORY(user.id)}>{user.name}</Link>
         </span>
-        {status === 'posted' && <Posted right={!right} postedAt={postedAt} />}
+        {status === 'posted' && <Posted id={id} right={!right} postedAt={postedAt} />}
         {status === 'failed' && <Failed right={!right} repost={() => repost && repost(id)} />}
         {status === 'pending' && <Posting right={!right} />}
       </div>
diff --git a/src/components/widgets/Comments/Comment/Status/Posted.js b/src/components/widgets/Comments/Comment/Status/Posted.js
index 505a127bf..42a869587 100644
--- a/src/components/widgets/Comments/Comment/Status/Posted.js
+++ b/src/components/widgets/Comments/Comment/Status/Posted.js
@@ -1,20 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { FormattedRelativeTime } from 'react-intl';
+import DateTime from '../../../DateTime';
 
-const Posted = ({ right, postedAt }) => (
+const OVERLAY_PROPS = {
+  showRelative: false,
+};
+
+const Posted = ({ id, right, postedAt }) => (
   <span
     className={classnames({
       'direct-chat-timestamp': true,
       'float-right': right,
       'float-left': !right,
     })}>
-    <FormattedRelativeTime value={postedAt - Date.now() / 1000} numeric="auto" updateIntervalInSeconds={1000000} />
+    <DateTime
+      unixts={postedAt}
+      showRelative
+      showDate={false}
+      showTime={false}
+      showOverlay={true}
+      overlayTooltipId={`postedAt-${id}`}
+      overlayProps={OVERLAY_PROPS}
+    />
   </span>
 );
 
 Posted.propTypes = {
+  id: PropTypes.string.isRequired,
   right: PropTypes.bool.isRequired,
   postedAt: PropTypes.number.isRequired,
 };
diff --git a/src/components/widgets/DateTime/DateTime.js b/src/components/widgets/DateTime/DateTime.js
index ac64bedf7..c449b0d70 100644
--- a/src/components/widgets/DateTime/DateTime.js
+++ b/src/components/widgets/DateTime/DateTime.js
@@ -5,6 +5,7 @@ import { FormattedDate, FormattedTime, FormattedRelativeTime } from 'react-intl'
 import classnames from 'classnames';
 
 import Icon from '../../icons';
+import { EMPTY_OBJ } from '../../../helpers/common';
 
 import styles from './DateTime.less';
 
@@ -40,28 +41,27 @@ const dateTime = ({
       <span
         className={classnames({
           'text-nowrap': true,
-          'halfem-margin-right': showTime || showRelative,
         })}>
         <FormattedDate value={unixts * 1000} />
+        {(showTime || showRelative) && <span className="px-1"> </span>}
       </span>
     )}
-    &#8203;
+
     {showTime && (
       <span
         className={classnames({
           'text-nowrap': true,
-          'halfem-margin-right': showRelative,
         })}>
         <FormattedTime value={unixts * 1000} format={showSeconds ? '24hourWithSeconds' : '24hour'} />
+        {showRelative && <span className="px-1"> </span>}
       </span>
     )}
-    &#8203;
+
     {showRelative && (
       <span
         className={classnames({
           'text-nowrap': true,
           [styles.trailingRelative]: showDate || showTime,
-          [styles.standaloneRelative]: !showDate && !showTime,
         })}>
         <FormattedRelativeTime value={unixts - Date.now() / 1000} numeric="auto" updateIntervalInSeconds={1000000} />
       </span>
@@ -76,6 +76,7 @@ const DateTime = ({
   showTime = true,
   showRelative = false,
   showOverlay = false,
+  overlayProps = EMPTY_OBJ,
   overlayTooltipId = 'datetime',
   customTooltip = null,
   ...props
@@ -96,6 +97,7 @@ const DateTime = ({
                 showSeconds: true,
                 isDeadline: false,
                 noWrap: false,
+                ...overlayProps,
               })}
           </Tooltip>
         }>
@@ -133,6 +135,7 @@ DateTime.propTypes = {
   showOverlay: PropTypes.bool,
   overlayTooltipId: PropTypes.string,
   customTooltip: PropTypes.any,
+  overlayProps: PropTypes.object,
 };
 
 export default DateTime;
diff --git a/src/components/widgets/DateTime/DateTime.less b/src/components/widgets/DateTime/DateTime.less
index c1812979d..c49681954 100644
--- a/src/components/widgets/DateTime/DateTime.less
+++ b/src/components/widgets/DateTime/DateTime.less
@@ -10,7 +10,3 @@
 .trailingRelative::after {
   content: ')';
 }
-
-.standaloneRelative {
-  font-style: italic;
-}