TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: button text colour to be more readable (#3031)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/ui/src/components/Button/Button.tsx
View File

@ -46,7 +46,7 @@ const variants = {
'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80', 'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
white: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80', white: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
black: 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: primaryActive:
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80', 'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
primaryLight: primaryLight:

4
platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
View File

@ -81,11 +81,15 @@ const StudyBrowser = ({
const { name, label, studies } = tab; const { name, label, studies } = tab;
const isActive = activeTabName === name; const isActive = activeTabName === name;
const isDisabled = !studies.length; const isDisabled = !studies.length;
// Apply the contrasting color for brighter button color visibility
// const color = isActive ? 'black' : 'default';
const color = 'default';
return ( return (
<Button <Button
key={name} key={name}
className={'text-white text-base p-2 min-w-18'} className={'text-white text-base p-2 min-w-18'}
size="initial" size="initial"
color={color}
bgColor={isActive ? 'bg-primary-main' : 'bg-black'} bgColor={isActive ? 'bg-primary-main' : 'bg-black'}
onClick={() => { onClick={() => {
onClickTab(name); onClickTab(name);