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
This commit is contained in:
Bill Wallace 2022-11-22 09:11:03 -05:00 committed by GitHub
parent abd75b0ba1
commit 024aeae240
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 1 deletions

View File

@ -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:

View File

@ -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);