From 13dbf8847304e95d5f4864699dd4a95e270afd1c Mon Sep 17 00:00:00 2001
From: MathieuG-P <mathieu.gries-peroz@cirkwi.com>
Date: Fri, 22 Jul 2022 18:16:48 +0200
Subject: [PATCH] use custom colors

---
 .../components/shared/bsm-button.component.tsx     | 12 +++++++++---
 .../components/shared/tab-nav-bar.component.tsx    | 14 ++++++++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/shared/bsm-button.component.tsx b/src/renderer/components/shared/bsm-button.component.tsx
index 09f190f7..ec389015 100644
--- a/src/renderer/components/shared/bsm-button.component.tsx
+++ b/src/renderer/components/shared/bsm-button.component.tsx
@@ -3,12 +3,18 @@ import OutsideClickHandler from 'react-outside-click-handler';
 import React from "react";
 import { BsmImage } from "./bsm-image.component";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { useObservable } from "renderer/hooks/use-observable.hook";
+import { ConfigurationService } from "renderer/services/configuration.service";
+import { DefaultConfigKey } from "renderer/config/default-configuration.config";
 
 type BsmButtonType = "primary"|"success"|"cancel"|"error";
 
 export function BsmButton({className, style, imgClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor}: {className?: string, style?: React.CSSProperties, imgClassName?: string, icon?: BsmIconType, image?: string, text?: string, type?: string, active?: boolean, withBar?: boolean, disabled?: boolean, onClickOutside?: (e: MouseEvent) => void, onClick?: (e: React.MouseEvent) => void, typeColor?:BsmButtonType}) {
 
+  const configService = ConfigurationService.getInstance();
+
   const t = useTranslation();
+  const secondColor = useObservable(configService.watch("second-color" as DefaultConfigKey));
 
   return (
     <OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
@@ -17,9 +23,9 @@ export function BsmButton({className, style, imgClassName, icon, image, text, ty
         { icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
         {text && (type === "submit" ? <button className="w-full h-full">{t(text)}</button> : <span>{t(text)}</span>)}
         { withBar && (
-          <div className="absolute bottom-0 left-0 w-full h-1 bg-red-500">
-            <div className="absolute top-0 left-0 h-full w-full bg-inherit brightness-50"/>
-            <div className={`absolute top-0 left-0 h-full w-full bg-inherit -translate-x-full group-hover:translate-x-0 transition-transform shadow-center shadow-red-500 ${active && "translate-x-0"}`}/>
+          <div className="absolute bottom-0 left-0 w-full h-1 bg-current" style={{color: secondColor}}>
+            <div className="absolute top-0 left-0 h-full w-full bg-current brightness-50"/>
+            <div className={`absolute top-0 left-0 h-full w-full bg-inherit -translate-x-full group-hover:translate-x-0 transition-transform shadow-center shadow-current ${active && "translate-x-0"}`}/>
           </div>
         )}
       </div>
diff --git a/src/renderer/components/shared/tab-nav-bar.component.tsx b/src/renderer/components/shared/tab-nav-bar.component.tsx
index 92df42ae..a1e0b583 100644
--- a/src/renderer/components/shared/tab-nav-bar.component.tsx
+++ b/src/renderer/components/shared/tab-nav-bar.component.tsx
@@ -1,12 +1,18 @@
 import { useEffect, useRef, useState } from "react";
+import { DefaultConfigKey } from "renderer/config/default-configuration.config";
+import { useObservable } from "renderer/hooks/use-observable.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { ConfigurationService } from "renderer/services/configuration.service";
 
 export function TabNavBar(props: {tabsText: string[], onTabChange: Function, className?: string}) {
 
+    const configService = ConfigurationService.getInstance();
+
     const [currentTabIndex, setCurrentTabIndex] = useState(0);
     const tabsWrapper = useRef(null);
     const [tabsWidth, setTabsWidth] = useState(0);
     const t = useTranslation();
+    const secondColor = useObservable(configService.watch("second-color" as DefaultConfigKey));
 
     const selectYear = (tab: string) => {
         const newIndex = props.tabsText.indexOf(tab);
@@ -21,10 +27,10 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
 
   return (
     <div className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-black ${props.className}`}>
-        <div className="absolute w-full h-1 bottom-0">  
-          <span className="absolute h-full w-full bg-red-500 brightness-50"></span>
-          <span className="absolute h-full block bg-red-500 transition-transform duration-300 shadow-lg shadow-red-500" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
-          <span className="fixed h-1 block shadow-center bg-transparent shadow-red-500 transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
+        <div className="absolute w-full h-1 bottom-0" style={{color: secondColor}}>  
+          <span className="absolute h-full w-full bg-current brightness-50" />
+          <span className="absolute h-full block bg-current transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}/>
+          <span className="fixed h-1 block shadow-center bg-transparent shadow-current transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
         </div>
         <div ref={tabsWrapper} className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
             { props.tabsText.map((y, index) =>