From 58e37741aa34f5e5a09dccd8566b32e836060af2 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 30 Jun 2023 12:49:16 +0200
Subject: [PATCH] Added hover effects on tooltips

---
 .../src/components/xml/tooltips/TooltipCategoryComponent.vue  | 2 +-
 Frontend/src/components/xml/tooltips/TooltipComponent.vue     | 4 ++--
 .../src/components/xml/tooltips/TooltipEntryComponent.vue     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue b/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
index 35e8886..ba854df 100644
--- a/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
@@ -14,7 +14,7 @@ function toggleTooltips() {
 
 <template>
     <div class="flex p-2 flex-col rounded-xl shadow-lg bg-gradient-to-r from-zinc-400 to-slate-400 dark:from-slate-600 dark:to-slate-700">
-        <button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.name }}</button>
+        <button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100 hover:font-bold" @click="toggleTooltips()">{{ props.name }}</button>
         <div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
             <slot></slot>
         </div>
diff --git a/Frontend/src/components/xml/tooltips/TooltipComponent.vue b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
index 5c1fe72..dfc2424 100644
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -38,8 +38,8 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800">
-        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
+    <div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
+        <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100 hover:font-bold" @click="toggleTooltips()">
             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
         </button>
         <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-scroll rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
diff --git a/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue b/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
index 5596c61..7e2eea8 100644
--- a/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
@@ -39,7 +39,7 @@ function interpretXPathIndicators( elementType:string ):string {
 </script>
 
 <template>
-    <div class="flex p-1 flex-col rounded-xl border border-slate-400 dark:border-slate-400">
+    <div class="flex p-1 flex-col rounded-xl border border-slate-400 dark:border-slate-400 hover:font-bold">
         <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.entryData.name }}</button>
         <div id="content" :class="{'hidden' : isEntryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
             <h4 class="text-xl mb-2 font-bold text-justify">Description</h4>