[UI] Report Summary screen styles issues

[natalia-muzyka]

Mobile & Tablets: 1 - alerts background color doesn't match the design: #ecdfdf instead of #DC4C4C 10% https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/1dadea35-8375-4cb9-a230-c118bd6a5275

2 - score id calculations should be aligned vertically (centered) https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/5e800b48-34c9-4c7f-a46d-73917f80d8d7

3 - border should be 1px solid #E0E0E0 https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/2d1ee373-6624-4757-9553-f1b7c7426a6e

4 - flag score background should be #FF8080 10% https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/bc1bee98-984e-448d-b853-aa9bf22cd907

5 - padding-top and padding-bottom within the activity block should be the same https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/5b92666b-6e60-421a-bbe7-88d5da7c8e57

Tablet style should be: Title - Open Sans (Regular) 40 / lh54 Section header - Open Sans (SemiBold) 24 / lh33 Body - Open Sans (Regular) 18 / lh25 Score (Unflagged) - Open Sans (Light) 28 / lh38 Score (Flagged) - Open Sans (Bold) 28 / lh38 Layout: 48px margins, 32px h-padding, 24px v-padding 12px h-spacing between subtitle/section and alerts 24px h-spacing everywhere else

Mobile style should be: Title - Open Sans (Regular) 32 / lh44 Section header - Open Sans (SemiBold) 18 / lh25 Body - Open Sans (Regular) 12 / lh16 Score (Unflagged) - Open Sans (Light) 16 / lh22 Score (Flagged) - Open Sans (Bold) 16 / lh22 Layout: 20px margins, 20px h-padding, 16px v-padding 12px h-spacing between subtitle/section and alerts 16px h-spacing everywhere else

Requirements for summary screen: https://www.figma.com/file/VYuZ9vFaPfK6JnXeAXG8wW/Pre-SRC-Features?node-id=458%3A5374

@WorldImpex do we have recommended font styles (size, weight, line height) for mobile?

Environment: ML v0.21.48 iPhone 7 // iOS 13.1.1 Google Pixel 5a // Android 11 prod account: test-user1@com.us / qwerty my applet 4 / Combined (flow) Applet password: Qwe123!!!

[WorldImpex]

yes I think we can get those requirements from this figma file

[natalia-muzyka]

@WorldImpex figma design looks more like a desktop report (PDF). I think the header in 40px, score id in 28px, alert titles in 24 px would be too large for mobile devices. Or I'm missing some additional layout, please, help.

[hotavocado]

@natalia-muzyka wow, thank you so much for the thorough QA, I'll create a layout that looks better on mobile and update the file, will you know when it's done.

[hotavocado]

@WorldImpex @natalia-muzyka I've updated the summary screen with style guides and layout for PDF, tablet, and mobile. I also added specs for the responsive components. See updated Figma file

[natalia-muzyka]

thank you, @hotavocado !