feat: Add opacity overlay in Scan screen but keep the scan window transparent and clear

[jian4on]

Summary of Changes

Add opacity overlay in Scan screen upon the 'ScanCamera' zone but keep the scan window clear, so that the textual contents upon the camera video could be recognized even users scan a bright background. And the clear scan window also improve the experience for QR scan alignment

Screenshots, videos, or gifs

The background image in the screenshot is only for testing, it doesn't exist in real usage.

Breaking change guide

N/A

Related Issues

N/A

Pull Request Checklist

Tick all boxes below to demonstrate that you have completed the respective task. If the item does not apply to your this PR check it anyway to make it apparent that there's nothing to do.

• All commits contain a DCO Signed-off-by line (we use the DCO GitHub app to enforce this)
• If applicable, screenshots, gifs, or video are included for UI changes
• If applicable, breaking changes are described above along with how to address them
• Updated documentation as needed for changed code and new or modified features
• Added sufficient tests so that overall code coverage is not reduced

If you have any questions to any of the points above, just submit and ask! This checklist is here to help you, not to deter you from contributing!

Pro Tip 🤓

• Read our contribution guide at least once; it will save you a few review cycles!
• Your PR will likely not be reviewed until all the above boxes are checked and all automated checks have passed

[jian4on]

[sonarqubecloud]

Quality Gate failed

Failed conditions
4.2% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[jian4on]

The Sonar scan failed for some reason not reasonable, I think we can make an exception for this file. The clear window needs some views nesting and some tricky styles, maybe Sonar not happy with this.