Multi Org Phase 1 - Header Global Component

[Luckette]

Multi Org - Header Global Component

User Story: Header Global Component As a user, I want to be able to see which account and org I'm on at all times and always be able to navigate to my user profile regardless of what screen I'm on.

ACs

• The header section (global component) displays the current account, org, and user profile icon.
• The header section and account/org dropdowns are global components that can be viewed on any screen
• Display additional icons near switch org and switch account as shown in the Figma. For example, the breadcrumb icon that shows org being lower in hierarchy than account.
• The "Upgrade Now" Button should be to the left of the User Profile icon in the header component
• The header component should be either black or transparent
• If the user is in light mode - which is allowed on the dashboard page - then the icons and text should be Dark Grey (consult design - Julia James for exact color)
• If the user is in regular standard dark mode, then the icons and text should be light grey and white respectively. (consult design - Julia James for exact color)

• In support of mobile, ensure the header component is responsive and fits mobile screens. Refer to the Figma file.

  Dev Notes

• We need to figure out the implementation of how to fetch the account and organization information.
  • Fetch on demand?
  • Fetch at load?
  • Or some combination?

[Luckette]

Note: @brandenTenbrink is working on this component in clockface. Please consult w/ him.

[Luckette]

@juliajames12 @brandenTenbrink @wdoconnell @hoorayimhelping - Who is creating this? Will it be a clockface component? why/why not?

FYI @kristinarobinson