Improving appearance of date time, adding full time in overlay for co…

…mment times.

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>

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,
 };

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;

src/components/widgets/DateTime/DateTime.less

@@ -10,7 +10,3 @@
 .trailingRelative::after {
   content: ')';
 }
-
-.standaloneRelative {
-  font-style: italic;
-}