PDF report styles do not match the design style guide

[natalia-muzyka]

Design: https://www.figma.com/file/VYuZ9vFaPfK6JnXeAXG8wW/Pre-SRC-Features?node-id=112%3A2248

PDF example: https://app.zenhub.com/files/103405139/11d1e5a4-9820-48fb-8419-dbcbf6d8d75d/download

Environment: https://admin-staging.mindlogger.org/ Win 10 / Chrome 103 user-stg@ml.com / 123456 config reports v9 / test A, test B, test C, test D Applet password: Qwe123!!!

[natalia-muzyka]

@astef021 was the fix deployed successfully? I don't see changes in margins, font size, font style, text color:

cc: @devbtech

Environment: https://admin-staging.mindlogger.org/ v0.17.16 Win 10 / Chrome 103 user-stg@ml.com / 123456 config reports v9 / test A, test B, test C, test D Applet password: Qwe123!!!

[natalia-muzyka]

Layout and fonts still do not match the design: https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/6bdf9d72-52d1-44ab-9f4b-de9942deb0bf)

Expected PDF layout and fonts:

• 8.5in x 11in size
• 150 dpi, canvas 1275px X 1650px
• 150px margins
• Section Spacing 16px (or the equivalent of 1x newline) between subcomponents (messages and printed items within a section or score section)
• Section spacing 32px (or the equivalent of 2x newline) between main components (section and score section)
• Base font and size Open Sans 18pt

Body report issues:

1 - selected response option text color doesn't match the design (#5d5e61 instead of #2F3033) https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/21418090-4875-4b3e-b38e-e73e8b717e21

2 - unfilled slider range and text response color don't match the design Expected: Unfilled slider range and text should be #E2E2E6 https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/3b5a65ff-bcb0-4b5a-9279-b629386f1bbc

3 - the unfilled text shows "null" instead of "The user did not enter a response" text https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/d3e29fc7-3e76-4501-af65-d745d10cc4f3

4 - text item is missing a vertical line on the left Expected: Vertical line should be 4px solid #E2E2E6 and have the same height as the text box https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/4e96cf65-04cf-44d7-997e-d84d30a48c11

General requirements for PDF report: https://www.figma.com/file/VYuZ9vFaPfK6JnXeAXG8wW/Pre-SRC-Features?node-id=257%3A4660

Requirements for printed items: https://www.figma.com/file/VYuZ9vFaPfK6JnXeAXG8wW/Pre-SRC-Features?node-id=201%3A2743

Environment: https://admin.mindlogger.org/ https://admin-staging.mindlogger.org/ prod account: test-user1@com.us qwerty my applet 4 / test A Applet password Qwe123!!!

[natalia-muzyka]

Report Summary styles issues (first page in the report):

Expected PDF layout:

• 8.5in x 11in size
• 150 dpi, canvas 1275px X 1650px
• 150px margins
• 32px h-padding, 24px v-padding
• 12px h-spacing between subtitle/section and alerts
• 24px h-spacing everywhere else

Expected PDF fonts:

• 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

5 - exclamation mark icon is missing on the flag score https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/44fc2808-e984-4ae2-908e-0944e5a5a343

6 - alerts background color doesn't match the design: #ecdfdf instead of #DC4C4C 10% https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/171f3cfc-3cd5-433b-98d5-8104bbe639da

7 - flag score background is #ffe2e2 instead of #FF8080 10% https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/a1c3230b-ac29-4b15-a397-dd90cfd60cb0

8 - border should be 1px solid #E0E0E0 https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/871832f4-5443-408e-b5c1-0a60fa241871

9 - score id calculations should be aligned vertically (centered) https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/912d3bcc-7e98-4940-a758-c86c80d36957

10 - flag score id calculation border-radius should be 100px + width 136px + height 46px + padding: 4px 0px https://images.zenhubusercontent.com/60ab57c8916945b978a3da92/22f158f0-ad96-490d-b532-fb7cff38810b

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