From 97947c821ae18723b9c5bff2f7752b3fa9a020f1 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 19 Jul 2024 17:26:52 +0200
Subject: [PATCH] fix: change to a more accessible theme, fix contrast errors

---
 src/components/Workflows.vue                       | 2 +-
 src/components/workflows/timeline/TimelineItem.vue | 5 +++--
 src/main.js                                        | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Workflows.vue b/src/components/Workflows.vue
index 773a57c..8c2fd58 100644
--- a/src/components/Workflows.vue
+++ b/src/components/Workflows.vue
@@ -83,7 +83,7 @@
   </template>
   <template v-else>
     <div class="flex mb-6">
-      <p class="text-amber-600 flex-grow-0 px-4 py-2 bg-amber-100 rounded-md text-sm"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
+      <p class="text-amber-700 flex-grow-0 px-4 py-2 bg-amber-100 rounded-md text-sm"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
     </div>
     <WorkflowsIntroSection :page="<'timeline'|'table'>selectedOption.value" class="mb-6"></WorkflowsIntroSection>
     <div class="flex mb-6">
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index f7cb57e..a8d868c 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -73,11 +73,11 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
       <div class="flex flex-col px-4 pb-2">
         <div class="flex items-center overflow-hidden">
           <h2 class="text-xl font-bold truncate mr-8" :title="gt.label">{{ gt.label }}</h2>
-          <a :href="gt.metadata.url" class="text-gray-500 hover:text-gray-600 flex-shrink-0 ml-auto mr-2 flex items-center bg-gray-100 rounded-full py-1 px-2">
+          <a :href="gt.metadata.url" class="text-gray-600 hover:text-gray-700 flex-shrink-0 ml-auto mr-2 flex items-center bg-gray-100 rounded-full py-1 px-2">
             <Icon icon="mdi:github" class="text-xl mr-1"/>
             <span class="text-xs">{{ gt.metadata.title }}</span>
           </a>
-          <a :href="gt.metadata.license[0].url" class="text-gray-500 hover:text-gray-600 flex-shrink-0 flex items-center bg-gray-100 rounded-full py-1 px-2">
+          <a :href="gt.metadata.license[0].url" class="text-gray-600 hover:text-gray-700 flex-shrink-0 flex items-center bg-gray-100 rounded-full py-1 px-2">
             <Icon icon="octicon:law" class="text-xl mr-1"/>
             <span class="text-xs">{{ gt.metadata.license[0].name }}</span>
           </a>
@@ -174,5 +174,6 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
 <style scoped lang="scss">
 .text-highlight:hover {
   color: var(--highlight-text-color);
+  background-color: var(--highlight-bg);
 }
 </style>
diff --git a/src/main.js b/src/main.js
index 33cff8f..d909c69 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import PrimeVue from 'primevue/config'
 
-import 'primevue/resources/themes/lara-light-blue/theme.css'
+import 'primevue/resources/themes/tailwind-light/theme.css'
 import 'primeicons/primeicons.css'
 import './assets/main.css'
 import './assets/app.scss'