quran.com-frontend-next icon indicating copy to clipboard operation
quran.com-frontend-next copied to clipboard

Add new method for highlighting

Open ahmedriad1 opened this issue 2 years ago • 1 comments

Summary

Currently, we pass shouldShowSecondaryHighlight to the <QuranWord /> component if we want to highlight a line or a verse. This approach results in weird gaps between the highlights. This PR uses a different approach:

Excalidraw link Untitled-2022-08-15-1522

In short, this approach involves using an absolute <div> with the highlight color as the background. The complex logic above is used to position the highlight accurately behind the verse.

Screenshots

Before After
image image

ahmedriad1 avatar Jan 25 '23 22:01 ahmedriad1