From 617caba32808f21ecbf5b3cfab79a04dbabe4723 Mon Sep 17 00:00:00 2001
From: Nicole Zonnenberg <nzonnenberg@fearless.tech>
Date: Mon, 5 Jun 2023 12:40:53 -0400
Subject: [PATCH] update Event show

---
 frontend/src/assets/stylesheets/base/variables.scss   |  2 ++
 .../src/assets/stylesheets/components/events.scss     |  9 +++++++++
 frontend/src/views/events/StagedEvent.vue             | 11 ++++++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/assets/stylesheets/base/variables.scss b/frontend/src/assets/stylesheets/base/variables.scss
index 2500a01d..25f63050 100644
--- a/frontend/src/assets/stylesheets/base/variables.scss
+++ b/frontend/src/assets/stylesheets/base/variables.scss
@@ -29,6 +29,8 @@ $user-stats: $color-info-blue;
 $event-stats: $color-success-green;
 
 // Events
+$date-color: $color-sonic-silver;
+$description-color: $color-cadet-blue-crayola;
 $edit-link-color: $color-info-blue;
 $edit-link-hover: $color-fed-blue;
 
diff --git a/frontend/src/assets/stylesheets/components/events.scss b/frontend/src/assets/stylesheets/components/events.scss
index 72d8e152..11b75e13 100644
--- a/frontend/src/assets/stylesheets/components/events.scss
+++ b/frontend/src/assets/stylesheets/components/events.scss
@@ -1,4 +1,13 @@
 .event-container {
+  #event-date {
+    color: $date-color;
+  }
+
+  .no-description {
+    color: $description-color;
+    font-style: italic;
+  }
+
   .event-actions-container {
     display: flex;
     justify-content: space-between;
diff --git a/frontend/src/views/events/StagedEvent.vue b/frontend/src/views/events/StagedEvent.vue
index f038e919..1eb173ea 100644
--- a/frontend/src/views/events/StagedEvent.vue
+++ b/frontend/src/views/events/StagedEvent.vue
@@ -1,6 +1,9 @@
 <template>
   <v-container class="event-container">
     <h2>{{ stagedEvent.event_title }}</h2>
+    <div id="event-date">
+      {{ stagedEvent.start_date }} {{ stagedEvent.end_date ? `- ${stagedEvent.end_date}` : null }}
+    </div>
     <div className="event-actions-container" v-show="stagedEvent.user_id === currentUser.id">
       <router-link className="edit-link" :to="editLink">
         <v-icon size="16px" color="info" icon="mdi:mdi-square-edit-outline" /> Edit
@@ -13,7 +16,13 @@
         Cancel Event
       </v-btn>
     </div>
-    {{ stagedEvent}}
+    <h3>About</h3>
+    <div id="description-container" :class="{ 'no-description': !stagedEvent.description }">
+      {{ stagedEvent.description ?
+        stagedEvent.description :
+        'No description has been given for the event.'
+      }}
+    </div>
   </v-container>
 </template>