From 6ed87aaf8959652c0b1851c01e3e498cb6890b5d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 15 Mar 2021 18:17:00 -0500
Subject: [PATCH] Display timestamps in mod log

---
 app/soapbox/features/admin/moderation_log.js | 15 +++++++++++++--
 app/styles/components/admin.scss             |  6 ++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/admin/moderation_log.js b/app/soapbox/features/admin/moderation_log.js
index 41fda2b50..853cb9c1e 100644
--- a/app/soapbox/features/admin/moderation_log.js
+++ b/app/soapbox/features/admin/moderation_log.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedDate } from 'react-intl';
 import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -71,7 +71,18 @@ class ModerationLog extends ImmutablePureComponent {
         >
           {items.map((item, i) => (
             <div className='logentry' key={i}>
-              {item.get('message')}
+              <div className='logentry__message'>{item.get('message')}</div>
+              <div className='logentry__timestamp'>
+                <FormattedDate
+                  value={new Date(item.get('time') * 1000)}
+                  hour12={false}
+                  year='numeric'
+                  month='short'
+                  day='2-digit'
+                  hour='2-digit'
+                  minute='2-digit'
+                />
+              </div>
             </div>
           ))}
         </ScrollableList>
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index db09ed55f..f8a562834 100644
--- a/app/styles/components/admin.scss
+++ b/app/styles/components/admin.scss
@@ -214,4 +214,10 @@
 
 .logentry {
   padding: 15px;
+
+  &__timestamp {
+    color: var(--primary-text-color--faint);
+    font-size: 13px;
+    text-align: right;
+  }
 }