[HOLD for payment 2023-12-29] [HOLD for payment 2023-12-28] [Ideal Nav] Create components for the ideal nav

[mountiny]

Part of the Ideal Nav project https://github.com/Expensify/Expensify/issues/331721

You can find more detailed specifications and implantation ideas in the "Detailed implementation of the solution" section of the design doc.

As we work on the detailed section of the design doc, we already can work on the UI components and new parts of the App based on the agreed upon designs. @MaciejSWM is tackling these as we speak. The components/ pages we can already work on now are:

• Search Component
  

• Workspace Switcher Avatar with a Chevron
  

• Left Top Bar (LTB) which aligns and puts together the two components mentioned above and the user avatar
  

• The LHN header with Expensify woodmark / Chats (or Settings) and also option where there is filtered Workspace name instead
  
  
  Here is how it looks like with settings
  

• The updated LHN style where the hover is rounded and it has 12px padding from the left and right, you can see the radius and paddings and height in the Figma

- [ ] The Create workspace Card with button and the small plus button

• Created updated Account Settings option page with the same style of option rows as LHN (smaller), different order of items than currently (workspace related stuff is moved to workspace settings) and 2 subsections, Account and General

• Similarly, create the general Expensify Workspace settings page has three menu items. Subscriptions and Cards & Domains menu items link to the corresponding OldDot pages when clicked. There is a separate GH issue for implementing this linking behavior. Thus, you don't have to handle the callback behavior in this issue.

• (Doc) Workspace list in the Expensify settings, where user can choose what workspace to switch to and see settings off, here its the header of the columns (Workspace Name, Owner, Workspace Type) aligned with the styled rows below

• Create the Workspace Option Row component which is responsive so it changes based on the designs for appropriate layout on mobile

desktop:

mobile:

• Make the Create Workspace empty state page work in the wide view with the animation header. This already works in NewDot but its only in the RHP

cc @trjExpensify @JmillsExpensify @hayata-suenaga @MaciejSWM

[MaciejSWM]

Roger that @mountiny

[hayata-suenaga]

@MaciejSWM please feel free to break the issue to multiple PRs as the scope of this issue is huge. It will be much easier to review and track progress.

[mountiny]

Yeah definitely multiple PRs please