178 - Driver Summary Page UI Overhaul

[ishaansathaye]

Is your feature request related to a problem? Please describe.
The driver summary page user interface needs to be updated in regard to the nonprofit's specifications. As of now the page only shows the amount dropped off. However, the page needs to show the amount picked up, the amount dropped off, and the amount remaining in the truck. Finally, the "sign out" button should be a confirmation that the driver is agreeing that the total weight on the truck is correct. If not, there should be an error message that should tell them to go back to edit the logs.

Describe the steps you'd like a developer to take or the acceptance criteria

In frontend/src/Components/DriverSummary/DriverSummary.tsx and any CSS files if needed

• Try to convert the page to Tailwind CSS, but fine in Bootstrap if more comfortable
• Display the dropped off, picked up, and amount in truck weights on the page (can be in the format as the original page or can get creative with new formatting)
• Remove the discrepancy box and label
• Add confirmation for the sign-out button (driver agrees that the amount remaining in the truck is correct)
  • Maybe change the name of that button to "Confirm Punch Out"
• Add screen handling to the page (refer to other pages for examples)

Acceptance Criteria

• Screen Handling is added
• The page looks cleaned up with no CSS bugs
• Comments in the code as to what needs to be done on the page for future issues

Dependencies
n/a

Additional context

• This is a pure CSS task so getting the weights, checking the weights, error message, and routing will be done in another issue
• Routing means the back button and the final punch-out button do not need to do anything in this issue