Frontend - Header Quick Menu

kevin-kasunic commented 1 year ago

Context

Users of the Grant Finder Tool want a way to easily access their "My Profile" user account and manage their team(s) no matter what screen they are currently on within either tool.

Current State

In the Grant Finder Tool, a Quick Menu current exists in the top ribbon, with limited fields available (see below).

The ARPA Reporter does not currently have a Quick Menu for users to adjust their user account or team information.

Open Questions

None

Future State (design)

The Grant Finder will have an improved Quick Menu that can be easily accessed from the top ribbon of the tool.
Desired Info/Fields within the Quick Menu are as follows:

(Display, Not Editable) Name/Initials/Team name (Display, Not Editable) My Profile -- this should go to the /my-profile page (Display, Not Editable) Give feedback --- should open this link in a new tab: https://form.jotform.com/212007960331041 (Display, Not Editable) Training Guide -- should open this link in a new tab https://go.usdigitalresponse.org/hubfs/Grants/USDR-Federal-Grants-Finder-User-Guide-Sep2023.pdf (Display, Not Editable) Sign out
Future State Mock Figma:

https://www.figma.com/file/gi975Am6lHBFbjCZeVBzb5/Settings?type=design&node-id=618-17726&mode=design&t=nF7VLubxCpnL5uWt-4

Within Figma see "Frame 84", AKA "Entry Point"

andreafalke4 commented 1 year ago

@kevin-kasunic file is updated here https://www.figma.com/file/gi975Am6lHBFbjCZeVBzb5/Settings?type=design&node-id=633%3A20155&mode=design&t=7Eg67RgOP8DovVC4-1.

Please let me know if there is anything missing or if dev has any additional needs within how I set up the file.

ClaireValdivia commented 1 year ago

NOTE - dependent on #1588 being completed - work can start on this one but will eventually need to be merged as both are working on header component

ifranch commented 12 months ago

Since this change was designed, there was a new dropdown option added for "Training Guide" in https://github.com/usdigitalresponse/usdr-gost/pull/1950. Should that stay in the future state, and if so should it be added to the mocks since each option has a different icon? @ClaireValdivia since I'm not too sure who is working on the design currently.

ClaireValdivia commented 12 months ago

Thanks for catching this, Ines! Yes, we want Training Guide to stay as a link. @caitlinwinner thoughts on an icon that can be used there for consistency?

caitlinwinner commented 12 months ago

for training guide, how about "book"

https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=634-17346&mode=design&t=WAFTgFxGCOJvvdi3-4

caitlinwinner commented 12 months ago

Looking in the figma design library, it says these are bootstrap icons @inesfranch

ClaireValdivia commented 11 months ago

tested and looks great in staging, matches design and decisions on new icons.

usdigitalresponse / usdr-gost