From 211a3b9a3945037ad6cb85ce4f7337207c801bca Mon Sep 17 00:00:00 2001
From: MathieuG-P <mathieu.gries-peroz@cirkwi.com>
Date: Mon, 6 Feb 2023 21:37:17 +0100
Subject: [PATCH] disable support button + fix button hightlight even if
 disabled + fix click exec even if disabled

---
 src/renderer/components/shared/bsm-button.component.tsx | 8 +++++---
 src/renderer/pages/settings-page.component.tsx          | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/shared/bsm-button.component.tsx b/src/renderer/components/shared/bsm-button.component.tsx
index 4671a62f..fb95f172 100644
--- a/src/renderer/components/shared/bsm-button.component.tsx
+++ b/src/renderer/components/shared/bsm-button.component.tsx
@@ -1,5 +1,5 @@
 import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
-import { useRef, CSSProperties } from "react";
+import { useRef, CSSProperties, MouseEvent } from "react";
 import { BsmImage } from "./bsm-image.component";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { useClickOutside } from "renderer/hooks/use-click-outside.hook";
@@ -45,15 +45,17 @@ export function BsmButton({className, style, imgClassName, iconClassName, icon,
 
     const renderTypeColor = (() => {
         if(typeColor === "primary"){ return ""; }
-        if(!typeColor){ return `bg-light-main-color-2 dark:bg-main-color-2 ${!withBar && "hover:brightness-125"}`; }
+        if(!typeColor){ return `bg-light-main-color-2 dark:bg-main-color-2 ${(!withBar && !disabled) && "hover:brightness-125"}`; }
         if(typeColor === "cancel"){ return "bg-gray-500"; }
         if(typeColor === "error"){ return "bg-red-500"; }
         if(typeColor === "success"){ return "bg-green-500"; }
         return "";
     })();
 
+    const handleClick = (e: MouseEvent) => !disabled && onClick(e);
+
     return (
-        <div ref={ref} onClick={onClick} title={t(title)} className={`${className} overflow-hidden cursor-pointer group ${(!withBar && !disabled && (!!typeColor || !!color)) && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, backgroundColor: primaryColor || color}}>
+        <div ref={ref} onClick={handleClick} title={t(title)} className={`${className} overflow-hidden cursor-pointer group ${(!withBar && !disabled && (!!typeColor || !!color)) && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, backgroundColor: primaryColor || color}}>
             { image && <BsmImage image={image} className={imgClassName}/> }
             { icon && <BsmIcon icon={icon} className={iconClassName ?? "h-full w-full text-gray-800 dark:text-white"} style={{color: iconColor}}/> }
             {text && (type === "submit" ? <button type="submit" className={textClassName || "h-full w-full"} style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span className={textClassName} style={{...(!!textColor && {color: `${textColor}`})}}>{t(text)}</span>)}
diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx
index d20c5adb..f99d6183 100644
--- a/src/renderer/pages/settings-page.component.tsx
+++ b/src/renderer/pages/settings-page.component.tsx
@@ -293,7 +293,7 @@ export function SettingsPage() {
 
                 <SettingContainer title="pages.settings.patreon.title" description="pages.settings.patreon.description">
                     <div className="flex gap-2">
-                        <BsmButton className="flex w-fit rounded-md h-8 px-2 font-bold py-1 whitespace-nowrap !bg-red-500 !text-white" text="pages.settings.patreon.buttons.support" withBar={false} onClick={openSupportPage}/>
+                        <BsmButton disabled color="#ef4444" className="flex w-fit rounded-md h-8 px-2 font-bold py-1 whitespace-nowrap !text-white" text="pages.settings.patreon.buttons.support" withBar={false} onClick={openSupportPage}/>
                         <BsmButton className="flex w-fit rounded-md h-8 px-2 font-bold py-1 !text-white" withBar={false} text="pages.settings.patreon.buttons.supporters" color="#6c5ce7" onClick={toogleShowSupporters}/>
                     </div>
                     <SettingContainer className="mt-3" description="pages.settings.discord.description">