monaiuu
commented
1 year ago Summary & Handoff
As per the team's feedback, we need to update the typescale for input fields items on the bridge control cards. The updated heading 5 (20px) has been added to the design system to accommodate this change. As a result, the input fields need to be updated from body1 (16px), which was too small for visibility.
However, this update will create a collateral change in the confirmation and transaction progress screens, as the content will go out of bound of the control cards' length (700px). Therefore, we need to update the aforementioned screens to ensure that the content stays within bounds.
The proposed solution is to remove the chain diagram, which takes up a lot of space. This will enable us to retain all the important information for confirming the transactions in deposit, transfer, and withdrawal. The detailed updated changes have been documented below:
End-to-End Wireframes
Please refer to the latest updated wireframes for the update to typescale & confirmation screens. You may also view the prototype here.
Changes
- [ ] All input headings have been updated to
Body01 BOLD - [ ] All input items have been updated to
H5 BOLD - [ ] All fee details have been updated to
Body01 BOLD - [ ] Chain and Token list selection: Token and Chain Symbol
H5 BOLD; Token and Chain NameBody01 BOLD - [ ] Confirmation Screens have been updated in Deposit, Transfer, and Withdrawal (refer to wireframe)
- [ ] To accommodate for this update, added chain chips in the design system
Overview
Based on the team's feedback, we need to update the typescale for input fields items on the bridge control cards. The design system has updated heading 5 to 20px to accommodate for this change. Previously, the input fields were using body1 (16px) which was deemed as too small for visibility.
This update creates a collateral change to the length of content being out of bound of the control cards (700px) for the confirmation and transaction progress screens. Therefore, to implement this typescale update, it is required to also update the aforementioned screens so that the content stays within bound.
The proposed solution is to remove the chain diagram as it takes out too much space. This enables us to retain all the important information for confirming the transactions in deposit, transfer, and withdrawal.
Prototype & Result
Click HERE to view Prototype for Typescale Testing