From 024aeae240506f01dc491a081eabf9d2c3e4d4df Mon Sep 17 00:00:00 2001
From: Bill Wallace <wayfarer3130@gmail.com>
Date: Tue, 22 Nov 2022 09:11:03 -0500
Subject: [PATCH] fix: button text colour to be more readable (#3031)

* Fix the button text colour to be more readable

* fix(button):Add the ability to set text to black to fix visibility
---
 platform/ui/src/components/Button/Button.tsx             | 2 +-
 platform/ui/src/components/StudyBrowser/StudyBrowser.tsx | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/platform/ui/src/components/Button/Button.tsx b/platform/ui/src/components/Button/Button.tsx
index 7a2de8f91..03c4ea1de 100644
--- a/platform/ui/src/components/Button/Button.tsx
+++ b/platform/ui/src/components/Button/Button.tsx
@@ -46,7 +46,7 @@ const variants = {
       'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
     white: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     black:
-      'text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
+      'text-black hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
     primaryActive:
       'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
     primaryLight:
diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
index db2561080..209cd7ac8 100644
--- a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
+++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
@@ -81,11 +81,15 @@ const StudyBrowser = ({
             const { name, label, studies } = tab;
             const isActive = activeTabName === name;
             const isDisabled = !studies.length;
+            // Apply the contrasting color for brighter button color visibility
+            // const color = isActive ? 'black' : 'default';
+            const color = 'default';
             return (
               <Button
                 key={name}
                 className={'text-white text-base p-2 min-w-18'}
                 size="initial"
+                color={color}
                 bgColor={isActive ? 'bg-primary-main' : 'bg-black'}
                 onClick={() => {
                   onClickTab(name);