fix: file info bugs (#571)

src/files-and-uploads/FileInfo.jsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
-
+import {
+  injectIntl,
+  FormattedMessage,
+  FormattedDate,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
 import {
   ModalDialog,
   Stack,
@@ -13,6 +17,7 @@ import {
   CheckboxControl,
 } from '@edx/paragon';
 import { ContentCopy, InfoOutline } from '@edx/paragon/icons';
+import { getUtcDateTime } from './data/utils';
 import AssetThumbnail from './FileThumbnail';
 
 import messages from './messages';
@@ -31,6 +36,7 @@ const FileInfo = ({
     setLockedState(locked);
     handleLockedAsset(asset.id, locked);
   };
+  const dateAdded = getUtcDateTime(asset.dateAdded);
 
   return (
     <ModalDialog
@@ -48,7 +54,7 @@ const FileInfo = ({
       <ModalDialog.Body className="pt-0 x-small">
         <hr />
         <div className="row flex-nowrap m-0 mt-4">
-          <div className="col-7 mr-3">
+          <div className="col-8 mr-3">
             <AssetThumbnail
               thumbnail={asset.thumbnail}
               externalUrl={asset.externalUrl}
@@ -60,7 +66,14 @@ const FileInfo = ({
             <div className="font-weight-bold">
               <FormattedMessage {...messages.dateAddedTitle} />
             </div>
-            {asset.dateAdded}
+            <FormattedDate
+              value={dateAdded}
+              year="numeric"
+              month="short"
+              day="2-digit"
+              hour="numeric"
+              minute="numeric"
+            />
             <div className="font-weight-bold mt-3">
               <FormattedMessage {...messages.fileSizeTitle} />
             </div>

src/files-and-uploads/FileThumbnail.jsx

@@ -19,11 +19,19 @@ const AssetThumbnail = ({
   });
 
   return (
-    <div className="row justify-content-center">
+    <div className="row justify-content-center align-itmes-center">
       {thumbnail ? (
-        <Image fluid thumbnail src={src} alt={`Thumbnail of ${displayName}`} />
+        <Image
+          style={{ width: '503px', height: '281px' }}
+          className="border rounded p-1"
+          src={src}
+          alt={`Thumbnail of ${displayName}`}
+        />
       ) : (
-        <div className="border rounded p-1">
+        <div
+          className="row border justify-content-center align-items-center rounded m-0"
+          style={{ width: '503px', height: '281px' }}
+        >
           <Icon src={src} style={{ height: '48px', width: '48px' }} />
         </div>
       )}

src/files-and-uploads/data/utils.js

@@ -39,3 +39,9 @@ export const getSrc = ({ thumbnail, wrapperType, externalUrl }) => {
     return InsertDriveFile;
   }
 };
+
+export const getUtcDateTime = (date) => {
+  const utcDateString = date.replace(/\bat\b/g, '');
+  const utcDateTime = new Date(utcDateString);
+  return utcDateTime;
+};