fix: change to a more accessible theme, fix contrast errors (#97)

OCR-D · Jul 23, 2024 · 05f6cb0 · 05f6cb0
1 parent 9f6177f
commit 05f6cb0
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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'