docs: Add UI documentation page on status icons (#2506)

### Changes
- Adds status icons page
- Moves action menus page to the UI development docs folder
- Fixes sentence fragment

frontend/docs/docs/develop/docs.md

@@ -41,7 +41,7 @@ First, change your working directory to `frontend/docs`. Then, to run the docs l
     Install and start the docs development server:
 
     ```sh
-    uvx --with mkdocs-material mkdocs serve
+    uvx --with mkdocs-material --with mkdocs-redirects mkdocs serve
     ```
 
 You can now view a local version of the docs at [localhost:8000](http://localhost:8000).

frontend/docs/docs/develop/ui/design-action-menus.md

@@ -8,7 +8,7 @@ We try to avoid surfacing navigation options in action menus as they are not tag
 
 Action menus should generally contain a consistent set of actions for a given object. Whereas new table rows symbolize horizontal separators, these actions should be ordered as follows:
 
-| Dropdown Actions                                                                                                                          |
+| Dropdown Action Order                                                                                                                          |
 | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | • Actions related only to the current page (eg: remove archived item from collection) |
 | • Actions related to editing the object (eg: edit workflow config, edit item metadata)<br>• Other actions related to the current object (eg: run crawl) |

frontend/docs/docs/develop/ui/design-status-icons.md

@@ -0,0 +1,20 @@
+# Status Icons
+
+Browsertrix uses a standard set of status icons to communicate success, neutral, and failure states throughout the app. Colors are used only to reinforce their distinct shapes which have been chosen so they remain accessible to those who may not be able to distinguish differences based on color alone.
+
+Status icons always use filled icon variants (when available), as opposed to buttons or actions which use strokes.
+
+When used without labels, status icons should include tooltips to provider further clarity as to what they indicate.
+
+## Implementation
+
+| Status | Description |
+| ---- | ---- |
+| <span class="status-empty">:bootstrap-slash-circle-fill: Empty</span> | Used for empty states where no data is present |
+| <span class="status-waiting">:bootstrap-hourglass-split: Waiting</span> | Used when a process is queued but has not started |
+| <span class="status-success">:btrix-status-dot: Running</span> | Used when a process is actively running, should always be animated |
+| <span class="status-success">:bootstrap-check-circle-fill: Success</span> | Used for positive / successful states |
+| <span class="status-neutral">:bootstrap-dash-square-fill: Neutral</span> | Used for ambiguous states, generally good but could be better  |
+| <span class="status-neutral">:bootstrap-exclamation-square-fill: Less Neutral</span> | Same as neutral but with more caveats |
+| <span class="status-warning">:bootstrap-x-octagon-fill: Warning</span> | Used for cautionary states and actions with caveats |
+| <span class="status-danger">:bootstrap-exclamation-triangle-fill: Severe</span> | Used for serious errors and actions that should be taken with extreme care |

frontend/docs/docs/overrides/.icons/bootstrap/slash-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-slash-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-4.646-2.646a.5.5 0 0 0-.708-.708l-6 6a.5.5 0 0 0 .708.708z"/>
+</svg>

frontend/docs/docs/stylesheets/extra.css

@@ -158,6 +158,15 @@ h3 {
 
 /* Status Styling */
 
+.status-empty {
+  font-family: var(--md-code-font);
+  font-weight: 500;
+  white-space: nowrap;
+  & svg {
+    color: rgb(119, 134, 145);
+  }
+}
+
 .status-success {
   font-family: var(--md-code-font);
   font-weight: 500;

frontend/docs/docs/user-guide/index.md

@@ -1,6 +1,6 @@
 # Welcome
 
-Browsertrix is an intuitive, automated web archiving system. Archive, replay, and share websites exactly as they were at a certain point in time.
+Browsertrix is an intuitive, automated web archiving platform designed to allow you to archive, replay, and share websites exactly as they were at a certain point in time.
 
 Browsertrix is built and hosted by [Webrecorder](https://webrecorder.net/), a leading expert in web archiving. Our goal is to make web archiving easier and more accessible to everyone through open source tools, easy-to-use interfaces, and community building.
 
@@ -12,4 +12,4 @@ For help with a specific topic, try our [community help forum](https://forum.web
 
 For bug reports or feature requests, please open a [GitHub issue](https://github.com/webrecorder/browsertrix/issues/new/choose).
 
-Thanks for choosing Browsertrix! Ready for [your first crawl](./getting-started.md)?
+Thanks for choosing Browsertrix! Ready for [your first crawl](./getting-started.md)?

frontend/docs/mkdocs.yml

@@ -96,7 +96,8 @@ nav:
         - develop/ui/components.md
         - develop/localization.md
         - Design:
-          - develop/design-action-menus.md
+          - develop/ui/design-action-menus.md
+          - develop/ui/design-status-icons.md
 
   - API Reference: !ENV [ API_DOCS_URL, "/api/" ]