From a73eb76d43dc31ef70f8126d2ef496a66f95f958 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Wed, 12 May 2021 22:05:43 +1000
Subject: [PATCH] Event created date

---
 crabfit-frontend/src/pages/Event/Event.tsx    |  4 ++++
 .../src/pages/Event/eventStyle.ts             | 24 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx
index cfb415b..52ea2f1 100644
--- a/crabfit-frontend/src/pages/Event/Event.tsx
+++ b/crabfit-frontend/src/pages/Event/Event.tsx
@@ -6,6 +6,7 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import {
 	Center,
@@ -23,6 +24,7 @@ import {
 	Logo,
 	Title,
 	EventName,
+  EventDate,
 	LoginForm,
 	LoginSection,
 	Info,
@@ -40,6 +42,7 @@ import timezones from 'res/timezones.json';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(customParseFormat);
+dayjs.extend(relativeTime);
 
 const Event = (props) => {
   const timeFormat = useSettingsStore(state => state.timeFormat);
@@ -283,6 +286,7 @@ const Event = (props) => {
 				{(!!event || isLoading) ? (
 					<>
 						<EventName isLoading={isLoading}>{event?.name}</EventName>
+            <EventDate isLoading={isLoading} title={event?.created && dayjs.unix(event?.created).format('h:mma D MMMM, YYYY')}>{event?.created && `Created ${dayjs.unix(event?.created).fromNow()}`}</EventDate>
 						<ShareInfo
               onClick={() => navigator.clipboard?.writeText(`https://crab.fit/${id}`)
                   .then(() => {
diff --git a/crabfit-frontend/src/pages/Event/eventStyle.ts b/crabfit-frontend/src/pages/Event/eventStyle.ts
index f5f3354..2727b99 100644
--- a/crabfit-frontend/src/pages/Event/eventStyle.ts
+++ b/crabfit-frontend/src/pages/Event/eventStyle.ts
@@ -24,7 +24,7 @@ export const Title = styled.span`
 export const EventName = styled.h1`
 	text-align: center;
 	font-weight: 800;
-	margin: 20px 0 14px;
+	margin: 20px 0 5px;
 
 	${props => props.isLoading && `
 		&:after {
@@ -39,6 +39,28 @@ export const EventName = styled.h1`
 	`}
 `;
 
+export const EventDate = styled.span`
+  display: block;
+  text-align: center;
+  font-size: 14px;
+  opacity: .8;
+  margin: 0 0 10px;
+  font-weight: 500;
+  letter-spacing: .01em;
+
+  ${props => props.isLoading && `
+		&:after {
+			content: '';
+			display: inline-block;
+			height: 1em;
+			width: 200px;
+			max-width: 100%;
+			background-color: ${props.theme.loading};
+			border-radius: 3px;
+		}
+	`}
+`;
+
 export const LoginForm = styled.form`
 	display: grid;
 	grid-template-columns: 1fr 1fr 100px;