HomePhabricator
Diffusion Comm a758ebb2e7bf

[web] Simplify `AppSwitcher` component and style tabs when active/on hover

Description

[web] Simplify AppSwitcher component and style tabs when active/on hover

Summary:
Simplify AppSwitcher layout by avoiding the use of unordered list (required some workarounds, overriding default styling, etc).

By simplifying the layout, we're able to properly style the app tabs when active/on hover.

Here's what it looks like:

Note: Yes I realize there's an "and" in the diff title. Intentionally breaking this rule and including both the refactor and styling in the same diff since they're closely related and I think it'll be easier to review. If I were to make a second diff with the active/hover styling it would literally just be adding:

div.appTab:hover p,
div.appTab:hover svg,
div.activeTab p,
div.activeTab svg {
  color: var(--fg);
  stroke: var(--fg);
  fill: var(--fg);
}

Test Plan: NA

Reviewers: def-au1t, palys-swm, varun, benschac

Reviewed By: palys-swm

Subscribers: ashoat, Adrian, karol-bisztyga

Differential Revision: https://phabricator.ashoat.com/D3363

Details

Provenance
atulAuthored on Mar 16 2022, 1:39 PM
Reviewer
tomek
Differential Revision
D3363: [web] Simplify `AppSwitcher` component and style tabs when active/on hover
Parents
rCOMM3c8d5dc7f722: Update `staff.json`
Branches
Unknown
Tags
Unknown