Design: Create Style Guide - Dialog Boxes, Modals, Accordions Tabs, Tooltips, Infoboxes

[yiranshan]

Overview

We need to create a Google deck of all the style guide pages on Figma and add a link to the wiki
This is a sub issue for Dialog Boxes, Modals, Accordions Tabs, Tooltips, Infoboxes

Action Items

• Finalize this section for design system
• update Style Guide Presentation

Resources/Instructions

• Google Slides Style Guide Presentation
• Link to style guide in Figma
• presentation format
• Wiki

[yiranshan]

1. Progress: edited notes from stakeholder
2. Blockers: not sure if the edits are correct
3. Availability: 4 hours next week
4. ETA: next week

[lbeatonn]

Emily's comment on Typography slide 7: "Are tool tips in the Paragraph 1 style?"

Resolved on Slide 8

[lbeatonn]

Emily's comment on Buttons slide 13: "At the top of the 2nd column, the "Edit Section" button is a style that we don't see outlined on the left of this slide. Please make sure there's an explanation of when to use that style, too."

Resolved on slide 14 with that button style removed

[lbeatonn]

Emily's comment on Icons slide 18: "I think there was recent discussion of changing the icon library... did that happen, and if so, are these all the new icons for the app?"

@marlenamellody changed the icons, but the status is Pending Approval from dev team

[lbeatonn]

Emily's comment on Tooltips slide 28

Resolved on Slide 29

[lbeatonn]

Emily's comment on Headers slide 37 "The Logged-in header may be the wrong image (it still says "Login")"

Resolved on Slide 38

[lbeatonn]

Added caption for tooltip in typography - Slide 9 is new slide Comment

[namigoeku]

https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit?disco=AAABPnC9w6w

[NilakshiS]

Added the different infoboxes currently on the dev site (as of 08/21/24) to the style guide:
Link to "Infoboxes" on Figma

Link to "Infoboxes - 2" on Figma

[NilakshiS]

Made the following changes to infoboxes to match the style guide prescribed typography and colors:

• Warning infobox: changed background color to "Error background" and title font to "Heading 1".
• Guide infobox: changed background color to "Greyscale/Light Gray", added a bottom padding.
• Target points infobox: changed font to "Paragraph" style.
• Points Notification infobox: Changed font to "Subheading" style, removed drop shadow, reduced container size to fit-content.

Link to "Infoboxes - iteration 2" on Figma

Link to "Infoboxes - 2 - iteration 2" on Figma

[NilakshiS]

Made the following changes to infoboxes:

• Added another example of points notification infobox
• Points Notification Infobox, target not acheived: Changed the color of warning icon to "Critical"
• Added another example of notification infobox, changed the text explanation

Link to "Infoboxes - 2 - iteration 2" on Figma

Added these to the style guide presentation: Link to the infoboxes slide

[ExperimentsInHonesty]

Changes accepted by stakeholder