From d15182f382ac920759de63fa38ade2b3b43fc7cd Mon Sep 17 00:00:00 2001
From: Tosin Oguntuyi <tcubed03@gmail.com>
Date: Tue, 20 Feb 2024 15:26:06 +0100
Subject: [PATCH] Fix date and styling issues

---
 assets/css/translation-events.css | 17 ++++++++++++++---
 assets/js/translation-events.js   |  2 +-
 templates/event.php               |  5 ++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/assets/css/translation-events.css b/assets/css/translation-events.css
index 14c4bcd2..3a2f25de 100644
--- a/assets/css/translation-events.css
+++ b/assets/css/translation-events.css
@@ -201,9 +201,6 @@ input[type="submit"].attending-btn {
 	font-weight: 500;
 	font-size: .9em;
 }
-.event-stats-summary:hover {
-	border: thin solid #e0dcdc;
-}
 .event-stats-summary p.event-stats-text {
 	margin: 0;
 	background: #f8f8f8;
@@ -212,3 +209,17 @@ input[type="submit"].attending-btn {
 	border-top: thin solid #e0e0e0;
 	font-family: monospace;
 }
+time.event-utc-time {
+	display: block;
+	font-size: .95em;
+}
+.event-utc-time:first-of-type{
+	border-bottom: #cdcdcd thin solid;
+	padding-bottom: 0.5em;
+	margin-bottom: 0.5em;
+}
+span.event-details-date-label {
+	font-weight: bold;
+	color: #5a5a5a;
+	display: block;
+}
diff --git a/assets/js/translation-events.js b/assets/js/translation-events.js
index c5b0ecf6..8bf64115 100644
--- a/assets/js/translation-events.js
+++ b/assets/js/translation-events.js
@@ -145,7 +145,7 @@
 					const options = {
 						weekday: 'short',
 						year: 'numeric',
-						month: 'long',
+						month: 'short',
 						day: 'numeric',
 						hour: 'numeric',
 						minute: 'numeric',
diff --git a/templates/event.php b/templates/event.php
index 97fe9b91..a79b9cd4 100644
--- a/templates/event.php
+++ b/templates/event.php
@@ -106,7 +106,10 @@
 	</div>
 	<div class="event-details-right">
 		<div class="event-details-date">
-			<p><span class="dashicons dashicons-clock"></span> <time class="event-utc-time" datetime="<?php echo esc_attr( $event_start ); ?>"></time> - <time class="event-utc-time" datetime="<?php echo esc_attr( $event_end ); ?>"></time></p>
+			<p>
+				<span class="event-details-date-label">Starts:</span> <time class="event-utc-time" datetime="<?php echo esc_attr( $event_start ); ?>"></time>
+				<span class="event-details-date-label">Ends:</span><time class="event-utc-time" datetime="<?php echo esc_attr( $event_end ); ?>"></time>
+			</p>
 		</div>
 		<?php if ( is_user_logged_in() ) : ?>
 		<div class="event-details-join">