Implement New UI Design for Customer Detail Data Overlay

[jjeroch]

Description: The customer detail data overlay that appears after clicking the detail button (arrow button) on the applicationRequests page needs to be updated to match the new UI design provided in the Figma link above.

URLs:

• Current Overlay: https://portal.dev.demo.catena-x.net/applicationRequests => next click on the detail arrow button of one of the registration to get to the overlay
• New UI Design: Figma Designs

Tasks:

1. Review the new UI design for the customer detail data overlay in the provided Figma link.
2. Locate the overlay implementation within the portal codebase.
3. Assess whether the changes can be made/has to be made within the existing portal code or if component-level modifications are required.
4. Determine the impact of the proposed changes on other areas of the product to ensure compatibility and consistency across the platform.
5. Update the overlay to match the new UI design, ensuring responsiveness and adherence to design specifications.
6. Conduct thorough testing to validate the implementation and ensure no regressions in the overlay functionality.

Acceptance Criteria:

• The customer detail data overlay matches the new UI design in Figma.
• The overlay is responsive and functions correctly across different screen sizes and devices.
• All functionalities of the overlay (e.g., buttons, links) work as expected without any regression.
• Code changes are tested and verified in the local and dev environment.

Additional Notes:

• Please consider the theme, colors, typography, and spacing guidelines as per the new design.

Potential Risks:

• Changes in the component code could affect other implementations that use similar components.

---

Design Reference:

[MaximilianHauer]

we identified that the size information is not present yet in the backend api. @kunalgaurav-bmw will add the "documentSize" variable that we are ready for the future as soon as the backend-api is adjusted. @kunalgaurav-bmw please be aware that the endpoint will deliver the size as byte meaning for mbyte/kbyte you would need to convert it.

[kunalgaurav-bmw]

Hi Team, I would like to inform that I am using the common header component "DialogHeader" which we using the same throughout the app, but the text design values in Figma are different.

Also want to add one more point that I have added the "documentSize" variable on frontend side it will be worked as soon as the backend-api is adjusted.