🎨 UX Enhancement : Add close button and overlay click-to-dismiss for QR popup (Issue #158)

[ShubhamSPawade]

Which issue does this PR close?

• Closes 💡 UX Enhancement: Add Close Button for QR Popup #158

Rationale for this change

The QR popup for downloading the app lacked a visible close (“×”) button and did not support overlay click-to-dismiss behavior. This could confuse users who may assume they’re stuck. The proposed changes improve usability and align with standard UX practices.

What changes are included in this PR?

• Added a close (“×”) button in the top-right corner of the QR popup.
• Enabled overlay click-to-dismiss functionality.
• Prevented body scroll when the popup is active.
• Added ESC key support to close the popup.

Are these changes tested?

Manual testing was performed to verify:

• Clicking the close button dismisses the popup.
• Clicking outside the popup closes it.
• Pressing ESC key closes the popup.
• Popup styling and transitions remain intact.

Are there any user-facing changes?

Yes. Users now have intuitive control over the QR popup.
📸 Screenshot of the updated QR popup with close button and overlay behavior.

[vercel]

@ShubhamSPawade is attempting to deploy a commit to the eccentriccoder01's projects Team on Vercel.

A member of the Team first needs to authorize it.

[eccentriccoder01]

Great work @ShubhamSPawade! Sorry for the late response, I'm merging this now... Feel free to work on more issues or create new ones, and check out my other GSSoC25 projects too:

• 
• 
• 
• 
   
  Thanks for improving SaralSeva 🧡