Merge pull request #1622 from kleros/refactor/evidence-tab-ui-updates

refactor(web): refactor-date-and-file-viewer-styles

Author: jaybuidl

web/src/components/EvidenceCard.tsx

@@ -102,7 +102,7 @@ const DesktopText = styled.span`
   )}
 `;
 
-const Timestamp = styled.p`
+const Timestamp = styled.label`
   color: ${({ theme }) => theme.secondaryText};
 `;
 
@@ -164,7 +164,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timest
           <Identicon size="24" string={sender} />
           <p>{shortenAddress(sender)}</p>
         </AccountContainer>
-        <Timestamp>{formatDate(Number(timestamp))}</Timestamp>
+        <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
         {data && typeof data.fileURI !== "undefined" && (
           <StyledLink to={`attachment/?url=${getIpfsUrl(data.fileURI)}`}>
             <AttachmentIcon />

web/src/components/FileViewer/index.tsx

@@ -12,7 +12,7 @@ const Wrapper = styled.div`
   background-color: ${({ theme }) => theme.whiteBackground};
   border-radius: 3px;
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
-  max-height: 750px;
+  max-height: 1050px;
   overflow: scroll;
 
   ${customScrollbar}

web/src/utils/date.ts

@@ -20,8 +20,18 @@ export function getOneYearAgoTimestamp(): number {
   return currentTime - 31536000; // One year in seconds
 }
 
-export function formatDate(unixTimestamp: number): string {
+export function formatDate(unixTimestamp: number, withTime = false): string {
   const date = new Date(unixTimestamp * 1000);
-  const options: Intl.DateTimeFormatOptions = { month: "long", day: "2-digit", year: "numeric" };
+  const options: Intl.DateTimeFormatOptions = withTime
+    ? {
+        month: "long",
+        day: "2-digit",
+        year: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        timeZone: "GMT",
+        timeZoneName: "short",
+      }
+    : { month: "long", day: "2-digit", year: "numeric" };
   return date.toLocaleDateString("en-US", options);
 }