Add version and some icons

6 files changed, 55 insertions, 34 deletions

diff --git a/pages/agenda.vue b/pages/agenda.vue
index 97fdbad..7ef5f44 100644
--- a/pages/agenda.vue
+++ b/pages/agenda.vue
@@ -82,32 +82,26 @@ function deleteCalendar() {
 
   <template v-else-if="favouriteEvents.length > 0">
     <div class="page">
-      <Panel>
-        <h2 class="agenda-title">Agenda</h2>
+      <Panel title="Agenda">
         <ul class="agenda-list">
-          <li 
-            v-for="event in favouriteEvents" 
-            :key="event.id" 
-            class="agenda-item"
-          >
+          <li v-for="event in favouriteEvents" :key="event.id" class="agenda-item" >
             <EventListing :event="event" />
           </li>
         </ul>
       </Panel>
       <Panel>
-        <h2 class="calendar-title">Calendar</h2>
         <template v-if="calendarStatus === 'pending'">
           <span>Fetching calendar status...</span>
         </template>
         
         <div v-else-if="calendarStatus === 'idle'" class="calendar">
           <template v-if="calendarLink">
-            <span>You can add your agenda to your own calendar using the iCal link below.</span>
+            <span>You can add your agenda to your own calendar using the iCal link below</span>
             <Input :value="calendarLinkWithPageProtocol" readonly/>
             <Button @click="deleteCalendar" :loading="calendarAction">Delete calendar</Button>
           </template>
           <template v-else>
-            <span>You do not have a calendar link yet. Use the button below to request a calendar link synchronise with your own calendar app.</span>
+            <span>You do not have a calendar link yet. Use the button below to request a calendar link to subscribe to on your own calendar app.</span>
             <Button @click="generateCalendar" :loading="calendarAction">Request calendar</Button>
           </template>
         </div>
@@ -123,7 +117,7 @@ function deleteCalendar() {
 <style scoped>
 .agenda-list {
   list-style: none;
-  margin: 0;
+  margin: -1rem 0;
   padding: 0;
   display: grid;
 }
diff --git a/pages/events.vue b/pages/events.vue
index 080bd8f..bfbe553 100644
--- a/pages/events.vue
+++ b/pages/events.vue
@@ -6,9 +6,8 @@ const scheduleStore = useScheduleStore();
 </script>
 
 <template>
-  <Panel v-if="scheduleStore.schedule">
-    <h2 class="events-title">Events</h2>
-    <div v-for="[day, events] of Object.entries(scheduleStore.eventsPerDay)" :key="day">
+  <Panel v-if="scheduleStore.schedule" title="Events">
+    <div v-for="[day, events] of Object.entries(scheduleStore.eventsPerDay)" :key="day" class="events-container">
       <ul class="events-list">
         <li v-for="event in events" :key="event.id" class="event-item" :data-index="event.id">
           <EventListing :event="event" />
@@ -19,6 +18,10 @@ const scheduleStore = useScheduleStore();
 </template>
 
 <style>
+.events-container {
+  margin: -1rem 0;
+}
+
 .events-list {
   list-style: none;
   margin: 0;
@@ -30,10 +33,6 @@ const scheduleStore = useScheduleStore();
   border-bottom: 1px solid var(--color-background-muted);
 }
 
-.events-title {
-  margin-bottom: 1rem;
-}
-
 .event-item:last-child {
   border-bottom: none;
 }
diff --git a/pages/login.vue b/pages/login.vue
index 2c38f61..06d1b77 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -40,6 +40,12 @@ const handleSubmit = async (e: Event) => {
   isLoading.value = false
 }
 
+onMounted(() => {
+  if (history.state.error) {
+    error.value = history.state.error as string
+  }
+})
+
 </script>
 
 <template>
@@ -79,8 +85,11 @@ const handleSubmit = async (e: Event) => {
               Sign in
             </Button>
           </div>
+
+          <Version class="version" />
         </form>
       </Panel>
+
     </div>
 
     <div class="form-footer">
@@ -88,6 +97,7 @@ const handleSubmit = async (e: Event) => {
         Register
       </NuxtLink>
     </div>
+
   </div>
 </template>
 
@@ -131,7 +141,8 @@ const handleSubmit = async (e: Event) => {
 }
 
 .auth-error {
-  color: var(--color-error);
+  color: var(--color-text-error);
+  font-style: oblique;
 }
 
 .form-group {
@@ -157,6 +168,12 @@ const handleSubmit = async (e: Event) => {
   max-width: 28rem;
 }
 
+.version {
+  font-size: var(--text-smaller);
+  margin: 0 auto;
+  color: var(--color-text-muted-light);
+}
+
 .register-link {
   font-size: var(--text-small); 
   font-weight: 500; 
diff --git a/pages/register.vue b/pages/register.vue
index ad9a041..b06578f 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -79,6 +79,8 @@ const handleSubmit = async (e: Event) => {
               Register
             </Button>
           </div>
+
+          <Version class="version" />
         </form>
       </Panel>
     </div>
@@ -166,6 +168,17 @@ const handleSubmit = async (e: Event) => {
   display: flex;
 }
 
+.auth-error {
+  color: var(--color-text-error);
+  font-style: oblique;
+}
+
+.version {
+  font-size: var(--text-smaller);
+  margin: 0 auto;
+  color: var(--color-text-muted-light);
+}
+
 input[name="username"] {
   text-transform: lowercase;
 }
diff --git a/pages/tracks/[slug].vue b/pages/tracks/[slug].vue
index 38bce61..85f00b6 100644
--- a/pages/tracks/[slug].vue
+++ b/pages/tracks/[slug].vue
@@ -8,24 +8,23 @@ const track = scheduleStore.schedule?.tracks.find((track) => track.slug === rout
 </script>
 
 <template>
-  <Panel v-if="track">
-    <h2 class="events-title">{{ track.name }}</h2>
-      <ul class="events-list">
-        <li 
-          v-for="event in scheduleStore.eventsPerTrack[track.name]" 
-          :key="event.id" 
-          class="event-item"
-        >
-          <EventListing :event="event" />
-        </li>
-      </ul>
+  <Panel v-if="track" :title="track.name" :breadcrumbs="[{ text: 'Tracks', to: '/tracks' }]">
+    <ul class="events-list">
+      <li 
+        v-for="event in scheduleStore.eventsPerTrack[track.name]" 
+        :key="event.id" 
+        class="event-item"
+      >
+        <EventListing :event="event" />
+      </li>
+    </ul>
   </Panel>
 </template>
 
 <style>
 .events-list {
   list-style: none;
-  margin: 0;
+  margin: -1rem 0;
   padding: 0;
   display: grid;
 }
diff --git a/pages/tracks/index.vue b/pages/tracks/index.vue
index 35641ab..544847b 100644
--- a/pages/tracks/index.vue
+++ b/pages/tracks/index.vue
@@ -5,8 +5,7 @@ const scheduleStore = useScheduleStore();
 </script>
 
 <template>
-  <Panel v-if="scheduleStore.schedule">
-    <h2 class="tracks-title">Tracks</h2>
+  <Panel v-if="scheduleStore.schedule" title="Tracks">
     <ul class="tracks-list">
       <li 
         v-for="track in scheduleStore.schedule.tracks" 
@@ -24,7 +23,7 @@ const scheduleStore = useScheduleStore();
 <style scoped>
 .tracks-list {
   list-style: none;
-  margin: 0.5rem 0 0 0;
+  margin: -0.5rem 0 0 0;
   padding: 0;
   display: grid;
 }