Added Hover effect on Sidebar rows

[parasharrajat]

Please review.

Details

Added existing Hoverable Component as a wrapper to the OptionRow Component and based on the hover state added a style with the Background color to show the feedback.
Now we have another prop on OptionRow component hoverStyle which takes value of styles.sidebarLinkHover and this prop is set to styles.modalLinkHover on the common ancestor of all Sidebar modals(NewChat, NewGroup,SearchView) OptionSelector.

Fixed Issues

Fixes #1439

Tests

Open the app and hover over the sidebar rows to see the feedback.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Web

screen-.3.mp4

Desktop

screen-.4.mp4

[shawnborton]

Looks great!

[roryabraham]

Overall looks pretty good – just a few small changes.

[roryabraham]

Also, it looks like E2E tests are failing. They can be a bit flaky, so I would push the requested changes and if they're still failing then you might have to figure out what's going wrong

[parasharrajat]

Updated.

[roryabraham]

I'm not sure why optionHoveredStyle needs to be a prop of the OptionsList component. It looks like that prop is only used once, and we're passing a static value of styles.hoveredComponentBG. So instead of:

1. Passing styles.hoveredComponentBG from OptionsSelector to OptionsList
2. Then passing it from OptionsList to OptionRow

We should just pass styles.hoveredComponentBG from OptionsList to OptionRow. Does that make sense?

[parasharrajat]

@roryabraham OptionList is a generic component and it is used in different locations where we need two different designs for OptionRow. So by default, we gave one and one we are passing from the OptionSelector Component which is the common ancestor.

[roryabraham]

Okay, LGTM 👍