From 298e3b59bcc59f4c30d3ba19cb6f45a84bd2c8c6 Mon Sep 17 00:00:00 2001
From: Angus Goody <angus.goody@gmail.com>
Date: Thu, 21 Dec 2023 15:27:25 +0000
Subject: [PATCH] UI tweaks (#12)

* tweaks to display content

* adjusted side colour

* text tweaks
---
 components/AboutShell.vue               |  2 +-
 components/education/EducationRow.vue   |  4 ++--
 components/employment/EmploymentRow.vue |  8 ++++----
 components/project/ProjectShow.vue      | 16 ++++++++++++----
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/AboutShell.vue b/components/AboutShell.vue
index f3636f5..09452b2 100644
--- a/components/AboutShell.vue
+++ b/components/AboutShell.vue
@@ -1,7 +1,7 @@
 <template>
   <section
       aria-labelledby={id}
-      class="md:border-l md:border-zinc-400/30 md:pl-6 md:dark:border-evening-sea-600/40"
+      class="md:border-l md:border-zinc-400/30 md:pl-6 md:dark:border-lunar-500/20"
   >
     <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
       <h2
diff --git a/components/education/EducationRow.vue b/components/education/EducationRow.vue
index ab3e0b2..2545759 100644
--- a/components/education/EducationRow.vue
+++ b/components/education/EducationRow.vue
@@ -17,9 +17,9 @@
       <!-- Employer and Title -->
       <div class="flex flex-col justify-start flex-1">
         <div
-          class="text-lg text-evening-sea-900 dark:text-zinc-50 font-semibold tracking-tight"
+          class="text-lg text-evening-sea-900 dark:text-zinc-100 font-semibold tracking-tight"
         >
-          {{ education.school }}
+          <p>{{ education.school }}</p>
         </div>
         <div class="flex flex-wrap justify-between">
           <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
diff --git a/components/employment/EmploymentRow.vue b/components/employment/EmploymentRow.vue
index b8f75a4..2185aa8 100644
--- a/components/employment/EmploymentRow.vue
+++ b/components/employment/EmploymentRow.vue
@@ -17,16 +17,16 @@
       <!-- Employer and Title -->
       <div class="flex flex-col justify-start flex-1">
         <div
-          class="text-lg text-evening-sea-900 dark:text-zinc-50 font-semibold tracking-tight"
+          class="text-lg text-evening-sea-900 dark:text-zinc-100 font-semibold tracking-tight"
         >
-          {{ employment.employer }}
+          <p>{{ employment.employer }}</p>
         </div>
         <div class="flex flex-wrap justify-between">
           <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
-            {{ employment.job_title }}
+            <p>{{ employment.job_title }}</p>
           </div>
           <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
-            {{ convertDateToYear(employment.start_date) }} -
+            <span>{{ convertDateToYear(employment.start_date) }}</span> -
             <span v-if="employment.end_date">{{ convertDateToYear(employment.end_date, true) }}</span>
           </div>
         </div>
diff --git a/components/project/ProjectShow.vue b/components/project/ProjectShow.vue
index 3c89937..d729b09 100644
--- a/components/project/ProjectShow.vue
+++ b/components/project/ProjectShow.vue
@@ -4,9 +4,9 @@
     <div v-if="!project.coming_soon" class="mx-auto px-4 pb-16 sm:px-6  lg:max-w-7xl lg:px-8">
       <!-- Breadcrumb -->
       <ProjectBreadcrumb  class="my-5" />
-      <!-- Product -->
+      <!-- Project -->
       <div class="lg:grid lg:grid-cols-7 lg:grid-rows-1 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16">
-        <!-- Product image -->
+        <!-- Project image -->
         <div class="lg:col-span-4 lg:row-end-1">
 
           <TabGroup as="div" class="flex flex-col-reverse">
@@ -65,7 +65,7 @@
             </a>
           </div>
 
-          <div v-if="project.highlights" class="mt-10 border-t border-zinc-300 dark:border-lunar-600/20 pt-10">
+          <div v-if="hasProjectHighlights()" class="mt-10 border-t border-zinc-300 dark:border-lunar-600/20 pt-10">
             <h3 class="text-sm font-medium text-lunar-700 dark:text-lunar-200">Highlights</h3>
             <div class="prose prose-sm mt-4 prose-polo dark:prose-invert">
               <ul role="list">
@@ -103,7 +103,7 @@
 
         </div>
 
-        <div v-if="project.long_description" class="mx-auto mt-20 w-full max-w-2xl lg:col-span-4 lg:mt-0 lg:max-w-none">
+        <div v-if="project.long_description_html" class="mx-auto mt-20 w-full max-w-2xl lg:col-span-4 lg:mt-0 lg:max-w-none">
           <div class="py-5 border-t border-b border-lunar-700/40  dark:border-lunar-600/20">
             <h3 class="sr-only">Project overview</h3>
             <div class="prose max-w-none prose-polo prose-img:rounded-lg prose-h2:text-lunar-800 dark:prose-h2:text-lunar-300 dark:prose-invert" v-html="project.long_description_html" />
@@ -157,6 +157,14 @@ function hasProjectImages(){
   return false
 }
 
+function hasProjectHighlights(){
+  // Handle undefined
+  if (props.project.highlights) {
+    return props.project.highlights.length > 0;
+  }
+  return false
+}
+