Adjust outline for focused elments

[parasharrajat]

Details

Fixed Issues

$ Fixes #3959

Tests | QA Steps

1. Open any convo on E.cash on the web.
2. Try to use the tab for navigation.
3. See multiple elements get focus with an outline that is different across the platforms. (please look at the original issue for Image Samples).

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Chrome

Firefox

Desktop

Linux desktop

MAC

[parasharrajat]

@MonilBhavsar This is ready for review. Thanks.

[MonilBhavsar]

Working well but outline is not visible in these two links.

[parasharrajat]

@MonilBhavsar We decided to do that later in a separate issue #3959 (comment).

Even that link has an outline but it's not visible on blue background. We have to adjust different components with different outline styles.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging in version: 1.0.81-5🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.82-7🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅