search

MaayanLab / DRC-Portals

0 stars 0 forks source link

Search categories need to be better highlighted while in focus #319

Closed shivaramakrishna99 closed 3 months ago

shivaramakrishna99 commented 3 months ago

Search categories such as C2M2, Processed Data, Entity don't look like explicit categories. Need a better way to highlight focus on a particular "tab", via a background color change or an outline.

image
susrinivasan commented 3 months ago

Hi, I added a 3D shadow box for the tab (FancyTabs.tsx) and changed the bkg color when highlighted. Please let me know if this looks good, and if it is I will then commit my changes. image

u8sand commented 3 months ago

I'm not really crazy about the shadows here which feel quite asymmetric. The tabs are being indicated by color and by the line indicator as defined by the Material UI design specification.

If modifying the style, I would suggest modifying the Material UI theme https://mui.com/material-ui/customization/theme-components/ -- perhaps to add more distinguishing background colors?

susrinivasan commented 3 months ago

Ok. During our meeting yesterday, Shankar was of the opinion that the tabs didn't look clickable. I can remove the shadow and instead make it change background color slightly when hovered over. Would that work?

u8sand commented 3 months ago

https://m3.material.io/components/tabs/guidelines Perhaps making them change color on hover helps?

susrinivasan commented 3 months ago

I have changed the color to grey when hovered over, can you please take a look and let me know if this works? image

u8sand commented 3 months ago

Looks good to me

susrinivasan commented 3 months ago

Thanks. I have checked in the change to C2M2 branch. We will wait for you to pull in these changes to the main branch and then I will close this issue.