submitting issue 83 #99
Conversation
| }; | ||
|
|
||
| return ( | ||
| <div className="home-page"> |
There was a problem hiding this comment.
Nice job adding the homepage!
| function ScanPage() { | ||
| return ( | ||
| <div className="scan-page"> | ||
| <h1>Scan Your Sheets Here</h1> |
There was a problem hiding this comment.
Everything is here for the scan page
|
This is not really an improvement over the previous UI. 
When I click on Scan, I get: So it's pretty much the same UI, minus the background. |
|
@yildizahmetali You have to add 2 more pages as per draft, Custom Sheets for respective components and About Us page. I think the UI right now is just a skeleton but you have to work fast to complete the sprint. |
|
@yildizahmetali I would Like you t follow the design on sigma closely, As you can see the alignment and colour on navbar, there's a gap between navbar and main body. About Us page option is missing. the buttons should be of symmetric size. and the text Bubble Scan can come to more middle and bigger. I have uploaded the original design again, the same could be followed in Scan page and Custom Sheets page. Where the alignment of the components are poorly assigned, It has not mentioned in design but Alignments and symmetric design is still expected. The footer and the information areas are still missing in all pages. I will provide you the text for that. But you can add somethings for now. |
|
@yildizahmetali, Good work on following the design, but some of the components are still missing, Like the information below every page. The footer. And you can do better job in aligning the navbar, It's slightly off. The custom sheet page the alignment is messed up can up fix that part by adding the paddings and just improvise a bit. Cause I expect you to improvise on the symmetrical design and at least for the spacing as you can see below in image everything is clustered. |
Fixes #83
What was changed?
Redesigned the front end of the BubbleScan application from a single-page application to a multi-page layout.
Created individual pages for each functionality, such as:
Home Page: Introduces the app with the option to navigate to different functionalities.
Scan Page: Handles file uploads and CSV downloads.
Updated the routing logic to reflect the multi-page structure.
Why was it changed?
This update addresses Issue #83, which highlighted the need for an improved front-end user experience. The previous single-page layout made it difficult to navigate between different functionalities of the app, such as uploading files and generating custom sheets. The new multi-page layout improves user interaction by clearly separating these functionalities and providing a smoother, more organized interface.
How was it changed?
App.tsx:
Implemented react-router-dom to manage routing between the new pages (Scan, Custom Sheets, and About Us).
Added links in the navigation bar for better page-to-page navigation.
Components:
New Pages:
HomePage.tsx: Introduces the app and provides navigation options.
ScanPage.tsx: Includes the file upload section for grading and CSV file downloads.
Added a navigation bar to allow easy navigation between Home, Scan, Custom Sheets, and About Us pages.
CSS Styling:
Updated styling in App.css to provide a cleaner, responsive design that matches the new layout.