From 5c5e6c7439e91963395e61322fcb6922f623a5b2 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 1 Nov 2022 23:04:13 +0100
Subject: [PATCH] hover effect more generic

---
 src/renderer/components/shared/tab-nav-bar.component.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/shared/tab-nav-bar.component.tsx b/src/renderer/components/shared/tab-nav-bar.component.tsx
index 57a9821c..aeccae18 100644
--- a/src/renderer/components/shared/tab-nav-bar.component.tsx
+++ b/src/renderer/components/shared/tab-nav-bar.component.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 
-export function TabNavBar(props: {tabsText: string[], onTabChange: Function, className?: string}) {
+export function TabNavBar(props: {tabsText: string[], onTabChange: (index: number) => void, className?: string}) {
 
     const [currentTabIndex, setCurrentTabIndex] = useState(0);
     const t = useTranslation();
@@ -22,7 +22,7 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
             </div>
             <ul className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
                 { props.tabsText.map((y, index) => 
-                    <li className="px-4 h-full text-center text-gray-800  dark:text-gray-200 text-lg font-bold hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</li>
+                    <li className="px-4 h-full text-center text-gray-800 dark:text-gray-200 text-lg font-bold hover:backdrop-brightness-75" key={index} onClick={() => selectYear(y)}>{t(y)}</li>
                 )}
             </ul>
         </nav>