Implement design changes to tooltips and popovers

[NilakshiS]

Overview

Design team suggests changes to tooltips/popovers across the website to align better with the current design system. Implement these changes throughout the website.

Details

Details of style changes:

My Projects Page

Tooltips

• instances: Select a project message & Project does not belong to you message
  • background color: Grayscale / Light Gray #EEF1F4
  • outline: 1px solid Grayscale / Gray #939393
  • type style: Main Page Typography / Paragraph
  • drop shadow: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)
  • corner radius: 5px

Popovers

• instance: kebab menus in Table
  • outline: 1px solid Grayscale / Gray #939393
  • type style: Main Page Typography / Paragraph
  • text color (disabled actions): Grayscale / Medium Gray #CFCFCF
  • text color (destructive actions): Semantic Colors / Critical #C3391D
  • drop shadow: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)
  • corner radius: 5px

Create Project Pages

Warning Tooltips

• instance: Login warning message
  • background color: Semantic Colors / Tooltip BG #F9DFDA
  • outline: 1px solid Semantic Colors / Critical #C3391D
  • type style: Main Page Typography / Paragraph
  • text color: Grayscale / Black #000000
  • drop shadow: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)
  • icon size: 20px x 20px
  • close icon color: Grayscale / Gray #939393
  • corner radius: 5px

Popovers

• instances: Sidebar Help (aka. Sidebar Tooltip), Create Project Form Help
  • outline: 1px solid Grayscale / Gray #939393
  • type style: Main Page Typography / Paragraph
  • paragraph spacing: 12px
  • drop shadow: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3)
  • icon size: 20px x 20px
  • close icon color: Grayscale / Gray #939393
  • corner radius: 5px

Create Project Pages

Action Items

[ ADD DEV ACTION ITEMS ]

• Review with product and dev. Update if needed based on feedback
• Once finalized, add before and after images to the staging deck on this slide
  • if no slide has been made, make one in the staging deck
• Get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources/Instructions

• Design System: Differentiating Tooltips from Popovers #1916
• Link to issue on Figma
• Link to typography on style guide presentation

[ExperimentsInHonesty]

John said on 2024-12-19 that he would create new issues for this.