Added Preview Page UI, migrated to SlideOver Component & icons updated.

[yogeshbhutkar]

Issue Addressed: #6221

WHAT

🤖 Generated by Copilot at c74eb25

Refactored the file preview dialog component to use a slide over UI and added more functionality. Replaced the Dialog component with the SlideOver component in FilePreviewDialog.tsx and simplified the props. Added zoom, rotate, and download buttons using ButtonV2 and CareIcon.

Proposed Changes

• Fixes Added UI enhancements to the preview page #6221
• Updated the UI
• Migrated the Modal to use Care's SlideOver component
• Updated the icons to use CareUI's Icons than to use font-awesome icons.

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

HOW

🤖 Generated by Copilot at c74eb25

• Refactor FilePreviewDialog component to use SlideOver component instead of Dialog component (link, link, link)

• Update imports to remove unused components and add new components (link)
• Simplify props to only keep essential ones for file preview functionality (link)
• Replace main content with SlideOver component that renders file as image or iframe (link)
• Add buttons for zooming, rotating, and downloading file using ButtonV2 and CareIcon components (link)
• Remove Transition and Dialog components as they are no longer needed (link)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 9, 2023 10:09am

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	dc1c513
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/6523d14c860a750008a1430d
😎 Deploy Preview	https://deploy-preview-6296--care-egov-staging.netlify.app
📱 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.

[nihal467]

@yogeshbhutkar marking it as discussion for UI in EOD Call

[yogeshbhutkar]

Updated the preview component, TBD in EOD call 26/09/23

Moved the buttons on top of the image, the buttons are rather fixed at a particular position now.

Another proposed update with the stock backdrop effect, and title. Migrated all the icons to use the CareUI's Icons.

Probably with a BG to the title's div...

[nihal467]

@yogeshbhutkar is this PR, good for testing

[yogeshbhutkar]

@yogeshbhutkar is this PR, good for testing

Yes @nihal467, the design was approved in the last EOD call, you can go ahead and test it out.

[nihal467]

@yogeshbhutkar

• When you rotate a landscape image 90 degrees and zoom in, the button to rotate again is getting covered, it is causing an issue to the user that we need to zoom out all the way back and rotate again.

• In the first image, you can see the image is already fully zoomed, and when you click again zoom in, it makes the image fully to the initial size, ( this is an issue with the current staging preview and your PR, try to solve it along with this PR if possible )

[github-actions]

Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions.

[github-actions]

Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, This pr has been automatically closed because it has not had any recent activity. Thank you for your contributions. Feel free to repopen the pr.

[github-actions]

Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions.

[github-actions]

👋 Hi, @yogeshbhutkar,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[github-actions]

Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions.

[github-actions]

Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, This pr has been automatically closed because it has not had any recent activity. Thank you for your contributions. Feel free to repopen the pr.