✨ Reimplement Image Scan Page (Frontend Redesign)

[Odeyiany2]

Issue Overview

We need to reimplement the Image Scan page on the frontend to match the latest Figma design, which now includes an updated Scan button and improved layout for image display.

This is not a UI design task, the contributor should implement the actual design exactly as it appears in the Image Scan screen on Figma.

The new design aims to improve user experience by ensuring that the image being scanned fills the screen, giving users a clearer and fuller view of what they are scanning rather than the image being restricted to a small box.

Frontend contribution guide: Naija Nutri Hub Frontend – CONTRIBUTING.md

Figma design: Naija Nutri Hub – Figma File

⚠️ Important: Please include screenshots of your implementation in your Pull Request.
🧩 The Project/Repository Maintainers will review and verify that your implementation matches the Figma design.

What's Needed

Contributors are expected to:

• Rebuild the Image Scan page following the current Figma design.

• Add the new Scan button as seen in the latest Figma version.

• Ensure the scanned image fills the screen (for a full display) rather than fitting into a small frame.

• Follow the exact layout, spacing, and colors as shown in the design.

• Ensure the screen is responsive and accessible.

• Maintain the existing scan functionality and integration with backend logic.

• Follow the frontend contribution guidelines linked above.

How to Contribute

• Fork the repository.

• Implement your updates following the Figma design.

• Test locally to confirm layout, responsiveness, and design accuracy.

• Submit a Pull Request with:

  • A brief description of your implementation.

  • Screenshots showing the redesigned Image Scan page.

[Sammybams]

Hi @KeneNwogu,
I think you'd like to check this out. Thank you.

[KeneNwogu]

I'd like to be assigned to this please!

[Sammybams]

I'd like to be assigned to this please!

Kindly go ahead @KeneNwogu.

[KeneNwogu]

I wanted to ask about the part of filling the screen, should it fill the entire screen area? the design does not match the issue text

[Sammybams]

I wanted to ask about the part of filling the screen, should it fill the entire screen area? the design does not match the issue text

Yea, that would be good for it to fill the screen @KeneNwogu. I don't get what you mean by the design not matching the issue text.

[KeneNwogu]

The design doesn't show where the camera would fit along with the text and scan button (it actually implies that it would be around the orange border).

[Sammybams]

The design doesn't show where the camera would fit along with the text and scan button (it actually implies that it would be around the orange border).

My apologies, I missed this @KeneNwogu. So the option should be more like a guide to show that they are at the centre of of the food or image they are taking. For example if you are using a grid system. So instead of just fitting it into the box, It can be a wider field but not below the "Scan" button and not above the "Scan food image" display.

[Sammybams]

Kindly check out my comment @KeneNwogu.

[Sammybams]

Actually, @KeneNwogu, there's been an update made to the design. Maybe you want to check it out and just reimplement that instead. And see what way you can infuse my suggestions for the scan option to just make it a bit bigger.