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:
parent
abd75b0ba1
commit
024aeae240
@ -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:
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user