While doing the design review of the PR related to the following issue Docs > Components > Modal: fix margin between text and buttons #1331, our design team found some problems with the current version of the modals. We now need to make modals complant with the new UI Kit v5.
Motivation and context
Modals with title and description - for mobile portrait
[ ] Modal title Font size too small. Should be 18px. Check against the Zelpin spec.
[ ] Line height for the description text is too large. Should be 24px.
[ ] Buttons should be stacked (one above the other) for mobile portrait breakpoint.
[ ] Title and description positioning need to move down 3px. Check the visual spec attached.
[ ] Spacing between description and buttons needs to be increased by 2px.
[ ] Spacing between the Button and bottom edge needs to be reduced by 2px.
[ ] Close button needs to move right 4px and up 4px.
Modal with scrolling - for mobile portrait
[ ] Modal title Font size is too small. Should be 18px. Check against the Zelpin spec.
[ ] Buttons should be stacked (one above the other) for mobile portrait breakpoint. Check the spacing values on the visual spec attached.
[ ] Height of the title area is too big. Reduce by 6px. Check the spacing values on the visual spec attached.
[ ] Line height for the description text is too small. Should be 24px.
Modals with title and description - for desktop and tablet
[ ] Modal title Font size is too small. Should be 20px. Check against the Zelpin spec.
[ ] Line height for the description text is too small. Should be 22px.
[ ] Spacing between the description text and buttons is too large. Should be 35px. Check the visual spec attached.
[ ] Close button needs to move right 4px and up 4px.
[ ] Spacing between the buttons and the edge of the modal is too large. Should be 20px on the right and the bottom. Check the visual spec attached.
Modal with scrolling - for desktop and tablet
[ ] Modal title Font size is too small. Should be 20px. Check against the Zelpin spec.
[ ] Height of the title area is too big. Reduce the height by 4px. Check the spacing values on the visual spec attached.
[ ] Line height for the description text is too small. Should be 24px
[ ] Height of the button area is too large. Reduce the height by 2px.
[ ] Spacing between the buttons and the edge of the modal is too large. Should be 20px on the right and the bottom. Check the visual spec attached.
Prerequisites
Proposal
While doing the design review of the PR related to the following issue Docs > Components > Modal: fix margin between text and buttons #1331, our design team found some problems with the current version of the modals. We now need to make modals complant with the new UI Kit v5.
Motivation and context
Modals with title and description - for mobile portrait
Modal with scrolling - for mobile portrait
Modals with title and description - for desktop and tablet
Modal with scrolling - for desktop and tablet