Added transition for the instruction box

[antilneeraj]

Fixes Issue🛠️

• Closes [Style] Add transition for the instruction box #200

Description👨‍💻

Added Transition to the instruction box when clicked on the instruction button and also added a cross button to close the modal.

Type of change📄

• Bug fix (non-breaking change which fixes an issue)

How this has been tested✅

I have tested the changes Locally using alpha, beta & unit testing.

Checklist✅

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added demonstration in the form of GIF/video file
• I am an Open Source Contributor

Screenshots/GIF📷

[netlify]

✅ Deploy Preview for click-the-edible-game ready!

Name	Link
🔨 Latest commit	843dbe0
🔍 Latest deploy log	https://app.netlify.com/sites/click-the-edible-game/deploys/65c277212df123000806243d
😎 Deploy Preview	https://deploy-preview-255--click-the-edible-game.netlify.app/assets/main
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[antilneeraj]

@Rakesh9100 The PR is ready for a review and merge. Kindly review it and provide your feedback

[Rakesh9100]

No need to change the UI. You have to just add transitions while opening and closing the box. Cross button added is OK.

In addition if you want, you can work on making it translucent for good looking but without changing the UI @antilneeraj

[antilneeraj]

Hey @Rakesh9100 I have applied the animation to the modal without changing any UI Component. Please Review the PR and share your feedback

[Rakesh9100]

The 2nd and 3rd screens instruction box is not appearing on clicking the Instruction button, pls fix @antilneeraj

[antilneeraj]

Hey @Rakesh9100, Please review the PR as i have fixed the modal issue and kindly provide your feedback.

[Rakesh9100]

Good, Merged 🎉 @antilneeraj