Normalize & document icon usage, and move design documents into storybook

[emma-sg]

This PR is the result of investigating our usage of icons and colors across the app. This investigation is document in the first table “In Use (as of 2025-05-06)” on the Status Indicators page in Storybook, included as a screenshot below.

In Use (as of 2025-05-06)

I've then consolidated these uses with the previous version of the Status Icons document that @Shrinks99 wrote into a new Intended Implementation table, as seen below.

Intended Implementation

Finally, I updated icons across the app in places that were using different icons for the same meanings. Certain places (e.g. the superadmin org list) deviate from these norms, but I think this is okay — that implementation in particular is quite information-dense, so using a wider variety of icons and colors there works.

Finally finally, I moved both design docs from the public docs page into Storybook, as these more internally-facing design docs aren't particularly useful to end users.

Changes

• Updates status icons & colors in several places in the app
• Moves "Action Menus" and updated "Status Indicators" design docs from public docs to Storybook
  • [Storybook] Adds remark-gfm to enable tables in MDX
  • [Storybook] Adds a custom ColorSwatch block
  • [Browsertrix Docs] Swaps out custom colors and fonts included with docs for color variables from Hickory and Webrecorder CDN's hosted font files, respectively

Screenshots

[working on it]

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License

View full report