From 14d72805b3b9f36aa13adb6ec7278ad171fc0cff Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Thu, 31 Oct 2024 16:47:55 -0400
Subject: [PATCH 01/33] style: global pass to improve stylings.

---
 client/components/LogoutButton.tsx            |   2 +-
 client/components/edit/Breadcrumbs.tsx        |   3 +-
 client/components/edit/CopyPidButton.tsx      |   2 +-
 .../edit/ObjectButtonBar.module.css           |  14 +
 client/components/edit/ObjectButtonBar.tsx    |  40 +--
 .../components/edit/ObjectStatus.module.css   |  22 +-
 client/components/edit/ObjectStatus.tsx       |  29 ++-
 client/components/edit/children/Child.tsx     |  55 ++--
 .../edit/children/ChildList.module.css        |  50 +++-
 client/components/edit/children/ChildList.tsx |  78 +++---
 client/components/paginate/JobPaginator.tsx   |  37 +--
 .../components/paginate/PaginatorControls.tsx | 108 ++++----
 .../components/shared/Breadcrumbs.module.css  |   7 -
 client/package.json                           |   1 -
 client/pages/_app.tsx                         |  14 +-
 client/styles/client.css                      | 201 ---------------
 client/styles/global.css                      | 128 +++++++++
 client/styles/globals.css                     |  16 --
 client/styles/job-paginator.css               | 181 +++++++++++++
 client/styles/normalize.css                   |   2 -
 client/styles/object-editor.css               |   0
 client/styles/reset.css                       |   2 +
 client/styles/variables.css                   |  43 +++
 client/styles/vendor/colors-tailwindcss.css   | 244 ++++++++++++++++++
 client/styles/vendor/modern-normalize.css     |   3 +
 25 files changed, 899 insertions(+), 383 deletions(-)
 create mode 100644 client/components/edit/ObjectButtonBar.module.css
 delete mode 100644 client/styles/client.css
 create mode 100644 client/styles/global.css
 delete mode 100644 client/styles/globals.css
 create mode 100644 client/styles/job-paginator.css
 delete mode 100644 client/styles/normalize.css
 create mode 100644 client/styles/object-editor.css
 create mode 100644 client/styles/reset.css
 create mode 100644 client/styles/variables.css
 create mode 100644 client/styles/vendor/colors-tailwindcss.css
 create mode 100644 client/styles/vendor/modern-normalize.css

diff --git a/client/components/LogoutButton.tsx b/client/components/LogoutButton.tsx
index a5296cbf5..546a65003 100644
--- a/client/components/LogoutButton.tsx
+++ b/client/components/LogoutButton.tsx
@@ -14,7 +14,7 @@ const LogoutButton = (): React.ReactElement => {
     }, [token]);
     return showButton ? (
         <div className="logout">
-            <a href={logoutUrl} className="button" onClick={clearToken}>
+            <a href={logoutUrl} className="button btn-primary" onClick={clearToken}>
                 Log Out
             </a>
         </div>
diff --git a/client/components/edit/Breadcrumbs.tsx b/client/components/edit/Breadcrumbs.tsx
index 5b377c01c..b36a2da51 100644
--- a/client/components/edit/Breadcrumbs.tsx
+++ b/client/components/edit/Breadcrumbs.tsx
@@ -1,4 +1,3 @@
-import styles from "../shared/Breadcrumbs.module.css";
 import React, { useEffect, useState } from "react";
 import BasicBreadcrumbs from "../shared/BasicBreadcrumbs";
 import { TreeNode, processBreadcrumbData } from "../../util/Breadcrumbs";
@@ -71,7 +70,7 @@ const Breadcrumbs = ({ pid = null, initiallyShallow = true }: BreadcrumbsProps):
             </li>,
         );
         return (
-            <ul className={styles.breadcrumb} key={"breadcrumbs_" + keySuffix}>
+            <ul className="breadcrumbs" key={"breadcrumbs_" + keySuffix}>
                 {breadcrumbs}
             </ul>
         );
diff --git a/client/components/edit/CopyPidButton.tsx b/client/components/edit/CopyPidButton.tsx
index da3e36b83..05fd9086a 100644
--- a/client/components/edit/CopyPidButton.tsx
+++ b/client/components/edit/CopyPidButton.tsx
@@ -8,7 +8,7 @@ interface CopyPidButtonProps {
 const CopyPidButton = ({ pid }: CopyPidButtonProps): React.ReactElement => {
     return (
         <button onClick={() => navigator.clipboard.writeText(pid)}>
-            <ContentCopy style={{ height: "14px" }} titleAccess={`Copy PID (${pid}) to clipboard`} />
+            <ContentCopy titleAccess={`Copy PID (${pid}) to clipboard`} />
         </button>
     );
 };
diff --git a/client/components/edit/ObjectButtonBar.module.css b/client/components/edit/ObjectButtonBar.module.css
new file mode 100644
index 000000000..dec99aabd
--- /dev/null
+++ b/client/components/edit/ObjectButtonBar.module.css
@@ -0,0 +1,14 @@
+.objectBar {
+    display: grid;
+	grid-template-columns: repeat(4, 1fr);
+
+    & button {
+		width: 100%;
+        white-space: nowrap;
+	}
+
+	& button:not(:hover, :focus) {
+		border-color: transparent;
+		background-color: transparent;
+    }
+}
diff --git a/client/components/edit/ObjectButtonBar.tsx b/client/components/edit/ObjectButtonBar.tsx
index 75ac4d8a0..61212cfe1 100644
--- a/client/components/edit/ObjectButtonBar.tsx
+++ b/client/components/edit/ObjectButtonBar.tsx
@@ -1,31 +1,39 @@
 import React from "react";
+import styles from "./ObjectButtonBar.module.css";
+
 import { useEditorContext } from "../../context/EditorContext";
 import ObjectPreviewButton from "./ObjectPreviewButton";
 import ObjectStatus from "./ObjectStatus";
-import Refresh from "@mui/icons-material/Refresh";
 import EditParentsButton from "./EditParentsButton";
 import DeleteObjectButton from "./DeleteObjectButton";
 
+import RefreshIcon from "@mui/icons-material/Refresh";
+
 export interface ObjectButtonBarProps {
-    pid: string;
+	pid: string;
 }
 
 const ObjectButtonBar = ({ pid }: ObjectButtonBarProps): React.ReactElement => {
-    const {
-        action: { clearPidFromChildListStorage },
-    } = useEditorContext();
+	const {
+		action: { clearPidFromChildListStorage },
+	} = useEditorContext();
 
-    return (
-        <>
-            <ObjectStatus pid={pid} />
-            <EditParentsButton pid={pid} />
-            <button onClick={() => clearPidFromChildListStorage(pid)}>
-                <Refresh style={{ height: "14px" }} titleAccess="Refresh children" />
-            </button>
-            <ObjectPreviewButton pid={pid} />
-            <DeleteObjectButton pid={pid} />
-        </>
-    );
+	return (
+		<div className={styles.objectBar}>
+			<ObjectStatus pid={pid} />
+			<EditParentsButton pid={pid} />
+			<button
+				type="button"
+				className={styles.refreshBtn}
+				onClick={() => clearPidFromChildListStorage(pid)}
+				title="Refresh children"
+			>
+				<RefreshIcon /> Refresh
+			</button>
+			<ObjectPreviewButton pid={pid} />
+			<DeleteObjectButton pid={pid} />
+		</div>
+	);
 };
 
 export default ObjectButtonBar;
diff --git a/client/components/edit/ObjectStatus.module.css b/client/components/edit/ObjectStatus.module.css
index ad8cbe4ed..5b8b3a0ff 100644
--- a/client/components/edit/ObjectStatus.module.css
+++ b/client/components/edit/ObjectStatus.module.css
@@ -1,19 +1,27 @@
 .active .indicator {
-    color: green;
+    color: var(--object-status-active);
+}
+.active:is(:hover, :focus) .indicator {
+    color: var(--object-status-active-hover);
 }
 
 .inactive .indicator {
-    color: yellow;
+    color: var(--object-status-inactive);
+}
+.inactive:is(:hover, :focus) .indicator {
+    color: var(--object-status-inactive-hover);
 }
 
 .deleted .indicator {
-    color: red;
+    color: var(--object-status-deleted);
+}
+.deleted:is(:hover, :focus) .indicator {
+    color: var(--object-status-deleted-hover);
 }
 
 .unknown .indicator {
-    color: gray;
+    color: var(--object-status-unknown);
 }
-
-.indicator {
-    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
+.unknown:is(:hover, :focus) .indicator {
+    color: var(--object-status-unknown-hover);
 }
diff --git a/client/components/edit/ObjectStatus.tsx b/client/components/edit/ObjectStatus.tsx
index 3cbfe67ca..548d2e29e 100644
--- a/client/components/edit/ObjectStatus.tsx
+++ b/client/components/edit/ObjectStatus.tsx
@@ -1,13 +1,32 @@
-import styles from "./ObjectStatus.module.css";
 import React from "react";
+import styles from "./ObjectStatus.module.css";
+
 import { useGlobalContext } from "../../context/GlobalContext";
 import { useEditorContext } from "../../context/EditorContext";
 import ObjectLoader from "./ObjectLoader";
 
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import ModeStandbyIcon from '@mui/icons-material/ModeStandby';
+
 export interface ObjectStatusProps {
     pid: string;
 }
 
+function getStatusIcon(statusText: string) {
+	switch (statusText) {
+		case "Active":
+			return <CheckCircleIcon></CheckCircleIcon>;
+		case "Inactive":
+			return <ModeStandbyIcon></ModeStandbyIcon>;
+
+	}
+	return <HelpOutlineIcon></HelpOutlineIcon>;
+}
+const statusIcons = {
+	"Inactive": ModeStandbyIcon,
+};
+
 export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement => {
     const {
         action: { openModal },
@@ -19,15 +38,15 @@ export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement =>
     const loaded = Object.prototype.hasOwnProperty.call(objectDetailsStorage, pid);
     const details = loaded ? objectDetailsStorage[pid] : {};
 
-    const stateTxt = details.state ?? "Unknown";
+    const stateText = details.state ?? "Unknown";
     const clickAction = () => {
         setStateModalActivePid(pid);
         openModal("state");
     };
     const stateMsg = loaded ? (
-        <button onClick={clickAction} className={styles[stateTxt.toLowerCase()]}>
-            <span className={styles.indicator}>&#9673;</span>&nbsp;
-            {stateTxt}
+        <button onClick={clickAction} className={styles[stateText.toLowerCase()]}>
+            <span className={styles.indicator}>{getStatusIcon(stateText)}</span>&nbsp;
+            {stateText}
         </button>
     ) : (
         ""
diff --git a/client/components/edit/children/Child.tsx b/client/components/edit/children/Child.tsx
index c4e89458c..8d66d9c7f 100644
--- a/client/components/edit/children/Child.tsx
+++ b/client/components/edit/children/Child.tsx
@@ -1,4 +1,7 @@
 import React, { useState } from "react";
+
+import styles from "./ChildList.module.css";
+
 import { useEditorContext } from "../../../context/EditorContext";
 import ChildList from "./ChildList";
 import ChildPosition from "./ChildPosition";
@@ -35,13 +38,28 @@ export const Child = ({
         state: { objectDetailsStorage },
     } = useEditorContext();
     const [expanded, setExpanded] = useState<boolean>(false);
-    const loaded = Object.prototype.hasOwnProperty.call(objectDetailsStorage, pid);
+    const loaded = Object.prototype.hasOwnProperty.call(
+        objectDetailsStorage,
+        pid,
+    );
     const details = loaded ? objectDetailsStorage[pid] : {};
 
-    const title = !loaded ? initialTitle : extractFirstMetadataValue(details?.metadata ?? {}, "dc:title", "-");
+    const title = !loaded
+        ? initialTitle
+        : extractFirstMetadataValue(details?.metadata ?? {}, "dc:title", "-");
     const expandControl = (
         <span onClick={() => setExpanded(!expanded)}>
-            {expanded ? <IndeterminateCheckBox titleAccess="Collapse Tree" /> : <AddBox titleAccess="Expand Tree" />}
+            {expanded ? (
+                <IndeterminateCheckBox
+                    titleAccess="Collapse Tree"
+                    className={styles.childlist__expandicon}
+                />
+            ) : (
+                <AddBox
+                    titleAccess="Expand Tree"
+                    className={styles.childlist__expandicon}
+                />
+            )}
         </span>
     );
     const childList = expanded ? (
@@ -52,34 +70,41 @@ export const Child = ({
             forceModels={models}
             forceThumbs={thumbnail}
         />
-    ) : (
-        ""
-    );
+    ) : null;
     const hasExtraTools = thumbnail || models || showChildCounts;
     const extraTools = hasExtraTools ? (
-        <Grid item xs={1}>
+        <Grid item>
             {thumbnail ? <ObjectThumbnail pid={pid} /> : ""}
             {showChildCounts ? <ObjectChildCounts pid={pid} /> : ""}
             {models ? <ObjectModels pid={pid} /> : ""}
         </Grid>
     ) : null;
     return (
-        <>
-            <Grid container>
-                <Grid item xs={hasExtraTools ? 7 : 8}>
-                    {expandControl}
-                    {loaded && parentPid ? <ChildPosition pid={pid} parentPid={parentPid} /> : ""}
-                    <Link href={"/edit/object/" + pid}>{(title.length > 0 ? title : "-") + ` [${pid}]`}</Link>{" "}
+        <div className={styles.childlist__item}>
+            <Grid container spacing={2} alignItems="center">
+                <Grid item xs>
+                    {expandControl}{" "}
+                    {loaded && parentPid ? (
+                        <ChildPosition pid={pid} parentPid={parentPid} />
+                    ) : (
+                        ""
+                    )}
+                    <Link href={"/edit/object/" + pid}>{title || "(no title)"}</Link>
+                </Grid>
+                <Grid item xs={1} className={styles.childlist__pid}>
+                    {pid}
+                </Grid>
+                <Grid item xs={1}>
                     <CopyPidButton pid={pid} />
                 </Grid>
-                <Grid item xs={4}>
+                <Grid item xs="auto" style={{textAlign:"right"}}>
                     {loaded ? <ObjectButtonBar pid={pid} /> : ""}
                     <ObjectLoader pid={pid} />
                 </Grid>
                 {extraTools}
             </Grid>
             {childList}
-        </>
+        </div>
     );
 };
 
diff --git a/client/components/edit/children/ChildList.module.css b/client/components/edit/children/ChildList.module.css
index 7b13a2d4c..4e4035319 100644
--- a/client/components/edit/children/ChildList.module.css
+++ b/client/components/edit/children/ChildList.module.css
@@ -1,7 +1,53 @@
 .childlist {
+	padding-inline: 1rem;
+	padding-block: 1px;
+	background-color: var(--panel);
+}
+
+.childlist__list {
+    margin-block: 0;
+    padding-inline: 0;
     list-style-type: none;
 }
+.childlist__list > li {
+    margin-block: 0;
+    border-block-start: 1px solid var(--border);
+}
+
+.childlist__item {
+    margin-block: 0;
+    padding-block: 0.25rem;
+}
+
+.childlist__expandicon {
+	font-size: 1.5em;
+    vertical-align: bottom;
+	cursor: pointer;
+
+	&:hover,
+	&:focus {
+		color: var(--active);
+	}
+}
 
-.childlist li {
-    border-top: 1px solid gray;
+.childlist__pid {
+	font-family: var(--family-monospace);
+	text-align: end;
+	color: var(--text-muted);
+}
+
+/* Nested */
+
+.childlist__list .childlist {
+    margin-inline-start: 1rem;
+	padding-inline-end: 0;
+}
+
+/* Pagination alignment */
+
+.childlist .pagination {
+    margin-block-end: 1px;
+}
+.childlist .pagination li {
+    margin: 0;
 }
diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx
index 63f49c3ff..c44ac6c74 100644
--- a/client/components/edit/children/ChildList.tsx
+++ b/client/components/edit/children/ChildList.tsx
@@ -4,6 +4,7 @@ import { useEditorContext } from "../../../context/EditorContext";
 import Child from "./Child";
 import SelectableChild from "./SelectableChild";
 import CircularProgress from "@mui/material/CircularProgress";
+import Grid from "@mui/material/Grid";
 import Pagination from "@mui/material/Pagination";
 
 export interface ChildListProps {
@@ -30,7 +31,9 @@ export const ChildList = ({
     // Use session storage to remember the last page viewed across pages/history:
     const pageStorageKey = "child_page_" + pid;
     const initialPage: string | null =
-        typeof sessionStorage !== "undefined" ? sessionStorage.getItem(pageStorageKey) : null;
+        typeof sessionStorage !== "undefined"
+            ? sessionStorage.getItem(pageStorageKey)
+            : null;
     const [page, setPage] = useState<number>(parseInt(initialPage ?? "1"));
     if (typeof sessionStorage !== "undefined") {
         sessionStorage.setItem(pageStorageKey, page.toString());
@@ -88,34 +91,29 @@ export const ChildList = ({
                 {showThumbs ? "Hide Thumbnails" : "Show Thumbnails"}
             </button>
         ) : null;
-    const contents =
-        childDocs.length > 0 ? (
-            childDocs.map((child: Record<string, string>) => {
-                return (
-                    <li key={`${pid}_child_${child.id}`}>
-                        {selectCallback === false ? (
-                            <Child
-                                pid={child.id}
-                                parentPid={pid}
-                                initialTitle={child.title ?? "-"}
-                                thumbnail={forceThumbs ?? showThumbs}
-                                models={forceModels ?? showModels}
-                                showChildCounts={forceChildCounts ?? showChildCounts}
-                            />
-                        ) : (
-                            <SelectableChild
-                                pid={child.id}
-                                selectCallback={selectCallback}
-                                initialTitle={child.title ?? "-"}
-                                thumbnail={forceThumbs ?? showThumbs}
-                            />
-                        )}
-                    </li>
-                );
-            })
-        ) : (
-            <p>Empty.</p>
+    const contents = childDocs.map((child: Record<string, string>) => {
+        return (
+            <li key={`${pid}_child_${child.id}`}>
+                {selectCallback === false ? (
+                    <Child
+                        pid={child.id}
+                        parentPid={pid}
+                        initialTitle={child.title ?? "-"}
+                        thumbnail={forceThumbs ?? showThumbs}
+                        models={forceModels ?? showModels}
+                        showChildCounts={forceChildCounts ?? showChildCounts}
+                    />
+                ) : (
+                    <SelectableChild
+                        pid={child.id}
+                        selectCallback={selectCallback}
+                        initialTitle={child.title ?? "-"}
+                        thumbnail={forceThumbs ?? showThumbs}
+                    />
+                )}
+            </li>
         );
+    });
     const pageCount = Math.ceil(children.numFound / pageSize);
     const paginator =
         pageCount > 1 ? (
@@ -136,19 +134,25 @@ export const ChildList = ({
     const paginatorLabel =
         children.numFound > 1 ? (
             <p>
-                Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
+                Showing {startNumber} -{" "}
+                {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
                 {children.numFound}
             </p>
         ) : null;
     return (
-        <>
-            {thumbsButton}
-            {modelsButton}
-            {childButton}
-            {paginatorLabel}
-            {paginator}
-            <ul className={styles.childlist}>{contents}</ul>
-        </>
+        <div className={styles.childlist}>
+            <Grid container sx={{ spacing: 2, alignItems: "center" }}>
+                <Grid item xs="auto">
+                    {paginatorLabel}
+                </Grid>
+                <Grid item xs="auto">
+                    {paginator}
+                </Grid>
+            </Grid>
+            <ul className={styles.childlist__list}>
+                {contents.length ? contents : <em>Empty.</em>}
+            </ul>
+        </div>
     );
 };
 
diff --git a/client/components/paginate/JobPaginator.tsx b/client/components/paginate/JobPaginator.tsx
index 307611f49..8ec380881 100644
--- a/client/components/paginate/JobPaginator.tsx
+++ b/client/components/paginate/JobPaginator.tsx
@@ -1,8 +1,12 @@
-import React, { useEffect } from "react";
+import type React from "react";
+import { useEffect } from "react";
+
 import JobPaginatorZoomToggle from "./JobPaginatorZoomToggle";
 import PaginatorControls from "./PaginatorControls";
 import PaginatorList from "./PaginatorList";
 import { usePaginatorContext } from "../../context/PaginatorContext";
+
+import Grid from "@mui/material/Grid";
 import Link from "next/link";
 
 interface JobPaginatorProps {
@@ -21,21 +25,22 @@ const JobPaginator = ({ initialCategory, initialJob }: JobPaginatorProps): React
     }, []);
 
     return (
-        <div id="paginator">
-            <div className="row">
-                <div className="six col">
-                    <JobPaginatorZoomToggle />
-                </div>
-                <div className="six col">
-                    <p>
-                        <Link href="/">Main Menu</Link> &gt; <Link href="/paginate">Paginator</Link> &gt; {category}{" "}
-                        &gt; {job}
-                    </p>
-                    <PaginatorControls />
-                    <PaginatorList />
-                </div>
-            </div>
-        </div>
+		<>
+			<ul className="breadcrumbs" style={{ marginBlockEnd: 0 }}>
+				<li><Link href="/">Main Menu</Link></li>
+				<li><Link href="/paginate">Paginator</Link></li>
+				<li>{category}{" "}{job}</li>
+			</ul>
+			<Grid container id="paginator">
+				<Grid item xs={6}>
+					<JobPaginatorZoomToggle />
+				</Grid>
+				<Grid item xs={6}>
+					<PaginatorControls />
+					<PaginatorList />
+				</Grid>
+			</Grid>
+		</>
     );
 };
 
diff --git a/client/components/paginate/PaginatorControls.tsx b/client/components/paginate/PaginatorControls.tsx
index 57f0ee355..f888fcb07 100644
--- a/client/components/paginate/PaginatorControls.tsx
+++ b/client/components/paginate/PaginatorControls.tsx
@@ -6,6 +6,10 @@ import MagicLabeler from "../../util/MagicLabeler";
 import PaginatorControlGroup from "./PaginatorControlGroup";
 import ZoomToggleButton from "./ZoomToggleButton";
 
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+
 const PaginatorControls = (): React.ReactElement => {
     const {
         state: { currentPage, zoom, order },
@@ -36,39 +40,42 @@ const PaginatorControls = (): React.ReactElement => {
     } = usePaginatorControls(currentPage, getMagicLabel, setLabel);
     return pageCount > 0 ? (
         <div className="controls">
-            <div className="group">
-                <div className="status"></div>
-                <input type="text" value={getLabel(currentPage) ?? ""} id="page" onChange={updateCurrentPageLabel} />
-                <button onClick={prevPage}>Prev</button>
-                <button
-                    onClick={() => {
-                        approveCurrentPageLabel();
-                        nextPage();
-                    }}
-                >
-                    Next
-                </button>
-            </div>
-            <div className="top">
-                <ZoomToggleButton toggleZoom={toggleZoom} zoom={zoom} />
-                <button
-                    className="primary"
-                    onClick={() => {
-                        approveCurrentPageLabel();
-                        save(false);
-                    }}
-                >
-                    Save
-                </button>
-                <button
-                    className="primary"
-                    onClick={() => {
-                        approveCurrentPageLabel();
-                        save(true);
-                    }}
-                >
-                    Save and Publish
-                </button>
+            <div className="top-row">
+				<div className="top-row__left">
+					<input type="text" value={getLabel(currentPage) ?? ""} id="page" onChange={updateCurrentPageLabel} />
+					<button onClick={prevPage}>Prev</button>
+					<button
+						onClick={() => {
+							approveCurrentPageLabel();
+							nextPage();
+						}}
+					>
+						Next
+					</button>
+					<div className="status"></div>
+				</div>
+
+				<div className="top-row__right">
+					<ZoomToggleButton toggleZoom={toggleZoom} zoom={zoom} />
+					<button
+						className="btn-primary"
+						onClick={() => {
+							approveCurrentPageLabel();
+							save(false);
+						}}
+					>
+						Save
+					</button>
+					<button
+						className="btn-primary"
+						onClick={() => {
+							approveCurrentPageLabel();
+							save(true);
+						}}
+					>
+						Save and Publish
+					</button>
+				</div>
             </div>
             <PaginatorControlGroup callback={setLabelPrefix} label="prefixes">
                 {MagicLabeler.prefixes}
@@ -79,23 +86,26 @@ const PaginatorControls = (): React.ReactElement => {
             <PaginatorControlGroup callback={setLabelSuffix} label="suffixes">
                 {MagicLabeler.suffixes}
             </PaginatorControlGroup>
-            <div className="toggles group">
-                <button onClick={toggleBrackets} title="Toggle Brackets">
-                    [ ]
-                </button>
-                <button onClick={toggleCase} title="Toggle Case">
-                    <i className="fa fa-text-height"></i>
-                </button>
-                <button onClick={toggleRoman} title="Toggle Roman Numerals">
-                    4<i className="fa fa-fw fa-arrows-alt-h"></i>IV
-                </button>
+            <div className="group">
+				<div className="toggles">
+					<button onClick={toggleBrackets} title="Toggle Brackets">
+						[ ]
+					</button>
+					<button onClick={toggleCase} title="Toggle Case">
+						Aa
+					</button>
+					<button onClick={toggleRoman} title="Toggle Roman Numerals">
+						4<CompareArrowsIcon />IV
+					</button>
+					<button onClick={autonumberFollowingPages} title="Autonumber Following Pages">
+						<AutoFixHighIcon />
+					</button>
+				</div>
+
+				<button className="delete-btn" onClick={deletePage} title="Delete Current Page">
+					<DeleteForeverIcon /> Delete Current Page
+				</button>
             </div>
-            <button onClick={autonumberFollowingPages} title="Autonumber Following Pages">
-                <i className="fa fa-sort-numeric-down"></i>
-            </button>
-            <button className="danger" onClick={deletePage} title="Delete Current Page">
-                <i className="fa fa-fw fa-trash"></i> Delete Current Page
-            </button>
         </div>
     ) : (
         // No pages, only show save buttons:
diff --git a/client/components/shared/Breadcrumbs.module.css b/client/components/shared/Breadcrumbs.module.css
index 5e150d1de..e69de29bb 100644
--- a/client/components/shared/Breadcrumbs.module.css
+++ b/client/components/shared/Breadcrumbs.module.css
@@ -1,7 +0,0 @@
-.breadcrumb li {
-    display: inline;
-}
-
-.breadcrumb li:not(:first-child):before {
-    content: " > "
-}
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 1dab7bc5a..a80c10f70 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,7 +19,6 @@
   "dependencies": {
     "@date-io/dayjs": "^2",
     "@emotion/styled": "^11",
-    "@fortawesome/fontawesome-free": "^6",
     "@mui/icons-material": "^5",
     "@mui/lab": "^5.0.0-alpha.150",
     "@mui/material": "^5",
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
index 44e603ea5..ede7791f0 100644
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@@ -4,13 +4,17 @@ import { GlobalContextProvider } from "../context/GlobalContext";
 import { PaginatorContextProvider } from "../context/PaginatorContext";
 import { FetchContextProvider } from "../context/FetchContext";
 
-import "../styles/normalize.css";
-import "../styles/application.css";
-import "../styles/client.css";
-import "../styles/justgrid.css";
-import "@fortawesome/fontawesome-free/css/all.min.css";
 import LogoutButton from "../components/LogoutButton";
 
+import "../styles/vendor/modern-normalize.css";
+import "../styles/vendor/colors-tailwindcss.css";
+
+import "../styles/reset.css";
+import "../styles/variables.css";
+import "../styles/global.css";
+import "../styles/job-paginator.css";
+import "../styles/object-editor.css";
+
 function MyApp({ Component, pageProps }: { Component: React.ReactNode }): React.ReactElement {
     return (
         <GlobalContextProvider>
diff --git a/client/styles/client.css b/client/styles/client.css
deleted file mode 100644
index 4456f7797..000000000
--- a/client/styles/client.css
+++ /dev/null
@@ -1,201 +0,0 @@
-p {
-    padding: 0 12px;
-    width: 100%;
-    margin-bottom: 9px;
-}
-.controls {
-    margin-top: 0px;
-    padding: 0 8px;
-}
-.top {
-    position: absolute;
-    top: 41px;
-    right: 8px;
-}
-.top button {
-    margin: 0 2px;
-}
-
-.controls input,
-.status {
-    float: left;
-    margin-right: 4px;
-}
-input {
-    padding: 2px;
-    border: 1px solid #6a737d;
-    border-radius: 4px;
-}
-input:focus {
-    border-color: #2188ff;
-    outline-color: #2188ff;
-    box-shadow: 0 0 0 4px #c8e1ff;
-}
-.status {
-    padding: 0;
-    padding-top: 5px;
-}
-.group input[type="text"] {
-    height: auto;
-    margin-right: 3px;
-    padding: 6px;
-    border: 1px solid #53626f;
-    border-radius: 2px;
-}
-
-form {
-    max-width: 28rem;
-    margin: auto;
-    padding: 1rem;
-}
-label {
-    display: block;
-    padding: 1px 4px;
-    cursor: pointer;
-}
-label:hover {
-    background-color: #c8e1ff;
-}
-label input[type="text"],
-label input[type="number"],
-label input[type="password"] {
-    display: block;
-    width: 100%;
-    margin: 6px 0;
-    padding: 0.5rem 0.75rem;
-    font: inherit;
-}
-label input[type="checkbox"],
-label input[type="radio"] {
-    margin: 0 4px;
-    padding: 0.75rem;
-}
-
-.group {
-    display: block;
-    margin: 4px 2px;
-    margin-left: 0;
-    overflow: hidden;
-}
-.group button {
-    margin: 0;
-    border-right: 1px solid #ececec;
-    color: #fff;
-    border-radius: 0;
-}
-.group input[type="text"] + button,
-.group button:first-child {
-    border-radius: 4px 0 0 4px;
-}
-.group button:last-child {
-    border-right-width: 0;
-    border-radius: 0 4px 4px 0;
-}
-.toggles,
-.toggles + button {
-    display: inline-block;
-    margin-top: 0;
-    margin-right: 4px;
-    vertical-align: top;
-}
-.toggles button,
-.toggles + button {
-    padding: 5px 40px;
-    background-color: #7f8c8d;
-    border-color: #34495e;
-}
-.toggles button:hover,
-.toggles + button:hover,
-.toggles button:focus,
-.toggles + button:focus {
-    background-color: #53626f;
-}
-
-.group#prefixes button {
-    width: 25%;
-}
-.group#labels button {
-    width: 16.66%;
-}
-.group#suffixes button {
-    width: 25%;
-}
-
-.pageList {
-    overflow: auto;
-    height: 600px;
-    margin-top: 0.5rem;
-    margin-left: 8px;
-    padding: 4px;
-    padding-bottom: 400px;
-    border: 1px solid #c1c1c1;
-    background-color: #fff;
-    border-radius: 6px 0 0 6px;
-}
-.thumbnail {
-    position: relative;
-    float: left;
-    display: flex;
-    align-items: center;
-    width: 125px;
-    height: 202px;
-    margin: 2px;
-    padding: 4px;
-    background: #e1e1e1;
-    font-weight: 400;
-    text-align: center;
-    text-shadow: 0 1px 0 #fff;
-    cursor: pointer;
-    word-break: break-all;
-}
-.thumbnail.selected {
-    background: #51aded;
-}
-.thumbnail img {
-    display: block;
-    width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
-
-.thumbnail .label {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0.25em;
-    line-height: 1.15;
-}
-.thumbnail .label.magic {
-    font-style: italic;
-}
-.thumbnail .number {
-    position: absolute;
-    display: table;
-    top: 0;
-    left: 0;
-    padding: 2px;
-    font-size: 10px;
-    background: #fff;
-    color: #000;
-}
-.preview,
-#zoomy {
-    text-align: center;
-}
-#zoomy {
-    width: 100%;
-    height: 600px;
-}
-#zoomyStatus {
-    text-align: center;
-}
-
-.preview img {
-  border: 1px solid black;
-}
-
-.MuiTreeItem-root.Mui-selected,
-.MuiTreeItem-root.Mui-selected:hover {
-    color: #fff;
-    background-color: #000;
-}
diff --git a/client/styles/global.css b/client/styles/global.css
new file mode 100644
index 000000000..d63ff8ddd
--- /dev/null
+++ b/client/styles/global.css
@@ -0,0 +1,128 @@
+@layer reset {
+    body {
+        padding: 0;
+        font-family: var(--family-sans-serif);
+        line-height: 1.5;
+        background-color: var(--canvas);
+        color: var(--canvas-text);
+    }
+}
+
+@layer global {
+    h1 {
+        margin-block-start: 0;
+    }
+
+    h2,
+    h3,
+    h4 {
+        margin-block: 1em 1rem;
+    }
+
+    p,
+    ol,
+    ul {
+        margin-block: 1rem;
+    }
+
+    /* Focus Outlines */
+
+    :is(a, button, input, textarea, summary) {
+        --outline-size: max(2px, 0.08em);
+        --outline-style: solid;
+        --outline-color: currentColor;
+    }
+
+    /* fallback :focus styles for fallback purposes */
+    :is(a, button, input, textarea, summary):focus,
+    /* :focus-visible styles */
+    :is(a, button, input, textarea):focus-visible {
+		position: relative;
+        outline: var(--outline-size) var(--outline-style) var(--outline-color);
+        outline-offset: var(--outline-offset, var(--outline-size));
+		z-index: 100;
+    }
+
+    /* Remove fallback :focus styles when :focus-visible is available */
+    :is(a, button, input, textarea):focus:not(:focus-visible) {
+        outline: none;
+    }
+}
+
+@layer layout {
+    #__next {
+        position: relative;
+        margin: 0;
+        padding-inline: 1rem;
+        padding-block: 1px;
+    }
+
+    .logout {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+}
+
+@layer components {
+    .breadcrumbs {
+        width: fit-content;
+        margin-block: 1rem;
+        padding-inline: 1rem;
+        padding-block: 0.5rem;
+        font-size: 0.875rem;
+        list-style: none;
+        background-color: var(--panel);
+    }
+
+    .breadcrumbs li {
+        display: inline;
+    }
+
+    .breadcrumbs li:not(:first-child):before {
+        content: " > ";
+    }
+
+    button,
+    .button {
+        --outline-color: var(--button-text);
+
+        display: inline-block;
+        padding-inline: 1rem;
+        padding-block: 0.5rem;
+        color: var(--button-text);
+		line-height: normal;
+        text-decoration: none;
+        background-color: var(--button-face);
+        border: 1px solid var(--border);
+        border-radius: 0.25rem;
+        cursor: pointer;
+
+        &:hover {
+            color: var(--canvas);
+            background-color: var(--canvas-text);
+            border-color: var(--canvas-text);
+
+            --outline-color: var(--canvas-text);
+        }
+    }
+
+    .btn-primary {
+        color: var(--primary-text);
+        background-color: var(--primary);
+        border-color: var(--primary);
+
+        --outline-color: var(--primary);
+    }
+}
+
+/* MUI: better default icon size */
+svg.css-i4bv87-MuiSvgIcon-root {
+    font-size: 1em;
+    vertical-align: top;
+}
+
+/* MUI: modal */
+.css-tlc64q-MuiPaper-root-MuiDialog-paper {
+    background-color: var(--canvas);
+}
diff --git a/client/styles/globals.css b/client/styles/globals.css
deleted file mode 100644
index e5e2dcc23..000000000
--- a/client/styles/globals.css
+++ /dev/null
@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
diff --git a/client/styles/job-paginator.css b/client/styles/job-paginator.css
new file mode 100644
index 000000000..d339b10d9
--- /dev/null
+++ b/client/styles/job-paginator.css
@@ -0,0 +1,181 @@
+/* Layout */
+
+.controls {
+	font-size: 14px;
+}
+
+.pageList {
+    overflow: auto;
+    height: calc(100vh - 17rem);
+    margin-top: 0.5rem;
+    padding: 0.25rem;
+    padding-bottom: 400px;
+    border: 1px solid var(--border);
+    background-color: Canvas;
+    border-radius: 6px 0 0 6px;
+}
+
+.top-row {
+    display: flex;
+    width: 100%;
+    margin-block: 0.25rem;
+}
+.top-row__left {
+    display: flex;
+    flex: 1 1 0%;
+    gap: 0.25rem;
+}
+.top-row__right {
+    display: flex;
+    flex: 1 1 0%;
+    gap: 0.25rem;
+    justify-content: flex-end;
+}
+
+/* Components */
+
+input {
+    height: 100%;
+    padding-block: 0.25rem;
+    font: inherit;
+    border: 1px solid var(--border);
+    border-radius: 0.25rem;
+
+    --outline-color: var(--primary);
+}
+
+form {
+    max-width: 28rem;
+    margin: auto;
+    padding: 1rem;
+}
+label {
+    display: block;
+    padding: 1px 0.25rem;
+    cursor: pointer;
+}
+label:hover {
+    background-color: #c8e1ff;
+}
+label input[type="text"],
+label input[type="number"],
+label input[type="password"] {
+    display: block;
+    width: 100%;
+    margin: 6px 0;
+    padding: 0.5rem 0.75rem;
+    font: inherit;
+}
+label input[type="checkbox"],
+label input[type="radio"] {
+    margin: 0 0.25rem;
+    padding: 0.75rem;
+}
+
+.group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    margin-block: 0.25rem;
+}
+.group button {
+    width: 100%;
+    border-right-width: 0;
+    border-radius: 0;
+}
+.group button:first-child,
+.group input[type="text"] + button {
+    border-radius: 0.25rem 0 0 0.25rem;
+}
+.group button:last-child {
+    border-right-width: 1px;
+    border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.group:has(.toggles) {
+    gap: 0.25rem;
+}
+.toggles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+}
+.toggles button:not(:hover) {
+    color: var(--secondary-text);
+    background-color: var(--secondary);
+}
+
+.controls button.delete-btn {
+    border-radius: 0.25rem;
+
+    &:hover {
+        color: var(--danger-text);
+        background-color: var(--danger);
+        border-color: var(--danger-text);
+    }
+}
+
+.thumbnail {
+    position: relative;
+    float: left;
+    display: flex;
+    align-items: center;
+    width: 125px;
+    height: 202px;
+    margin: 2px;
+    padding: 0.25rem;
+    background-color: var(--panel);
+    font-weight: 400;
+    text-align: center;
+    cursor: pointer;
+    word-break: break-all;
+}
+.thumbnail.selected {
+    background-color: var(--selected);
+}
+.thumbnail img {
+    display: block;
+    width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.thumbnail .label {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0.25em;
+    line-height: 1.15;
+}
+.thumbnail .label.magic {
+    font-style: italic;
+}
+.thumbnail .number {
+    position: absolute;
+    display: table;
+    top: 0;
+    left: 0;
+    padding: 2px;
+	font-family: var(--family-monospace);
+    font-size: 10px;
+    background-color: Canvas;
+}
+.preview,
+#zoomy {
+    text-align: center;
+}
+#zoomy {
+    width: 100%;
+    height: 600px;
+}
+#zoomyStatus {
+    text-align: center;
+}
+
+.preview img {
+    border: 1px solid black;
+}
+
+.MuiTreeItem-root.Mui-selected,
+.MuiTreeItem-root.Mui-selected:hover {
+    color: #fff;
+    background-color: #000;
+}
diff --git a/client/styles/normalize.css b/client/styles/normalize.css
deleted file mode 100644
index 2e2610e91..000000000
--- a/client/styles/normalize.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
\ No newline at end of file
diff --git a/client/styles/object-editor.css b/client/styles/object-editor.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/styles/reset.css b/client/styles/reset.css
new file mode 100644
index 000000000..4a04e0ff1
--- /dev/null
+++ b/client/styles/reset.css
@@ -0,0 +1,2 @@
+@layer reset {
+}
diff --git a/client/styles/variables.css b/client/styles/variables.css
new file mode 100644
index 000000000..0480cc0c1
--- /dev/null
+++ b/client/styles/variables.css
@@ -0,0 +1,43 @@
+:root {
+    --canvas: var(--gray-50);
+    --canvas-text: var(--gray-900);
+    --panel: var(--gray-200);
+    --border: var(--gray-400);
+
+    --text-muted: var(--gray-600);
+
+    --family-sans-serif: system-ui, ui-sans-serif, sans-serif;
+    --family-serif: ui-serif, serif;
+    --family-monospace: ui-monospace, monospace;
+
+    --primary: var(--teal-700);
+    --primary-text: white;
+
+    --secondary: var(--gray-300);
+    --secondary-text: black;
+
+    --button-face: var(--gray-100);
+    --button-text: black;
+
+    --active: var(--red-800);
+    --active-text: white;
+
+	--selected: var(--sky-300);
+	--selected-text: black;
+
+    --success: var(--green-300);
+    --success-text: var(--green-900);
+
+    --danger: var(--red-200);
+    --danger-text: var(--red-950);
+
+    --object-status-active: var(--green-800);
+    --object-status-inactive: var(--yellow-800);
+    --object-status-deleted: var(--red-800);
+    --object-status-unknown: var(--gray-600);
+
+    --object-status-active-hover: var(--green-300);
+    --object-status-inactive-hover: var(--yellow-300);
+    --object-status-deleted-hover: var(--red-300);
+    --object-status-unknown-hover: var(--gray-300);
+}
diff --git a/client/styles/vendor/colors-tailwindcss.css b/client/styles/vendor/colors-tailwindcss.css
new file mode 100644
index 000000000..8ebafb1cb
--- /dev/null
+++ b/client/styles/vendor/colors-tailwindcss.css
@@ -0,0 +1,244 @@
+:root {
+	--slate-50: #f8fafc;
+	--slate-100: #f1f5f9;
+	--slate-200: #e2e8f0;
+	--slate-300: #cbd5e1;
+	--slate-400: #94a3b8;
+	--slate-500: #64748b;
+	--slate-600: #475569;
+	--slate-700: #334155;
+	--slate-800: #1e293b;
+	--slate-900: #0f172a;
+	--slate-950: #020617;
+	--gray-50: #f9fafb;
+	--gray-100: #f3f4f6;
+	--gray-200: #e5e7eb;
+	--gray-300: #d1d5db;
+	--gray-400: #9ca3af;
+	--gray-500: #6b7280;
+	--gray-600: #4b5563;
+	--gray-700: #374151;
+	--gray-800: #1f2937;
+	--gray-900: #111827;
+	--gray-950: #030712;
+	--zinc-50: #fafafa;
+	--zinc-100: #f4f4f5;
+	--zinc-200: #e4e4e7;
+	--zinc-300: #d4d4d8;
+	--zinc-400: #a1a1aa;
+	--zinc-500: #71717a;
+	--zinc-600: #52525b;
+	--zinc-700: #3f3f46;
+	--zinc-800: #27272a;
+	--zinc-900: #18181b;
+	--zinc-950: #09090b;
+	--neutral-50: #fafafa;
+	--neutral-100: #f5f5f5;
+	--neutral-200: #e5e5e5;
+	--neutral-300: #d4d4d4;
+	--neutral-400: #a3a3a3;
+	--neutral-500: #737373;
+	--neutral-600: #525252;
+	--neutral-700: #404040;
+	--neutral-800: #262626;
+	--neutral-900: #171717;
+	--neutral-950: #0a0a0a;
+	--stone-50: #fafaf9;
+	--stone-100: #f5f5f4;
+	--stone-200: #e7e5e4;
+	--stone-300: #d6d3d1;
+	--stone-400: #a8a29e;
+	--stone-500: #78716c;
+	--stone-600: #57534e;
+	--stone-700: #44403c;
+	--stone-800: #292524;
+	--stone-900: #1c1917;
+	--stone-950: #0c0a09;
+	--red-50: #fef2f2;
+	--red-100: #fee2e2;
+	--red-200: #fecaca;
+	--red-300: #fca5a5;
+	--red-400: #f87171;
+	--red-500: #ef4444;
+	--red-600: #dc2626;
+	--red-700: #b91c1c;
+	--red-800: #991b1b;
+	--red-900: #7f1d1d;
+	--red-950: #450a0a;
+	--orange-50: #fff7ed;
+	--orange-100: #ffedd5;
+	--orange-200: #fed7aa;
+	--orange-300: #fdba74;
+	--orange-400: #fb923c;
+	--orange-500: #f97316;
+	--orange-600: #ea580c;
+	--orange-700: #c2410c;
+	--orange-800: #9a3412;
+	--orange-900: #7c2d12;
+	--orange-950: #431407;
+	--amber-50: #fffbeb;
+	--amber-100: #fef3c7;
+	--amber-200: #fde68a;
+	--amber-300: #fcd34d;
+	--amber-400: #fbbf24;
+	--amber-500: #f59e0b;
+	--amber-600: #d97706;
+	--amber-700: #b45309;
+	--amber-800: #92400e;
+	--amber-900: #78350f;
+	--amber-950: #451a03;
+	--yellow-50: #fefce8;
+	--yellow-100: #fef9c3;
+	--yellow-200: #fef08a;
+	--yellow-300: #fde047;
+	--yellow-400: #facc15;
+	--yellow-500: #eab308;
+	--yellow-600: #ca8a04;
+	--yellow-700: #a16207;
+	--yellow-800: #854d0e;
+	--yellow-900: #713f12;
+	--yellow-950: #422006;
+	--lime-50: #f7fee7;
+	--lime-100: #ecfccb;
+	--lime-200: #d9f99d;
+	--lime-300: #bef264;
+	--lime-400: #a3e635;
+	--lime-500: #84cc16;
+	--lime-600: #65a30d;
+	--lime-700: #4d7c0f;
+	--lime-800: #3f6212;
+	--lime-900: #365314;
+	--lime-950: #1a2e05;
+	--green-50: #f0fdf4;
+	--green-100: #dcfce7;
+	--green-200: #bbf7d0;
+	--green-300: #86efac;
+	--green-400: #4ade80;
+	--green-500: #22c55e;
+	--green-600: #16a34a;
+	--green-700: #15803d;
+	--green-800: #166534;
+	--green-900: #14532d;
+	--green-950: #052e16;
+	--emerald-50: #ecfdf5;
+	--emerald-100: #d1fae5;
+	--emerald-200: #a7f3d0;
+	--emerald-300: #6ee7b7;
+	--emerald-400: #34d399;
+	--emerald-500: #10b981;
+	--emerald-600: #059669;
+	--emerald-700: #047857;
+	--emerald-800: #065f46;
+	--emerald-900: #064e3b;
+	--emerald-950: #022c22;
+	--teal-50: #f0fdfa;
+	--teal-100: #ccfbf1;
+	--teal-200: #99f6e4;
+	--teal-300: #5eead4;
+	--teal-400: #2dd4bf;
+	--teal-500: #14b8a6;
+	--teal-600: #0d9488;
+	--teal-700: #0f766e;
+	--teal-800: #115e59;
+	--teal-900: #134e4a;
+	--teal-950: #042f2e;
+	--cyan-50: #ecfeff;
+	--cyan-100: #cffafe;
+	--cyan-200: #a5f3fc;
+	--cyan-300: #67e8f9;
+	--cyan-400: #22d3ee;
+	--cyan-500: #06b6d4;
+	--cyan-600: #0891b2;
+	--cyan-700: #0e7490;
+	--cyan-800: #155e75;
+	--cyan-900: #164e63;
+	--cyan-950: #083344;
+	--sky-50: #f0f9ff;
+	--sky-100: #e0f2fe;
+	--sky-200: #bae6fd;
+	--sky-300: #7dd3fc;
+	--sky-400: #38bdf8;
+	--sky-500: #0ea5e9;
+	--sky-600: #0284c7;
+	--sky-700: #0369a1;
+	--sky-800: #075985;
+	--sky-900: #0c4a6e;
+	--sky-950: #082f49;
+	--blue-50: #eff6ff;
+	--blue-100: #dbeafe;
+	--blue-200: #bfdbfe;
+	--blue-300: #93c5fd;
+	--blue-400: #60a5fa;
+	--blue-500: #3b82f6;
+	--blue-600: #2563eb;
+	--blue-700: #1d4ed8;
+	--blue-800: #1e40af;
+	--blue-900: #1e3a8a;
+	--blue-950: #172554;
+	--indigo-50: #eef2ff;
+	--indigo-100: #e0e7ff;
+	--indigo-200: #c7d2fe;
+	--indigo-300: #a5b4fc;
+	--indigo-400: #818cf8;
+	--indigo-500: #6366f1;
+	--indigo-600: #4f46e5;
+	--indigo-700: #4338ca;
+	--indigo-800: #3730a3;
+	--indigo-900: #312e81;
+	--indigo-950: #1e1b4b;
+	--violet-50: #f5f3ff;
+	--violet-100: #ede9fe;
+	--violet-200: #ddd6fe;
+	--violet-300: #c4b5fd;
+	--violet-400: #a78bfa;
+	--violet-500: #8b5cf6;
+	--violet-600: #7c3aed;
+	--violet-700: #6d28d9;
+	--violet-800: #5b21b6;
+	--violet-900: #4c1d95;
+	--violet-950: #2e1065;
+	--purple-50: #faf5ff;
+	--purple-100: #f3e8ff;
+	--purple-200: #e9d5ff;
+	--purple-300: #d8b4fe;
+	--purple-400: #c084fc;
+	--purple-500: #a855f7;
+	--purple-600: #9333ea;
+	--purple-700: #7e22ce;
+	--purple-800: #6b21a8;
+	--purple-900: #581c87;
+	--purple-950: #3b0764;
+	--fuchsia-50: #fdf4ff;
+	--fuchsia-100: #fae8ff;
+	--fuchsia-200: #f5d0fe;
+	--fuchsia-300: #f0abfc;
+	--fuchsia-400: #e879f9;
+	--fuchsia-500: #d946ef;
+	--fuchsia-600: #c026d3;
+	--fuchsia-700: #a21caf;
+	--fuchsia-800: #86198f;
+	--fuchsia-900: #701a75;
+	--fuchsia-950: #4a044e;
+	--pink-50: #fdf2f8;
+	--pink-100: #fce7f3;
+	--pink-200: #fbcfe8;
+	--pink-300: #f9a8d4;
+	--pink-400: #f472b6;
+	--pink-500: #ec4899;
+	--pink-600: #db2777;
+	--pink-700: #be185d;
+	--pink-800: #9d174d;
+	--pink-900: #831843;
+	--pink-950: #500724;
+	--rose-50: #fff1f2;
+	--rose-100: #ffe4e6;
+	--rose-200: #fecdd3;
+	--rose-300: #fda4af;
+	--rose-400: #fb7185;
+	--rose-500: #f43f5e;
+	--rose-600: #e11d48;
+	--rose-700: #be123c;
+	--rose-800: #9f1239;
+	--rose-900: #881337;
+	--rose-950: #4c0519;
+}
diff --git a/client/styles/vendor/modern-normalize.css b/client/styles/vendor/modern-normalize.css
new file mode 100644
index 000000000..6a6c49108
--- /dev/null
+++ b/client/styles/vendor/modern-normalize.css
@@ -0,0 +1,3 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
+/*# sourceMappingURL=/sm/d2d8cd206fb9f42f071e97460f3ad9c875edb5e7a4b10f900a83cdf8401c53a9.map */

From 64fdf670a6c759b6acaef897e55d8c97b2c376a2 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Mon, 4 Nov 2024 13:48:51 -0500
Subject: [PATCH 02/33] chore: client:format

---
 client/components/edit/ObjectButtonBar.tsx    |  40 +++---
 client/components/edit/ObjectStatus.tsx       |  24 ++--
 client/components/edit/children/Child.tsx     |  28 +----
 client/components/edit/children/ChildList.tsx |  20 +--
 client/components/paginate/JobPaginator.tsx   |  38 +++---
 .../components/paginate/PaginatorControls.tsx | 114 +++++++++---------
 6 files changed, 130 insertions(+), 134 deletions(-)

diff --git a/client/components/edit/ObjectButtonBar.tsx b/client/components/edit/ObjectButtonBar.tsx
index 61212cfe1..b80572669 100644
--- a/client/components/edit/ObjectButtonBar.tsx
+++ b/client/components/edit/ObjectButtonBar.tsx
@@ -10,30 +10,30 @@ import DeleteObjectButton from "./DeleteObjectButton";
 import RefreshIcon from "@mui/icons-material/Refresh";
 
 export interface ObjectButtonBarProps {
-	pid: string;
+    pid: string;
 }
 
 const ObjectButtonBar = ({ pid }: ObjectButtonBarProps): React.ReactElement => {
-	const {
-		action: { clearPidFromChildListStorage },
-	} = useEditorContext();
+    const {
+        action: { clearPidFromChildListStorage },
+    } = useEditorContext();
 
-	return (
-		<div className={styles.objectBar}>
-			<ObjectStatus pid={pid} />
-			<EditParentsButton pid={pid} />
-			<button
-				type="button"
-				className={styles.refreshBtn}
-				onClick={() => clearPidFromChildListStorage(pid)}
-				title="Refresh children"
-			>
-				<RefreshIcon /> Refresh
-			</button>
-			<ObjectPreviewButton pid={pid} />
-			<DeleteObjectButton pid={pid} />
-		</div>
-	);
+    return (
+        <div className={styles.objectBar}>
+            <ObjectStatus pid={pid} />
+            <EditParentsButton pid={pid} />
+            <button
+                type="button"
+                className={styles.refreshBtn}
+                onClick={() => clearPidFromChildListStorage(pid)}
+                title="Refresh children"
+            >
+                <RefreshIcon /> Refresh
+            </button>
+            <ObjectPreviewButton pid={pid} />
+            <DeleteObjectButton pid={pid} />
+        </div>
+    );
 };
 
 export default ObjectButtonBar;
diff --git a/client/components/edit/ObjectStatus.tsx b/client/components/edit/ObjectStatus.tsx
index 548d2e29e..89503b81c 100644
--- a/client/components/edit/ObjectStatus.tsx
+++ b/client/components/edit/ObjectStatus.tsx
@@ -5,27 +5,23 @@ import { useGlobalContext } from "../../context/GlobalContext";
 import { useEditorContext } from "../../context/EditorContext";
 import ObjectLoader from "./ObjectLoader";
 
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import ModeStandbyIcon from '@mui/icons-material/ModeStandby';
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import ModeStandbyIcon from "@mui/icons-material/ModeStandby";
 
 export interface ObjectStatusProps {
     pid: string;
 }
 
 function getStatusIcon(statusText: string) {
-	switch (statusText) {
-		case "Active":
-			return <CheckCircleIcon></CheckCircleIcon>;
-		case "Inactive":
-			return <ModeStandbyIcon></ModeStandbyIcon>;
-
-	}
-	return <HelpOutlineIcon></HelpOutlineIcon>;
+    switch (statusText) {
+        case "Active":
+            return <CheckCircleIcon></CheckCircleIcon>;
+        case "Inactive":
+            return <ModeStandbyIcon></ModeStandbyIcon>;
+    }
+    return <HelpOutlineIcon></HelpOutlineIcon>;
 }
-const statusIcons = {
-	"Inactive": ModeStandbyIcon,
-};
 
 export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement => {
     const {
diff --git a/client/components/edit/children/Child.tsx b/client/components/edit/children/Child.tsx
index 8d66d9c7f..031000b25 100644
--- a/client/components/edit/children/Child.tsx
+++ b/client/components/edit/children/Child.tsx
@@ -38,27 +38,16 @@ export const Child = ({
         state: { objectDetailsStorage },
     } = useEditorContext();
     const [expanded, setExpanded] = useState<boolean>(false);
-    const loaded = Object.prototype.hasOwnProperty.call(
-        objectDetailsStorage,
-        pid,
-    );
+    const loaded = Object.prototype.hasOwnProperty.call(objectDetailsStorage, pid);
     const details = loaded ? objectDetailsStorage[pid] : {};
 
-    const title = !loaded
-        ? initialTitle
-        : extractFirstMetadataValue(details?.metadata ?? {}, "dc:title", "-");
+    const title = !loaded ? initialTitle : extractFirstMetadataValue(details?.metadata ?? {}, "dc:title", "-");
     const expandControl = (
         <span onClick={() => setExpanded(!expanded)}>
             {expanded ? (
-                <IndeterminateCheckBox
-                    titleAccess="Collapse Tree"
-                    className={styles.childlist__expandicon}
-                />
+                <IndeterminateCheckBox titleAccess="Collapse Tree" className={styles.childlist__expandicon} />
             ) : (
-                <AddBox
-                    titleAccess="Expand Tree"
-                    className={styles.childlist__expandicon}
-                />
+                <AddBox titleAccess="Expand Tree" className={styles.childlist__expandicon} />
             )}
         </span>
     );
@@ -83,12 +72,7 @@ export const Child = ({
         <div className={styles.childlist__item}>
             <Grid container spacing={2} alignItems="center">
                 <Grid item xs>
-                    {expandControl}{" "}
-                    {loaded && parentPid ? (
-                        <ChildPosition pid={pid} parentPid={parentPid} />
-                    ) : (
-                        ""
-                    )}
+                    {expandControl} {loaded && parentPid ? <ChildPosition pid={pid} parentPid={parentPid} /> : ""}
                     <Link href={"/edit/object/" + pid}>{title || "(no title)"}</Link>
                 </Grid>
                 <Grid item xs={1} className={styles.childlist__pid}>
@@ -97,7 +81,7 @@ export const Child = ({
                 <Grid item xs={1}>
                     <CopyPidButton pid={pid} />
                 </Grid>
-                <Grid item xs="auto" style={{textAlign:"right"}}>
+                <Grid item xs="auto" style={{ textAlign: "right" }}>
                     {loaded ? <ObjectButtonBar pid={pid} /> : ""}
                     <ObjectLoader pid={pid} />
                 </Grid>
diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx
index c44ac6c74..e0f2869f1 100644
--- a/client/components/edit/children/ChildList.tsx
+++ b/client/components/edit/children/ChildList.tsx
@@ -31,9 +31,7 @@ export const ChildList = ({
     // Use session storage to remember the last page viewed across pages/history:
     const pageStorageKey = "child_page_" + pid;
     const initialPage: string | null =
-        typeof sessionStorage !== "undefined"
-            ? sessionStorage.getItem(pageStorageKey)
-            : null;
+        typeof sessionStorage !== "undefined" ? sessionStorage.getItem(pageStorageKey) : null;
     const [page, setPage] = useState<number>(parseInt(initialPage ?? "1"));
     if (typeof sessionStorage !== "undefined") {
         sessionStorage.setItem(pageStorageKey, page.toString());
@@ -134,14 +132,22 @@ export const ChildList = ({
     const paginatorLabel =
         children.numFound > 1 ? (
             <p>
-                Showing {startNumber} -{" "}
-                {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
+                Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
                 {children.numFound}
             </p>
         ) : null;
     return (
         <div className={styles.childlist}>
             <Grid container sx={{ spacing: 2, alignItems: "center" }}>
+                <Grid item xs="auto">
+                    {thumbsButton}
+                </Grid>
+                <Grid item xs="auto">
+                    {modelsButton}
+                </Grid>
+                <Grid item xs="auto">
+                    {childButton}
+                </Grid>
                 <Grid item xs="auto">
                     {paginatorLabel}
                 </Grid>
@@ -149,9 +155,7 @@ export const ChildList = ({
                     {paginator}
                 </Grid>
             </Grid>
-            <ul className={styles.childlist__list}>
-                {contents.length ? contents : <em>Empty.</em>}
-            </ul>
+            <ul className={styles.childlist__list}>{contents.length ? contents : <em>Empty.</em>}</ul>
         </div>
     );
 };
diff --git a/client/components/paginate/JobPaginator.tsx b/client/components/paginate/JobPaginator.tsx
index 8ec380881..fdb7cbfd1 100644
--- a/client/components/paginate/JobPaginator.tsx
+++ b/client/components/paginate/JobPaginator.tsx
@@ -25,22 +25,28 @@ const JobPaginator = ({ initialCategory, initialJob }: JobPaginatorProps): React
     }, []);
 
     return (
-		<>
-			<ul className="breadcrumbs" style={{ marginBlockEnd: 0 }}>
-				<li><Link href="/">Main Menu</Link></li>
-				<li><Link href="/paginate">Paginator</Link></li>
-				<li>{category}{" "}{job}</li>
-			</ul>
-			<Grid container id="paginator">
-				<Grid item xs={6}>
-					<JobPaginatorZoomToggle />
-				</Grid>
-				<Grid item xs={6}>
-					<PaginatorControls />
-					<PaginatorList />
-				</Grid>
-			</Grid>
-		</>
+        <>
+            <ul className="breadcrumbs" style={{ marginBlockEnd: 0 }}>
+                <li>
+                    <Link href="/">Main Menu</Link>
+                </li>
+                <li>
+                    <Link href="/paginate">Paginator</Link>
+                </li>
+                <li>
+                    {category} {job}
+                </li>
+            </ul>
+            <Grid container id="paginator">
+                <Grid item xs={6}>
+                    <JobPaginatorZoomToggle />
+                </Grid>
+                <Grid item xs={6}>
+                    <PaginatorControls />
+                    <PaginatorList />
+                </Grid>
+            </Grid>
+        </>
     );
 };
 
diff --git a/client/components/paginate/PaginatorControls.tsx b/client/components/paginate/PaginatorControls.tsx
index f888fcb07..1972cb1d2 100644
--- a/client/components/paginate/PaginatorControls.tsx
+++ b/client/components/paginate/PaginatorControls.tsx
@@ -6,9 +6,9 @@ import MagicLabeler from "../../util/MagicLabeler";
 import PaginatorControlGroup from "./PaginatorControlGroup";
 import ZoomToggleButton from "./ZoomToggleButton";
 
-import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
-import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
+import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
 
 const PaginatorControls = (): React.ReactElement => {
     const {
@@ -41,41 +41,46 @@ const PaginatorControls = (): React.ReactElement => {
     return pageCount > 0 ? (
         <div className="controls">
             <div className="top-row">
-				<div className="top-row__left">
-					<input type="text" value={getLabel(currentPage) ?? ""} id="page" onChange={updateCurrentPageLabel} />
-					<button onClick={prevPage}>Prev</button>
-					<button
-						onClick={() => {
-							approveCurrentPageLabel();
-							nextPage();
-						}}
-					>
-						Next
-					</button>
-					<div className="status"></div>
-				</div>
+                <div className="top-row__left">
+                    <input
+                        type="text"
+                        value={getLabel(currentPage) ?? ""}
+                        id="page"
+                        onChange={updateCurrentPageLabel}
+                    />
+                    <button onClick={prevPage}>Prev</button>
+                    <button
+                        onClick={() => {
+                            approveCurrentPageLabel();
+                            nextPage();
+                        }}
+                    >
+                        Next
+                    </button>
+                    <div className="status"></div>
+                </div>
 
-				<div className="top-row__right">
-					<ZoomToggleButton toggleZoom={toggleZoom} zoom={zoom} />
-					<button
-						className="btn-primary"
-						onClick={() => {
-							approveCurrentPageLabel();
-							save(false);
-						}}
-					>
-						Save
-					</button>
-					<button
-						className="btn-primary"
-						onClick={() => {
-							approveCurrentPageLabel();
-							save(true);
-						}}
-					>
-						Save and Publish
-					</button>
-				</div>
+                <div className="top-row__right">
+                    <ZoomToggleButton toggleZoom={toggleZoom} zoom={zoom} />
+                    <button
+                        className="btn-primary"
+                        onClick={() => {
+                            approveCurrentPageLabel();
+                            save(false);
+                        }}
+                    >
+                        Save
+                    </button>
+                    <button
+                        className="btn-primary"
+                        onClick={() => {
+                            approveCurrentPageLabel();
+                            save(true);
+                        }}
+                    >
+                        Save and Publish
+                    </button>
+                </div>
             </div>
             <PaginatorControlGroup callback={setLabelPrefix} label="prefixes">
                 {MagicLabeler.prefixes}
@@ -87,24 +92,25 @@ const PaginatorControls = (): React.ReactElement => {
                 {MagicLabeler.suffixes}
             </PaginatorControlGroup>
             <div className="group">
-				<div className="toggles">
-					<button onClick={toggleBrackets} title="Toggle Brackets">
-						[ ]
-					</button>
-					<button onClick={toggleCase} title="Toggle Case">
-						Aa
-					</button>
-					<button onClick={toggleRoman} title="Toggle Roman Numerals">
-						4<CompareArrowsIcon />IV
-					</button>
-					<button onClick={autonumberFollowingPages} title="Autonumber Following Pages">
-						<AutoFixHighIcon />
-					</button>
-				</div>
+                <div className="toggles">
+                    <button onClick={toggleBrackets} title="Toggle Brackets">
+                        [ ]
+                    </button>
+                    <button onClick={toggleCase} title="Toggle Case">
+                        Aa
+                    </button>
+                    <button onClick={toggleRoman} title="Toggle Roman Numerals">
+                        4<CompareArrowsIcon />
+                        IV
+                    </button>
+                    <button onClick={autonumberFollowingPages} title="Autonumber Following Pages">
+                        <AutoFixHighIcon />
+                    </button>
+                </div>
 
-				<button className="delete-btn" onClick={deletePage} title="Delete Current Page">
-					<DeleteForeverIcon /> Delete Current Page
-				</button>
+                <button className="delete-btn" onClick={deletePage} title="Delete Current Page">
+                    <DeleteForeverIcon /> Delete Current Page
+                </button>
             </div>
         </div>
     ) : (

From dc8ce5e2147c1f2352dfa140d739f5ae91b746e1 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Mon, 4 Nov 2024 15:03:18 -0500
Subject: [PATCH 03/33] style: reduce and unify color palette

---
 .../components/edit/ObjectSummary.module.css  |  24 +++-
 client/components/edit/ObjectSummary.tsx      |   5 +-
 client/components/edit/children/Child.tsx     |   4 +-
 .../edit/children/ChildList.module.css        |   1 +
 client/components/edit/children/ChildList.tsx |  10 +-
 .../edit/datastream/Datastream.module.css     |   5 +-
 client/components/shared/BasicBreadcrumbs.tsx |   3 +-
 .../components/shared/Breadcrumbs.module.css  |   0
 client/styles/Home.module.css                 | 116 ------------------
 client/styles/application.css                 | 101 ---------------
 client/styles/global.css                      |   3 +-
 client/styles/job-paginator.css               |  10 +-
 client/styles/variables.css                   |  37 ++++--
 13 files changed, 67 insertions(+), 252 deletions(-)
 delete mode 100644 client/components/shared/Breadcrumbs.module.css
 delete mode 100644 client/styles/Home.module.css
 delete mode 100644 client/styles/application.css

diff --git a/client/components/edit/ObjectSummary.module.css b/client/components/edit/ObjectSummary.module.css
index 92a31470e..8789f99f0 100644
--- a/client/components/edit/ObjectSummary.module.css
+++ b/client/components/edit/ObjectSummary.module.css
@@ -1,9 +1,25 @@
 .infobox {
-    background-color: lightgray;
-    border: 1px solid black;
-    padding: 5px;
+	padding-inline: clamp(1rem, 5%, 3rem);
+    padding-block: 1rem;
+	color: var(--info-text);
+    background-color: var(--info);
 }
 
 .infobox h2 {
     margin: 0;
-}
\ No newline at end of file
+}
+
+.infobox.infobox button {
+	width: auto;
+	margin-inline-end: 1rem;
+	margin-block-end: 1rem;
+	color: var(--button-text);
+	background-color: var(--button-face);
+	border-color: var(--info-text);
+
+	&:hover, &:focus {
+		color: var(--button-hover-text);
+		background-color: var(--button-hover);
+		border-color: var(--button-hover);
+	}
+}
diff --git a/client/components/edit/ObjectSummary.tsx b/client/components/edit/ObjectSummary.tsx
index 2801f8e76..2130935b1 100644
--- a/client/components/edit/ObjectSummary.tsx
+++ b/client/components/edit/ObjectSummary.tsx
@@ -1,7 +1,8 @@
-import styles from "./ObjectSummary.module.css";
-import CopyPidButton from "./CopyPidButton";
 import React, { useEffect } from "react";
 import HtmlReactParser from "html-react-parser";
+
+import styles from "./ObjectSummary.module.css";
+import CopyPidButton from "./CopyPidButton";
 import { useEditorContext } from "../../context/EditorContext";
 import ObjectButtonBar from "./ObjectButtonBar";
 import ObjectModels from "./ObjectModels";
diff --git a/client/components/edit/children/Child.tsx b/client/components/edit/children/Child.tsx
index 031000b25..c3657bcee 100644
--- a/client/components/edit/children/Child.tsx
+++ b/client/components/edit/children/Child.tsx
@@ -75,17 +75,17 @@ export const Child = ({
                     {expandControl} {loaded && parentPid ? <ChildPosition pid={pid} parentPid={parentPid} /> : ""}
                     <Link href={"/edit/object/" + pid}>{title || "(no title)"}</Link>
                 </Grid>
+                {extraTools}
                 <Grid item xs={1} className={styles.childlist__pid}>
                     {pid}
                 </Grid>
-                <Grid item xs={1}>
+                <Grid item xs="none">
                     <CopyPidButton pid={pid} />
                 </Grid>
                 <Grid item xs="auto" style={{ textAlign: "right" }}>
                     {loaded ? <ObjectButtonBar pid={pid} /> : ""}
                     <ObjectLoader pid={pid} />
                 </Grid>
-                {extraTools}
             </Grid>
             {childList}
         </div>
diff --git a/client/components/edit/children/ChildList.module.css b/client/components/edit/children/ChildList.module.css
index 4e4035319..6e5cccd2c 100644
--- a/client/components/edit/children/ChildList.module.css
+++ b/client/components/edit/children/ChildList.module.css
@@ -1,6 +1,7 @@
 .childlist {
 	padding-inline: 1rem;
 	padding-block: 1px;
+	color: var(--panel-text);
 	background-color: var(--panel);
 }
 
diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx
index e0f2869f1..6e19cc273 100644
--- a/client/components/edit/children/ChildList.tsx
+++ b/client/components/edit/children/ChildList.tsx
@@ -55,11 +55,9 @@ export const ChildList = ({
     }
     const children = childListStorage[key];
     const childDocs = children.docs;
-    const buttonStyles = { float: "right", marginTop: "-2em" };
     const childButton =
         forceChildCounts === null ? (
             <button
-                style={buttonStyles}
                 onClick={() => {
                     setShowChildCounts(!showChildCounts);
                 }}
@@ -70,7 +68,6 @@ export const ChildList = ({
     const modelsButton =
         forceModels === null ? (
             <button
-                style={buttonStyles}
                 onClick={() => {
                     setShowModels(!showModels);
                 }}
@@ -81,7 +78,6 @@ export const ChildList = ({
     const thumbsButton =
         forceThumbs === null ? (
             <button
-                style={buttonStyles}
                 onClick={() => {
                     setShowThumbs(!showThumbs);
                 }}
@@ -138,14 +134,10 @@ export const ChildList = ({
         ) : null;
     return (
         <div className={styles.childlist}>
-            <Grid container sx={{ spacing: 2, alignItems: "center" }}>
+            <Grid container spacing={2} alignItems="center">
                 <Grid item xs="auto">
                     {thumbsButton}
-                </Grid>
-                <Grid item xs="auto">
                     {modelsButton}
-                </Grid>
-                <Grid item xs="auto">
                     {childButton}
                 </Grid>
                 <Grid item xs="auto">
diff --git a/client/components/edit/datastream/Datastream.module.css b/client/components/edit/datastream/Datastream.module.css
index c344d0859..b3e4edae3 100644
--- a/client/components/edit/datastream/Datastream.module.css
+++ b/client/components/edit/datastream/Datastream.module.css
@@ -1,3 +1,4 @@
 .enabled {
-    background-color: #d5e3a5;
-}
\ No newline at end of file
+	color: var(--selected-text);
+    background-color: var(--selected);
+}
diff --git a/client/components/shared/BasicBreadcrumbs.tsx b/client/components/shared/BasicBreadcrumbs.tsx
index d82f7b94a..9e24421e8 100644
--- a/client/components/shared/BasicBreadcrumbs.tsx
+++ b/client/components/shared/BasicBreadcrumbs.tsx
@@ -1,10 +1,9 @@
-import styles from "./Breadcrumbs.module.css";
 import React from "react";
 import Link from "next/link";
 
 const BasicBreadcrumbs = (): React.ReactElement => {
     return (
-        <ul className={styles.breadcrumb}>
+        <ul className="breadcrumbs">
             <li>
                 <Link href="/">Main Menu</Link>
             </li>
diff --git a/client/components/shared/Breadcrumbs.module.css b/client/components/shared/Breadcrumbs.module.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/styles/Home.module.css b/client/styles/Home.module.css
deleted file mode 100644
index 32a57d52f..000000000
--- a/client/styles/Home.module.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.container {
-  padding: 0 2rem;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
diff --git a/client/styles/application.css b/client/styles/application.css
deleted file mode 100644
index 5c6286eda..000000000
--- a/client/styles/application.css
+++ /dev/null
@@ -1,101 +0,0 @@
-body {
-    background: #fafbfc;
-    font-size: 14px;
-    font-family: "Roboto", Arial;
-    font-weight: 500;
-    overflow-x: hidden;
-}
-
-.hidden {
-    display: none;
-}
-
-#jobSelector {
-    margin-left: 1rem;
-}
-
-h2 {
-    margin-top: 2rem;
-    margin-bottom: 0;
-    font-size: 1.6rem;
-    color: #4d4d4d;
-}
-
-ul {
-    margin-top: 0.25rem;
-    padding-left: 1rem;
-    list-style-position: inside;
-}
-li {
-    margin-bottom: 0.25rem;
-}
-
-button,
-.button {
-    display: inline-block;
-    margin: 0 2px;
-    padding: 4px 10px;
-    border: 0;
-    color: #fff;
-    line-height: 1.5;
-    text-decoration: none;
-    background-color: #485a6c;
-    cursor: pointer;
-    border-radius: 5px;
-}
-
-button:hover,
-button:focus,
-button.active,
-.button:hover,
-.button:focus,
-.button.active {
-    background-color: #3498db;
-    border-color: #275575;
-}
-
-button.primary,
-.button.primary {
-    background-color: #27ae60;
-    border-color: #13562f;
-    color: #fff;
-}
-button.primary:hover,
-.button.primary:hover,
-button.primary:focus,
-.button.primary:focus {
-    background-color: #155724;
-}
-
-button.danger,
-.button.danger {
-    background-color: red;
-    margin-left: 20px;
-}
-button.danger:hover,
-.button.danger:hover,
-button.danger:focus,
-.button.danger:focus {
-    background-color: #a10705;
-}
-
-button.btn-link {
-    margin: 0;
-    padding: 0 0.25rem;
-    border-color: transparent;
-    font-weight: bold;
-    color: #008aed;
-    text-decoration: underline;
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.logout {
-    position: absolute;
-    top: 12px;
-    right: 8px;
-}
-.logout .button {
-    background: #1abc9c;
-    border-color: #16a085;
-}
diff --git a/client/styles/global.css b/client/styles/global.css
index d63ff8ddd..fe10a2fd9 100644
--- a/client/styles/global.css
+++ b/client/styles/global.css
@@ -80,7 +80,8 @@
     }
 
     .breadcrumbs li:not(:first-child):before {
-        content: " > ";
+		color: var(--text-muted);
+        content: " ❭ ";
     }
 
     button,
diff --git a/client/styles/job-paginator.css b/client/styles/job-paginator.css
index d339b10d9..39ef5509c 100644
--- a/client/styles/job-paginator.css
+++ b/client/styles/job-paginator.css
@@ -1,5 +1,9 @@
 /* Layout */
 
+body:has(#paginator) {
+	background-color: var(--light-1);
+}
+
 .controls {
 	font-size: 14px;
 }
@@ -55,7 +59,7 @@ label {
     cursor: pointer;
 }
 label:hover {
-    background-color: #c8e1ff;
+    background-color: var(--light-1);
 }
 label input[type="text"],
 label input[type="number"],
@@ -176,6 +180,6 @@ label input[type="radio"] {
 
 .MuiTreeItem-root.Mui-selected,
 .MuiTreeItem-root.Mui-selected:hover {
-    color: #fff;
-    background-color: #000;
+    color: var(--button-hover-text);
+    background-color: var(--button-hover);
 }
diff --git a/client/styles/variables.css b/client/styles/variables.css
index 0480cc0c1..7ec1ea0e3 100644
--- a/client/styles/variables.css
+++ b/client/styles/variables.css
@@ -1,30 +1,47 @@
 :root {
-    --canvas: var(--gray-50);
-    --canvas-text: var(--gray-900);
-    --panel: var(--gray-200);
-    --border: var(--gray-400);
+	--light-0: white;
+	--light-1: #e4e4e4;
+	--light-2: #c9c9c9;
+	--light-3: #adadad;
+	--light-4: #8f8f8f;
+	--light-5: #6d6d6d;
+	--light-6: #434343;
+}
+
+:root {
+    --canvas: var(--light-0);
+    --canvas-text: var(--light-6);
+    --panel: var(--light-1);
+	--panel-text: black;
+    --border: var(--light-3);
 
-    --text-muted: var(--gray-600);
+    --text-muted: var(--light-5);
 
     --family-sans-serif: system-ui, ui-sans-serif, sans-serif;
     --family-serif: ui-serif, serif;
     --family-monospace: ui-monospace, monospace;
 
-    --primary: var(--teal-700);
+    --primary: var(--sky-800);
     --primary-text: white;
 
-    --secondary: var(--gray-300);
-    --secondary-text: black;
+    --secondary: var(--light-5);
+    --secondary-text: white;
 
-    --button-face: var(--gray-100);
+    --button-face: var(--light-0);
     --button-text: black;
 
+    --button-hover: black;
+    --button-hover-text: white;
+
     --active: var(--red-800);
     --active-text: white;
 
-	--selected: var(--sky-300);
+	--selected: var(--amber-200);
 	--selected-text: black;
 
+	--info: var(--sky-100);
+	--info-text: var(--sky-900);
+
     --success: var(--green-300);
     --success-text: var(--green-900);
 

From dd388b54e5f76dd34f13a4f1f527b87dec50a395 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Mon, 4 Nov 2024 15:40:13 -0500
Subject: [PATCH 04/33] tests: update snapshots.

---
 .../__snapshots__/LogoutButton.test.tsx.snap  |   2 +-
 .../components/edit/ObjectButtonBar.test.tsx  |   2 +-
 .../__snapshots__/Breadcrumbs.test.tsx.snap   |  76 +--
 .../ObjectButtonBar.test.tsx.snap             |  21 +-
 .../__snapshots__/ObjectStatus.test.tsx.snap  |  24 +-
 .../__snapshots__/Child.test.tsx.snap         | 462 +++++++++-------
 .../__snapshots__/ChildList.test.tsx.snap     | 512 +++++++++---------
 .../__snapshots__/JobPaginator.test.tsx.snap  |  73 +--
 8 files changed, 642 insertions(+), 530 deletions(-)

diff --git a/client/components/__snapshots__/LogoutButton.test.tsx.snap b/client/components/__snapshots__/LogoutButton.test.tsx.snap
index 436ed7f34..0d00f8a7e 100644
--- a/client/components/__snapshots__/LogoutButton.test.tsx.snap
+++ b/client/components/__snapshots__/LogoutButton.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`LogoutButton renders correctly when logged in 1`] = `
   className="logout"
 >
   <a
-    className="button"
+    className="button btn-primary"
     href="http://localhost:9000/api/auth/logout"
     onClick={[MockFunction]}
   >
diff --git a/client/components/edit/ObjectButtonBar.test.tsx b/client/components/edit/ObjectButtonBar.test.tsx
index 37147ce2b..04aaf565b 100644
--- a/client/components/edit/ObjectButtonBar.test.tsx
+++ b/client/components/edit/ObjectButtonBar.test.tsx
@@ -41,7 +41,7 @@ describe("ObjectButtonBar", () => {
     it("can refresh a list of children", async () => {
         render(<ObjectButtonBar pid={pid} />);
         const refreshIcon = screen.getByRole("button");
-        expect(refreshIcon.textContent).toEqual("Refresh children");
+        expect(refreshIcon.textContent).toEqual("Refresh");
         await userEvent.setup().click(refreshIcon);
         await waitFor(() => expect(mockContext.action.clearPidFromChildListStorage).toHaveBeenCalledTimes(1));
         expect(mockContext.action.clearPidFromChildListStorage).toHaveBeenCalledWith(pid);
diff --git a/client/components/edit/__snapshots__/Breadcrumbs.test.tsx.snap b/client/components/edit/__snapshots__/Breadcrumbs.test.tsx.snap
index a41dbb442..22d02b6b1 100644
--- a/client/components/edit/__snapshots__/Breadcrumbs.test.tsx.snap
+++ b/client/components/edit/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Breadcrumb renders using ajax-loaded object data (deep parent chain) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -180,7 +180,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (deep parent chain) 1`
 exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mode) 1`] = `
 [
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -214,7 +214,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -248,7 +248,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -282,7 +282,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -316,7 +316,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -350,7 +350,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -384,7 +384,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -418,7 +418,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -452,7 +452,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -486,7 +486,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -520,7 +520,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -554,7 +554,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -588,7 +588,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -622,7 +622,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -656,7 +656,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -695,7 +695,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, deep mo
 exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow mode) 1`] = `
 [
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -736,7 +736,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -777,7 +777,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -818,7 +818,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -859,7 +859,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -900,7 +900,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -941,7 +941,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -982,7 +982,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1023,7 +1023,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1064,7 +1064,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1105,7 +1105,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1146,7 +1146,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1187,7 +1187,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1228,7 +1228,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1269,7 +1269,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1315,7 +1315,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (many parents, shallow
 exports[`Breadcrumb renders using ajax-loaded object data (multiple parents with common grandparent) 1`] = `
 [
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1359,7 +1359,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (multiple parents with
     </li>
   </ul>,
   <ul
-    className="breadcrumb"
+    className="breadcrumbs"
   >
     <li>
       <a
@@ -1407,7 +1407,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (multiple parents with
 
 exports[`Breadcrumb renders using ajax-loaded object data (no parents, deep mode) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -1434,7 +1434,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (no parents, deep mode
 
 exports[`Breadcrumb renders using ajax-loaded object data (no parents, shallow mode) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -1461,7 +1461,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (no parents, shallow m
 
 exports[`Breadcrumb renders using ajax-loaded object data (simple case, deep mode) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -1498,7 +1498,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (simple case, deep mod
 
 exports[`Breadcrumb renders using ajax-loaded object data (simple case, shallow mode) 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
@@ -1542,7 +1542,7 @@ exports[`Breadcrumb renders using ajax-loaded object data (simple case, shallow
 
 exports[`Breadcrumb renders without a pid 1`] = `
 <ul
-  className="breadcrumb"
+  className="breadcrumbs"
 >
   <li>
     <a
diff --git a/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap b/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
index 8631c553b..ce47da2c8 100644
--- a/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
@@ -1,15 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ObjectButtonBar renders correctly 1`] = `
-[
-  "ObjectStatus",
-  "EditParentsButton",
+<div
+  className="objectBar"
+>
+  ObjectStatus
+  EditParentsButton
   <button
+    className="refreshBtn"
     onClick={[Function]}
+    title="Refresh children"
+    type="button"
   >
-    Refresh children
-  </button>,
-  "ObjectPreviewButton",
-  "DeleteObjectButton",
-]
+     Refresh
+  </button>
+  ObjectPreviewButton
+  DeleteObjectButton
+</div>
 `;
diff --git a/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap b/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
index 6a0f8aaa4..4abe0d2a5 100644
--- a/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
@@ -9,7 +9,17 @@ exports[`ObjectStatus defaults to unknown state 1`] = `
     <span
       className="indicator"
     >
-      ◉
+      <svg
+        aria-hidden={true}
+        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="HelpOutlineIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+        />
+      </svg>
     </span>
      
     Unknown
@@ -27,7 +37,17 @@ exports[`ObjectStatus displays the state found in the response 1`] = `
     <span
       className="indicator"
     >
-      ◉
+      <svg
+        aria-hidden={true}
+        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="ModeStandbyIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3-8c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z"
+        />
+      </svg>
     </span>
      
     Inactive
diff --git a/client/components/edit/children/__snapshots__/Child.test.tsx.snap b/client/components/edit/children/__snapshots__/Child.test.tsx.snap
index 5871a0d96..f6a94dd4f 100644
--- a/client/components/edit/children/__snapshots__/Child.test.tsx.snap
+++ b/client/components/edit/children/__snapshots__/Child.test.tsx.snap
@@ -2,236 +2,326 @@
 
 exports[`Child handles empty titles appropriately 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 css-vok43g-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      - [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        -
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
 
 exports[`Child renders a thumbnail 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-7 css-uqwprf-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      ajax-loaded title [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 css-u78q51-MuiGrid-root"
-  >
-    ObjectThumbnail: {"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        ajax-loaded title
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+    >
+      ObjectThumbnail: {"pid":"foo:123"}
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
 
 exports[`Child renders child counts 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-7 css-uqwprf-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      ajax-loaded title [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 css-u78q51-MuiGrid-root"
-  >
-    ObjectChildCounts:{"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        ajax-loaded title
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+    >
+      ObjectChildCounts:{"pid":"foo:123"}
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
 
 exports[`Child renders thumbnail and child counts 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-7 css-uqwprf-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      ajax-loaded title [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 css-u78q51-MuiGrid-root"
-  >
-    ObjectThumbnail: {"pid":"foo:123"}
-    ObjectChildCounts:{"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        ajax-loaded title
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+    >
+      ObjectThumbnail: {"pid":"foo:123"}
+      ObjectChildCounts:{"pid":"foo:123"}
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
 
 exports[`Child renders using ajax-loaded data 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="childlist__item"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 css-vok43g-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    <span
-      onClick={[Function]}
-    >
-      <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="AddBoxIcon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 24 24"
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+      <span
+        onClick={[Function]}
       >
-        <path
-          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-        />
-        <title>
-          Expand Tree
-        </title>
-      </svg>
-    </span>
-    <a
-      href="/edit/object/foo:123"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
-    >
-      ajax-loaded title [foo:123]
-    </a>
-     
-    CopyPidButton
-  </div>
-  <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-  >
-    ObjectButtonBar:{"pid":"foo:123"}
+        <svg
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium childlist__expandicon css-i4bv87-MuiSvgIcon-root"
+          data-testid="AddBoxIcon"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+          />
+          <title>
+            Expand Tree
+          </title>
+        </svg>
+      </span>
+       
+      <a
+        href="/edit/object/foo:123"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        ajax-loaded title
+      </a>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 childlist__pid css-u78q51-MuiGrid-root"
+    >
+      foo:123
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
+    >
+      CopyPidButton
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      style={
+        {
+          "textAlign": "right",
+        }
+      }
+    >
+      ObjectButtonBar:{"pid":"foo:123"}
+    </div>
   </div>
 </div>
 `;
diff --git a/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap b/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
index 2bf38834d..37e3599dc 100644
--- a/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
+++ b/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
@@ -1,187 +1,181 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ChildList allows child counts to be toggled on 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Hide Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Hide Child Counts
+      </button>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList allows models to be toggled on 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Hide Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Hide Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList allows thumbnails to be toggled on 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Hide Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Hide Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList displays a paginator when appropriate 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Child Counts
-  </button>,
-  <p>
-    Showing 
-    1
-     - 
-    10
-     of
-     
-    10000
-  </p>,
-  "Pagination",
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <p>
+        Showing 
+        1
+         - 
+        10
+         of
+         
+        10000
+      </p>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      Pagination
+    </div>
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
@@ -213,141 +207,135 @@ exports[`ChildList displays a paginator when appropriate 1`] = `
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList renders using SelectableChild when a callback is provided 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       SelectableChild
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList renders using ajax-loaded object data 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
 
 exports[`ChildList renders using ajax-loaded root data 1`] = `
-[
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Thumbnails
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
-  >
-    Show Models
-  </button>,
-  <button
-    onClick={[Function]}
-    style={
-      {
-        "float": "right",
-        "marginTop": "-2em",
-      }
-    }
+<div
+  className="childlist"
+>
+  <div
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-ofrcno-MuiGrid-root"
   >
-    Show Child Counts
-  </button>,
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <button
+        onClick={[Function]}
+      >
+        Show Thumbnails
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Models
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        Show Child Counts
+      </button>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+  </div>
   <ul
-    className="childlist"
+    className="childlist__list"
   >
     <li>
       Child
     </li>
-  </ul>,
-]
+  </ul>
+</div>
 `;
diff --git a/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap b/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
index 82cd74c74..bb0cc7d1a 100644
--- a/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
+++ b/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
@@ -1,47 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`JobPaginator renders 1`] = `
-<div
-  id="paginator"
->
+[
+  <ul
+    className="breadcrumbs"
+    style={
+      {
+        "marginBlockEnd": 0,
+      }
+    }
+  >
+    <li>
+      <a
+        href="/"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Main Menu
+      </a>
+    </li>
+    <li>
+      <a
+        href="/paginate"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        Paginator
+      </a>
+    </li>
+    <li>
+      testCategory
+       
+      testJob
+    </li>
+  </ul>,
   <div
-    className="row"
+    className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+    id="paginator"
   >
     <div
-      className="six col"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
     >
       JobPaginatorZoomToggle
     </div>
     <div
-      className="six col"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
     >
-      <p>
-        <a
-          href="/"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Main Menu
-        </a>
-         &gt; 
-        <a
-          href="/paginate"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Paginator
-        </a>
-         &gt; 
-        testCategory
-         
-        &gt; 
-        testJob
-      </p>
       PaginatorControls
       PaginatorList
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;

From ce62e3f66615526faa97b0148a03078e49167e5d Mon Sep 17 00:00:00 2001
From: Chris Hallberg <challber@villanova.edu>
Date: Wed, 20 Nov 2024 13:15:44 -0500
Subject: [PATCH 05/33] test: make button text more flexible

---
 client/components/edit/ObjectButtonBar.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/edit/ObjectButtonBar.test.tsx b/client/components/edit/ObjectButtonBar.test.tsx
index 04aaf565b..3efa27095 100644
--- a/client/components/edit/ObjectButtonBar.test.tsx
+++ b/client/components/edit/ObjectButtonBar.test.tsx
@@ -41,7 +41,7 @@ describe("ObjectButtonBar", () => {
     it("can refresh a list of children", async () => {
         render(<ObjectButtonBar pid={pid} />);
         const refreshIcon = screen.getByRole("button");
-        expect(refreshIcon.textContent).toEqual("Refresh");
+        expect(refreshIcon.textContent.trim()).toEqual("Refresh");
         await userEvent.setup().click(refreshIcon);
         await waitFor(() => expect(mockContext.action.clearPidFromChildListStorage).toHaveBeenCalledTimes(1));
         expect(mockContext.action.clearPidFromChildListStorage).toHaveBeenCalledWith(pid);

From 098d1ca2c5c039a777b991d837f05c84b8594e09 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:10:24 +0000
Subject: [PATCH 06/33] Commit from GitHub Actions (Lint Pull Requests)

---
 client/next-env.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/next-env.d.ts b/client/next-env.d.ts
index 4f11a03dc..a4a7b3f5c 100644
--- a/client/next-env.d.ts
+++ b/client/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

From 8d4cc463222b28a13f572fc841c6bf7ca42f2744 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 14 Jan 2025 13:53:41 -0500
Subject: [PATCH 07/33] chore: root format.

---
 client/components/edit/ObjectButtonBar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/components/edit/ObjectButtonBar.tsx b/client/components/edit/ObjectButtonBar.tsx
index b80572669..674dce7b8 100644
--- a/client/components/edit/ObjectButtonBar.tsx
+++ b/client/components/edit/ObjectButtonBar.tsx
@@ -28,7 +28,8 @@ const ObjectButtonBar = ({ pid }: ObjectButtonBarProps): React.ReactElement => {
                 onClick={() => clearPidFromChildListStorage(pid)}
                 title="Refresh children"
             >
-                <RefreshIcon /> Refresh
+                <RefreshIcon />
+                Refresh
             </button>
             <ObjectPreviewButton pid={pid} />
             <DeleteObjectButton pid={pid} />

From 719bc59cda0efdc1923b76bfc181a8624d05af51 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 14 Jan 2025 14:01:32 -0500
Subject: [PATCH 08/33] feat: add icon for Deleted state. i think this is the
 right state.

---
 client/components/edit/ObjectStatus.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/components/edit/ObjectStatus.tsx b/client/components/edit/ObjectStatus.tsx
index 89503b81c..32173c057 100644
--- a/client/components/edit/ObjectStatus.tsx
+++ b/client/components/edit/ObjectStatus.tsx
@@ -6,6 +6,7 @@ import { useEditorContext } from "../../context/EditorContext";
 import ObjectLoader from "./ObjectLoader";
 
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import ModeStandbyIcon from "@mui/icons-material/ModeStandby";
 
@@ -16,11 +17,13 @@ export interface ObjectStatusProps {
 function getStatusIcon(statusText: string) {
     switch (statusText) {
         case "Active":
-            return <CheckCircleIcon></CheckCircleIcon>;
+            return <CheckCircleIcon />;
+		case "Deleted":
+			return <CloseIcon />;
         case "Inactive":
-            return <ModeStandbyIcon></ModeStandbyIcon>;
+            return <ModeStandbyIcon />;
     }
-    return <HelpOutlineIcon></HelpOutlineIcon>;
+    return <HelpOutlineIcon />;
 }
 
 export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement => {

From 9c2f30069a08fbcda999826443bb084d840e2cba Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 14 Jan 2025 19:02:30 +0000
Subject: [PATCH 09/33] Commit from GitHub Actions (Lint Pull Requests)

---
 client/components/edit/ObjectStatus.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/edit/ObjectStatus.tsx b/client/components/edit/ObjectStatus.tsx
index 32173c057..9d6c3365a 100644
--- a/client/components/edit/ObjectStatus.tsx
+++ b/client/components/edit/ObjectStatus.tsx
@@ -18,8 +18,8 @@ function getStatusIcon(statusText: string) {
     switch (statusText) {
         case "Active":
             return <CheckCircleIcon />;
-		case "Deleted":
-			return <CloseIcon />;
+        case "Deleted":
+            return <CloseIcon />;
         case "Inactive":
             return <ModeStandbyIcon />;
     }

From 73e52f5fca55ebc6ee00622e3d0ea3b10fd94d78 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 14 Jan 2025 14:05:33 -0500
Subject: [PATCH 10/33] chore: update snapshots.

---
 .../components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap b/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
index ce47da2c8..76bc51279 100644
--- a/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectButtonBar.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`ObjectButtonBar renders correctly 1`] = `
     title="Refresh children"
     type="button"
   >
-     Refresh
+    Refresh
   </button>
   ObjectPreviewButton
   DeleteObjectButton

From 9612b1b657d38265d2340e78c6ddc00d92c44c45 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 1 Apr 2025 12:08:36 -0400
Subject: [PATCH 11/33] style: harmony colors.

---
 .../edit/children/ChildList.module.css        |   6 +-
 client/next-env.d.ts                          |   2 +-
 client/pages/_app.tsx                         |   2 +-
 client/styles/global.css                      |  18 +-
 client/styles/variables.css                   |  45 ++-
 client/styles/vendor/colors-harmony.css       | 301 ++++++++++++++++++
 6 files changed, 334 insertions(+), 40 deletions(-)
 create mode 100644 client/styles/vendor/colors-harmony.css

diff --git a/client/components/edit/children/ChildList.module.css b/client/components/edit/children/ChildList.module.css
index 6e5cccd2c..90c558cad 100644
--- a/client/components/edit/children/ChildList.module.css
+++ b/client/components/edit/children/ChildList.module.css
@@ -1,8 +1,8 @@
 .childlist {
 	padding-inline: 1rem;
 	padding-block: 1px;
-	color: var(--panel-text);
-	background-color: var(--panel);
+	color: CanvasText;
+	background-color: var(--soft);
 }
 
 .childlist__list {
@@ -12,7 +12,7 @@
 }
 .childlist__list > li {
     margin-block: 0;
-    border-block-start: 1px solid var(--border);
+    border-block-start: 1px solid var(--edge);
 }
 
 .childlist__item {
diff --git a/client/next-env.d.ts b/client/next-env.d.ts
index a4a7b3f5c..4f11a03dc 100644
--- a/client/next-env.d.ts
+++ b/client/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
index ede7791f0..6ae12949b 100644
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@@ -7,7 +7,7 @@ import { FetchContextProvider } from "../context/FetchContext";
 import LogoutButton from "../components/LogoutButton";
 
 import "../styles/vendor/modern-normalize.css";
-import "../styles/vendor/colors-tailwindcss.css";
+import "../styles/vendor/colors-harmony.css";
 
 import "../styles/reset.css";
 import "../styles/variables.css";
diff --git a/client/styles/global.css b/client/styles/global.css
index fe10a2fd9..bebe6ee2f 100644
--- a/client/styles/global.css
+++ b/client/styles/global.css
@@ -1,10 +1,12 @@
 @layer reset {
+	html {
+		color-scheme: light;
+	}
+
     body {
         padding: 0;
         font-family: var(--family-sans-serif);
         line-height: 1.5;
-        background-color: var(--canvas);
-        color: var(--canvas-text);
     }
 }
 
@@ -95,16 +97,16 @@
 		line-height: normal;
         text-decoration: none;
         background-color: var(--button-face);
-        border: 1px solid var(--border);
+        border: 1px solid var(--edge);
         border-radius: 0.25rem;
         cursor: pointer;
 
         &:hover {
-            color: var(--canvas);
-            background-color: var(--canvas-text);
-            border-color: var(--canvas-text);
+            color: Canvas;
+            background-color: CanvasText;
+            border-color: CanvasText;
 
-            --outline-color: var(--canvas-text);
+            --outline-color: CanvasText;
         }
     }
 
@@ -125,5 +127,5 @@ svg.css-i4bv87-MuiSvgIcon-root {
 
 /* MUI: modal */
 .css-tlc64q-MuiPaper-root-MuiDialog-paper {
-    background-color: var(--canvas);
+    background-color: Canvas;
 }
diff --git a/client/styles/variables.css b/client/styles/variables.css
index 7ec1ea0e3..c2db1af54 100644
--- a/client/styles/variables.css
+++ b/client/styles/variables.css
@@ -1,60 +1,51 @@
 :root {
-	--light-0: white;
-	--light-1: #e4e4e4;
-	--light-2: #c9c9c9;
-	--light-3: #adadad;
-	--light-4: #8f8f8f;
-	--light-5: #6d6d6d;
-	--light-6: #434343;
+	--soft: var(--zinc-100);
+	--edge: var(--zinc-500);
+	--mute: var(--zinc-700);
+	--text: var(--zinc-900);
 }
 
 :root {
-    --canvas: var(--light-0);
-    --canvas-text: var(--light-6);
-    --panel: var(--light-1);
-	--panel-text: black;
-    --border: var(--light-3);
-
-    --text-muted: var(--light-5);
+    --text-muted: var(--mute);
 
     --family-sans-serif: system-ui, ui-sans-serif, sans-serif;
     --family-serif: ui-serif, serif;
     --family-monospace: ui-monospace, monospace;
 
-    --primary: var(--sky-800);
+    --primary: var(--sky-700);
     --primary-text: white;
 
-    --secondary: var(--light-5);
+    --secondary: var(--mute);
     --secondary-text: white;
 
-    --button-face: var(--light-0);
+    --button-face: white;
     --button-text: black;
 
     --button-hover: black;
     --button-hover-text: white;
 
-    --active: var(--red-800);
+    --active: var(--red-700);
     --active-text: white;
 
 	--selected: var(--amber-200);
 	--selected-text: black;
 
-	--info: var(--sky-100);
+	--info: var(--sky-200);
 	--info-text: var(--sky-900);
 
-    --success: var(--green-300);
+    --success: var(--green-200);
     --success-text: var(--green-900);
 
     --danger: var(--red-200);
     --danger-text: var(--red-950);
 
-    --object-status-active: var(--green-800);
-    --object-status-inactive: var(--yellow-800);
-    --object-status-deleted: var(--red-800);
+    --object-status-active: var(--green-600);
+    --object-status-inactive: var(--yellow-600);
+    --object-status-deleted: var(--red-600);
     --object-status-unknown: var(--gray-600);
 
-    --object-status-active-hover: var(--green-300);
-    --object-status-inactive-hover: var(--yellow-300);
-    --object-status-deleted-hover: var(--red-300);
-    --object-status-unknown-hover: var(--gray-300);
+    --object-status-active-hover: var(--green-400);
+    --object-status-inactive-hover: var(--yellow-400);
+    --object-status-deleted-hover: var(--red-400);
+    --object-status-unknown-hover: var(--gray-400);
 }
diff --git a/client/styles/vendor/colors-harmony.css b/client/styles/vendor/colors-harmony.css
new file mode 100644
index 000000000..ac787d194
--- /dev/null
+++ b/client/styles/vendor/colors-harmony.css
@@ -0,0 +1,301 @@
+:root {
+    --red-50: oklch(0.988281 0.0046875 20);
+    --red-100: oklch(0.966797 0.0171875 20);
+    --red-200: oklch(0.921875 0.0421875 20);
+    --red-300: oklch(0.861328 0.078125 20);
+    --red-400: oklch(0.800781 0.114063 20);
+    --red-500: oklch(0.742188 0.151562 20);
+    --red-600: oklch(0.626953 0.135937 20);
+    --red-700: oklch(0.535156 0.115625 20);
+    --red-800: oklch(0.419922 0.090625 20);
+    --red-900: oklch(0.306641 0.065625 20);
+    --red-950: oklch(0.193359 0.040625 20);
+
+    --orange-50: oklch(0.988281 0.0046875 43.3333);
+    --orange-100: oklch(0.966797 0.0171875 43.3333);
+    --orange-200: oklch(0.921875 0.0421875 43.3333);
+    --orange-300: oklch(0.859375 0.078125 43.3333);
+    --orange-400: oklch(0.798828 0.114063 43.3333);
+    --orange-500: oklch(0.738281 0.151562 43.3333);
+    --orange-600: oklch(0.623047 0.135937 43.3333);
+    --orange-700: oklch(0.53125 0.115625 43.3333);
+    --orange-800: oklch(0.417969 0.090625 43.3333);
+    --orange-900: oklch(0.304688 0.065625 43.3333);
+    --orange-950: oklch(0.191406 0.040625 43.3333);
+
+    --amber-50: oklch(0.988281 0.0046875 66.6667);
+    --amber-100: oklch(0.966797 0.0171875 66.6667);
+    --amber-200: oklch(0.919922 0.0421875 66.6667);
+    --amber-300: oklch(0.857422 0.078125 66.6667);
+    --amber-400: oklch(0.794922 0.114063 66.6667);
+    --amber-500: oklch(0.732422 0.151562 66.6667);
+    --amber-600: oklch(0.619141 0.135937 66.6667);
+    --amber-700: oklch(0.527344 0.115625 66.6667);
+    --amber-800: oklch(0.414063 0.090625 66.6667);
+    --amber-900: oklch(0.302734 0.065625 66.6667);
+    --amber-950: oklch(0.191406 0.040625 66.6667);
+
+    --yellow-50: oklch(0.988281 0.0046875 90);
+    --yellow-100: oklch(0.964844 0.0171875 90);
+    --yellow-200: oklch(0.917969 0.0421875 90);
+    --yellow-300: oklch(0.853516 0.078125 90);
+    --yellow-400: oklch(0.789063 0.114063 90);
+    --yellow-500: oklch(0.726563 0.151562 90);
+    --yellow-600: oklch(0.611328 0.135937 90);
+    --yellow-700: oklch(0.523438 0.115625 90);
+    --yellow-800: oklch(0.410156 0.090625 90);
+    --yellow-900: oklch(0.300781 0.065625 90);
+    --yellow-950: oklch(0.191406 0.040625 90);
+
+    --lime-50: oklch(0.988281 0.0046875 106.667);
+    --lime-100: oklch(0.964844 0.0171875 106.667);
+    --lime-200: oklch(0.916016 0.0421875 106.667);
+    --lime-300: oklch(0.849609 0.078125 106.667);
+    --lime-400: oklch(0.785156 0.114063 106.667);
+    --lime-500: oklch(0.720703 0.151562 106.667);
+    --lime-600: oklch(0.607422 0.135937 106.667);
+    --lime-700: oklch(0.519531 0.115625 106.667);
+    --lime-800: oklch(0.408203 0.090625 106.667);
+    --lime-900: oklch(0.298828 0.065625 106.667);
+    --lime-950: oklch(0.189453 0.040625 106.667);
+
+    --green-50: oklch(0.988281 0.0046875 123.333);
+    --green-100: oklch(0.962891 0.0171875 123.333);
+    --green-200: oklch(0.914063 0.0421875 123.333);
+    --green-300: oklch(0.847656 0.078125 123.333);
+    --green-400: oklch(0.78125 0.114063 123.333);
+    --green-500: oklch(0.714844 0.151562 123.333);
+    --green-600: oklch(0.603516 0.135937 123.333);
+    --green-700: oklch(0.515625 0.115625 123.333);
+    --green-800: oklch(0.404297 0.090625 123.333);
+    --green-900: oklch(0.296875 0.065625 123.333);
+    --green-950: oklch(0.1875 0.040625 123.333);
+
+    --emerald-50: oklch(0.988281 0.0046875 140);
+    --emerald-100: oklch(0.962891 0.0171875 140);
+    --emerald-200: oklch(0.914063 0.0421875 140);
+    --emerald-300: oklch(0.845703 0.078125 140);
+    --emerald-400: oklch(0.777344 0.114063 140);
+    --emerald-500: oklch(0.710938 0.151562 140);
+    --emerald-600: oklch(0.597656 0.135937 140);
+    --emerald-700: oklch(0.511719 0.115625 140);
+    --emerald-800: oklch(0.400391 0.090625 140);
+    --emerald-900: oklch(0.294922 0.065625 140);
+    --emerald-950: oklch(0.1875 0.040625 140);
+
+    --teal-50: oklch(0.988281 0.0046875 160);
+    --teal-100: oklch(0.962891 0.0171875 160);
+    --teal-200: oklch(0.912109 0.0421875 160);
+    --teal-300: oklch(0.84375 0.078125 160);
+    --teal-400: oklch(0.775391 0.114063 160);
+    --teal-500: oklch(0.705078 0.151562 160);
+    --teal-600: oklch(0.59375 0.135937 160);
+    --teal-700: oklch(0.507813 0.115625 160);
+    --teal-800: oklch(0.398438 0.090625 160);
+    --teal-900: oklch(0.291016 0.065625 160);
+    --teal-950: oklch(0.183594 0.040625 160);
+
+    --cyan-50: oklch(0.988281 0.0046875 180);
+    --cyan-100: oklch(0.962891 0.0171875 180);
+    --cyan-200: oklch(0.912109 0.0421875 180);
+    --cyan-300: oklch(0.84375 0.078125 180);
+    --cyan-400: oklch(0.773438 0.114063 180);
+    --cyan-500: oklch(0.705078 0.151562 180);
+    --cyan-600: oklch(0.591797 0.135937 180);
+    --cyan-700: oklch(0.505859 0.115625 180);
+    --cyan-800: oklch(0.396484 0.090625 180);
+    --cyan-900: oklch(0.289063 0.065625 180);
+    --cyan-950: oklch(0.181641 0.040625 180);
+
+    --sky-50: oklch(0.988281 0.0046875 210);
+    --sky-100: oklch(0.962891 0.0171875 210);
+    --sky-200: oklch(0.914063 0.0421875 210);
+    --sky-300: oklch(0.845703 0.078125 210);
+    --sky-400: oklch(0.777344 0.114063 210);
+    --sky-500: oklch(0.708984 0.151562 210);
+    --sky-600: oklch(0.595703 0.135937 210);
+    --sky-700: oklch(0.507813 0.115625 210);
+    --sky-800: oklch(0.398438 0.090625 210);
+    --sky-900: oklch(0.291016 0.065625 210);
+    --sky-950: oklch(0.181641 0.040625 210);
+
+    --blue-50: oklch(0.988281 0.0046875 240);
+    --blue-100: oklch(0.964844 0.0171875 240);
+    --blue-200: oklch(0.916016 0.0421875 240);
+    --blue-300: oklch(0.849609 0.078125 240);
+    --blue-400: oklch(0.783203 0.114063 240);
+    --blue-500: oklch(0.71875 0.151562 240);
+    --blue-600: oklch(0.605469 0.135937 240);
+    --blue-700: oklch(0.517578 0.115625 240);
+    --blue-800: oklch(0.40625 0.090625 240);
+    --blue-900: oklch(0.296875 0.065625 240);
+    --blue-950: oklch(0.1875 0.040625 240);
+
+    --indigo-50: oklch(0.988281 0.0046875 260);
+    --indigo-100: oklch(0.964844 0.0171875 260);
+    --indigo-200: oklch(0.917969 0.0421875 260);
+    --indigo-300: oklch(0.853516 0.078125 260);
+    --indigo-400: oklch(0.789063 0.114063 260);
+    --indigo-500: oklch(0.726563 0.151562 260);
+    --indigo-600: oklch(0.613281 0.135937 260);
+    --indigo-700: oklch(0.523438 0.115625 260);
+    --indigo-800: oklch(0.412109 0.090625 260);
+    --indigo-900: oklch(0.300781 0.065625 260);
+    --indigo-950: oklch(0.191406 0.040625 260);
+
+    --violet-50: oklch(0.988281 0.0046875 280);
+    --violet-100: oklch(0.964844 0.0171875 280);
+    --violet-200: oklch(0.919922 0.0421875 280);
+    --violet-300: oklch(0.857422 0.078125 280);
+    --violet-400: oklch(0.794922 0.114063 280);
+    --violet-500: oklch(0.734375 0.151562 280);
+    --violet-600: oklch(0.619141 0.135937 280);
+    --violet-700: oklch(0.529297 0.115625 280);
+    --violet-800: oklch(0.416016 0.090625 280);
+    --violet-900: oklch(0.304688 0.065625 280);
+    --violet-950: oklch(0.193359 0.040625 280);
+
+    --purple-50: oklch(0.988281 0.0046875 300);
+    --purple-100: oklch(0.966797 0.0171875 300);
+    --purple-200: oklch(0.921875 0.0421875 300);
+    --purple-300: oklch(0.859375 0.078125 300);
+    --purple-400: oklch(0.798828 0.114063 300);
+    --purple-500: oklch(0.738281 0.151562 300);
+    --purple-600: oklch(0.625 0.135937 300);
+    --purple-700: oklch(0.533203 0.115625 300);
+    --purple-800: oklch(0.417969 0.090625 300);
+    --purple-900: oklch(0.306641 0.065625 300);
+    --purple-950: oklch(0.195313 0.040625 300);
+
+    --fuchsia-50: oklch(0.988281 0.0046875 320);
+    --fuchsia-100: oklch(0.966797 0.0171875 320);
+    --fuchsia-200: oklch(0.921875 0.0421875 320);
+    --fuchsia-300: oklch(0.861328 0.078125 320);
+    --fuchsia-400: oklch(0.800781 0.114063 320);
+    --fuchsia-500: oklch(0.742188 0.151562 320);
+    --fuchsia-600: oklch(0.626953 0.135937 320);
+    --fuchsia-700: oklch(0.535156 0.115625 320);
+    --fuchsia-800: oklch(0.419922 0.090625 320);
+    --fuchsia-900: oklch(0.308594 0.065625 320);
+    --fuchsia-950: oklch(0.195313 0.040625 320);
+
+    --pink-50: oklch(0.988281 0.0046875 340);
+    --pink-100: oklch(0.966797 0.0171875 340);
+    --pink-200: oklch(0.923828 0.0421875 340);
+    --pink-300: oklch(0.863281 0.078125 340);
+    --pink-400: oklch(0.802734 0.114063 340);
+    --pink-500: oklch(0.744141 0.151562 340);
+    --pink-600: oklch(0.628906 0.135937 340);
+    --pink-700: oklch(0.537109 0.115625 340);
+    --pink-800: oklch(0.419922 0.090625 340);
+    --pink-900: oklch(0.308594 0.065625 340);
+    --pink-950: oklch(0.195313 0.040625 340);
+
+    --rose-50: oklch(0.988281 0.0046875 0);
+    --rose-100: oklch(0.966797 0.0171875 0);
+    --rose-200: oklch(0.923828 0.0421875 0);
+    --rose-300: oklch(0.863281 0.078125 0);
+    --rose-400: oklch(0.802734 0.114063 0);
+    --rose-500: oklch(0.744141 0.151562 0);
+    --rose-600: oklch(0.626953 0.135937 0);
+    --rose-700: oklch(0.535156 0.115625 0);
+    --rose-800: oklch(0.419922 0.090625 0);
+    --rose-900: oklch(0.306641 0.065625 0);
+    --rose-950: oklch(0.193359 0.040625 0);
+
+    --neutral-50: oklch(0.988281 0 0);
+    --neutral-100: oklch(0.964844 0 0);
+    --neutral-200: oklch(0.917969 0 0);
+    --neutral-300: oklch(0.853516 0 0);
+    --neutral-400: oklch(0.789063 0 0);
+    --neutral-500: oklch(0.726563 0 0);
+    --neutral-600: oklch(0.611328 0 0);
+    --neutral-700: oklch(0.523438 0 0);
+    --neutral-800: oklch(0.412109 0 0);
+    --neutral-900: oklch(0.300781 0 0);
+    --neutral-950: oklch(0.193359 0 0);
+
+    --zinc-50: oklch(0.988281 0.004875 275);
+    --zinc-100: oklch(0.964844 0.008 275);
+    --zinc-200: oklch(0.917969 0.008 275);
+    --zinc-300: oklch(0.853516 0.008 275);
+    --zinc-400: oklch(0.789063 0.008 275);
+    --zinc-500: oklch(0.726563 0.008 275);
+    --zinc-600: oklch(0.613281 0.008 275);
+    --zinc-700: oklch(0.523438 0.008 275);
+    --zinc-800: oklch(0.412109 0.008 275);
+    --zinc-900: oklch(0.302734 0.008 275);
+    --zinc-950: oklch(0.193359 0.008 275);
+
+    --gray-50: oklch(0.988281 0.0046875 275);
+    --gray-100: oklch(0.964844 0.016 275);
+    --gray-200: oklch(0.917969 0.016 275);
+    --gray-300: oklch(0.853516 0.016 275);
+    --gray-400: oklch(0.789063 0.016 275);
+    --gray-500: oklch(0.726563 0.016 275);
+    --gray-600: oklch(0.613281 0.016 275);
+    --gray-700: oklch(0.523438 0.016 275);
+    --gray-800: oklch(0.412109 0.016 275);
+    --gray-900: oklch(0.302734 0.016 275);
+    --gray-950: oklch(0.193359 0.016 275);
+
+    --slate-50: oklch(0.988281 0.0046875 275);
+    --slate-100: oklch(0.964844 0.01775 275);
+    --slate-200: oklch(0.917969 0.024 275);
+    --slate-300: oklch(0.853516 0.024 275);
+    --slate-400: oklch(0.789063 0.024 275);
+    --slate-500: oklch(0.726563 0.024 275);
+    --slate-600: oklch(0.613281 0.024 275);
+    --slate-700: oklch(0.523438 0.024 275);
+    --slate-800: oklch(0.412109 0.024 275);
+    --slate-900: oklch(0.302734 0.024 275);
+    --slate-950: oklch(0.193359 0.024 275);
+
+    --mauve-50: oklch(0.988281 0.008 325);
+    --mauve-100: oklch(0.966797 0.008 325);
+    --mauve-200: oklch(0.917969 0.008 325);
+    --mauve-300: oklch(0.853516 0.008 325);
+    --mauve-400: oklch(0.789063 0.008 325);
+    --mauve-500: oklch(0.726563 0.008 325);
+    --mauve-600: oklch(0.613281 0.008 325);
+    --mauve-700: oklch(0.523438 0.008 325);
+    --mauve-800: oklch(0.412109 0.008 325);
+    --mauve-900: oklch(0.302734 0.008 325);
+    --mauve-950: oklch(0.193359 0.008 325);
+
+    --stone-50: oklch(0.988281 0.008 75);
+    --stone-100: oklch(0.964844 0.008 75);
+    --stone-200: oklch(0.917969 0.008 75);
+    --stone-300: oklch(0.853516 0.008 75);
+    --stone-400: oklch(0.789063 0.008 75);
+    --stone-500: oklch(0.726563 0.008 75);
+    --stone-600: oklch(0.613281 0.008 75);
+    --stone-700: oklch(0.523438 0.008 75);
+    --stone-800: oklch(0.412109 0.008 75);
+    --stone-900: oklch(0.302734 0.008 75);
+    --stone-950: oklch(0.193359 0.008 75);
+
+    --sand-50: oklch(0.988281 0.0104375 75);
+    --sand-100: oklch(0.964844 0.012 75);
+    --sand-200: oklch(0.917969 0.012 75);
+    --sand-300: oklch(0.853516 0.012 75);
+    --sand-400: oklch(0.789063 0.012 75);
+    --sand-500: oklch(0.726563 0.012 75);
+    --sand-600: oklch(0.613281 0.012 75);
+    --sand-700: oklch(0.523438 0.012 75);
+    --sand-800: oklch(0.412109 0.012 75);
+    --sand-900: oklch(0.302734 0.012 75);
+    --sand-950: oklch(0.193359 0.012 75);
+
+    --olive-50: oklch(0.988281 0.008 120);
+    --olive-100: oklch(0.964844 0.008 120);
+    --olive-200: oklch(0.917969 0.008 120);
+    --olive-300: oklch(0.851563 0.008 120);
+    --olive-400: oklch(0.789063 0.008 120);
+    --olive-500: oklch(0.724609 0.008 120);
+    --olive-600: oklch(0.611328 0.008 120);
+    --olive-700: oklch(0.523438 0.008 120);
+    --olive-800: oklch(0.410156 0.008 120);
+    --olive-900: oklch(0.300781 0.008 120);
+    --olive-950: oklch(0.191406 0.008 120);
+}

From bb026a1392d65755f583f1125eeebc74ec90a02f Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 1 Apr 2025 15:22:26 -0400
Subject: [PATCH 12/33] style: padding and color adjustments.

---
 .../edit/ObjectButtonBar.module.css           | 15 +++++++++-----
 .../components/edit/ObjectStatus.module.css   |  4 ++++
 client/components/edit/ObjectStatus.tsx       |  2 +-
 client/components/edit/children/Child.tsx     |  2 +-
 .../edit/children/ChildList.module.css        | 20 +++++++++++++------
 client/components/edit/children/ChildList.tsx |  4 ++--
 client/styles/variables.css                   | 12 ++++++-----
 7 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/client/components/edit/ObjectButtonBar.module.css b/client/components/edit/ObjectButtonBar.module.css
index dec99aabd..4a2fab575 100644
--- a/client/components/edit/ObjectButtonBar.module.css
+++ b/client/components/edit/ObjectButtonBar.module.css
@@ -1,14 +1,19 @@
 .objectBar {
     display: grid;
-	grid-template-columns: repeat(4, 1fr);
+	grid-template-columns: repeat(4, minmax(120px, 1fr));
+	width: min-content;
+	max-width: 100%;
 
     & button {
 		width: 100%;
         white-space: nowrap;
-	}
-
-	& button:not(:hover, :focus) {
 		border-color: transparent;
 		background-color: transparent;
-    }
+
+		&:hover,
+		&:focus {
+			border-color: black;
+			background-color: black;
+	    }
+	}
 }
diff --git a/client/components/edit/ObjectStatus.module.css b/client/components/edit/ObjectStatus.module.css
index 5b8b3a0ff..b1222ef07 100644
--- a/client/components/edit/ObjectStatus.module.css
+++ b/client/components/edit/ObjectStatus.module.css
@@ -1,3 +1,7 @@
+.status_btn {
+    text-align: start;
+}
+
 .active .indicator {
     color: var(--object-status-active);
 }
diff --git a/client/components/edit/ObjectStatus.tsx b/client/components/edit/ObjectStatus.tsx
index 9d6c3365a..9a1bfa5d4 100644
--- a/client/components/edit/ObjectStatus.tsx
+++ b/client/components/edit/ObjectStatus.tsx
@@ -43,7 +43,7 @@ export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement =>
         openModal("state");
     };
     const stateMsg = loaded ? (
-        <button onClick={clickAction} className={styles[stateText.toLowerCase()]}>
+        <button onClick={clickAction} className={`${styles.status_btn} ${styles[stateText.toLowerCase()]}`}>
             <span className={styles.indicator}>{getStatusIcon(stateText)}</span>&nbsp;
             {stateText}
         </button>
diff --git a/client/components/edit/children/Child.tsx b/client/components/edit/children/Child.tsx
index c3657bcee..4ca6b3f17 100644
--- a/client/components/edit/children/Child.tsx
+++ b/client/components/edit/children/Child.tsx
@@ -82,7 +82,7 @@ export const Child = ({
                 <Grid item xs="none">
                     <CopyPidButton pid={pid} />
                 </Grid>
-                <Grid item xs="auto" style={{ textAlign: "right" }}>
+                <Grid item xs="none" style={{ textAlign: "right" }}>
                     {loaded ? <ObjectButtonBar pid={pid} /> : ""}
                     <ObjectLoader pid={pid} />
                 </Grid>
diff --git a/client/components/edit/children/ChildList.module.css b/client/components/edit/children/ChildList.module.css
index 90c558cad..1d86276c9 100644
--- a/client/components/edit/children/ChildList.module.css
+++ b/client/components/edit/children/ChildList.module.css
@@ -20,9 +20,8 @@
     padding-block: 0.25rem;
 }
 
-.childlist__expandicon {
-	font-size: 1.5em;
-    vertical-align: bottom;
+svg.childlist__expandicon {
+	font-size: 21px;
 	cursor: pointer;
 
 	&:hover,
@@ -39,9 +38,18 @@
 
 /* Nested */
 
-.childlist__list .childlist {
-    margin-inline-start: 1rem;
-	padding-inline-end: 0;
+.childlist__list {
+	.childlist {
+	    margin-inline-start: 0.5rem;
+	    margin-block-end: -0.25em;
+		padding-inline-end: 0;
+		border-inline-start: 1px solid var(--edge);
+	}
+
+	.childlist__pagination {
+		margin-block: 0.25em;
+		font-size: 10pt;
+	}
 }
 
 /* Pagination alignment */
diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx
index 6e19cc273..b0201f26a 100644
--- a/client/components/edit/children/ChildList.tsx
+++ b/client/components/edit/children/ChildList.tsx
@@ -127,7 +127,7 @@ export const ChildList = ({
     const endNumber = startNumber + pageSize - 1;
     const paginatorLabel =
         children.numFound > 1 ? (
-            <p>
+            <p class={styles.childlist__pagination}>
                 Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
                 {children.numFound}
             </p>
@@ -135,7 +135,7 @@ export const ChildList = ({
     return (
         <div className={styles.childlist}>
             <Grid container spacing={2} alignItems="center">
-                <Grid item xs="auto">
+                <Grid item xs="auto" sx={{ "&:empty": { display: "none" }}}>
                     {thumbsButton}
                     {modelsButton}
                     {childButton}
diff --git a/client/styles/variables.css b/client/styles/variables.css
index c2db1af54..4f06870cf 100644
--- a/client/styles/variables.css
+++ b/client/styles/variables.css
@@ -1,3 +1,5 @@
+/* Harmony colors imported in _app.tsx */
+
 :root {
 	--soft: var(--zinc-100);
 	--edge: var(--zinc-500);
@@ -24,7 +26,7 @@
     --button-hover: black;
     --button-hover-text: white;
 
-    --active: var(--red-700);
+    --active: oklch(0.577 0.245 27.325); /* Tailwind red-600 */
     --active-text: white;
 
 	--selected: var(--amber-200);
@@ -44,8 +46,8 @@
     --object-status-deleted: var(--red-600);
     --object-status-unknown: var(--gray-600);
 
-    --object-status-active-hover: var(--green-400);
-    --object-status-inactive-hover: var(--yellow-400);
-    --object-status-deleted-hover: var(--red-400);
-    --object-status-unknown-hover: var(--gray-400);
+    --object-status-active-hover: var(--green-300);
+    --object-status-inactive-hover: var(--yellow-300);
+    --object-status-deleted-hover: var(--red-300);
+    --object-status-unknown-hover: var(--gray-300);
 }

From c7d30283def54dd492f868bd89b890f63475aa85 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 1 Apr 2025 16:23:55 -0400
Subject: [PATCH 13/33] style: item edit colors and layout.

---
 client/components/edit/ObjectButtonBar.module.css | 7 +++----
 client/components/edit/ObjectStatus.module.css    | 1 +
 client/components/edit/ObjectSummary.module.css   | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/components/edit/ObjectButtonBar.module.css b/client/components/edit/ObjectButtonBar.module.css
index 4a2fab575..b2e73ae65 100644
--- a/client/components/edit/ObjectButtonBar.module.css
+++ b/client/components/edit/ObjectButtonBar.module.css
@@ -1,11 +1,10 @@
 .objectBar {
     display: grid;
-	grid-template-columns: repeat(4, minmax(120px, 1fr));
-	width: min-content;
-	max-width: 100%;
+	grid-template-columns: repeat(4, auto);
+	width: fit-content;
 
     & button {
-		width: 100%;
+		width: fit-content;
         white-space: nowrap;
 		border-color: transparent;
 		background-color: transparent;
diff --git a/client/components/edit/ObjectStatus.module.css b/client/components/edit/ObjectStatus.module.css
index b1222ef07..8c1c6fb20 100644
--- a/client/components/edit/ObjectStatus.module.css
+++ b/client/components/edit/ObjectStatus.module.css
@@ -1,4 +1,5 @@
 .status_btn {
+    min-width: 120px;
     text-align: start;
 }
 
diff --git a/client/components/edit/ObjectSummary.module.css b/client/components/edit/ObjectSummary.module.css
index 8789f99f0..6a980db83 100644
--- a/client/components/edit/ObjectSummary.module.css
+++ b/client/components/edit/ObjectSummary.module.css
@@ -1,8 +1,9 @@
 .infobox {
-	padding-inline: clamp(1rem, 5%, 3rem);
+	padding-inline: 1lh;
     padding-block: 1rem;
 	color: var(--info-text);
     background-color: var(--info);
+    border: 1px solid var(--sky-500);
 }
 
 .infobox h2 {

From 7ef316dee0de12af45b4fc7f42a90e5fc337d7f5 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 1 Apr 2025 16:24:10 -0400
Subject: [PATCH 14/33] style: job paginator.

---
 client/styles/job-paginator.css | 45 +++++++++++++++++++++++----------
 client/styles/variables.css     | 12 ++++-----
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/client/styles/job-paginator.css b/client/styles/job-paginator.css
index 39ef5509c..e4f8f1943 100644
--- a/client/styles/job-paginator.css
+++ b/client/styles/job-paginator.css
@@ -1,7 +1,7 @@
 /* Layout */
 
 body:has(#paginator) {
-	background-color: var(--light-1);
+	background-color: var(--soft);
 }
 
 .controls {
@@ -14,13 +14,14 @@ body:has(#paginator) {
     margin-top: 0.5rem;
     padding: 0.25rem;
     padding-bottom: 400px;
-    border: 1px solid var(--border);
+    border: 1px solid var(--edge);
     background-color: Canvas;
     border-radius: 6px 0 0 6px;
 }
 
 .top-row {
     display: flex;
+    align-items: end;
     width: 100%;
     margin-block: 0.25rem;
 }
@@ -40,9 +41,9 @@ body:has(#paginator) {
 
 input {
     height: 100%;
-    padding-block: 0.25rem;
+    padding: 0.5rem;
     font: inherit;
-    border: 1px solid var(--border);
+    border: 1px solid var(--edge);
     border-radius: 0.25rem;
 
     --outline-color: var(--primary);
@@ -59,7 +60,7 @@ label {
     cursor: pointer;
 }
 label:hover {
-    background-color: var(--light-1);
+    background-color: var(--soft);
 }
 label input[type="text"],
 label input[type="number"],
@@ -83,8 +84,16 @@ label input[type="radio"] {
 }
 .group button {
     width: 100%;
+    color: white;
+    background-color: var(--slate-700);
+    border-color: black;
     border-right-width: 0;
     border-radius: 0;
+
+    &:hover,
+    &:focus {
+        background-color: black;
+    }
 }
 .group button:first-child,
 .group input[type="text"] + button {
@@ -101,10 +110,11 @@ label input[type="radio"] {
 .toggles {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-column: 1 / 3;
 }
 .toggles button:not(:hover) {
-    color: var(--secondary-text);
-    background-color: var(--secondary);
+    color: var(--text);
+    background-color: white;
 }
 
 .controls button.delete-btn {
@@ -118,22 +128,24 @@ label input[type="radio"] {
 }
 
 .thumbnail {
-    position: relative;
     float: left;
+    position: relative;
     display: flex;
     align-items: center;
     width: 125px;
     height: 202px;
     margin: 2px;
     padding: 0.25rem;
-    background-color: var(--panel);
     font-weight: 400;
     text-align: center;
-    cursor: pointer;
     word-break: break-all;
+    background-color: var(--soft);
+    border: 1px solid var(--edge);
+    cursor: pointer;
 }
 .thumbnail.selected {
     background-color: var(--selected);
+    border-color: var(--amber-500);
 }
 .thumbnail img {
     display: block;
@@ -155,13 +167,18 @@ label input[type="radio"] {
 .thumbnail .number {
     position: absolute;
     display: table;
-    top: 0;
-    left: 0;
-    padding: 2px;
-	font-family: var(--family-monospace);
+    top: -1px;
+    left: -1px;
+    padding-inline: 0.75ch;
+    padding-block: 0.25ch;
+	font-family: monospace;
+    font-weight: 700;
     font-size: 10px;
+    color: var(--mute);
     background-color: Canvas;
+    border: inherit;
 }
+
 .preview,
 #zoomy {
     text-align: center;
diff --git a/client/styles/variables.css b/client/styles/variables.css
index 4f06870cf..909bdbb50 100644
--- a/client/styles/variables.css
+++ b/client/styles/variables.css
@@ -32,14 +32,14 @@
 	--selected: var(--amber-200);
 	--selected-text: black;
 
-	--info: var(--sky-200);
-	--info-text: var(--sky-900);
+	--info: var(--sky-100);
+	--info-text: var(--sky-800);
 
-    --success: var(--green-200);
-    --success-text: var(--green-900);
+    --success: var(--green-100);
+    --success-text: var(--green-800);
 
-    --danger: var(--red-200);
-    --danger-text: var(--red-950);
+    --danger: var(--red-100);
+    --danger-text: var(--red-800);
 
     --object-status-active: var(--green-600);
     --object-status-inactive: var(--yellow-600);

From a7479c2a8393cec351fc2c725e90e9242d9f0553 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 1 Apr 2025 20:25:08 +0000
Subject: [PATCH 15/33] Commit from GitHub Actions (Lint Pull Requests)

---
 client/components/edit/children/ChildList.tsx | 4 ++--
 client/next-env.d.ts                          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx
index b0201f26a..ebf0ca216 100644
--- a/client/components/edit/children/ChildList.tsx
+++ b/client/components/edit/children/ChildList.tsx
@@ -127,7 +127,7 @@ export const ChildList = ({
     const endNumber = startNumber + pageSize - 1;
     const paginatorLabel =
         children.numFound > 1 ? (
-            <p class={styles.childlist__pagination}>
+            <p className={styles.childlist__pagination}>
                 Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
                 {children.numFound}
             </p>
@@ -135,7 +135,7 @@ export const ChildList = ({
     return (
         <div className={styles.childlist}>
             <Grid container spacing={2} alignItems="center">
-                <Grid item xs="auto" sx={{ "&:empty": { display: "none" }}}>
+                <Grid item xs="auto" sx={{ "&:empty": { display: "none" } }}>
                     {thumbsButton}
                     {modelsButton}
                     {childButton}
diff --git a/client/next-env.d.ts b/client/next-env.d.ts
index 4f11a03dc..a4a7b3f5c 100644
--- a/client/next-env.d.ts
+++ b/client/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

From a71c63bc853496e706ec9cef6e413ba90352bcb9 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Thu, 3 Apr 2025 13:00:45 -0400
Subject: [PATCH 16/33] css: status btn improvements.

---
 client/components/edit/ObjectOrder.tsx        |  2 +-
 .../components/edit/ObjectStatus.module.css   | 57 ++++++++++++-------
 .../components/edit/ObjectSummary.module.css  |  8 +--
 client/components/edit/ObjectSummary.tsx      |  2 +-
 .../edit/children/ChildList.module.css        |  5 ++
 client/components/edit/children/ChildList.tsx | 13 +++--
 .../edit/datastream/Datastream.module.css     | 20 +++++++
 .../datastream/DatastreamControlButton.tsx    | 27 ++++-----
 8 files changed, 85 insertions(+), 49 deletions(-)

diff --git a/client/components/edit/ObjectOrder.tsx b/client/components/edit/ObjectOrder.tsx
index 224afc3fb..7e9129e14 100644
--- a/client/components/edit/ObjectOrder.tsx
+++ b/client/components/edit/ObjectOrder.tsx
@@ -72,7 +72,7 @@ const ObjectOrder = ({ pid }: ObjectOrderProps): React.ReactElement => {
         <div>{statusMessage}</div>
     ) : (
         <div>
-            Current sort: {currentSort}
+            Current sort: {currentSort}&nbsp;
             <button
                 onClick={() => {
                     changeSort(otherSort);
diff --git a/client/components/edit/ObjectStatus.module.css b/client/components/edit/ObjectStatus.module.css
index 8c1c6fb20..752f9b9da 100644
--- a/client/components/edit/ObjectStatus.module.css
+++ b/client/components/edit/ObjectStatus.module.css
@@ -1,32 +1,47 @@
 .status_btn {
     min-width: 120px;
-    text-align: start;
-}
 
-.active .indicator {
-    color: var(--object-status-active);
-}
-.active:is(:hover, :focus) .indicator {
-    color: var(--object-status-active-hover);
+    &:is(:hover, &:focus) {
+        color: white;
+    }
 }
 
-.inactive .indicator {
-    color: var(--object-status-inactive);
-}
-.inactive:is(:hover, :focus) .indicator {
-    color: var(--object-status-inactive-hover);
-}
+.status_btn.active {
+    background-color: var(--object-status-active);
 
-.deleted .indicator {
-    color: var(--object-status-deleted);
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-active-text);
+        border-color: var(--object-status-active-text);
+    }
 }
-.deleted:is(:hover, :focus) .indicator {
-    color: var(--object-status-deleted-hover);
+
+.status_btn.inactive {
+    background-color: var(--object-status-inactive);
+
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-inactive-text);
+        border-color: var(--object-status-inactive-text);
+    }
 }
 
-.unknown .indicator {
-    color: var(--object-status-unknown);
+.status_btn.deleted {
+    background-color: var(--object-status-deleted);
+
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-deleted-text);
+        border-color: var(--object-status-deleted-text);
+    }
 }
-.unknown:is(:hover, :focus) .indicator {
-    color: var(--object-status-unknown-hover);
+
+.status_btn.unknown {
+    background-color: var(--object-status-unknown);
+
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-unknown-text);
+        border-color: var(--object-status-unknown-text);
+    }
 }
diff --git a/client/components/edit/ObjectSummary.module.css b/client/components/edit/ObjectSummary.module.css
index 6a980db83..51bcb20a1 100644
--- a/client/components/edit/ObjectSummary.module.css
+++ b/client/components/edit/ObjectSummary.module.css
@@ -3,7 +3,7 @@
     padding-block: 1rem;
 	color: var(--info-text);
     background-color: var(--info);
-    border: 1px solid var(--sky-500);
+    border: 1px solid var(--sky-400);
 }
 
 .infobox h2 {
@@ -11,9 +11,9 @@
 }
 
 .infobox.infobox button {
-	width: auto;
-	margin-inline-end: 1rem;
-	margin-block-end: 1rem;
+	min-width: unset;
+	margin-inline-end: 1ch;
+	font-size: 10pt;
 	color: var(--button-text);
 	background-color: var(--button-face);
 	border-color: var(--info-text);
diff --git a/client/components/edit/ObjectSummary.tsx b/client/components/edit/ObjectSummary.tsx
index 2130935b1..e5fb83ab7 100644
--- a/client/components/edit/ObjectSummary.tsx
+++ b/client/components/edit/ObjectSummary.tsx
@@ -39,7 +39,7 @@ const ObjectSummary = (): React.ReactElement => {
             </div>
             <h2>{title}</h2>
             <div>{HtmlReactParser(description)}</div>
-            {loaded ? <ObjectButtonBar pid={currentPid} /> : ""}
+            {loaded ? <div style={{ marginBlock: "1rem" }}><ObjectButtonBar pid={currentPid} /></div> : ""}
             {loaded ? <ObjectOrder pid={currentPid} /> : ""}
             {loaded ? <ObjectChildCounts pid={currentPid} /> : ""}
             PID: {currentPid} <CopyPidButton pid={currentPid} />
diff --git a/client/components/edit/children/ChildList.module.css b/client/components/edit/children/ChildList.module.css
index 1d86276c9..736a19145 100644
--- a/client/components/edit/children/ChildList.module.css
+++ b/client/components/edit/children/ChildList.module.css
@@ -36,6 +36,11 @@ svg.childlist__expandicon {
 	color: var(--text-muted);
 }
 
+.childlist__toggles {
+	display: flex;
+	gap: 1ch;
+}
+
 /* Nested */
 
 .childlist__list {
diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx
index ebf0ca216..3c6de37e4 100644
--- a/client/components/edit/children/ChildList.tsx
+++ b/client/components/edit/children/ChildList.tsx
@@ -127,7 +127,7 @@ export const ChildList = ({
     const endNumber = startNumber + pageSize - 1;
     const paginatorLabel =
         children.numFound > 1 ? (
-            <p className={styles.childlist__pagination}>
+            <p class={styles.childlist__pagination}>
                 Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
                 {children.numFound}
             </p>
@@ -135,17 +135,18 @@ export const ChildList = ({
     return (
         <div className={styles.childlist}>
             <Grid container spacing={2} alignItems="center">
-                <Grid item xs="auto" sx={{ "&:empty": { display: "none" } }}>
-                    {thumbsButton}
-                    {modelsButton}
-                    {childButton}
-                </Grid>
                 <Grid item xs="auto">
                     {paginatorLabel}
                 </Grid>
                 <Grid item xs="auto">
                     {paginator}
                 </Grid>
+                <Grid item xs>&nbsp;</Grid>
+                <Grid item xs="auto" className={styles.childlist__toggles}>
+                    {thumbsButton}
+                    {modelsButton}
+                    {childButton}
+                </Grid>
             </Grid>
             <ul className={styles.childlist__list}>{contents.length ? contents : <em>Empty.</em>}</ul>
         </div>
diff --git a/client/components/edit/datastream/Datastream.module.css b/client/components/edit/datastream/Datastream.module.css
index b3e4edae3..a53184c95 100644
--- a/client/components/edit/datastream/Datastream.module.css
+++ b/client/components/edit/datastream/Datastream.module.css
@@ -2,3 +2,23 @@
 	color: var(--selected-text);
     background-color: var(--selected);
 }
+
+div[role="group"] .datastreamControlButton {
+	font-size: 14pt;
+	color: inherit;
+	border-color: var(--mute);
+	opacity: 0.75;
+	transition: none;
+
+	&:disabled {
+		opacity: 0.75;
+		color: var(--mute);
+		border-color: var(--mute);
+	}
+
+	&:hover,
+	&:focus {
+		color: white;
+		background-color: black;
+	}
+}
diff --git a/client/components/edit/datastream/DatastreamControlButton.tsx b/client/components/edit/datastream/DatastreamControlButton.tsx
index e9a0374b4..d627ea1c2 100644
--- a/client/components/edit/datastream/DatastreamControlButton.tsx
+++ b/client/components/edit/datastream/DatastreamControlButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import LoadingButton from "@mui/lab/LoadingButton";
-import Tooltip from "@mui/material/Tooltip";
+import styles from "./Datastream.module.css";
+import Button from "@mui/material/Button";
 import DataObject from "@mui/icons-material/DataObject";
 import Download from "@mui/icons-material/Download";
 import Delete from "@mui/icons-material/Delete";
@@ -52,20 +52,15 @@ const DatastreamControlButton = ({
         };
     };
     return (
-        <Tooltip title={modalState}>
-            <span>
-                <LoadingButton
-                    className="datastreamControlButton"
-                    loading={isLoading}
-                    aria-label={modalState}
-                    disabled={modalState !== "Upload" && disabled}
-                    onClick={onClick(modalState)}
-                    size="small"
-                >
-                    {Icons[modalState]}
-                </LoadingButton>
-            </span>
-        </Tooltip>
+        <Button
+            className={styles.datastreamControlButton}
+            disabled={modalState !== "Upload" && disabled}
+            onClick={onClick(modalState)}
+            aria-label={modalState}
+            title={modalState}
+        >
+            {Icons[modalState]}
+        </Button>
     );
 };
 

From 337d25178d844e69159fe328883ff36c4c600487 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Thu, 3 Apr 2025 14:28:51 -0400
Subject: [PATCH 17/33] populated datastreams to green. fix status buttons in
 ObjectSummary.

---
 client/components/edit/ObjectEditor.tsx       |  4 ++--
 .../components/edit/ObjectSummary.module.css  | 20 +++++++++----------
 .../edit/datastream/Datastream.module.css     |  7 +++++++
 .../components/edit/datastream/Datastream.tsx |  2 +-
 client/components/paginate/JobPaginator.tsx   |  2 +-
 client/styles/global.css                      |  2 +-
 client/styles/job-paginator.css               |  2 +-
 client/styles/variables.css                   | 20 ++++++++++---------
 8 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/client/components/edit/ObjectEditor.tsx b/client/components/edit/ObjectEditor.tsx
index ae464a9d6..d12805267 100644
--- a/client/components/edit/ObjectEditor.tsx
+++ b/client/components/edit/ObjectEditor.tsx
@@ -33,7 +33,7 @@ const ObjectEditor = ({ pid }: ObjectEditorProps): React.ReactElement => {
             <h1>Editor: Object {pid}</h1>
             <ObjectSummary />
             <Grid container>
-                <Grid item xs={4}>
+                <Grid item md>
                     <Box>
                         <h3>Object Tools</h3>
                         <ul>
@@ -43,7 +43,7 @@ const ObjectEditor = ({ pid }: ObjectEditorProps): React.ReactElement => {
                         </ul>
                     </Box>
                 </Grid>
-                <Grid item xs={4}>
+                <Grid item md>
                     <Box>
                         <h3>Datastreams</h3>
                         <DatastreamList />
diff --git a/client/components/edit/ObjectSummary.module.css b/client/components/edit/ObjectSummary.module.css
index 51bcb20a1..716af931b 100644
--- a/client/components/edit/ObjectSummary.module.css
+++ b/client/components/edit/ObjectSummary.module.css
@@ -3,24 +3,24 @@
     padding-block: 1rem;
 	color: var(--info-text);
     background-color: var(--info);
-    border: 1px solid var(--sky-400);
+    border: 1px solid var(--info-border);
 }
 
 .infobox h2 {
     margin: 0;
 }
 
-.infobox.infobox button {
+.infobox button {
 	min-width: unset;
 	margin-inline-end: 1ch;
+	padding-block: 0.5em 0.4em;
 	font-size: 10pt;
-	color: var(--button-text);
-	background-color: var(--button-face);
-	border-color: var(--info-text);
+	background-color: white;
+    border: 1px solid black;
 
-	&:hover, &:focus {
-		color: var(--button-hover-text);
-		background-color: var(--button-hover);
-		border-color: var(--button-hover);
-	}
+    &:hover,
+    &:focus {
+    	color: white;
+    	background-color: black;
+    }
 }
diff --git a/client/components/edit/datastream/Datastream.module.css b/client/components/edit/datastream/Datastream.module.css
index a53184c95..8d3693091 100644
--- a/client/components/edit/datastream/Datastream.module.css
+++ b/client/components/edit/datastream/Datastream.module.css
@@ -1,6 +1,13 @@
+.datastream {
+	margin-block: 0.125em;
+	padding-block: 0.375em;
+	border: 1px solid transparent;
+}
+
 .enabled {
 	color: var(--selected-text);
     background-color: var(--selected);
+    border-color: var(--selected-border);
 }
 
 div[role="group"] .datastreamControlButton {
diff --git a/client/components/edit/datastream/Datastream.tsx b/client/components/edit/datastream/Datastream.tsx
index 8817b1fd0..f3e986114 100644
--- a/client/components/edit/datastream/Datastream.tsx
+++ b/client/components/edit/datastream/Datastream.tsx
@@ -14,7 +14,7 @@ const Datastream = ({ datastream }: DatastreamProps): React.ReactElement => {
     const { stream, disabled } = datastream;
     return (
         <ListItem
-            classes={disabled ? {} : { root: styles.enabled }}
+            classes={{ root: `${styles.datastream} ${disabled ? "" : styles.enabled}` }}
             secondaryAction={<DatastreamControls datastream={stream} disabled={disabled} />}
         >
             <ListItemText primary={stream} />
diff --git a/client/components/paginate/JobPaginator.tsx b/client/components/paginate/JobPaginator.tsx
index fdb7cbfd1..5f4df72f6 100644
--- a/client/components/paginate/JobPaginator.tsx
+++ b/client/components/paginate/JobPaginator.tsx
@@ -26,7 +26,7 @@ const JobPaginator = ({ initialCategory, initialJob }: JobPaginatorProps): React
 
     return (
         <>
-            <ul className="breadcrumbs" style={{ marginBlockEnd: 0 }}>
+            <ul className="breadcrumbs">
                 <li>
                     <Link href="/">Main Menu</Link>
                 </li>
diff --git a/client/styles/global.css b/client/styles/global.css
index bebe6ee2f..9c5c8e04d 100644
--- a/client/styles/global.css
+++ b/client/styles/global.css
@@ -70,7 +70,7 @@
     .breadcrumbs {
         width: fit-content;
         margin-block: 1rem;
-        padding-inline: 1rem;
+        padding-inline: 0;
         padding-block: 0.5rem;
         font-size: 0.875rem;
         list-style: none;
diff --git a/client/styles/job-paginator.css b/client/styles/job-paginator.css
index e4f8f1943..6a9cf2d9e 100644
--- a/client/styles/job-paginator.css
+++ b/client/styles/job-paginator.css
@@ -145,7 +145,7 @@ label input[type="radio"] {
 }
 .thumbnail.selected {
     background-color: var(--selected);
-    border-color: var(--amber-500);
+    border-color: var(--selected-border);
 }
 .thumbnail img {
     display: block;
diff --git a/client/styles/variables.css b/client/styles/variables.css
index 909bdbb50..acfbbb943 100644
--- a/client/styles/variables.css
+++ b/client/styles/variables.css
@@ -29,11 +29,13 @@
     --active: oklch(0.577 0.245 27.325); /* Tailwind red-600 */
     --active-text: white;
 
-	--selected: var(--amber-200);
+	--selected: var(--emerald-200);
 	--selected-text: black;
+    --selected-border: var(--emerald-500);
 
 	--info: var(--sky-100);
 	--info-text: var(--sky-800);
+    --info-border: var(--sky-500);
 
     --success: var(--green-100);
     --success-text: var(--green-800);
@@ -41,13 +43,13 @@
     --danger: var(--red-100);
     --danger-text: var(--red-800);
 
-    --object-status-active: var(--green-600);
-    --object-status-inactive: var(--yellow-600);
-    --object-status-deleted: var(--red-600);
-    --object-status-unknown: var(--gray-600);
+    --object-status-active: var(--emerald-200);
+    --object-status-inactive: var(--yellow-200);
+    --object-status-deleted: var(--red-200);
+    --object-status-unknown: var(--gray-200);
 
-    --object-status-active-hover: var(--green-300);
-    --object-status-inactive-hover: var(--yellow-300);
-    --object-status-deleted-hover: var(--red-300);
-    --object-status-unknown-hover: var(--gray-300);
+    --object-status-active-text: var(--emerald-800);
+    --object-status-inactive-text: var(--yellow-800);
+    --object-status-deleted-text: var(--red-800);
+    --object-status-unknown-text: var(--gray-800);
 }

From c40fe2498ea1f72eb52e12ad495c6e277cac16af Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Thu, 3 Apr 2025 14:43:17 -0400
Subject: [PATCH 18/33] lint

---
 client/components/edit/ObjectSummary.tsx                  | 8 +++++++-
 client/components/edit/children/ChildList.tsx             | 6 ++++--
 .../edit/datastream/DatastreamControlButton.tsx           | 3 +--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/components/edit/ObjectSummary.tsx b/client/components/edit/ObjectSummary.tsx
index e5fb83ab7..047d8d078 100644
--- a/client/components/edit/ObjectSummary.tsx
+++ b/client/components/edit/ObjectSummary.tsx
@@ -39,7 +39,13 @@ const ObjectSummary = (): React.ReactElement => {
             </div>
             <h2>{title}</h2>
             <div>{HtmlReactParser(description)}</div>
-            {loaded ? <div style={{ marginBlock: "1rem" }}><ObjectButtonBar pid={currentPid} /></div> : ""}
+            {loaded ? (
+                <div style={{ marginBlock: "1rem" }}>
+                    <ObjectButtonBar pid={currentPid} />
+                </div>
+            ) : (
+                ""
+            )}
             {loaded ? <ObjectOrder pid={currentPid} /> : ""}
             {loaded ? <ObjectChildCounts pid={currentPid} /> : ""}
             PID: {currentPid} <CopyPidButton pid={currentPid} />
diff --git a/client/components/edit/children/ChildList.tsx b/client/components/edit/children/ChildList.tsx
index 3c6de37e4..b646e5a08 100644
--- a/client/components/edit/children/ChildList.tsx
+++ b/client/components/edit/children/ChildList.tsx
@@ -127,7 +127,7 @@ export const ChildList = ({
     const endNumber = startNumber + pageSize - 1;
     const paginatorLabel =
         children.numFound > 1 ? (
-            <p class={styles.childlist__pagination}>
+            <p className={styles.childlist__pagination}>
                 Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
                 {children.numFound}
             </p>
@@ -141,7 +141,9 @@ export const ChildList = ({
                 <Grid item xs="auto">
                     {paginator}
                 </Grid>
-                <Grid item xs>&nbsp;</Grid>
+                <Grid item xs>
+                    &nbsp;
+                </Grid>
                 <Grid item xs="auto" className={styles.childlist__toggles}>
                     {thumbsButton}
                     {modelsButton}
diff --git a/client/components/edit/datastream/DatastreamControlButton.tsx b/client/components/edit/datastream/DatastreamControlButton.tsx
index d627ea1c2..0951b8a99 100644
--- a/client/components/edit/datastream/DatastreamControlButton.tsx
+++ b/client/components/edit/datastream/DatastreamControlButton.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styles from "./Datastream.module.css";
 import Button from "@mui/material/Button";
 import DataObject from "@mui/icons-material/DataObject";
@@ -29,7 +29,6 @@ const DatastreamControlButton = ({
     datastream,
     disabled,
 }: DatastreamControlButtonProps): React.ReactElement => {
-    const [isLoading, setLoading] = useState(false);
     const {
         action: { setActiveDatastream, setDatastreamModalState },
     } = useEditorContext();

From f11d79760c28d0c43bff64d257d303879b50f0ee Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Mon, 14 Apr 2025 16:02:39 -0400
Subject: [PATCH 19/33] ci: mixed whitespace.

---
 client/components/edit/ObjectButtonBar.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/components/edit/ObjectButtonBar.module.css b/client/components/edit/ObjectButtonBar.module.css
index b2e73ae65..db40a82c1 100644
--- a/client/components/edit/ObjectButtonBar.module.css
+++ b/client/components/edit/ObjectButtonBar.module.css
@@ -1,11 +1,11 @@
 .objectBar {
-    display: grid;
+	display: grid;
 	grid-template-columns: repeat(4, auto);
 	width: fit-content;
 
-    & button {
+	& button {
 		width: fit-content;
-        white-space: nowrap;
+		white-space: nowrap;
 		border-color: transparent;
 		background-color: transparent;
 
@@ -13,6 +13,6 @@
 		&:focus {
 			border-color: black;
 			background-color: black;
-	    }
+		}
 	}
 }

From 27a780154d2e4d34a83a6e6e32442663b694dd01 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Thu, 24 Apr 2025 15:18:27 -0400
Subject: [PATCH 20/33] fix: object button bar delete.

---
 .../edit/DeleteObjectButton.module.css         |  7 +++++++
 client/components/edit/DeleteObjectButton.tsx  |  3 ++-
 .../components/edit/ObjectButtonBar.module.css | 18 +++++++++++-------
 .../components/edit/ObjectSummary.module.css   | 12 ++++--------
 4 files changed, 24 insertions(+), 16 deletions(-)
 create mode 100644 client/components/edit/DeleteObjectButton.module.css

diff --git a/client/components/edit/DeleteObjectButton.module.css b/client/components/edit/DeleteObjectButton.module.css
new file mode 100644
index 000000000..aff72ce21
--- /dev/null
+++ b/client/components/edit/DeleteObjectButton.module.css
@@ -0,0 +1,7 @@
+.deleteBtn {
+	&:hover,
+	&:focus {
+		background-color: var(--red-700);
+		border-color: var(--red-700);
+	}
+}
diff --git a/client/components/edit/DeleteObjectButton.tsx b/client/components/edit/DeleteObjectButton.tsx
index 465599b4f..07822619d 100644
--- a/client/components/edit/DeleteObjectButton.tsx
+++ b/client/components/edit/DeleteObjectButton.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import styles from "./DeleteObjectButton.module.css";
 import { useEditorContext } from "../../context/EditorContext";
 import Delete from "@mui/icons-material/Delete";
 import { getObjectParentsUrl, getObjectRecursiveChildPidsUrl } from "../../util/routes";
@@ -90,7 +91,7 @@ const DeleteObjectButton = ({ pid }: DeleteObjectButtonProps): React.ReactElemen
     };
     const visible = statusMessage.length === 0 && trashPid && loaded && childPidResponse?.loading !== true;
     return visible ? (
-        <button onClick={performDelete}>
+        <button className={`object-delete-btn ${styles.deleteBtn}`} onClick={performDelete}>
             <Delete style={{ height: "14px" }} titleAccess="Delete Object and Children" />
         </button>
     ) : (
diff --git a/client/components/edit/ObjectButtonBar.module.css b/client/components/edit/ObjectButtonBar.module.css
index db40a82c1..81f9d52ec 100644
--- a/client/components/edit/ObjectButtonBar.module.css
+++ b/client/components/edit/ObjectButtonBar.module.css
@@ -1,18 +1,22 @@
 .objectBar {
 	display: grid;
-	grid-template-columns: repeat(4, auto);
+	grid-template-columns: repeat(5, auto);
 	width: fit-content;
 
 	& button {
 		width: fit-content;
 		white-space: nowrap;
-		border-color: transparent;
-		background-color: transparent;
+		border-inline-width: 0;
+		border-radius: 0;
 
-		&:hover,
-		&:focus {
-			border-color: black;
-			background-color: black;
+		&:first-child {
+			border-inline-start-width: 1px;
+			border-radius: 4px 0 0 4px;
+		}
+
+		&:last-child {
+			border-inline-end-width: 1px;
+			border-radius: 0 4px 4px 0;
 		}
 	}
 }
diff --git a/client/components/edit/ObjectSummary.module.css b/client/components/edit/ObjectSummary.module.css
index 716af931b..0842d2439 100644
--- a/client/components/edit/ObjectSummary.module.css
+++ b/client/components/edit/ObjectSummary.module.css
@@ -12,15 +12,11 @@
 
 .infobox button {
 	min-width: unset;
-	margin-inline-end: 1ch;
 	padding-block: 0.5em 0.4em;
 	font-size: 10pt;
-	background-color: white;
-    border: 1px solid black;
 
-    &:hover,
-    &:focus {
-    	color: white;
-    	background-color: black;
-    }
+	&:not(:hover,:focus) {
+		background-color: white;
+	    border-color: black;
+	}
 }

From c503f4238a0f22ca01e0d13cb72f9561955068e1 Mon Sep 17 00:00:00 2001
From: Demian Katz <demian.katz@villanova.edu>
Date: Fri, 25 Apr 2025 12:56:16 -0400
Subject: [PATCH 21/33] Convert tabs to spaces.

---
 .../edit/DeleteObjectButton.module.css        | 10 ++--
 .../edit/ObjectButtonBar.module.css           | 34 ++++++-------
 .../components/edit/ObjectSummary.module.css  | 18 +++----
 .../edit/children/ChildList.module.css        | 50 +++++++++----------
 .../edit/datastream/Datastream.module.css     | 38 +++++++-------
 client/styles/global.css                      | 14 +++---
 client/styles/job-paginator.css               |  6 +--
 client/styles/variables.css                   | 16 +++---
 8 files changed, 93 insertions(+), 93 deletions(-)

diff --git a/client/components/edit/DeleteObjectButton.module.css b/client/components/edit/DeleteObjectButton.module.css
index aff72ce21..6c08fb1c8 100644
--- a/client/components/edit/DeleteObjectButton.module.css
+++ b/client/components/edit/DeleteObjectButton.module.css
@@ -1,7 +1,7 @@
 .deleteBtn {
-	&:hover,
-	&:focus {
-		background-color: var(--red-700);
-		border-color: var(--red-700);
-	}
+    &:hover,
+    &:focus {
+        background-color: var(--red-700);
+        border-color: var(--red-700);
+    }
 }
diff --git a/client/components/edit/ObjectButtonBar.module.css b/client/components/edit/ObjectButtonBar.module.css
index 81f9d52ec..5ee57a156 100644
--- a/client/components/edit/ObjectButtonBar.module.css
+++ b/client/components/edit/ObjectButtonBar.module.css
@@ -1,22 +1,22 @@
 .objectBar {
-	display: grid;
-	grid-template-columns: repeat(5, auto);
-	width: fit-content;
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    width: fit-content;
 
-	& button {
-		width: fit-content;
-		white-space: nowrap;
-		border-inline-width: 0;
-		border-radius: 0;
+    & button {
+        width: fit-content;
+        white-space: nowrap;
+        border-inline-width: 0;
+        border-radius: 0;
 
-		&:first-child {
-			border-inline-start-width: 1px;
-			border-radius: 4px 0 0 4px;
-		}
+        &:first-child {
+            border-inline-start-width: 1px;
+            border-radius: 4px 0 0 4px;
+        }
 
-		&:last-child {
-			border-inline-end-width: 1px;
-			border-radius: 0 4px 4px 0;
-		}
-	}
+        &:last-child {
+            border-inline-end-width: 1px;
+            border-radius: 0 4px 4px 0;
+        }
+    }
 }
diff --git a/client/components/edit/ObjectSummary.module.css b/client/components/edit/ObjectSummary.module.css
index 0842d2439..62562e90f 100644
--- a/client/components/edit/ObjectSummary.module.css
+++ b/client/components/edit/ObjectSummary.module.css
@@ -1,7 +1,7 @@
 .infobox {
-	padding-inline: 1lh;
+    padding-inline: 1lh;
     padding-block: 1rem;
-	color: var(--info-text);
+    color: var(--info-text);
     background-color: var(--info);
     border: 1px solid var(--info-border);
 }
@@ -11,12 +11,12 @@
 }
 
 .infobox button {
-	min-width: unset;
-	padding-block: 0.5em 0.4em;
-	font-size: 10pt;
+    min-width: unset;
+    padding-block: 0.5em 0.4em;
+    font-size: 10pt;
 
-	&:not(:hover,:focus) {
-		background-color: white;
-	    border-color: black;
-	}
+    &:not(:hover,:focus) {
+        background-color: white;
+        border-color: black;
+    }
 }
diff --git a/client/components/edit/children/ChildList.module.css b/client/components/edit/children/ChildList.module.css
index 736a19145..dca83bb2e 100644
--- a/client/components/edit/children/ChildList.module.css
+++ b/client/components/edit/children/ChildList.module.css
@@ -1,8 +1,8 @@
 .childlist {
-	padding-inline: 1rem;
-	padding-block: 1px;
-	color: CanvasText;
-	background-color: var(--soft);
+    padding-inline: 1rem;
+    padding-block: 1px;
+    color: CanvasText;
+    background-color: var(--soft);
 }
 
 .childlist__list {
@@ -21,40 +21,40 @@
 }
 
 svg.childlist__expandicon {
-	font-size: 21px;
-	cursor: pointer;
+    font-size: 21px;
+    cursor: pointer;
 
-	&:hover,
-	&:focus {
-		color: var(--active);
-	}
+    &:hover,
+    &:focus {
+        color: var(--active);
+    }
 }
 
 .childlist__pid {
-	font-family: var(--family-monospace);
-	text-align: end;
-	color: var(--text-muted);
+    font-family: var(--family-monospace);
+    text-align: end;
+    color: var(--text-muted);
 }
 
 .childlist__toggles {
-	display: flex;
-	gap: 1ch;
+    display: flex;
+    gap: 1ch;
 }
 
 /* Nested */
 
 .childlist__list {
-	.childlist {
-	    margin-inline-start: 0.5rem;
-	    margin-block-end: -0.25em;
-		padding-inline-end: 0;
-		border-inline-start: 1px solid var(--edge);
-	}
+    .childlist {
+        margin-inline-start: 0.5rem;
+        margin-block-end: -0.25em;
+        padding-inline-end: 0;
+        border-inline-start: 1px solid var(--edge);
+    }
 
-	.childlist__pagination {
-		margin-block: 0.25em;
-		font-size: 10pt;
-	}
+    .childlist__pagination {
+        margin-block: 0.25em;
+        font-size: 10pt;
+    }
 }
 
 /* Pagination alignment */
diff --git a/client/components/edit/datastream/Datastream.module.css b/client/components/edit/datastream/Datastream.module.css
index 8d3693091..167f553dd 100644
--- a/client/components/edit/datastream/Datastream.module.css
+++ b/client/components/edit/datastream/Datastream.module.css
@@ -1,31 +1,31 @@
 .datastream {
-	margin-block: 0.125em;
-	padding-block: 0.375em;
-	border: 1px solid transparent;
+    margin-block: 0.125em;
+    padding-block: 0.375em;
+    border: 1px solid transparent;
 }
 
 .enabled {
-	color: var(--selected-text);
+    color: var(--selected-text);
     background-color: var(--selected);
     border-color: var(--selected-border);
 }
 
 div[role="group"] .datastreamControlButton {
-	font-size: 14pt;
-	color: inherit;
-	border-color: var(--mute);
-	opacity: 0.75;
-	transition: none;
+    font-size: 14pt;
+    color: inherit;
+    border-color: var(--mute);
+    opacity: 0.75;
+    transition: none;
 
-	&:disabled {
-		opacity: 0.75;
-		color: var(--mute);
-		border-color: var(--mute);
-	}
+    &:disabled {
+        opacity: 0.75;
+        color: var(--mute);
+        border-color: var(--mute);
+    }
 
-	&:hover,
-	&:focus {
-		color: white;
-		background-color: black;
-	}
+    &:hover,
+    &:focus {
+        color: white;
+        background-color: black;
+    }
 }
diff --git a/client/styles/global.css b/client/styles/global.css
index 9c5c8e04d..f1910f823 100644
--- a/client/styles/global.css
+++ b/client/styles/global.css
@@ -1,7 +1,7 @@
 @layer reset {
-	html {
-		color-scheme: light;
-	}
+    html {
+        color-scheme: light;
+    }
 
     body {
         padding: 0;
@@ -39,10 +39,10 @@
     :is(a, button, input, textarea, summary):focus,
     /* :focus-visible styles */
     :is(a, button, input, textarea):focus-visible {
-		position: relative;
+        position: relative;
         outline: var(--outline-size) var(--outline-style) var(--outline-color);
         outline-offset: var(--outline-offset, var(--outline-size));
-		z-index: 100;
+        z-index: 100;
     }
 
     /* Remove fallback :focus styles when :focus-visible is available */
@@ -82,7 +82,7 @@
     }
 
     .breadcrumbs li:not(:first-child):before {
-		color: var(--text-muted);
+        color: var(--text-muted);
         content: " ❭ ";
     }
 
@@ -94,7 +94,7 @@
         padding-inline: 1rem;
         padding-block: 0.5rem;
         color: var(--button-text);
-		line-height: normal;
+        line-height: normal;
         text-decoration: none;
         background-color: var(--button-face);
         border: 1px solid var(--edge);
diff --git a/client/styles/job-paginator.css b/client/styles/job-paginator.css
index 6a9cf2d9e..0ec2cd844 100644
--- a/client/styles/job-paginator.css
+++ b/client/styles/job-paginator.css
@@ -1,11 +1,11 @@
 /* Layout */
 
 body:has(#paginator) {
-	background-color: var(--soft);
+    background-color: var(--soft);
 }
 
 .controls {
-	font-size: 14px;
+    font-size: 14px;
 }
 
 .pageList {
@@ -171,7 +171,7 @@ label input[type="radio"] {
     left: -1px;
     padding-inline: 0.75ch;
     padding-block: 0.25ch;
-	font-family: monospace;
+    font-family: monospace;
     font-weight: 700;
     font-size: 10px;
     color: var(--mute);
diff --git a/client/styles/variables.css b/client/styles/variables.css
index acfbbb943..ab9b23797 100644
--- a/client/styles/variables.css
+++ b/client/styles/variables.css
@@ -1,10 +1,10 @@
 /* Harmony colors imported in _app.tsx */
 
 :root {
-	--soft: var(--zinc-100);
-	--edge: var(--zinc-500);
-	--mute: var(--zinc-700);
-	--text: var(--zinc-900);
+    --soft: var(--zinc-100);
+    --edge: var(--zinc-500);
+    --mute: var(--zinc-700);
+    --text: var(--zinc-900);
 }
 
 :root {
@@ -29,12 +29,12 @@
     --active: oklch(0.577 0.245 27.325); /* Tailwind red-600 */
     --active-text: white;
 
-	--selected: var(--emerald-200);
-	--selected-text: black;
+    --selected: var(--emerald-200);
+    --selected-text: black;
     --selected-border: var(--emerald-500);
 
-	--info: var(--sky-100);
-	--info-text: var(--sky-800);
+    --info: var(--sky-100);
+    --info-text: var(--sky-800);
     --info-border: var(--sky-500);
 
     --success: var(--green-100);

From 5feb626b8b295db7b6c662b00eb0fe7add5c1e2f Mon Sep 17 00:00:00 2001
From: Demian Katz <demian.katz@villanova.edu>
Date: Fri, 25 Apr 2025 13:10:24 -0400
Subject: [PATCH 22/33] Update snapshots.

---
 .../DeleteObjectButton.test.tsx.snap          |   1 +
 .../__snapshots__/ObjectEditor.test.tsx.snap  |   4 +-
 .../__snapshots__/ObjectOrder.test.tsx.snap   |   2 +
 .../__snapshots__/ObjectStatus.test.tsx.snap  |   4 +-
 .../__snapshots__/ObjectSummary.test.tsx.snap |  10 +-
 .../__snapshots__/Child.test.tsx.snap         |  10 +-
 .../__snapshots__/ChildList.test.tsx.snap     | 145 +++++++++++-------
 .../__snapshots__/Datastream.test.tsx.snap    |   2 +-
 .../DatastreamControlButton.test.tsx.snap     |  64 +++-----
 .../__snapshots__/JobPaginator.test.tsx.snap  |   5 -
 10 files changed, 137 insertions(+), 110 deletions(-)

diff --git a/client/components/edit/__snapshots__/DeleteObjectButton.test.tsx.snap b/client/components/edit/__snapshots__/DeleteObjectButton.test.tsx.snap
index e778aa445..cfcd3a8e3 100644
--- a/client/components/edit/__snapshots__/DeleteObjectButton.test.tsx.snap
+++ b/client/components/edit/__snapshots__/DeleteObjectButton.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`DeleteObjectButton renders correctly when data is loaded 1`] = `
 <button
+  className="object-delete-btn deleteBtn"
   onClick={[Function]}
 >
   DeleteIcon
diff --git a/client/components/edit/__snapshots__/ObjectEditor.test.tsx.snap b/client/components/edit/__snapshots__/ObjectEditor.test.tsx.snap
index 65e62ea6b..678bfcda0 100644
--- a/client/components/edit/__snapshots__/ObjectEditor.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectEditor.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`ObjectEditor renders 1`] = `
     className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-md-true css-ehu4kr-MuiGrid-root"
     >
       <div
         className="MuiBox-root css-0"
@@ -35,7 +35,7 @@ exports[`ObjectEditor renders 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-md-true css-ehu4kr-MuiGrid-root"
     >
       <div
         className="MuiBox-root css-0"
diff --git a/client/components/edit/__snapshots__/ObjectOrder.test.tsx.snap b/client/components/edit/__snapshots__/ObjectOrder.test.tsx.snap
index 3105ca90b..d8b597aa3 100644
--- a/client/components/edit/__snapshots__/ObjectOrder.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectOrder.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`ObjectOrder defaults to title order for a pending object 1`] = `
 <div>
   Current sort: 
   title
+   
   <button
     onClick={[Function]}
   >
@@ -17,6 +18,7 @@ exports[`ObjectOrder displays a custom-sorted object correctly 1`] = `
 <div>
   Current sort: 
   custom
+   
   <button
     onClick={[Function]}
   >
diff --git a/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap b/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
index 4abe0d2a5..79ce7af0a 100644
--- a/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ObjectStatus defaults to unknown state 1`] = `
 [
   <button
-    className="unknown"
+    className="status_btn unknown"
     onClick={[Function]}
   >
     <span
@@ -31,7 +31,7 @@ exports[`ObjectStatus defaults to unknown state 1`] = `
 exports[`ObjectStatus displays the state found in the response 1`] = `
 [
   <button
-    className="inactive"
+    className="status_btn inactive"
     onClick={[Function]}
   >
     <span
diff --git a/client/components/edit/__snapshots__/ObjectSummary.test.tsx.snap b/client/components/edit/__snapshots__/ObjectSummary.test.tsx.snap
index d8c87e4f5..efa42b9ca 100644
--- a/client/components/edit/__snapshots__/ObjectSummary.test.tsx.snap
+++ b/client/components/edit/__snapshots__/ObjectSummary.test.tsx.snap
@@ -57,7 +57,15 @@ exports[`ObjectSummary renders information from metadata when available 1`] = `
       !
     </p>
   </div>
-  ObjectButtonBar
+  <div
+    style={
+      {
+        "marginBlock": "1rem",
+      }
+    }
+  >
+    ObjectButtonBar
+  </div>
   ObjectOrder
   ObjectChildCounts
   PID: 
diff --git a/client/components/edit/children/__snapshots__/Child.test.tsx.snap b/client/components/edit/children/__snapshots__/Child.test.tsx.snap
index f6a94dd4f..bb5ad869c 100644
--- a/client/components/edit/children/__snapshots__/Child.test.tsx.snap
+++ b/client/components/edit/children/__snapshots__/Child.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`Child handles empty titles appropriately 1`] = `
       CopyPidButton
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
       style={
         {
           "textAlign": "right",
@@ -116,7 +116,7 @@ exports[`Child renders a thumbnail 1`] = `
       CopyPidButton
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
       style={
         {
           "textAlign": "right",
@@ -183,7 +183,7 @@ exports[`Child renders child counts 1`] = `
       CopyPidButton
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
       style={
         {
           "textAlign": "right",
@@ -251,7 +251,7 @@ exports[`Child renders thumbnail and child counts 1`] = `
       CopyPidButton
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
       style={
         {
           "textAlign": "right",
@@ -313,7 +313,7 @@ exports[`Child renders using ajax-loaded data 1`] = `
       CopyPidButton
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-none css-116ifgy-MuiGrid-root"
       style={
         {
           "textAlign": "right",
diff --git a/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap b/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
index 37e3599dc..1f6c7c5a0 100644
--- a/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
+++ b/client/components/edit/children/__snapshots__/ChildList.test.tsx.snap
@@ -9,6 +9,17 @@ exports[`ChildList allows child counts to be toggled on 1`] = `
   >
     <div
       className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
     >
       <button
         onClick={[Function]}
@@ -26,12 +37,6 @@ exports[`ChildList allows child counts to be toggled on 1`] = `
         Hide Child Counts
       </button>
     </div>
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
   </div>
   <ul
     className="childlist__list"
@@ -52,6 +57,17 @@ exports[`ChildList allows models to be toggled on 1`] = `
   >
     <div
       className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
     >
       <button
         onClick={[Function]}
@@ -69,12 +85,6 @@ exports[`ChildList allows models to be toggled on 1`] = `
         Show Child Counts
       </button>
     </div>
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
   </div>
   <ul
     className="childlist__list"
@@ -95,6 +105,17 @@ exports[`ChildList allows thumbnails to be toggled on 1`] = `
   >
     <div
       className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
     >
       <button
         onClick={[Function]}
@@ -112,12 +133,6 @@ exports[`ChildList allows thumbnails to be toggled on 1`] = `
         Show Child Counts
       </button>
     </div>
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
   </div>
   <ul
     className="childlist__list"
@@ -138,6 +153,31 @@ exports[`ChildList displays a paginator when appropriate 1`] = `
   >
     <div
       className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      <p
+        className="childlist__pagination"
+      >
+        Showing 
+        1
+         - 
+        10
+         of
+         
+        10000
+      </p>
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    >
+      Pagination
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
     >
       <button
         onClick={[Function]}
@@ -155,24 +195,6 @@ exports[`ChildList displays a paginator when appropriate 1`] = `
         Show Child Counts
       </button>
     </div>
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    >
-      <p>
-        Showing 
-        1
-         - 
-        10
-         of
-         
-        10000
-      </p>
-    </div>
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    >
-      Pagination
-    </div>
   </div>
   <ul
     className="childlist__list"
@@ -220,6 +242,17 @@ exports[`ChildList renders using SelectableChild when a callback is provided 1`]
   >
     <div
       className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
     >
       <button
         onClick={[Function]}
@@ -237,12 +270,6 @@ exports[`ChildList renders using SelectableChild when a callback is provided 1`]
         Show Child Counts
       </button>
     </div>
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
   </div>
   <ul
     className="childlist__list"
@@ -263,6 +290,17 @@ exports[`ChildList renders using ajax-loaded object data 1`] = `
   >
     <div
       className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
     >
       <button
         onClick={[Function]}
@@ -280,12 +318,6 @@ exports[`ChildList renders using ajax-loaded object data 1`] = `
         Show Child Counts
       </button>
     </div>
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
   </div>
   <ul
     className="childlist__list"
@@ -306,6 +338,17 @@ exports[`ChildList renders using ajax-loaded root data 1`] = `
   >
     <div
       className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
+    />
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+    >
+       
+    </div>
+    <div
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto childlist__toggles css-1wrgmsj-MuiGrid-root"
     >
       <button
         onClick={[Function]}
@@ -323,12 +366,6 @@ exports[`ChildList renders using ajax-loaded root data 1`] = `
         Show Child Counts
       </button>
     </div>
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
-    <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto css-1wrgmsj-MuiGrid-root"
-    />
   </div>
   <ul
     className="childlist__list"
diff --git a/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap b/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
index da72c1844..e726d5a6d 100644
--- a/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
+++ b/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Datastream renders 1`] = `
     data-emotion="css 1rki8sg-MuiListItem-root"
   />,
   <li
-    className="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1rki8sg-MuiListItem-root"
+    className="MuiListItem-root datastream  MuiListItem-gutters MuiListItem-padding css-1rki8sg-MuiListItem-root"
     disabled={false}
   >
     <style
diff --git a/client/components/edit/datastream/__snapshots__/DatastreamControlButton.test.tsx.snap b/client/components/edit/datastream/__snapshots__/DatastreamControlButton.test.tsx.snap
index 0536110d1..7b4f151b0 100644
--- a/client/components/edit/datastream/__snapshots__/DatastreamControlButton.test.tsx.snap
+++ b/client/components/edit/datastream/__snapshots__/DatastreamControlButton.test.tsx.snap
@@ -1,53 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DatastreamControlButton renders 1`] = `
-<span
+<button
   aria-label="Upload"
-  aria-labelledby={null}
-  className=""
-  data-mui-internal-clone-element={true}
+  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary datastreamControlButton css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+  disabled={false}
   onBlur={[Function]}
+  onClick={[Function]}
+  onContextMenu={[Function]}
+  onDragLeave={[Function]}
   onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
   onMouseLeave={[Function]}
-  onMouseOver={[Function]}
+  onMouseUp={[Function]}
   onTouchEnd={[Function]}
+  onTouchMove={[Function]}
   onTouchStart={[Function]}
+  tabIndex={0}
+  title="Upload"
+  type="button"
 >
-  <button
-    aria-label="Upload"
-    className="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary datastreamControlButton css-owonun-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
-    disabled={false}
-    id=":r1:"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onContextMenu={[Function]}
-    onDragLeave={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
-    onTouchEnd={[Function]}
-    onTouchMove={[Function]}
-    onTouchStart={[Function]}
-    tabIndex={0}
-    type="button"
+  <svg
+    aria-hidden={true}
+    className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+    data-testid="UploadFileIcon"
+    focusable="false"
+    viewBox="0 0 24 24"
   >
-    <svg
-      aria-hidden={true}
-      className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-      data-testid="UploadFileIcon"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z"
-      />
-    </svg>
-    <span
-      className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    <path
+      d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z"
     />
-  </button>
-</span>
+  </svg>
+</button>
 `;
diff --git a/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap b/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
index bb0cc7d1a..1965d021b 100644
--- a/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
+++ b/client/components/paginate/__snapshots__/JobPaginator.test.tsx.snap
@@ -4,11 +4,6 @@ exports[`JobPaginator renders 1`] = `
 [
   <ul
     className="breadcrumbs"
-    style={
-      {
-        "marginBlockEnd": 0,
-      }
-    }
   >
     <li>
       <a

From 5c60e084f9e05d3adafc10b500e3d10c2ddb0949 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Mon, 5 May 2025 15:15:34 -0400
Subject: [PATCH 23/33] revert: DatastreamControlButton and unused
 object-editor.css.

---
 .../datastream/DatastreamControlButton.tsx    | 30 +++++----
 .../__snapshots__/Datastream.test.tsx.snap    |  2 +-
 .../DatastreamControlButton.test.tsx.snap     | 64 ++++++++++++-------
 client/pages/_app.tsx                         |  1 -
 client/styles/object-editor.css               |  0
 5 files changed, 59 insertions(+), 38 deletions(-)
 delete mode 100644 client/styles/object-editor.css

diff --git a/client/components/edit/datastream/DatastreamControlButton.tsx b/client/components/edit/datastream/DatastreamControlButton.tsx
index 0951b8a99..e9a0374b4 100644
--- a/client/components/edit/datastream/DatastreamControlButton.tsx
+++ b/client/components/edit/datastream/DatastreamControlButton.tsx
@@ -1,6 +1,6 @@
-import React from "react";
-import styles from "./Datastream.module.css";
-import Button from "@mui/material/Button";
+import React, { useState } from "react";
+import LoadingButton from "@mui/lab/LoadingButton";
+import Tooltip from "@mui/material/Tooltip";
 import DataObject from "@mui/icons-material/DataObject";
 import Download from "@mui/icons-material/Download";
 import Delete from "@mui/icons-material/Delete";
@@ -29,6 +29,7 @@ const DatastreamControlButton = ({
     datastream,
     disabled,
 }: DatastreamControlButtonProps): React.ReactElement => {
+    const [isLoading, setLoading] = useState(false);
     const {
         action: { setActiveDatastream, setDatastreamModalState },
     } = useEditorContext();
@@ -51,15 +52,20 @@ const DatastreamControlButton = ({
         };
     };
     return (
-        <Button
-            className={styles.datastreamControlButton}
-            disabled={modalState !== "Upload" && disabled}
-            onClick={onClick(modalState)}
-            aria-label={modalState}
-            title={modalState}
-        >
-            {Icons[modalState]}
-        </Button>
+        <Tooltip title={modalState}>
+            <span>
+                <LoadingButton
+                    className="datastreamControlButton"
+                    loading={isLoading}
+                    aria-label={modalState}
+                    disabled={modalState !== "Upload" && disabled}
+                    onClick={onClick(modalState)}
+                    size="small"
+                >
+                    {Icons[modalState]}
+                </LoadingButton>
+            </span>
+        </Tooltip>
     );
 };
 
diff --git a/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap b/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
index e726d5a6d..da72c1844 100644
--- a/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
+++ b/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Datastream renders 1`] = `
     data-emotion="css 1rki8sg-MuiListItem-root"
   />,
   <li
-    className="MuiListItem-root datastream  MuiListItem-gutters MuiListItem-padding css-1rki8sg-MuiListItem-root"
+    className="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1rki8sg-MuiListItem-root"
     disabled={false}
   >
     <style
diff --git a/client/components/edit/datastream/__snapshots__/DatastreamControlButton.test.tsx.snap b/client/components/edit/datastream/__snapshots__/DatastreamControlButton.test.tsx.snap
index 7b4f151b0..0536110d1 100644
--- a/client/components/edit/datastream/__snapshots__/DatastreamControlButton.test.tsx.snap
+++ b/client/components/edit/datastream/__snapshots__/DatastreamControlButton.test.tsx.snap
@@ -1,37 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DatastreamControlButton renders 1`] = `
-<button
+<span
   aria-label="Upload"
-  className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary datastreamControlButton css-1e6y48t-MuiButtonBase-root-MuiButton-root"
-  disabled={false}
+  aria-labelledby={null}
+  className=""
+  data-mui-internal-clone-element={true}
   onBlur={[Function]}
-  onClick={[Function]}
-  onContextMenu={[Function]}
-  onDragLeave={[Function]}
   onFocus={[Function]}
-  onKeyDown={[Function]}
-  onKeyUp={[Function]}
-  onMouseDown={[Function]}
   onMouseLeave={[Function]}
-  onMouseUp={[Function]}
+  onMouseOver={[Function]}
   onTouchEnd={[Function]}
-  onTouchMove={[Function]}
   onTouchStart={[Function]}
-  tabIndex={0}
-  title="Upload"
-  type="button"
 >
-  <svg
-    aria-hidden={true}
-    className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-    data-testid="UploadFileIcon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <button
+    aria-label="Upload"
+    className="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary datastreamControlButton css-owonun-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+    disabled={false}
+    id=":r1:"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
   >
-    <path
-      d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z"
+    <svg
+      aria-hidden={true}
+      className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+      data-testid="UploadFileIcon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z"
+      />
+    </svg>
+    <span
+      className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
-  </svg>
-</button>
+  </button>
+</span>
 `;
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
index 6ae12949b..ccd933308 100644
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@@ -13,7 +13,6 @@ import "../styles/reset.css";
 import "../styles/variables.css";
 import "../styles/global.css";
 import "../styles/job-paginator.css";
-import "../styles/object-editor.css";
 
 function MyApp({ Component, pageProps }: { Component: React.ReactNode }): React.ReactElement {
     return (
diff --git a/client/styles/object-editor.css b/client/styles/object-editor.css
deleted file mode 100644
index e69de29bb..000000000

From 296caf6dc413dd4b83ef8301089cbce5005fccbd Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Mon, 5 May 2025 15:29:17 -0400
Subject: [PATCH 24/33] testing: fix snapshot.

---
 .../edit/datastream/__snapshots__/Datastream.test.tsx.snap      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap b/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
index da72c1844..e726d5a6d 100644
--- a/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
+++ b/client/components/edit/datastream/__snapshots__/Datastream.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Datastream renders 1`] = `
     data-emotion="css 1rki8sg-MuiListItem-root"
   />,
   <li
-    className="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1rki8sg-MuiListItem-root"
+    className="MuiListItem-root datastream  MuiListItem-gutters MuiListItem-padding css-1rki8sg-MuiListItem-root"
     disabled={false}
   >
     <style

From 43c573c17c0d987fcde19b8433fa728de696f9b1 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 27 May 2025 13:22:36 -0400
Subject: [PATCH 25/33] license or remove vendor files.

---
 client/styles/vendor/colors-harmony.css     |   6 +
 client/styles/vendor/colors-tailwindcss.css | 244 --------------------
 2 files changed, 6 insertions(+), 244 deletions(-)
 delete mode 100644 client/styles/vendor/colors-tailwindcss.css

diff --git a/client/styles/vendor/colors-harmony.css b/client/styles/vendor/colors-harmony.css
index ac787d194..bceef8241 100644
--- a/client/styles/vendor/colors-harmony.css
+++ b/client/styles/vendor/colors-harmony.css
@@ -1,3 +1,9 @@
+/**
+ * Harmony Color Palette
+ * https://github.com/evilmartians/harmony
+ * Copyright (c) 2023 Evil Martians. MIT License.
+ */
+
 :root {
     --red-50: oklch(0.988281 0.0046875 20);
     --red-100: oklch(0.966797 0.0171875 20);
diff --git a/client/styles/vendor/colors-tailwindcss.css b/client/styles/vendor/colors-tailwindcss.css
deleted file mode 100644
index 8ebafb1cb..000000000
--- a/client/styles/vendor/colors-tailwindcss.css
+++ /dev/null
@@ -1,244 +0,0 @@
-:root {
-	--slate-50: #f8fafc;
-	--slate-100: #f1f5f9;
-	--slate-200: #e2e8f0;
-	--slate-300: #cbd5e1;
-	--slate-400: #94a3b8;
-	--slate-500: #64748b;
-	--slate-600: #475569;
-	--slate-700: #334155;
-	--slate-800: #1e293b;
-	--slate-900: #0f172a;
-	--slate-950: #020617;
-	--gray-50: #f9fafb;
-	--gray-100: #f3f4f6;
-	--gray-200: #e5e7eb;
-	--gray-300: #d1d5db;
-	--gray-400: #9ca3af;
-	--gray-500: #6b7280;
-	--gray-600: #4b5563;
-	--gray-700: #374151;
-	--gray-800: #1f2937;
-	--gray-900: #111827;
-	--gray-950: #030712;
-	--zinc-50: #fafafa;
-	--zinc-100: #f4f4f5;
-	--zinc-200: #e4e4e7;
-	--zinc-300: #d4d4d8;
-	--zinc-400: #a1a1aa;
-	--zinc-500: #71717a;
-	--zinc-600: #52525b;
-	--zinc-700: #3f3f46;
-	--zinc-800: #27272a;
-	--zinc-900: #18181b;
-	--zinc-950: #09090b;
-	--neutral-50: #fafafa;
-	--neutral-100: #f5f5f5;
-	--neutral-200: #e5e5e5;
-	--neutral-300: #d4d4d4;
-	--neutral-400: #a3a3a3;
-	--neutral-500: #737373;
-	--neutral-600: #525252;
-	--neutral-700: #404040;
-	--neutral-800: #262626;
-	--neutral-900: #171717;
-	--neutral-950: #0a0a0a;
-	--stone-50: #fafaf9;
-	--stone-100: #f5f5f4;
-	--stone-200: #e7e5e4;
-	--stone-300: #d6d3d1;
-	--stone-400: #a8a29e;
-	--stone-500: #78716c;
-	--stone-600: #57534e;
-	--stone-700: #44403c;
-	--stone-800: #292524;
-	--stone-900: #1c1917;
-	--stone-950: #0c0a09;
-	--red-50: #fef2f2;
-	--red-100: #fee2e2;
-	--red-200: #fecaca;
-	--red-300: #fca5a5;
-	--red-400: #f87171;
-	--red-500: #ef4444;
-	--red-600: #dc2626;
-	--red-700: #b91c1c;
-	--red-800: #991b1b;
-	--red-900: #7f1d1d;
-	--red-950: #450a0a;
-	--orange-50: #fff7ed;
-	--orange-100: #ffedd5;
-	--orange-200: #fed7aa;
-	--orange-300: #fdba74;
-	--orange-400: #fb923c;
-	--orange-500: #f97316;
-	--orange-600: #ea580c;
-	--orange-700: #c2410c;
-	--orange-800: #9a3412;
-	--orange-900: #7c2d12;
-	--orange-950: #431407;
-	--amber-50: #fffbeb;
-	--amber-100: #fef3c7;
-	--amber-200: #fde68a;
-	--amber-300: #fcd34d;
-	--amber-400: #fbbf24;
-	--amber-500: #f59e0b;
-	--amber-600: #d97706;
-	--amber-700: #b45309;
-	--amber-800: #92400e;
-	--amber-900: #78350f;
-	--amber-950: #451a03;
-	--yellow-50: #fefce8;
-	--yellow-100: #fef9c3;
-	--yellow-200: #fef08a;
-	--yellow-300: #fde047;
-	--yellow-400: #facc15;
-	--yellow-500: #eab308;
-	--yellow-600: #ca8a04;
-	--yellow-700: #a16207;
-	--yellow-800: #854d0e;
-	--yellow-900: #713f12;
-	--yellow-950: #422006;
-	--lime-50: #f7fee7;
-	--lime-100: #ecfccb;
-	--lime-200: #d9f99d;
-	--lime-300: #bef264;
-	--lime-400: #a3e635;
-	--lime-500: #84cc16;
-	--lime-600: #65a30d;
-	--lime-700: #4d7c0f;
-	--lime-800: #3f6212;
-	--lime-900: #365314;
-	--lime-950: #1a2e05;
-	--green-50: #f0fdf4;
-	--green-100: #dcfce7;
-	--green-200: #bbf7d0;
-	--green-300: #86efac;
-	--green-400: #4ade80;
-	--green-500: #22c55e;
-	--green-600: #16a34a;
-	--green-700: #15803d;
-	--green-800: #166534;
-	--green-900: #14532d;
-	--green-950: #052e16;
-	--emerald-50: #ecfdf5;
-	--emerald-100: #d1fae5;
-	--emerald-200: #a7f3d0;
-	--emerald-300: #6ee7b7;
-	--emerald-400: #34d399;
-	--emerald-500: #10b981;
-	--emerald-600: #059669;
-	--emerald-700: #047857;
-	--emerald-800: #065f46;
-	--emerald-900: #064e3b;
-	--emerald-950: #022c22;
-	--teal-50: #f0fdfa;
-	--teal-100: #ccfbf1;
-	--teal-200: #99f6e4;
-	--teal-300: #5eead4;
-	--teal-400: #2dd4bf;
-	--teal-500: #14b8a6;
-	--teal-600: #0d9488;
-	--teal-700: #0f766e;
-	--teal-800: #115e59;
-	--teal-900: #134e4a;
-	--teal-950: #042f2e;
-	--cyan-50: #ecfeff;
-	--cyan-100: #cffafe;
-	--cyan-200: #a5f3fc;
-	--cyan-300: #67e8f9;
-	--cyan-400: #22d3ee;
-	--cyan-500: #06b6d4;
-	--cyan-600: #0891b2;
-	--cyan-700: #0e7490;
-	--cyan-800: #155e75;
-	--cyan-900: #164e63;
-	--cyan-950: #083344;
-	--sky-50: #f0f9ff;
-	--sky-100: #e0f2fe;
-	--sky-200: #bae6fd;
-	--sky-300: #7dd3fc;
-	--sky-400: #38bdf8;
-	--sky-500: #0ea5e9;
-	--sky-600: #0284c7;
-	--sky-700: #0369a1;
-	--sky-800: #075985;
-	--sky-900: #0c4a6e;
-	--sky-950: #082f49;
-	--blue-50: #eff6ff;
-	--blue-100: #dbeafe;
-	--blue-200: #bfdbfe;
-	--blue-300: #93c5fd;
-	--blue-400: #60a5fa;
-	--blue-500: #3b82f6;
-	--blue-600: #2563eb;
-	--blue-700: #1d4ed8;
-	--blue-800: #1e40af;
-	--blue-900: #1e3a8a;
-	--blue-950: #172554;
-	--indigo-50: #eef2ff;
-	--indigo-100: #e0e7ff;
-	--indigo-200: #c7d2fe;
-	--indigo-300: #a5b4fc;
-	--indigo-400: #818cf8;
-	--indigo-500: #6366f1;
-	--indigo-600: #4f46e5;
-	--indigo-700: #4338ca;
-	--indigo-800: #3730a3;
-	--indigo-900: #312e81;
-	--indigo-950: #1e1b4b;
-	--violet-50: #f5f3ff;
-	--violet-100: #ede9fe;
-	--violet-200: #ddd6fe;
-	--violet-300: #c4b5fd;
-	--violet-400: #a78bfa;
-	--violet-500: #8b5cf6;
-	--violet-600: #7c3aed;
-	--violet-700: #6d28d9;
-	--violet-800: #5b21b6;
-	--violet-900: #4c1d95;
-	--violet-950: #2e1065;
-	--purple-50: #faf5ff;
-	--purple-100: #f3e8ff;
-	--purple-200: #e9d5ff;
-	--purple-300: #d8b4fe;
-	--purple-400: #c084fc;
-	--purple-500: #a855f7;
-	--purple-600: #9333ea;
-	--purple-700: #7e22ce;
-	--purple-800: #6b21a8;
-	--purple-900: #581c87;
-	--purple-950: #3b0764;
-	--fuchsia-50: #fdf4ff;
-	--fuchsia-100: #fae8ff;
-	--fuchsia-200: #f5d0fe;
-	--fuchsia-300: #f0abfc;
-	--fuchsia-400: #e879f9;
-	--fuchsia-500: #d946ef;
-	--fuchsia-600: #c026d3;
-	--fuchsia-700: #a21caf;
-	--fuchsia-800: #86198f;
-	--fuchsia-900: #701a75;
-	--fuchsia-950: #4a044e;
-	--pink-50: #fdf2f8;
-	--pink-100: #fce7f3;
-	--pink-200: #fbcfe8;
-	--pink-300: #f9a8d4;
-	--pink-400: #f472b6;
-	--pink-500: #ec4899;
-	--pink-600: #db2777;
-	--pink-700: #be185d;
-	--pink-800: #9d174d;
-	--pink-900: #831843;
-	--pink-950: #500724;
-	--rose-50: #fff1f2;
-	--rose-100: #ffe4e6;
-	--rose-200: #fecdd3;
-	--rose-300: #fda4af;
-	--rose-400: #fb7185;
-	--rose-500: #f43f5e;
-	--rose-600: #e11d48;
-	--rose-700: #be123c;
-	--rose-800: #9f1239;
-	--rose-900: #881337;
-	--rose-950: #4c0519;
-}

From a9fed82999ec722e87f606bda5ef3e45859240bd Mon Sep 17 00:00:00 2001
From: Chris Hallberg <chris.hallberg@hey.com>
Date: Tue, 27 May 2025 14:10:49 -0400
Subject: [PATCH 26/33] fix: icon sizes and contrast.

---
 client/components/edit/ObjectSummary.module.css      |  1 -
 .../datastream/DatastreamControlButton.module.css    | 10 ++++++++++
 .../edit/datastream/DatastreamControlButton.tsx      |  3 ++-
 client/styles/global.css                             | 12 ++++++++++--
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 client/components/edit/datastream/DatastreamControlButton.module.css

diff --git a/client/components/edit/ObjectSummary.module.css b/client/components/edit/ObjectSummary.module.css
index 62562e90f..ca95a6355 100644
--- a/client/components/edit/ObjectSummary.module.css
+++ b/client/components/edit/ObjectSummary.module.css
@@ -13,7 +13,6 @@
 .infobox button {
     min-width: unset;
     padding-block: 0.5em 0.4em;
-    font-size: 10pt;
 
     &:not(:hover,:focus) {
         background-color: white;
diff --git a/client/components/edit/datastream/DatastreamControlButton.module.css b/client/components/edit/datastream/DatastreamControlButton.module.css
new file mode 100644
index 000000000..7b713df59
--- /dev/null
+++ b/client/components/edit/datastream/DatastreamControlButton.module.css
@@ -0,0 +1,10 @@
+button.datastreamControlButton {
+	font-size: 16pt;
+	transition: none;
+
+	&:hover,
+	&:focus {
+		color: white;
+		background-color: black;
+	}
+}
diff --git a/client/components/edit/datastream/DatastreamControlButton.tsx b/client/components/edit/datastream/DatastreamControlButton.tsx
index e9a0374b4..1a327ae7d 100644
--- a/client/components/edit/datastream/DatastreamControlButton.tsx
+++ b/client/components/edit/datastream/DatastreamControlButton.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import styles from "./DatastreamControlButton.module.css";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Tooltip from "@mui/material/Tooltip";
 import DataObject from "@mui/icons-material/DataObject";
@@ -55,7 +56,7 @@ const DatastreamControlButton = ({
         <Tooltip title={modalState}>
             <span>
                 <LoadingButton
-                    className="datastreamControlButton"
+                    className={styles.datastreamControlButton}
                     loading={isLoading}
                     aria-label={modalState}
                     disabled={modalState !== "Upload" && disabled}
diff --git a/client/styles/global.css b/client/styles/global.css
index f1910f823..40492bfe0 100644
--- a/client/styles/global.css
+++ b/client/styles/global.css
@@ -11,6 +11,13 @@
 }
 
 @layer global {
+    a {
+        &:hover,
+        &:focus {
+            color: black;
+        }
+    }
+
     h1 {
         margin-block-start: 0;
     }
@@ -93,6 +100,7 @@
         display: inline-block;
         padding-inline: 1rem;
         padding-block: 0.5rem;
+        font-size: 1em;
         color: var(--button-text);
         line-height: normal;
         text-decoration: none;
@@ -120,12 +128,12 @@
 }
 
 /* MUI: better default icon size */
-svg.css-i4bv87-MuiSvgIcon-root {
+svg[class*="MuiSvgIcon-root"] {
     font-size: 1em;
     vertical-align: top;
 }
 
 /* MUI: modal */
-.css-tlc64q-MuiPaper-root-MuiDialog-paper {
+[class*="MuiPaper-root"][class*="MuiDialog-paper"] {
     background-color: Canvas;
 }

From ac23f780691bd35ecc32ea56f3fa76b9c6600933 Mon Sep 17 00:00:00 2001
From: Jason Benson <jbenso04@villanova.edu>
Date: Fri, 19 Dec 2025 13:54:48 -0500
Subject: [PATCH 27/33] fix(css): tabs to spaces. replace old alignment.

---
 .../datastream/DatastreamControlButton.module.css  | 14 +++++++-------
 client/styles/job-paginator.css                    |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/components/edit/datastream/DatastreamControlButton.module.css b/client/components/edit/datastream/DatastreamControlButton.module.css
index 7b713df59..452c9d6a2 100644
--- a/client/components/edit/datastream/DatastreamControlButton.module.css
+++ b/client/components/edit/datastream/DatastreamControlButton.module.css
@@ -1,10 +1,10 @@
 button.datastreamControlButton {
-	font-size: 16pt;
-	transition: none;
+    font-size: 16pt;
+    transition: none;
 
-	&:hover,
-	&:focus {
-		color: white;
-		background-color: black;
-	}
+    &:hover,
+    &:focus {
+        color: white;
+        background-color: black;
+    }
 }
diff --git a/client/styles/job-paginator.css b/client/styles/job-paginator.css
index 0ec2cd844..2c5364cef 100644
--- a/client/styles/job-paginator.css
+++ b/client/styles/job-paginator.css
@@ -21,7 +21,7 @@ body:has(#paginator) {
 
 .top-row {
     display: flex;
-    align-items: end;
+    align-items: flex-end;
     width: 100%;
     margin-block: 0.25rem;
 }

From fc2655315e35cb7890476a56b44ec5aa61a275c7 Mon Sep 17 00:00:00 2001
From: Jason Benson <jbenso04@villanova.edu>
Date: Fri, 19 Dec 2025 15:12:12 -0500
Subject: [PATCH 28/33] feat(colors): you cannot stop me from changing the
 color scheme every year!

---
 .../edit/DeleteObjectButton.module.css        |   4 +-
 client/pages/_app.tsx                         |   2 +-
 client/styles/global.css                      |   1 +
 client/styles/job-paginator.css               |   2 +-
 client/styles/variables.css                   |  48 +--
 client/styles/vendor/colors-radix-light.css   | 404 ++++++++++++++++++
 6 files changed, 433 insertions(+), 28 deletions(-)
 create mode 100644 client/styles/vendor/colors-radix-light.css

diff --git a/client/components/edit/DeleteObjectButton.module.css b/client/components/edit/DeleteObjectButton.module.css
index 6c08fb1c8..7957a1f91 100644
--- a/client/components/edit/DeleteObjectButton.module.css
+++ b/client/components/edit/DeleteObjectButton.module.css
@@ -1,7 +1,7 @@
 .deleteBtn {
     &:hover,
     &:focus {
-        background-color: var(--red-700);
-        border-color: var(--red-700);
+        background-color: var(--red-11);
+        border-color: var(--red-11);
     }
 }
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
index ccd933308..ec5793ce9 100644
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@@ -7,7 +7,7 @@ import { FetchContextProvider } from "../context/FetchContext";
 import LogoutButton from "../components/LogoutButton";
 
 import "../styles/vendor/modern-normalize.css";
-import "../styles/vendor/colors-harmony.css";
+import "../styles/vendor/colors-radix-light.css";
 
 import "../styles/reset.css";
 import "../styles/variables.css";
diff --git a/client/styles/global.css b/client/styles/global.css
index 40492bfe0..116291ce6 100644
--- a/client/styles/global.css
+++ b/client/styles/global.css
@@ -129,6 +129,7 @@
 
 /* MUI: better default icon size */
 svg[class*="MuiSvgIcon-root"] {
+    margin-top: 0.1em;
     font-size: 1em;
     vertical-align: top;
 }
diff --git a/client/styles/job-paginator.css b/client/styles/job-paginator.css
index 2c5364cef..1c7b05a6c 100644
--- a/client/styles/job-paginator.css
+++ b/client/styles/job-paginator.css
@@ -85,7 +85,7 @@ label input[type="radio"] {
 .group button {
     width: 100%;
     color: white;
-    background-color: var(--slate-700);
+    background-color: var(--slate-11);
     border-color: black;
     border-right-width: 0;
     border-radius: 0;
diff --git a/client/styles/variables.css b/client/styles/variables.css
index ab9b23797..ee635e157 100644
--- a/client/styles/variables.css
+++ b/client/styles/variables.css
@@ -1,10 +1,10 @@
-/* Harmony colors imported in _app.tsx */
+/* Radix colors imported in _app.tsx */
 
 :root {
-    --soft: var(--zinc-100);
-    --edge: var(--zinc-500);
-    --mute: var(--zinc-700);
-    --text: var(--zinc-900);
+    --soft: var(--slate-02);
+    --edge: var(--slate-07);
+    --mute: var(--slate-11);
+    --text: var(--slate-12);
 }
 
 :root {
@@ -14,7 +14,7 @@
     --family-serif: ui-serif, serif;
     --family-monospace: ui-monospace, monospace;
 
-    --primary: var(--sky-700);
+    --primary: var(--sky-11);
     --primary-text: white;
 
     --secondary: var(--mute);
@@ -26,30 +26,30 @@
     --button-hover: black;
     --button-hover-text: white;
 
-    --active: oklch(0.577 0.245 27.325); /* Tailwind red-600 */
+    --active: var(--red-11);
     --active-text: white;
 
-    --selected: var(--emerald-200);
+    --selected: var(--green-03);
     --selected-text: black;
-    --selected-border: var(--emerald-500);
+    --selected-border: var(--green-07);
 
-    --info: var(--sky-100);
-    --info-text: var(--sky-800);
-    --info-border: var(--sky-500);
+    --info: var(--sky-02);
+    --info-text: var(--sky-11);
+    --info-border: var(--sky-07);
 
-    --success: var(--green-100);
-    --success-text: var(--green-800);
+    --success: var(--green-02);
+    --success-text: var(--green-11);
 
-    --danger: var(--red-100);
-    --danger-text: var(--red-800);
+    --danger: var(--red-02);
+    --danger-text: var(--red-11);
 
-    --object-status-active: var(--emerald-200);
-    --object-status-inactive: var(--yellow-200);
-    --object-status-deleted: var(--red-200);
-    --object-status-unknown: var(--gray-200);
+    --object-status-active: var(--green-03);
+    --object-status-inactive: var(--yellow-03);
+    --object-status-deleted: var(--red-03);
+    --object-status-unknown: var(--gray-03);
 
-    --object-status-active-text: var(--emerald-800);
-    --object-status-inactive-text: var(--yellow-800);
-    --object-status-deleted-text: var(--red-800);
-    --object-status-unknown-text: var(--gray-800);
+    --object-status-active-text: var(--green-11);
+    --object-status-inactive-text: var(--yellow-11);
+    --object-status-deleted-text: var(--red-11);
+    --object-status-unknown-text: var(--gray-11);
 }
diff --git a/client/styles/vendor/colors-radix-light.css b/client/styles/vendor/colors-radix-light.css
new file mode 100644
index 000000000..ed157a110
--- /dev/null
+++ b/client/styles/vendor/colors-radix-light.css
@@ -0,0 +1,404 @@
+:root {
+	--amber-01: oklch(0.994 0.003 84.62);
+	--amber-02: oklch(0.9862 0.024 100.26);
+	--amber-03: oklch(0.969 0.069 100.36);
+	--amber-04: oklch(0.9454 0.104 98.19);
+	--amber-05: oklch(0.9184 0.133 98.4);
+	--amber-06: oklch(0.8812 0.124 93.24);
+	--amber-07: oklch(0.8274 0.122 86.18);
+	--amber-08: oklch(0.7582 0.14 76.7);
+	--amber-09: oklch(0.8562 0.178 81.37);
+	--amber-10: oklch(0.8315 0.168 80.94);
+	--amber-11: oklch(0.5692 0.144 67.28);
+	--amber-12: oklch(0.3519 0.049 53.74);
+
+	--blue-01: oklch(0.9932 0.003 247.64);
+	--blue-02: oklch(0.9815 0.01 243.26);
+	--blue-03: oklch(0.96 0.02 236.71);
+	--blue-04: oklch(0.9373 0.037 239.03);
+	--blue-05: oklch(0.906 0.053 242.8);
+	--blue-06: oklch(0.8638 0.069 243.18);
+	--blue-07: oklch(0.8092 0.088 243.34);
+	--blue-08: oklch(0.7348 0.121 243);
+	--blue-09: oklch(0.6493 0.193 251.81);
+	--blue-10: oklch(0.6211 0.184 251.92);
+	--blue-11: oklch(0.5577 0.189 253.01);
+	--blue-12: oklch(0.324 0.097 258.96);
+
+	--bronze-01: oklch(0.9915 0.001 15.92);
+	--bronze-02: oklch(0.9806 0.007 42.99);
+	--bronze-03: oklch(0.9528 0.01 44.26);
+	--bronze-04: oklch(0.9252 0.014 43.57);
+	--bronze-05: oklch(0.8954 0.018 42.64);
+	--bronze-06: oklch(0.8599 0.023 43.4);
+	--bronze-07: oklch(0.8113 0.03 41.94);
+	--bronze-08: oklch(0.7418 0.039 41.18);
+	--bronze-09: oklch(0.6275 0.046 44.29);
+	--bronze-10: oklch(0.588 0.045 42.44);
+	--bronze-11: oklch(0.5105 0.044 38.37);
+	--bronze-12: oklch(0.3292 0.029 35.24);
+
+	--brown-01: oklch(0.9943 0.002 63.24);
+	--brown-02: oklch(0.9832 0.006 65.73);
+	--brown-03: oklch(0.9541 0.013 67.82);
+	--brown-04: oklch(0.9261 0.02 66.85);
+	--brown-05: oklch(0.8969 0.029 65.79);
+	--brown-06: oklch(0.8624 0.039 65.47);
+	--brown-07: oklch(0.8153 0.053 64.22);
+	--brown-08: oklch(0.7467 0.072 62.45);
+	--brown-09: oklch(0.6327 0.078 60.77);
+	--brown-10: oklch(0.5967 0.072 59.28);
+	--brown-11: oklch(0.5121 0.058 55.46);
+	--brown-12: oklch(0.3315 0.018 46.98);
+
+	--crimson-01: oklch(0.9938 0.003 356.31);
+	--crimson-02: oklch(0.9818 0.008 357.23);
+	--crimson-03: oklch(0.9541 0.026 356.27);
+	--crimson-04: oklch(0.9252 0.041 356.3);
+	--crimson-05: oklch(0.8928 0.054 355.77);
+	--crimson-06: oklch(0.855 0.065 355.57);
+	--crimson-07: oklch(0.8078 0.078 354.8);
+	--crimson-08: oklch(0.75 0.099 354.12);
+	--crimson-09: oklch(0.6343 0.213 1.3);
+	--crimson-10: oklch(0.608 0.211 2.36);
+	--crimson-11: oklch(0.5521 0.207 4.49);
+	--crimson-12: oklch(0.3408 0.113 356.83);
+
+	--cyan-01: oklch(0.9921 0.004 219.25);
+	--cyan-02: oklch(0.9803 0.009 202.89);
+	--cyan-03: oklch(0.9581 0.026 203.61);
+	--cyan-04: oklch(0.9319 0.041 204.74);
+	--cyan-05: oklch(0.8998 0.054 206.49);
+	--cyan-06: oklch(0.8593 0.066 207.67);
+	--cyan-07: oklch(0.8045 0.082 209.58);
+	--cyan-08: oklch(0.727 0.11 211.67);
+	--cyan-09: oklch(0.6609 0.122 221.49);
+	--cyan-10: oklch(0.6267 0.114 221.32);
+	--cyan-11: oklch(0.5403 0.127 223.72);
+	--cyan-12: oklch(0.3317 0.053 218.57);
+
+	--gold-01: oklch(0.9937 0.001 106.42);
+	--gold-02: oklch(0.9809 0.009 97.34);
+	--gold-03: oklch(0.9534 0.012 94.69);
+	--gold-04: oklch(0.9257 0.015 93.18);
+	--gold-05: oklch(0.8958 0.019 90.73);
+	--gold-06: oklch(0.8596 0.025 88.38);
+	--gold-07: oklch(0.8101 0.032 83.41);
+	--gold-08: oklch(0.7386 0.042 78.17);
+	--gold-09: oklch(0.6206 0.049 78.13);
+	--gold-10: oklch(0.5877 0.047 77.42);
+	--gold-11: oklch(0.5039 0.039 78.1);
+	--gold-12: oklch(0.3321 0.019 81.67);
+
+	--grass-01: oklch(0.994 0.005 146.39);
+	--grass-02: oklch(0.982 0.009 145.93);
+	--grass-03: oklch(0.9608 0.023 145.27);
+	--grass-04: oklch(0.9342 0.037 146.18);
+	--grass-05: oklch(0.9013 0.053 146.35);
+	--grass-06: oklch(0.8578 0.071 146.83);
+	--grass-07: oklch(0.7985 0.095 147.47);
+	--grass-08: oklch(0.7165 0.13 148.35);
+	--grass-09: oklch(0.6516 0.147 147.37);
+	--grass-10: oklch(0.6138 0.142 147.32);
+	--grass-11: oklch(0.5268 0.13 147.18);
+	--grass-12: oklch(0.3268 0.053 148.58);
+
+	--gray-01: oklch(0.9909 0 0);
+	--gray-02: oklch(0.981 0 0);
+	--gray-03: oklch(0.9535 0 0);
+	--gray-04: oklch(0.9296 0 167.47);
+	--gray-05: oklch(0.9079 0 180);
+	--gray-06: oklch(0.8838 0 0);
+	--gray-07: oklch(0.8508 0 213.69);
+	--gray-08: oklch(0.791 0 180);
+	--gray-09: oklch(0.6435 0 0);
+	--gray-10: oklch(0.6085 0 0);
+	--gray-11: oklch(0.5031 0 187.13);
+	--gray-12: oklch(0.243 0 180);
+
+	--green-01: oklch(0.9943 0.004 159.06);
+	--green-02: oklch(0.9816 0.009 155.31);
+	--green-03: oklch(0.9588 0.023 156.38);
+	--green-04: oklch(0.9325 0.036 156.6);
+	--green-05: oklch(0.8995 0.05 157.22);
+	--green-06: oklch(0.857 0.065 157.89);
+	--green-07: oklch(0.7977 0.084 159.02);
+	--green-08: oklch(0.7144 0.112 160.6);
+	--green-09: oklch(0.6405 0.133 157.75);
+	--green-10: oklch(0.6112 0.126 158.31);
+	--green-11: oklch(0.529 0.133 158.33);
+	--green-12: oklch(0.3218 0.047 164.62);
+
+	--indigo-01: oklch(0.9942 0.001 286.37);
+	--indigo-02: oklch(0.9829 0.008 271.38);
+	--indigo-03: oklch(0.9607 0.017 268.55);
+	--indigo-04: oklch(0.9353 0.034 268.49);
+	--indigo-05: oklch(0.9032 0.051 269.98);
+	--indigo-06: oklch(0.863 0.071 271.51);
+	--indigo-07: oklch(0.8068 0.087 271.37);
+	--indigo-08: oklch(0.7301 0.113 270.52);
+	--indigo-09: oklch(0.5436 0.191 267.08);
+	--indigo-10: oklch(0.5112 0.195 266.48);
+	--indigo-11: oklch(0.5097 0.173 267.11);
+	--indigo-12: oklch(0.3126 0.086 268.56);
+
+	--iris-01: oklch(0.9945 0.003 286.35);
+	--iris-02: oklch(0.9812 0.009 284.1);
+	--iris-03: oklch(0.9614 0.018 283.8);
+	--iris-04: oklch(0.9351 0.035 283.44);
+	--iris-05: oklch(0.9045 0.053 283.77);
+	--iris-06: oklch(0.8646 0.07 283.11);
+	--iris-07: oklch(0.8079 0.088 282.85);
+	--iris-08: oklch(0.7292 0.118 281.48);
+	--iris-09: oklch(0.5403 0.184 278.3);
+	--iris-10: oklch(0.5086 0.186 277.49);
+	--iris-11: oklch(0.5104 0.173 279.69);
+	--iris-12: oklch(0.3145 0.099 277.36);
+
+	--jade-01: oklch(0.9945 0.004 172.63);
+	--jade-02: oklch(0.9815 0.009 160.3);
+	--jade-03: oklch(0.9596 0.022 161.88);
+	--jade-04: oklch(0.9339 0.034 163.54);
+	--jade-05: oklch(0.9019 0.046 164.78);
+	--jade-06: oklch(0.8592 0.059 166.88);
+	--jade-07: oklch(0.8003 0.077 169.53);
+	--jade-08: oklch(0.7209 0.103 173.37);
+	--jade-09: oklch(0.6421 0.115 170.85);
+	--jade-10: oklch(0.6134 0.11 170.61);
+	--jade-11: oklch(0.5289 0.127 167.17);
+	--jade-12: oklch(0.3257 0.041 169.78);
+
+	--lime-01: oklch(0.9924 0.004 120.67);
+	--lime-02: oklch(0.9817 0.01 116.7);
+	--lime-03: oklch(0.9594 0.043 119.1);
+	--lime-04: oklch(0.9321 0.069 120.38);
+	--lime-05: oklch(0.8974 0.087 121.84);
+	--lime-06: oklch(0.853 0.099 123.38);
+	--lime-07: oklch(0.7946 0.111 125.31);
+	--lime-08: oklch(0.7236 0.135 128.06);
+	--lime-09: oklch(0.8875 0.175 126.09);
+	--lime-10: oklch(0.8589 0.188 126.73);
+	--lime-11: oklch(0.5438 0.111 128.63);
+	--lime-12: oklch(0.3537 0.057 121.18);
+
+	--mauve-01: oklch(0.9918 0.002 321.13);
+	--mauve-02: oklch(0.9832 0.003 311.22);
+	--mauve-03: oklch(0.9556 0.006 314.24);
+	--mauve-04: oklch(0.9316 0.008 310.01);
+	--mauve-05: oklch(0.909 0.01 306.61);
+	--mauve-06: oklch(0.886 0.012 303.95);
+	--mauve-07: oklch(0.8536 0.014 300.59);
+	--mauve-08: oklch(0.7936 0.019 293.52);
+	--mauve-09: oklch(0.6458 0.019 292.62);
+	--mauve-10: oklch(0.6106 0.018 293.07);
+	--mauve-11: oklch(0.5048 0.016 296.08);
+	--mauve-12: oklch(0.2446 0.013 298.05);
+
+	--mint-01: oklch(0.9928 0.005 183.68);
+	--mint-02: oklch(0.982 0.01 178.66);
+	--mint-03: oklch(0.9595 0.03 179.57);
+	--mint-04: oklch(0.933 0.047 178.98);
+	--mint-05: oklch(0.8994 0.061 178.72);
+	--mint-06: oklch(0.8559 0.072 178.68);
+	--mint-07: oklch(0.7979 0.085 178.22);
+	--mint-08: oklch(0.722 0.107 177.69);
+	--mint-09: oklch(0.8696 0.1 177.97);
+	--mint-10: oklch(0.8412 0.1 177.77);
+	--mint-11: oklch(0.5118 0.095 176.02);
+	--mint-12: oklch(0.3497 0.051 181.44);
+
+	--olive-01: oklch(0.9931 0.002 149.08);
+	--olive-02: oklch(0.983 0.003 144.76);
+	--olive-03: oklch(0.9561 0.004 141.14);
+	--olive-04: oklch(0.932 0.004 142.11);
+	--olive-05: oklch(0.9095 0.005 139.33);
+	--olive-06: oklch(0.8855 0.006 141.14);
+	--olive-07: oklch(0.8517 0.006 141.14);
+	--olive-08: oklch(0.7921 0.007 140.55);
+	--olive-09: oklch(0.6404 0.011 136.53);
+	--olive-10: oklch(0.6054 0.012 136.54);
+	--olive-11: oklch(0.5001 0.011 139.89);
+	--olive-12: oklch(0.2419 0.011 138.23);
+
+	--orange-01: oklch(0.9922 0.003 40.73);
+	--orange-02: oklch(0.9787 0.015 70.83);
+	--orange-03: oklch(0.9576 0.037 78.11);
+	--orange-04: oklch(0.9203 0.081 74.16);
+	--orange-05: oklch(0.8904 0.107 70.84);
+	--orange-06: oklch(0.8573 0.11 64.43);
+	--orange-07: oklch(0.8053 0.113 59.88);
+	--orange-08: oklch(0.7454 0.132 54.82);
+	--orange-09: oklch(0.689 0.191 44.8);
+	--orange-10: oklch(0.6622 0.194 43.49);
+	--orange-11: oklch(0.5919 0.186 46.95);
+	--orange-12: oklch(0.3501 0.069 40.82);
+
+	--pink-01: oklch(0.9941 0.004 336.25);
+	--pink-02: oklch(0.9831 0.009 339.97);
+	--pink-03: oklch(0.9543 0.027 340.64);
+	--pink-04: oklch(0.9251 0.042 340.66);
+	--pink-05: oklch(0.8931 0.054 340.86);
+	--pink-06: oklch(0.8554 0.067 340.9);
+	--pink-07: oklch(0.8091 0.083 341.21);
+	--pink-08: oklch(0.7517 0.107 341.63);
+	--pink-09: oklch(0.6167 0.208 346.05);
+	--pink-10: oklch(0.5957 0.207 346.5);
+	--pink-11: oklch(0.5566 0.206 347.33);
+	--pink-12: oklch(0.35 0.129 345.45);
+
+	--plum-01: oklch(0.9933 0.005 316.87);
+	--plum-02: oklch(0.9831 0.009 325.99);
+	--plum-03: oklch(0.9569 0.027 325.49);
+	--plum-04: oklch(0.9292 0.044 324.87);
+	--plum-05: oklch(0.8985 0.057 324.37);
+	--plum-06: oklch(0.8603 0.072 323.91);
+	--plum-07: oklch(0.8092 0.091 323.15);
+	--plum-08: oklch(0.7418 0.12 321.88);
+	--plum-09: oklch(0.5789 0.188 322.09);
+	--plum-10: oklch(0.5527 0.181 322.1);
+	--plum-11: oklch(0.5213 0.173 322.02);
+	--plum-12: oklch(0.3376 0.125 321.41);
+
+	--purple-01: oklch(0.993 0.004 325.35);
+	--purple-02: oklch(0.9823 0.009 313.12);
+	--purple-03: oklch(0.9591 0.024 313.27);
+	--purple-04: oklch(0.9328 0.039 312.06);
+	--purple-05: oklch(0.9007 0.054 311.57);
+	--purple-06: oklch(0.8596 0.071 311.03);
+	--purple-07: oklch(0.804 0.093 309.93);
+	--purple-08: oklch(0.7331 0.123 307.97);
+	--purple-09: oklch(0.5555 0.183 305.88);
+	--purple-10: oklch(0.5242 0.176 305.69);
+	--purple-11: oklch(0.516 0.174 305.7);
+	--purple-12: oklch(0.3223 0.11 303.8);
+
+	--red-01: oklch(0.9935 0.003 22.75);
+	--red-02: oklch(0.9832 0.008 16.02);
+	--red-03: oklch(0.9561 0.021 16.23);
+	--red-04: oklch(0.9281 0.047 16.68);
+	--red-05: oklch(0.8961 0.062 17.33);
+	--red-06: oklch(0.857 0.075 17.87);
+	--red-07: oklch(0.8072 0.089 18.44);
+	--red-08: oklch(0.745 0.113 19.09);
+	--red-09: oklch(0.6254 0.193 22.98);
+	--red-10: oklch(0.5999 0.195 23.89);
+	--red-11: oklch(0.5572 0.198 25.13);
+	--red-12: oklch(0.3391 0.109 16.68);
+
+	--ruby-01: oklch(0.9938 0.003 356.31);
+	--ruby-02: oklch(0.9834 0.008 8.41);
+	--ruby-03: oklch(0.9536 0.022 8.56);
+	--ruby-04: oklch(0.928 0.042 8.46);
+	--ruby-05: oklch(0.8964 0.055 8.16);
+	--ruby-06: oklch(0.8581 0.066 7.84);
+	--ruby-07: oklch(0.8101 0.08 7.49);
+	--ruby-08: oklch(0.7488 0.101 6.86);
+	--ruby-09: oklch(0.6284 0.195 13.19);
+	--ruby-10: oklch(0.6013 0.196 13.39);
+	--ruby-11: oklch(0.5489 0.199 13.92);
+	--ruby-12: oklch(0.3412 0.11 10.04);
+
+	--sage-01: oklch(0.9923 0.003 160.4);
+	--sage-02: oklch(0.9808 0.003 171.2);
+	--sage-03: oklch(0.955 0.003 170.38);
+	--sage-04: oklch(0.9312 0.003 170.38);
+	--sage-05: oklch(0.9092 0.004 167.67);
+	--sage-06: oklch(0.8851 0.004 167.67);
+	--sage-07: oklch(0.8511 0.004 169.85);
+	--sage-08: oklch(0.7924 0.005 169.48);
+	--sage-09: oklch(0.6393 0.01 172.38);
+	--sage-10: oklch(0.6048 0.01 172.84);
+	--sage-11: oklch(0.5007 0.008 175.92);
+	--sage-12: oklch(0.2398 0.012 166.78);
+
+	--sand-01: oklch(0.9937 0.001 106.42);
+	--sand-02: oklch(0.9822 0.001 106.43);
+	--sand-03: oklch(0.9555 0.002 97.61);
+	--sand-04: oklch(0.9322 0.003 100.56);
+	--sand-05: oklch(0.9099 0.004 95.91);
+	--sand-06: oklch(0.8855 0.005 98.34);
+	--sand-07: oklch(0.8525 0.006 96.6);
+	--sand-08: oklch(0.7918 0.008 96.5);
+	--sand-09: oklch(0.6413 0.01 106.69);
+	--sand-10: oklch(0.6057 0.01 106.68);
+	--sand-11: oklch(0.4979 0.008 106.68);
+	--sand-12: oklch(0.2434 0.008 96.31);
+
+	--sky-01: oklch(0.9933 0.005 211.91);
+	--sky-02: oklch(0.9799 0.01 217.67);
+	--sky-03: oklch(0.9606 0.024 219.58);
+	--sky-04: oklch(0.9356 0.036 220.39);
+	--sky-05: oklch(0.9028 0.047 221.37);
+	--sky-06: oklch(0.861 0.058 222.87);
+	--sky-07: oklch(0.8058 0.072 225.65);
+	--sky-08: oklch(0.7294 0.096 227.98);
+	--sky-09: oklch(0.8614 0.103 217.81);
+	--sky-10: oklch(0.8377 0.104 219.57);
+	--sky-11: oklch(0.5256 0.108 232.54);
+	--sky-12: oklch(0.3511 0.057 241.61);
+
+	--slate-01: oklch(0.9912 0.001 286.37);
+	--slate-02: oklch(0.9824 0.003 286.35);
+	--slate-03: oklch(0.9557 0.004 281.88);
+	--slate-04: oklch(0.9314 0.006 282.96);
+	--slate-05: oklch(0.9101 0.008 283.59);
+	--slate-06: oklch(0.8876 0.009 281.79);
+	--slate-07: oklch(0.8534 0.012 280.85);
+	--slate-08: oklch(0.7939 0.016 278.12);
+	--slate-09: oklch(0.6456 0.016 277.83);
+	--slate-10: oklch(0.6098 0.016 273.24);
+	--slate-11: oklch(0.5026 0.014 263.44);
+	--slate-12: oklch(0.2413 0.01 249.52);
+
+	--teal-01: oklch(0.9939 0.005 177.55);
+	--teal-02: oklch(0.9812 0.009 179);
+	--teal-03: oklch(0.9606 0.027 180.32);
+	--teal-04: oklch(0.9346 0.042 180.22);
+	--teal-05: oklch(0.9004 0.054 180.5);
+	--teal-06: oklch(0.8558 0.064 181.42);
+	--teal-07: oklch(0.7974 0.076 182.21);
+	--teal-08: oklch(0.7211 0.097 183.46);
+	--teal-09: oklch(0.6488 0.113 182.01);
+	--teal-10: oklch(0.6195 0.11 181.2);
+	--teal-11: oklch(0.5296 0.124 179.04);
+	--teal-12: oklch(0.3269 0.05 185.02);
+
+	--tomato-01: oklch(0.9935 0.003 22.75);
+	--tomato-02: oklch(0.9842 0.007 31.02);
+	--tomato-03: oklch(0.9544 0.022 30.88);
+	--tomato-04: oklch(0.926 0.047 31.76);
+	--tomato-05: oklch(0.8921 0.063 31.49);
+	--tomato-06: oklch(0.8524 0.077 32.01);
+	--tomato-07: oklch(0.8028 0.094 32.17);
+	--tomato-08: oklch(0.7415 0.118 32.07);
+	--tomato-09: oklch(0.627 0.194 33.31);
+	--tomato-10: oklch(0.604 0.195 33.26);
+	--tomato-11: oklch(0.5665 0.198 32.81);
+	--tomato-12: oklch(0.3461 0.08 30.53);
+
+	--violet-01: oklch(0.9921 0.003 308.03);
+	--violet-02: oklch(0.983 0.009 295.04);
+	--violet-03: oklch(0.9628 0.019 296.58);
+	--violet-04: oklch(0.934 0.039 295.38);
+	--violet-05: oklch(0.9039 0.057 294.12);
+	--violet-06: oklch(0.8641 0.072 293.86);
+	--violet-07: oklch(0.8065 0.09 293.47);
+	--violet-08: oklch(0.7291 0.119 292.43);
+	--violet-09: oklch(0.5418 0.179 288.1);
+	--violet-10: oklch(0.5107 0.177 287.64);
+	--violet-11: oklch(0.508 0.159 288.59);
+	--violet-12: oklch(0.3127 0.098 286.76);
+
+	--yellow-01: oklch(0.9928 0.005 106.49);
+	--yellow-02: oklch(0.9884 0.025 102.92);
+	--yellow-03: oklch(0.974 0.084 104.36);
+	--yellow-04: oklch(0.9527 0.117 101.74);
+	--yellow-05: oklch(0.9251 0.141 98.2);
+	--yellow-06: oklch(0.8809 0.134 95.42);
+	--yellow-07: oklch(0.8355 0.12 92.79);
+	--yellow-08: oklch(0.7661 0.137 89.85);
+	--yellow-09: oklch(0.9266 0.209 102.14);
+	--yellow-10: oklch(0.8967 0.185 97.53);
+	--yellow-11: oklch(0.5744 0.136 81.69);
+	--yellow-12: oklch(0.3578 0.046 86.63);
+}

From e07ac7724417e98700bcd07f625f3b2b563dfb19 Mon Sep 17 00:00:00 2001
From: Jason Benson <jbenso04@villanova.edu>
Date: Fri, 19 Dec 2025 15:13:47 -0500
Subject: [PATCH 29/33] style: tabs to spaces

---
 client/styles/vendor/colors-radix-light.css | 744 ++++++++++----------
 1 file changed, 372 insertions(+), 372 deletions(-)

diff --git a/client/styles/vendor/colors-radix-light.css b/client/styles/vendor/colors-radix-light.css
index ed157a110..e75b3c970 100644
--- a/client/styles/vendor/colors-radix-light.css
+++ b/client/styles/vendor/colors-radix-light.css
@@ -1,404 +1,404 @@
 :root {
-	--amber-01: oklch(0.994 0.003 84.62);
-	--amber-02: oklch(0.9862 0.024 100.26);
-	--amber-03: oklch(0.969 0.069 100.36);
-	--amber-04: oklch(0.9454 0.104 98.19);
-	--amber-05: oklch(0.9184 0.133 98.4);
-	--amber-06: oklch(0.8812 0.124 93.24);
-	--amber-07: oklch(0.8274 0.122 86.18);
-	--amber-08: oklch(0.7582 0.14 76.7);
-	--amber-09: oklch(0.8562 0.178 81.37);
-	--amber-10: oklch(0.8315 0.168 80.94);
-	--amber-11: oklch(0.5692 0.144 67.28);
-	--amber-12: oklch(0.3519 0.049 53.74);
+    --amber-01: oklch(0.994 0.003 84.62);
+    --amber-02: oklch(0.9862 0.024 100.26);
+    --amber-03: oklch(0.969 0.069 100.36);
+    --amber-04: oklch(0.9454 0.104 98.19);
+    --amber-05: oklch(0.9184 0.133 98.4);
+    --amber-06: oklch(0.8812 0.124 93.24);
+    --amber-07: oklch(0.8274 0.122 86.18);
+    --amber-08: oklch(0.7582 0.14 76.7);
+    --amber-09: oklch(0.8562 0.178 81.37);
+    --amber-10: oklch(0.8315 0.168 80.94);
+    --amber-11: oklch(0.5692 0.144 67.28);
+    --amber-12: oklch(0.3519 0.049 53.74);
 
-	--blue-01: oklch(0.9932 0.003 247.64);
-	--blue-02: oklch(0.9815 0.01 243.26);
-	--blue-03: oklch(0.96 0.02 236.71);
-	--blue-04: oklch(0.9373 0.037 239.03);
-	--blue-05: oklch(0.906 0.053 242.8);
-	--blue-06: oklch(0.8638 0.069 243.18);
-	--blue-07: oklch(0.8092 0.088 243.34);
-	--blue-08: oklch(0.7348 0.121 243);
-	--blue-09: oklch(0.6493 0.193 251.81);
-	--blue-10: oklch(0.6211 0.184 251.92);
-	--blue-11: oklch(0.5577 0.189 253.01);
-	--blue-12: oklch(0.324 0.097 258.96);
+    --blue-01: oklch(0.9932 0.003 247.64);
+    --blue-02: oklch(0.9815 0.01 243.26);
+    --blue-03: oklch(0.96 0.02 236.71);
+    --blue-04: oklch(0.9373 0.037 239.03);
+    --blue-05: oklch(0.906 0.053 242.8);
+    --blue-06: oklch(0.8638 0.069 243.18);
+    --blue-07: oklch(0.8092 0.088 243.34);
+    --blue-08: oklch(0.7348 0.121 243);
+    --blue-09: oklch(0.6493 0.193 251.81);
+    --blue-10: oklch(0.6211 0.184 251.92);
+    --blue-11: oklch(0.5577 0.189 253.01);
+    --blue-12: oklch(0.324 0.097 258.96);
 
-	--bronze-01: oklch(0.9915 0.001 15.92);
-	--bronze-02: oklch(0.9806 0.007 42.99);
-	--bronze-03: oklch(0.9528 0.01 44.26);
-	--bronze-04: oklch(0.9252 0.014 43.57);
-	--bronze-05: oklch(0.8954 0.018 42.64);
-	--bronze-06: oklch(0.8599 0.023 43.4);
-	--bronze-07: oklch(0.8113 0.03 41.94);
-	--bronze-08: oklch(0.7418 0.039 41.18);
-	--bronze-09: oklch(0.6275 0.046 44.29);
-	--bronze-10: oklch(0.588 0.045 42.44);
-	--bronze-11: oklch(0.5105 0.044 38.37);
-	--bronze-12: oklch(0.3292 0.029 35.24);
+    --bronze-01: oklch(0.9915 0.001 15.92);
+    --bronze-02: oklch(0.9806 0.007 42.99);
+    --bronze-03: oklch(0.9528 0.01 44.26);
+    --bronze-04: oklch(0.9252 0.014 43.57);
+    --bronze-05: oklch(0.8954 0.018 42.64);
+    --bronze-06: oklch(0.8599 0.023 43.4);
+    --bronze-07: oklch(0.8113 0.03 41.94);
+    --bronze-08: oklch(0.7418 0.039 41.18);
+    --bronze-09: oklch(0.6275 0.046 44.29);
+    --bronze-10: oklch(0.588 0.045 42.44);
+    --bronze-11: oklch(0.5105 0.044 38.37);
+    --bronze-12: oklch(0.3292 0.029 35.24);
 
-	--brown-01: oklch(0.9943 0.002 63.24);
-	--brown-02: oklch(0.9832 0.006 65.73);
-	--brown-03: oklch(0.9541 0.013 67.82);
-	--brown-04: oklch(0.9261 0.02 66.85);
-	--brown-05: oklch(0.8969 0.029 65.79);
-	--brown-06: oklch(0.8624 0.039 65.47);
-	--brown-07: oklch(0.8153 0.053 64.22);
-	--brown-08: oklch(0.7467 0.072 62.45);
-	--brown-09: oklch(0.6327 0.078 60.77);
-	--brown-10: oklch(0.5967 0.072 59.28);
-	--brown-11: oklch(0.5121 0.058 55.46);
-	--brown-12: oklch(0.3315 0.018 46.98);
+    --brown-01: oklch(0.9943 0.002 63.24);
+    --brown-02: oklch(0.9832 0.006 65.73);
+    --brown-03: oklch(0.9541 0.013 67.82);
+    --brown-04: oklch(0.9261 0.02 66.85);
+    --brown-05: oklch(0.8969 0.029 65.79);
+    --brown-06: oklch(0.8624 0.039 65.47);
+    --brown-07: oklch(0.8153 0.053 64.22);
+    --brown-08: oklch(0.7467 0.072 62.45);
+    --brown-09: oklch(0.6327 0.078 60.77);
+    --brown-10: oklch(0.5967 0.072 59.28);
+    --brown-11: oklch(0.5121 0.058 55.46);
+    --brown-12: oklch(0.3315 0.018 46.98);
 
-	--crimson-01: oklch(0.9938 0.003 356.31);
-	--crimson-02: oklch(0.9818 0.008 357.23);
-	--crimson-03: oklch(0.9541 0.026 356.27);
-	--crimson-04: oklch(0.9252 0.041 356.3);
-	--crimson-05: oklch(0.8928 0.054 355.77);
-	--crimson-06: oklch(0.855 0.065 355.57);
-	--crimson-07: oklch(0.8078 0.078 354.8);
-	--crimson-08: oklch(0.75 0.099 354.12);
-	--crimson-09: oklch(0.6343 0.213 1.3);
-	--crimson-10: oklch(0.608 0.211 2.36);
-	--crimson-11: oklch(0.5521 0.207 4.49);
-	--crimson-12: oklch(0.3408 0.113 356.83);
+    --crimson-01: oklch(0.9938 0.003 356.31);
+    --crimson-02: oklch(0.9818 0.008 357.23);
+    --crimson-03: oklch(0.9541 0.026 356.27);
+    --crimson-04: oklch(0.9252 0.041 356.3);
+    --crimson-05: oklch(0.8928 0.054 355.77);
+    --crimson-06: oklch(0.855 0.065 355.57);
+    --crimson-07: oklch(0.8078 0.078 354.8);
+    --crimson-08: oklch(0.75 0.099 354.12);
+    --crimson-09: oklch(0.6343 0.213 1.3);
+    --crimson-10: oklch(0.608 0.211 2.36);
+    --crimson-11: oklch(0.5521 0.207 4.49);
+    --crimson-12: oklch(0.3408 0.113 356.83);
 
-	--cyan-01: oklch(0.9921 0.004 219.25);
-	--cyan-02: oklch(0.9803 0.009 202.89);
-	--cyan-03: oklch(0.9581 0.026 203.61);
-	--cyan-04: oklch(0.9319 0.041 204.74);
-	--cyan-05: oklch(0.8998 0.054 206.49);
-	--cyan-06: oklch(0.8593 0.066 207.67);
-	--cyan-07: oklch(0.8045 0.082 209.58);
-	--cyan-08: oklch(0.727 0.11 211.67);
-	--cyan-09: oklch(0.6609 0.122 221.49);
-	--cyan-10: oklch(0.6267 0.114 221.32);
-	--cyan-11: oklch(0.5403 0.127 223.72);
-	--cyan-12: oklch(0.3317 0.053 218.57);
+    --cyan-01: oklch(0.9921 0.004 219.25);
+    --cyan-02: oklch(0.9803 0.009 202.89);
+    --cyan-03: oklch(0.9581 0.026 203.61);
+    --cyan-04: oklch(0.9319 0.041 204.74);
+    --cyan-05: oklch(0.8998 0.054 206.49);
+    --cyan-06: oklch(0.8593 0.066 207.67);
+    --cyan-07: oklch(0.8045 0.082 209.58);
+    --cyan-08: oklch(0.727 0.11 211.67);
+    --cyan-09: oklch(0.6609 0.122 221.49);
+    --cyan-10: oklch(0.6267 0.114 221.32);
+    --cyan-11: oklch(0.5403 0.127 223.72);
+    --cyan-12: oklch(0.3317 0.053 218.57);
 
-	--gold-01: oklch(0.9937 0.001 106.42);
-	--gold-02: oklch(0.9809 0.009 97.34);
-	--gold-03: oklch(0.9534 0.012 94.69);
-	--gold-04: oklch(0.9257 0.015 93.18);
-	--gold-05: oklch(0.8958 0.019 90.73);
-	--gold-06: oklch(0.8596 0.025 88.38);
-	--gold-07: oklch(0.8101 0.032 83.41);
-	--gold-08: oklch(0.7386 0.042 78.17);
-	--gold-09: oklch(0.6206 0.049 78.13);
-	--gold-10: oklch(0.5877 0.047 77.42);
-	--gold-11: oklch(0.5039 0.039 78.1);
-	--gold-12: oklch(0.3321 0.019 81.67);
+    --gold-01: oklch(0.9937 0.001 106.42);
+    --gold-02: oklch(0.9809 0.009 97.34);
+    --gold-03: oklch(0.9534 0.012 94.69);
+    --gold-04: oklch(0.9257 0.015 93.18);
+    --gold-05: oklch(0.8958 0.019 90.73);
+    --gold-06: oklch(0.8596 0.025 88.38);
+    --gold-07: oklch(0.8101 0.032 83.41);
+    --gold-08: oklch(0.7386 0.042 78.17);
+    --gold-09: oklch(0.6206 0.049 78.13);
+    --gold-10: oklch(0.5877 0.047 77.42);
+    --gold-11: oklch(0.5039 0.039 78.1);
+    --gold-12: oklch(0.3321 0.019 81.67);
 
-	--grass-01: oklch(0.994 0.005 146.39);
-	--grass-02: oklch(0.982 0.009 145.93);
-	--grass-03: oklch(0.9608 0.023 145.27);
-	--grass-04: oklch(0.9342 0.037 146.18);
-	--grass-05: oklch(0.9013 0.053 146.35);
-	--grass-06: oklch(0.8578 0.071 146.83);
-	--grass-07: oklch(0.7985 0.095 147.47);
-	--grass-08: oklch(0.7165 0.13 148.35);
-	--grass-09: oklch(0.6516 0.147 147.37);
-	--grass-10: oklch(0.6138 0.142 147.32);
-	--grass-11: oklch(0.5268 0.13 147.18);
-	--grass-12: oklch(0.3268 0.053 148.58);
+    --grass-01: oklch(0.994 0.005 146.39);
+    --grass-02: oklch(0.982 0.009 145.93);
+    --grass-03: oklch(0.9608 0.023 145.27);
+    --grass-04: oklch(0.9342 0.037 146.18);
+    --grass-05: oklch(0.9013 0.053 146.35);
+    --grass-06: oklch(0.8578 0.071 146.83);
+    --grass-07: oklch(0.7985 0.095 147.47);
+    --grass-08: oklch(0.7165 0.13 148.35);
+    --grass-09: oklch(0.6516 0.147 147.37);
+    --grass-10: oklch(0.6138 0.142 147.32);
+    --grass-11: oklch(0.5268 0.13 147.18);
+    --grass-12: oklch(0.3268 0.053 148.58);
 
-	--gray-01: oklch(0.9909 0 0);
-	--gray-02: oklch(0.981 0 0);
-	--gray-03: oklch(0.9535 0 0);
-	--gray-04: oklch(0.9296 0 167.47);
-	--gray-05: oklch(0.9079 0 180);
-	--gray-06: oklch(0.8838 0 0);
-	--gray-07: oklch(0.8508 0 213.69);
-	--gray-08: oklch(0.791 0 180);
-	--gray-09: oklch(0.6435 0 0);
-	--gray-10: oklch(0.6085 0 0);
-	--gray-11: oklch(0.5031 0 187.13);
-	--gray-12: oklch(0.243 0 180);
+    --gray-01: oklch(0.9909 0 0);
+    --gray-02: oklch(0.981 0 0);
+    --gray-03: oklch(0.9535 0 0);
+    --gray-04: oklch(0.9296 0 167.47);
+    --gray-05: oklch(0.9079 0 180);
+    --gray-06: oklch(0.8838 0 0);
+    --gray-07: oklch(0.8508 0 213.69);
+    --gray-08: oklch(0.791 0 180);
+    --gray-09: oklch(0.6435 0 0);
+    --gray-10: oklch(0.6085 0 0);
+    --gray-11: oklch(0.5031 0 187.13);
+    --gray-12: oklch(0.243 0 180);
 
-	--green-01: oklch(0.9943 0.004 159.06);
-	--green-02: oklch(0.9816 0.009 155.31);
-	--green-03: oklch(0.9588 0.023 156.38);
-	--green-04: oklch(0.9325 0.036 156.6);
-	--green-05: oklch(0.8995 0.05 157.22);
-	--green-06: oklch(0.857 0.065 157.89);
-	--green-07: oklch(0.7977 0.084 159.02);
-	--green-08: oklch(0.7144 0.112 160.6);
-	--green-09: oklch(0.6405 0.133 157.75);
-	--green-10: oklch(0.6112 0.126 158.31);
-	--green-11: oklch(0.529 0.133 158.33);
-	--green-12: oklch(0.3218 0.047 164.62);
+    --green-01: oklch(0.9943 0.004 159.06);
+    --green-02: oklch(0.9816 0.009 155.31);
+    --green-03: oklch(0.9588 0.023 156.38);
+    --green-04: oklch(0.9325 0.036 156.6);
+    --green-05: oklch(0.8995 0.05 157.22);
+    --green-06: oklch(0.857 0.065 157.89);
+    --green-07: oklch(0.7977 0.084 159.02);
+    --green-08: oklch(0.7144 0.112 160.6);
+    --green-09: oklch(0.6405 0.133 157.75);
+    --green-10: oklch(0.6112 0.126 158.31);
+    --green-11: oklch(0.529 0.133 158.33);
+    --green-12: oklch(0.3218 0.047 164.62);
 
-	--indigo-01: oklch(0.9942 0.001 286.37);
-	--indigo-02: oklch(0.9829 0.008 271.38);
-	--indigo-03: oklch(0.9607 0.017 268.55);
-	--indigo-04: oklch(0.9353 0.034 268.49);
-	--indigo-05: oklch(0.9032 0.051 269.98);
-	--indigo-06: oklch(0.863 0.071 271.51);
-	--indigo-07: oklch(0.8068 0.087 271.37);
-	--indigo-08: oklch(0.7301 0.113 270.52);
-	--indigo-09: oklch(0.5436 0.191 267.08);
-	--indigo-10: oklch(0.5112 0.195 266.48);
-	--indigo-11: oklch(0.5097 0.173 267.11);
-	--indigo-12: oklch(0.3126 0.086 268.56);
+    --indigo-01: oklch(0.9942 0.001 286.37);
+    --indigo-02: oklch(0.9829 0.008 271.38);
+    --indigo-03: oklch(0.9607 0.017 268.55);
+    --indigo-04: oklch(0.9353 0.034 268.49);
+    --indigo-05: oklch(0.9032 0.051 269.98);
+    --indigo-06: oklch(0.863 0.071 271.51);
+    --indigo-07: oklch(0.8068 0.087 271.37);
+    --indigo-08: oklch(0.7301 0.113 270.52);
+    --indigo-09: oklch(0.5436 0.191 267.08);
+    --indigo-10: oklch(0.5112 0.195 266.48);
+    --indigo-11: oklch(0.5097 0.173 267.11);
+    --indigo-12: oklch(0.3126 0.086 268.56);
 
-	--iris-01: oklch(0.9945 0.003 286.35);
-	--iris-02: oklch(0.9812 0.009 284.1);
-	--iris-03: oklch(0.9614 0.018 283.8);
-	--iris-04: oklch(0.9351 0.035 283.44);
-	--iris-05: oklch(0.9045 0.053 283.77);
-	--iris-06: oklch(0.8646 0.07 283.11);
-	--iris-07: oklch(0.8079 0.088 282.85);
-	--iris-08: oklch(0.7292 0.118 281.48);
-	--iris-09: oklch(0.5403 0.184 278.3);
-	--iris-10: oklch(0.5086 0.186 277.49);
-	--iris-11: oklch(0.5104 0.173 279.69);
-	--iris-12: oklch(0.3145 0.099 277.36);
+    --iris-01: oklch(0.9945 0.003 286.35);
+    --iris-02: oklch(0.9812 0.009 284.1);
+    --iris-03: oklch(0.9614 0.018 283.8);
+    --iris-04: oklch(0.9351 0.035 283.44);
+    --iris-05: oklch(0.9045 0.053 283.77);
+    --iris-06: oklch(0.8646 0.07 283.11);
+    --iris-07: oklch(0.8079 0.088 282.85);
+    --iris-08: oklch(0.7292 0.118 281.48);
+    --iris-09: oklch(0.5403 0.184 278.3);
+    --iris-10: oklch(0.5086 0.186 277.49);
+    --iris-11: oklch(0.5104 0.173 279.69);
+    --iris-12: oklch(0.3145 0.099 277.36);
 
-	--jade-01: oklch(0.9945 0.004 172.63);
-	--jade-02: oklch(0.9815 0.009 160.3);
-	--jade-03: oklch(0.9596 0.022 161.88);
-	--jade-04: oklch(0.9339 0.034 163.54);
-	--jade-05: oklch(0.9019 0.046 164.78);
-	--jade-06: oklch(0.8592 0.059 166.88);
-	--jade-07: oklch(0.8003 0.077 169.53);
-	--jade-08: oklch(0.7209 0.103 173.37);
-	--jade-09: oklch(0.6421 0.115 170.85);
-	--jade-10: oklch(0.6134 0.11 170.61);
-	--jade-11: oklch(0.5289 0.127 167.17);
-	--jade-12: oklch(0.3257 0.041 169.78);
+    --jade-01: oklch(0.9945 0.004 172.63);
+    --jade-02: oklch(0.9815 0.009 160.3);
+    --jade-03: oklch(0.9596 0.022 161.88);
+    --jade-04: oklch(0.9339 0.034 163.54);
+    --jade-05: oklch(0.9019 0.046 164.78);
+    --jade-06: oklch(0.8592 0.059 166.88);
+    --jade-07: oklch(0.8003 0.077 169.53);
+    --jade-08: oklch(0.7209 0.103 173.37);
+    --jade-09: oklch(0.6421 0.115 170.85);
+    --jade-10: oklch(0.6134 0.11 170.61);
+    --jade-11: oklch(0.5289 0.127 167.17);
+    --jade-12: oklch(0.3257 0.041 169.78);
 
-	--lime-01: oklch(0.9924 0.004 120.67);
-	--lime-02: oklch(0.9817 0.01 116.7);
-	--lime-03: oklch(0.9594 0.043 119.1);
-	--lime-04: oklch(0.9321 0.069 120.38);
-	--lime-05: oklch(0.8974 0.087 121.84);
-	--lime-06: oklch(0.853 0.099 123.38);
-	--lime-07: oklch(0.7946 0.111 125.31);
-	--lime-08: oklch(0.7236 0.135 128.06);
-	--lime-09: oklch(0.8875 0.175 126.09);
-	--lime-10: oklch(0.8589 0.188 126.73);
-	--lime-11: oklch(0.5438 0.111 128.63);
-	--lime-12: oklch(0.3537 0.057 121.18);
+    --lime-01: oklch(0.9924 0.004 120.67);
+    --lime-02: oklch(0.9817 0.01 116.7);
+    --lime-03: oklch(0.9594 0.043 119.1);
+    --lime-04: oklch(0.9321 0.069 120.38);
+    --lime-05: oklch(0.8974 0.087 121.84);
+    --lime-06: oklch(0.853 0.099 123.38);
+    --lime-07: oklch(0.7946 0.111 125.31);
+    --lime-08: oklch(0.7236 0.135 128.06);
+    --lime-09: oklch(0.8875 0.175 126.09);
+    --lime-10: oklch(0.8589 0.188 126.73);
+    --lime-11: oklch(0.5438 0.111 128.63);
+    --lime-12: oklch(0.3537 0.057 121.18);
 
-	--mauve-01: oklch(0.9918 0.002 321.13);
-	--mauve-02: oklch(0.9832 0.003 311.22);
-	--mauve-03: oklch(0.9556 0.006 314.24);
-	--mauve-04: oklch(0.9316 0.008 310.01);
-	--mauve-05: oklch(0.909 0.01 306.61);
-	--mauve-06: oklch(0.886 0.012 303.95);
-	--mauve-07: oklch(0.8536 0.014 300.59);
-	--mauve-08: oklch(0.7936 0.019 293.52);
-	--mauve-09: oklch(0.6458 0.019 292.62);
-	--mauve-10: oklch(0.6106 0.018 293.07);
-	--mauve-11: oklch(0.5048 0.016 296.08);
-	--mauve-12: oklch(0.2446 0.013 298.05);
+    --mauve-01: oklch(0.9918 0.002 321.13);
+    --mauve-02: oklch(0.9832 0.003 311.22);
+    --mauve-03: oklch(0.9556 0.006 314.24);
+    --mauve-04: oklch(0.9316 0.008 310.01);
+    --mauve-05: oklch(0.909 0.01 306.61);
+    --mauve-06: oklch(0.886 0.012 303.95);
+    --mauve-07: oklch(0.8536 0.014 300.59);
+    --mauve-08: oklch(0.7936 0.019 293.52);
+    --mauve-09: oklch(0.6458 0.019 292.62);
+    --mauve-10: oklch(0.6106 0.018 293.07);
+    --mauve-11: oklch(0.5048 0.016 296.08);
+    --mauve-12: oklch(0.2446 0.013 298.05);
 
-	--mint-01: oklch(0.9928 0.005 183.68);
-	--mint-02: oklch(0.982 0.01 178.66);
-	--mint-03: oklch(0.9595 0.03 179.57);
-	--mint-04: oklch(0.933 0.047 178.98);
-	--mint-05: oklch(0.8994 0.061 178.72);
-	--mint-06: oklch(0.8559 0.072 178.68);
-	--mint-07: oklch(0.7979 0.085 178.22);
-	--mint-08: oklch(0.722 0.107 177.69);
-	--mint-09: oklch(0.8696 0.1 177.97);
-	--mint-10: oklch(0.8412 0.1 177.77);
-	--mint-11: oklch(0.5118 0.095 176.02);
-	--mint-12: oklch(0.3497 0.051 181.44);
+    --mint-01: oklch(0.9928 0.005 183.68);
+    --mint-02: oklch(0.982 0.01 178.66);
+    --mint-03: oklch(0.9595 0.03 179.57);
+    --mint-04: oklch(0.933 0.047 178.98);
+    --mint-05: oklch(0.8994 0.061 178.72);
+    --mint-06: oklch(0.8559 0.072 178.68);
+    --mint-07: oklch(0.7979 0.085 178.22);
+    --mint-08: oklch(0.722 0.107 177.69);
+    --mint-09: oklch(0.8696 0.1 177.97);
+    --mint-10: oklch(0.8412 0.1 177.77);
+    --mint-11: oklch(0.5118 0.095 176.02);
+    --mint-12: oklch(0.3497 0.051 181.44);
 
-	--olive-01: oklch(0.9931 0.002 149.08);
-	--olive-02: oklch(0.983 0.003 144.76);
-	--olive-03: oklch(0.9561 0.004 141.14);
-	--olive-04: oklch(0.932 0.004 142.11);
-	--olive-05: oklch(0.9095 0.005 139.33);
-	--olive-06: oklch(0.8855 0.006 141.14);
-	--olive-07: oklch(0.8517 0.006 141.14);
-	--olive-08: oklch(0.7921 0.007 140.55);
-	--olive-09: oklch(0.6404 0.011 136.53);
-	--olive-10: oklch(0.6054 0.012 136.54);
-	--olive-11: oklch(0.5001 0.011 139.89);
-	--olive-12: oklch(0.2419 0.011 138.23);
+    --olive-01: oklch(0.9931 0.002 149.08);
+    --olive-02: oklch(0.983 0.003 144.76);
+    --olive-03: oklch(0.9561 0.004 141.14);
+    --olive-04: oklch(0.932 0.004 142.11);
+    --olive-05: oklch(0.9095 0.005 139.33);
+    --olive-06: oklch(0.8855 0.006 141.14);
+    --olive-07: oklch(0.8517 0.006 141.14);
+    --olive-08: oklch(0.7921 0.007 140.55);
+    --olive-09: oklch(0.6404 0.011 136.53);
+    --olive-10: oklch(0.6054 0.012 136.54);
+    --olive-11: oklch(0.5001 0.011 139.89);
+    --olive-12: oklch(0.2419 0.011 138.23);
 
-	--orange-01: oklch(0.9922 0.003 40.73);
-	--orange-02: oklch(0.9787 0.015 70.83);
-	--orange-03: oklch(0.9576 0.037 78.11);
-	--orange-04: oklch(0.9203 0.081 74.16);
-	--orange-05: oklch(0.8904 0.107 70.84);
-	--orange-06: oklch(0.8573 0.11 64.43);
-	--orange-07: oklch(0.8053 0.113 59.88);
-	--orange-08: oklch(0.7454 0.132 54.82);
-	--orange-09: oklch(0.689 0.191 44.8);
-	--orange-10: oklch(0.6622 0.194 43.49);
-	--orange-11: oklch(0.5919 0.186 46.95);
-	--orange-12: oklch(0.3501 0.069 40.82);
+    --orange-01: oklch(0.9922 0.003 40.73);
+    --orange-02: oklch(0.9787 0.015 70.83);
+    --orange-03: oklch(0.9576 0.037 78.11);
+    --orange-04: oklch(0.9203 0.081 74.16);
+    --orange-05: oklch(0.8904 0.107 70.84);
+    --orange-06: oklch(0.8573 0.11 64.43);
+    --orange-07: oklch(0.8053 0.113 59.88);
+    --orange-08: oklch(0.7454 0.132 54.82);
+    --orange-09: oklch(0.689 0.191 44.8);
+    --orange-10: oklch(0.6622 0.194 43.49);
+    --orange-11: oklch(0.5919 0.186 46.95);
+    --orange-12: oklch(0.3501 0.069 40.82);
 
-	--pink-01: oklch(0.9941 0.004 336.25);
-	--pink-02: oklch(0.9831 0.009 339.97);
-	--pink-03: oklch(0.9543 0.027 340.64);
-	--pink-04: oklch(0.9251 0.042 340.66);
-	--pink-05: oklch(0.8931 0.054 340.86);
-	--pink-06: oklch(0.8554 0.067 340.9);
-	--pink-07: oklch(0.8091 0.083 341.21);
-	--pink-08: oklch(0.7517 0.107 341.63);
-	--pink-09: oklch(0.6167 0.208 346.05);
-	--pink-10: oklch(0.5957 0.207 346.5);
-	--pink-11: oklch(0.5566 0.206 347.33);
-	--pink-12: oklch(0.35 0.129 345.45);
+    --pink-01: oklch(0.9941 0.004 336.25);
+    --pink-02: oklch(0.9831 0.009 339.97);
+    --pink-03: oklch(0.9543 0.027 340.64);
+    --pink-04: oklch(0.9251 0.042 340.66);
+    --pink-05: oklch(0.8931 0.054 340.86);
+    --pink-06: oklch(0.8554 0.067 340.9);
+    --pink-07: oklch(0.8091 0.083 341.21);
+    --pink-08: oklch(0.7517 0.107 341.63);
+    --pink-09: oklch(0.6167 0.208 346.05);
+    --pink-10: oklch(0.5957 0.207 346.5);
+    --pink-11: oklch(0.5566 0.206 347.33);
+    --pink-12: oklch(0.35 0.129 345.45);
 
-	--plum-01: oklch(0.9933 0.005 316.87);
-	--plum-02: oklch(0.9831 0.009 325.99);
-	--plum-03: oklch(0.9569 0.027 325.49);
-	--plum-04: oklch(0.9292 0.044 324.87);
-	--plum-05: oklch(0.8985 0.057 324.37);
-	--plum-06: oklch(0.8603 0.072 323.91);
-	--plum-07: oklch(0.8092 0.091 323.15);
-	--plum-08: oklch(0.7418 0.12 321.88);
-	--plum-09: oklch(0.5789 0.188 322.09);
-	--plum-10: oklch(0.5527 0.181 322.1);
-	--plum-11: oklch(0.5213 0.173 322.02);
-	--plum-12: oklch(0.3376 0.125 321.41);
+    --plum-01: oklch(0.9933 0.005 316.87);
+    --plum-02: oklch(0.9831 0.009 325.99);
+    --plum-03: oklch(0.9569 0.027 325.49);
+    --plum-04: oklch(0.9292 0.044 324.87);
+    --plum-05: oklch(0.8985 0.057 324.37);
+    --plum-06: oklch(0.8603 0.072 323.91);
+    --plum-07: oklch(0.8092 0.091 323.15);
+    --plum-08: oklch(0.7418 0.12 321.88);
+    --plum-09: oklch(0.5789 0.188 322.09);
+    --plum-10: oklch(0.5527 0.181 322.1);
+    --plum-11: oklch(0.5213 0.173 322.02);
+    --plum-12: oklch(0.3376 0.125 321.41);
 
-	--purple-01: oklch(0.993 0.004 325.35);
-	--purple-02: oklch(0.9823 0.009 313.12);
-	--purple-03: oklch(0.9591 0.024 313.27);
-	--purple-04: oklch(0.9328 0.039 312.06);
-	--purple-05: oklch(0.9007 0.054 311.57);
-	--purple-06: oklch(0.8596 0.071 311.03);
-	--purple-07: oklch(0.804 0.093 309.93);
-	--purple-08: oklch(0.7331 0.123 307.97);
-	--purple-09: oklch(0.5555 0.183 305.88);
-	--purple-10: oklch(0.5242 0.176 305.69);
-	--purple-11: oklch(0.516 0.174 305.7);
-	--purple-12: oklch(0.3223 0.11 303.8);
+    --purple-01: oklch(0.993 0.004 325.35);
+    --purple-02: oklch(0.9823 0.009 313.12);
+    --purple-03: oklch(0.9591 0.024 313.27);
+    --purple-04: oklch(0.9328 0.039 312.06);
+    --purple-05: oklch(0.9007 0.054 311.57);
+    --purple-06: oklch(0.8596 0.071 311.03);
+    --purple-07: oklch(0.804 0.093 309.93);
+    --purple-08: oklch(0.7331 0.123 307.97);
+    --purple-09: oklch(0.5555 0.183 305.88);
+    --purple-10: oklch(0.5242 0.176 305.69);
+    --purple-11: oklch(0.516 0.174 305.7);
+    --purple-12: oklch(0.3223 0.11 303.8);
 
-	--red-01: oklch(0.9935 0.003 22.75);
-	--red-02: oklch(0.9832 0.008 16.02);
-	--red-03: oklch(0.9561 0.021 16.23);
-	--red-04: oklch(0.9281 0.047 16.68);
-	--red-05: oklch(0.8961 0.062 17.33);
-	--red-06: oklch(0.857 0.075 17.87);
-	--red-07: oklch(0.8072 0.089 18.44);
-	--red-08: oklch(0.745 0.113 19.09);
-	--red-09: oklch(0.6254 0.193 22.98);
-	--red-10: oklch(0.5999 0.195 23.89);
-	--red-11: oklch(0.5572 0.198 25.13);
-	--red-12: oklch(0.3391 0.109 16.68);
+    --red-01: oklch(0.9935 0.003 22.75);
+    --red-02: oklch(0.9832 0.008 16.02);
+    --red-03: oklch(0.9561 0.021 16.23);
+    --red-04: oklch(0.9281 0.047 16.68);
+    --red-05: oklch(0.8961 0.062 17.33);
+    --red-06: oklch(0.857 0.075 17.87);
+    --red-07: oklch(0.8072 0.089 18.44);
+    --red-08: oklch(0.745 0.113 19.09);
+    --red-09: oklch(0.6254 0.193 22.98);
+    --red-10: oklch(0.5999 0.195 23.89);
+    --red-11: oklch(0.5572 0.198 25.13);
+    --red-12: oklch(0.3391 0.109 16.68);
 
-	--ruby-01: oklch(0.9938 0.003 356.31);
-	--ruby-02: oklch(0.9834 0.008 8.41);
-	--ruby-03: oklch(0.9536 0.022 8.56);
-	--ruby-04: oklch(0.928 0.042 8.46);
-	--ruby-05: oklch(0.8964 0.055 8.16);
-	--ruby-06: oklch(0.8581 0.066 7.84);
-	--ruby-07: oklch(0.8101 0.08 7.49);
-	--ruby-08: oklch(0.7488 0.101 6.86);
-	--ruby-09: oklch(0.6284 0.195 13.19);
-	--ruby-10: oklch(0.6013 0.196 13.39);
-	--ruby-11: oklch(0.5489 0.199 13.92);
-	--ruby-12: oklch(0.3412 0.11 10.04);
+    --ruby-01: oklch(0.9938 0.003 356.31);
+    --ruby-02: oklch(0.9834 0.008 8.41);
+    --ruby-03: oklch(0.9536 0.022 8.56);
+    --ruby-04: oklch(0.928 0.042 8.46);
+    --ruby-05: oklch(0.8964 0.055 8.16);
+    --ruby-06: oklch(0.8581 0.066 7.84);
+    --ruby-07: oklch(0.8101 0.08 7.49);
+    --ruby-08: oklch(0.7488 0.101 6.86);
+    --ruby-09: oklch(0.6284 0.195 13.19);
+    --ruby-10: oklch(0.6013 0.196 13.39);
+    --ruby-11: oklch(0.5489 0.199 13.92);
+    --ruby-12: oklch(0.3412 0.11 10.04);
 
-	--sage-01: oklch(0.9923 0.003 160.4);
-	--sage-02: oklch(0.9808 0.003 171.2);
-	--sage-03: oklch(0.955 0.003 170.38);
-	--sage-04: oklch(0.9312 0.003 170.38);
-	--sage-05: oklch(0.9092 0.004 167.67);
-	--sage-06: oklch(0.8851 0.004 167.67);
-	--sage-07: oklch(0.8511 0.004 169.85);
-	--sage-08: oklch(0.7924 0.005 169.48);
-	--sage-09: oklch(0.6393 0.01 172.38);
-	--sage-10: oklch(0.6048 0.01 172.84);
-	--sage-11: oklch(0.5007 0.008 175.92);
-	--sage-12: oklch(0.2398 0.012 166.78);
+    --sage-01: oklch(0.9923 0.003 160.4);
+    --sage-02: oklch(0.9808 0.003 171.2);
+    --sage-03: oklch(0.955 0.003 170.38);
+    --sage-04: oklch(0.9312 0.003 170.38);
+    --sage-05: oklch(0.9092 0.004 167.67);
+    --sage-06: oklch(0.8851 0.004 167.67);
+    --sage-07: oklch(0.8511 0.004 169.85);
+    --sage-08: oklch(0.7924 0.005 169.48);
+    --sage-09: oklch(0.6393 0.01 172.38);
+    --sage-10: oklch(0.6048 0.01 172.84);
+    --sage-11: oklch(0.5007 0.008 175.92);
+    --sage-12: oklch(0.2398 0.012 166.78);
 
-	--sand-01: oklch(0.9937 0.001 106.42);
-	--sand-02: oklch(0.9822 0.001 106.43);
-	--sand-03: oklch(0.9555 0.002 97.61);
-	--sand-04: oklch(0.9322 0.003 100.56);
-	--sand-05: oklch(0.9099 0.004 95.91);
-	--sand-06: oklch(0.8855 0.005 98.34);
-	--sand-07: oklch(0.8525 0.006 96.6);
-	--sand-08: oklch(0.7918 0.008 96.5);
-	--sand-09: oklch(0.6413 0.01 106.69);
-	--sand-10: oklch(0.6057 0.01 106.68);
-	--sand-11: oklch(0.4979 0.008 106.68);
-	--sand-12: oklch(0.2434 0.008 96.31);
+    --sand-01: oklch(0.9937 0.001 106.42);
+    --sand-02: oklch(0.9822 0.001 106.43);
+    --sand-03: oklch(0.9555 0.002 97.61);
+    --sand-04: oklch(0.9322 0.003 100.56);
+    --sand-05: oklch(0.9099 0.004 95.91);
+    --sand-06: oklch(0.8855 0.005 98.34);
+    --sand-07: oklch(0.8525 0.006 96.6);
+    --sand-08: oklch(0.7918 0.008 96.5);
+    --sand-09: oklch(0.6413 0.01 106.69);
+    --sand-10: oklch(0.6057 0.01 106.68);
+    --sand-11: oklch(0.4979 0.008 106.68);
+    --sand-12: oklch(0.2434 0.008 96.31);
 
-	--sky-01: oklch(0.9933 0.005 211.91);
-	--sky-02: oklch(0.9799 0.01 217.67);
-	--sky-03: oklch(0.9606 0.024 219.58);
-	--sky-04: oklch(0.9356 0.036 220.39);
-	--sky-05: oklch(0.9028 0.047 221.37);
-	--sky-06: oklch(0.861 0.058 222.87);
-	--sky-07: oklch(0.8058 0.072 225.65);
-	--sky-08: oklch(0.7294 0.096 227.98);
-	--sky-09: oklch(0.8614 0.103 217.81);
-	--sky-10: oklch(0.8377 0.104 219.57);
-	--sky-11: oklch(0.5256 0.108 232.54);
-	--sky-12: oklch(0.3511 0.057 241.61);
+    --sky-01: oklch(0.9933 0.005 211.91);
+    --sky-02: oklch(0.9799 0.01 217.67);
+    --sky-03: oklch(0.9606 0.024 219.58);
+    --sky-04: oklch(0.9356 0.036 220.39);
+    --sky-05: oklch(0.9028 0.047 221.37);
+    --sky-06: oklch(0.861 0.058 222.87);
+    --sky-07: oklch(0.8058 0.072 225.65);
+    --sky-08: oklch(0.7294 0.096 227.98);
+    --sky-09: oklch(0.8614 0.103 217.81);
+    --sky-10: oklch(0.8377 0.104 219.57);
+    --sky-11: oklch(0.5256 0.108 232.54);
+    --sky-12: oklch(0.3511 0.057 241.61);
 
-	--slate-01: oklch(0.9912 0.001 286.37);
-	--slate-02: oklch(0.9824 0.003 286.35);
-	--slate-03: oklch(0.9557 0.004 281.88);
-	--slate-04: oklch(0.9314 0.006 282.96);
-	--slate-05: oklch(0.9101 0.008 283.59);
-	--slate-06: oklch(0.8876 0.009 281.79);
-	--slate-07: oklch(0.8534 0.012 280.85);
-	--slate-08: oklch(0.7939 0.016 278.12);
-	--slate-09: oklch(0.6456 0.016 277.83);
-	--slate-10: oklch(0.6098 0.016 273.24);
-	--slate-11: oklch(0.5026 0.014 263.44);
-	--slate-12: oklch(0.2413 0.01 249.52);
+    --slate-01: oklch(0.9912 0.001 286.37);
+    --slate-02: oklch(0.9824 0.003 286.35);
+    --slate-03: oklch(0.9557 0.004 281.88);
+    --slate-04: oklch(0.9314 0.006 282.96);
+    --slate-05: oklch(0.9101 0.008 283.59);
+    --slate-06: oklch(0.8876 0.009 281.79);
+    --slate-07: oklch(0.8534 0.012 280.85);
+    --slate-08: oklch(0.7939 0.016 278.12);
+    --slate-09: oklch(0.6456 0.016 277.83);
+    --slate-10: oklch(0.6098 0.016 273.24);
+    --slate-11: oklch(0.5026 0.014 263.44);
+    --slate-12: oklch(0.2413 0.01 249.52);
 
-	--teal-01: oklch(0.9939 0.005 177.55);
-	--teal-02: oklch(0.9812 0.009 179);
-	--teal-03: oklch(0.9606 0.027 180.32);
-	--teal-04: oklch(0.9346 0.042 180.22);
-	--teal-05: oklch(0.9004 0.054 180.5);
-	--teal-06: oklch(0.8558 0.064 181.42);
-	--teal-07: oklch(0.7974 0.076 182.21);
-	--teal-08: oklch(0.7211 0.097 183.46);
-	--teal-09: oklch(0.6488 0.113 182.01);
-	--teal-10: oklch(0.6195 0.11 181.2);
-	--teal-11: oklch(0.5296 0.124 179.04);
-	--teal-12: oklch(0.3269 0.05 185.02);
+    --teal-01: oklch(0.9939 0.005 177.55);
+    --teal-02: oklch(0.9812 0.009 179);
+    --teal-03: oklch(0.9606 0.027 180.32);
+    --teal-04: oklch(0.9346 0.042 180.22);
+    --teal-05: oklch(0.9004 0.054 180.5);
+    --teal-06: oklch(0.8558 0.064 181.42);
+    --teal-07: oklch(0.7974 0.076 182.21);
+    --teal-08: oklch(0.7211 0.097 183.46);
+    --teal-09: oklch(0.6488 0.113 182.01);
+    --teal-10: oklch(0.6195 0.11 181.2);
+    --teal-11: oklch(0.5296 0.124 179.04);
+    --teal-12: oklch(0.3269 0.05 185.02);
 
-	--tomato-01: oklch(0.9935 0.003 22.75);
-	--tomato-02: oklch(0.9842 0.007 31.02);
-	--tomato-03: oklch(0.9544 0.022 30.88);
-	--tomato-04: oklch(0.926 0.047 31.76);
-	--tomato-05: oklch(0.8921 0.063 31.49);
-	--tomato-06: oklch(0.8524 0.077 32.01);
-	--tomato-07: oklch(0.8028 0.094 32.17);
-	--tomato-08: oklch(0.7415 0.118 32.07);
-	--tomato-09: oklch(0.627 0.194 33.31);
-	--tomato-10: oklch(0.604 0.195 33.26);
-	--tomato-11: oklch(0.5665 0.198 32.81);
-	--tomato-12: oklch(0.3461 0.08 30.53);
+    --tomato-01: oklch(0.9935 0.003 22.75);
+    --tomato-02: oklch(0.9842 0.007 31.02);
+    --tomato-03: oklch(0.9544 0.022 30.88);
+    --tomato-04: oklch(0.926 0.047 31.76);
+    --tomato-05: oklch(0.8921 0.063 31.49);
+    --tomato-06: oklch(0.8524 0.077 32.01);
+    --tomato-07: oklch(0.8028 0.094 32.17);
+    --tomato-08: oklch(0.7415 0.118 32.07);
+    --tomato-09: oklch(0.627 0.194 33.31);
+    --tomato-10: oklch(0.604 0.195 33.26);
+    --tomato-11: oklch(0.5665 0.198 32.81);
+    --tomato-12: oklch(0.3461 0.08 30.53);
 
-	--violet-01: oklch(0.9921 0.003 308.03);
-	--violet-02: oklch(0.983 0.009 295.04);
-	--violet-03: oklch(0.9628 0.019 296.58);
-	--violet-04: oklch(0.934 0.039 295.38);
-	--violet-05: oklch(0.9039 0.057 294.12);
-	--violet-06: oklch(0.8641 0.072 293.86);
-	--violet-07: oklch(0.8065 0.09 293.47);
-	--violet-08: oklch(0.7291 0.119 292.43);
-	--violet-09: oklch(0.5418 0.179 288.1);
-	--violet-10: oklch(0.5107 0.177 287.64);
-	--violet-11: oklch(0.508 0.159 288.59);
-	--violet-12: oklch(0.3127 0.098 286.76);
+    --violet-01: oklch(0.9921 0.003 308.03);
+    --violet-02: oklch(0.983 0.009 295.04);
+    --violet-03: oklch(0.9628 0.019 296.58);
+    --violet-04: oklch(0.934 0.039 295.38);
+    --violet-05: oklch(0.9039 0.057 294.12);
+    --violet-06: oklch(0.8641 0.072 293.86);
+    --violet-07: oklch(0.8065 0.09 293.47);
+    --violet-08: oklch(0.7291 0.119 292.43);
+    --violet-09: oklch(0.5418 0.179 288.1);
+    --violet-10: oklch(0.5107 0.177 287.64);
+    --violet-11: oklch(0.508 0.159 288.59);
+    --violet-12: oklch(0.3127 0.098 286.76);
 
-	--yellow-01: oklch(0.9928 0.005 106.49);
-	--yellow-02: oklch(0.9884 0.025 102.92);
-	--yellow-03: oklch(0.974 0.084 104.36);
-	--yellow-04: oklch(0.9527 0.117 101.74);
-	--yellow-05: oklch(0.9251 0.141 98.2);
-	--yellow-06: oklch(0.8809 0.134 95.42);
-	--yellow-07: oklch(0.8355 0.12 92.79);
-	--yellow-08: oklch(0.7661 0.137 89.85);
-	--yellow-09: oklch(0.9266 0.209 102.14);
-	--yellow-10: oklch(0.8967 0.185 97.53);
-	--yellow-11: oklch(0.5744 0.136 81.69);
-	--yellow-12: oklch(0.3578 0.046 86.63);
+    --yellow-01: oklch(0.9928 0.005 106.49);
+    --yellow-02: oklch(0.9884 0.025 102.92);
+    --yellow-03: oklch(0.974 0.084 104.36);
+    --yellow-04: oklch(0.9527 0.117 101.74);
+    --yellow-05: oklch(0.9251 0.141 98.2);
+    --yellow-06: oklch(0.8809 0.134 95.42);
+    --yellow-07: oklch(0.8355 0.12 92.79);
+    --yellow-08: oklch(0.7661 0.137 89.85);
+    --yellow-09: oklch(0.9266 0.209 102.14);
+    --yellow-10: oklch(0.8967 0.185 97.53);
+    --yellow-11: oklch(0.5744 0.136 81.69);
+    --yellow-12: oklch(0.3578 0.046 86.63);
 }

From 5b112a30127128b35bdac025cb091f91a78b932b Mon Sep 17 00:00:00 2001
From: Jason Benson <jbenso04@villanova.edu>
Date: Fri, 19 Dec 2025 15:15:54 -0500
Subject: [PATCH 30/33] docs: radix color references

---
 client/styles/vendor/colors-radix-light.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/styles/vendor/colors-radix-light.css b/client/styles/vendor/colors-radix-light.css
index e75b3c970..e39135a33 100644
--- a/client/styles/vendor/colors-radix-light.css
+++ b/client/styles/vendor/colors-radix-light.css
@@ -1,3 +1,7 @@
+/**
+ * @see https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale
+ * @see https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette
+ */
 :root {
     --amber-01: oklch(0.994 0.003 84.62);
     --amber-02: oklch(0.9862 0.024 100.26);

From 8671def1162a1bf649cbbe90498f78f0f294a674 Mon Sep 17 00:00:00 2001
From: Demian Katz <demian.katz@villanova.edu>
Date: Sat, 27 Dec 2025 16:10:48 -0500
Subject: [PATCH 31/33] Remove unused file.

---
 client/styles/vendor/colors-harmony.css | 307 ------------------------
 1 file changed, 307 deletions(-)
 delete mode 100644 client/styles/vendor/colors-harmony.css

diff --git a/client/styles/vendor/colors-harmony.css b/client/styles/vendor/colors-harmony.css
deleted file mode 100644
index bceef8241..000000000
--- a/client/styles/vendor/colors-harmony.css
+++ /dev/null
@@ -1,307 +0,0 @@
-/**
- * Harmony Color Palette
- * https://github.com/evilmartians/harmony
- * Copyright (c) 2023 Evil Martians. MIT License.
- */
-
-:root {
-    --red-50: oklch(0.988281 0.0046875 20);
-    --red-100: oklch(0.966797 0.0171875 20);
-    --red-200: oklch(0.921875 0.0421875 20);
-    --red-300: oklch(0.861328 0.078125 20);
-    --red-400: oklch(0.800781 0.114063 20);
-    --red-500: oklch(0.742188 0.151562 20);
-    --red-600: oklch(0.626953 0.135937 20);
-    --red-700: oklch(0.535156 0.115625 20);
-    --red-800: oklch(0.419922 0.090625 20);
-    --red-900: oklch(0.306641 0.065625 20);
-    --red-950: oklch(0.193359 0.040625 20);
-
-    --orange-50: oklch(0.988281 0.0046875 43.3333);
-    --orange-100: oklch(0.966797 0.0171875 43.3333);
-    --orange-200: oklch(0.921875 0.0421875 43.3333);
-    --orange-300: oklch(0.859375 0.078125 43.3333);
-    --orange-400: oklch(0.798828 0.114063 43.3333);
-    --orange-500: oklch(0.738281 0.151562 43.3333);
-    --orange-600: oklch(0.623047 0.135937 43.3333);
-    --orange-700: oklch(0.53125 0.115625 43.3333);
-    --orange-800: oklch(0.417969 0.090625 43.3333);
-    --orange-900: oklch(0.304688 0.065625 43.3333);
-    --orange-950: oklch(0.191406 0.040625 43.3333);
-
-    --amber-50: oklch(0.988281 0.0046875 66.6667);
-    --amber-100: oklch(0.966797 0.0171875 66.6667);
-    --amber-200: oklch(0.919922 0.0421875 66.6667);
-    --amber-300: oklch(0.857422 0.078125 66.6667);
-    --amber-400: oklch(0.794922 0.114063 66.6667);
-    --amber-500: oklch(0.732422 0.151562 66.6667);
-    --amber-600: oklch(0.619141 0.135937 66.6667);
-    --amber-700: oklch(0.527344 0.115625 66.6667);
-    --amber-800: oklch(0.414063 0.090625 66.6667);
-    --amber-900: oklch(0.302734 0.065625 66.6667);
-    --amber-950: oklch(0.191406 0.040625 66.6667);
-
-    --yellow-50: oklch(0.988281 0.0046875 90);
-    --yellow-100: oklch(0.964844 0.0171875 90);
-    --yellow-200: oklch(0.917969 0.0421875 90);
-    --yellow-300: oklch(0.853516 0.078125 90);
-    --yellow-400: oklch(0.789063 0.114063 90);
-    --yellow-500: oklch(0.726563 0.151562 90);
-    --yellow-600: oklch(0.611328 0.135937 90);
-    --yellow-700: oklch(0.523438 0.115625 90);
-    --yellow-800: oklch(0.410156 0.090625 90);
-    --yellow-900: oklch(0.300781 0.065625 90);
-    --yellow-950: oklch(0.191406 0.040625 90);
-
-    --lime-50: oklch(0.988281 0.0046875 106.667);
-    --lime-100: oklch(0.964844 0.0171875 106.667);
-    --lime-200: oklch(0.916016 0.0421875 106.667);
-    --lime-300: oklch(0.849609 0.078125 106.667);
-    --lime-400: oklch(0.785156 0.114063 106.667);
-    --lime-500: oklch(0.720703 0.151562 106.667);
-    --lime-600: oklch(0.607422 0.135937 106.667);
-    --lime-700: oklch(0.519531 0.115625 106.667);
-    --lime-800: oklch(0.408203 0.090625 106.667);
-    --lime-900: oklch(0.298828 0.065625 106.667);
-    --lime-950: oklch(0.189453 0.040625 106.667);
-
-    --green-50: oklch(0.988281 0.0046875 123.333);
-    --green-100: oklch(0.962891 0.0171875 123.333);
-    --green-200: oklch(0.914063 0.0421875 123.333);
-    --green-300: oklch(0.847656 0.078125 123.333);
-    --green-400: oklch(0.78125 0.114063 123.333);
-    --green-500: oklch(0.714844 0.151562 123.333);
-    --green-600: oklch(0.603516 0.135937 123.333);
-    --green-700: oklch(0.515625 0.115625 123.333);
-    --green-800: oklch(0.404297 0.090625 123.333);
-    --green-900: oklch(0.296875 0.065625 123.333);
-    --green-950: oklch(0.1875 0.040625 123.333);
-
-    --emerald-50: oklch(0.988281 0.0046875 140);
-    --emerald-100: oklch(0.962891 0.0171875 140);
-    --emerald-200: oklch(0.914063 0.0421875 140);
-    --emerald-300: oklch(0.845703 0.078125 140);
-    --emerald-400: oklch(0.777344 0.114063 140);
-    --emerald-500: oklch(0.710938 0.151562 140);
-    --emerald-600: oklch(0.597656 0.135937 140);
-    --emerald-700: oklch(0.511719 0.115625 140);
-    --emerald-800: oklch(0.400391 0.090625 140);
-    --emerald-900: oklch(0.294922 0.065625 140);
-    --emerald-950: oklch(0.1875 0.040625 140);
-
-    --teal-50: oklch(0.988281 0.0046875 160);
-    --teal-100: oklch(0.962891 0.0171875 160);
-    --teal-200: oklch(0.912109 0.0421875 160);
-    --teal-300: oklch(0.84375 0.078125 160);
-    --teal-400: oklch(0.775391 0.114063 160);
-    --teal-500: oklch(0.705078 0.151562 160);
-    --teal-600: oklch(0.59375 0.135937 160);
-    --teal-700: oklch(0.507813 0.115625 160);
-    --teal-800: oklch(0.398438 0.090625 160);
-    --teal-900: oklch(0.291016 0.065625 160);
-    --teal-950: oklch(0.183594 0.040625 160);
-
-    --cyan-50: oklch(0.988281 0.0046875 180);
-    --cyan-100: oklch(0.962891 0.0171875 180);
-    --cyan-200: oklch(0.912109 0.0421875 180);
-    --cyan-300: oklch(0.84375 0.078125 180);
-    --cyan-400: oklch(0.773438 0.114063 180);
-    --cyan-500: oklch(0.705078 0.151562 180);
-    --cyan-600: oklch(0.591797 0.135937 180);
-    --cyan-700: oklch(0.505859 0.115625 180);
-    --cyan-800: oklch(0.396484 0.090625 180);
-    --cyan-900: oklch(0.289063 0.065625 180);
-    --cyan-950: oklch(0.181641 0.040625 180);
-
-    --sky-50: oklch(0.988281 0.0046875 210);
-    --sky-100: oklch(0.962891 0.0171875 210);
-    --sky-200: oklch(0.914063 0.0421875 210);
-    --sky-300: oklch(0.845703 0.078125 210);
-    --sky-400: oklch(0.777344 0.114063 210);
-    --sky-500: oklch(0.708984 0.151562 210);
-    --sky-600: oklch(0.595703 0.135937 210);
-    --sky-700: oklch(0.507813 0.115625 210);
-    --sky-800: oklch(0.398438 0.090625 210);
-    --sky-900: oklch(0.291016 0.065625 210);
-    --sky-950: oklch(0.181641 0.040625 210);
-
-    --blue-50: oklch(0.988281 0.0046875 240);
-    --blue-100: oklch(0.964844 0.0171875 240);
-    --blue-200: oklch(0.916016 0.0421875 240);
-    --blue-300: oklch(0.849609 0.078125 240);
-    --blue-400: oklch(0.783203 0.114063 240);
-    --blue-500: oklch(0.71875 0.151562 240);
-    --blue-600: oklch(0.605469 0.135937 240);
-    --blue-700: oklch(0.517578 0.115625 240);
-    --blue-800: oklch(0.40625 0.090625 240);
-    --blue-900: oklch(0.296875 0.065625 240);
-    --blue-950: oklch(0.1875 0.040625 240);
-
-    --indigo-50: oklch(0.988281 0.0046875 260);
-    --indigo-100: oklch(0.964844 0.0171875 260);
-    --indigo-200: oklch(0.917969 0.0421875 260);
-    --indigo-300: oklch(0.853516 0.078125 260);
-    --indigo-400: oklch(0.789063 0.114063 260);
-    --indigo-500: oklch(0.726563 0.151562 260);
-    --indigo-600: oklch(0.613281 0.135937 260);
-    --indigo-700: oklch(0.523438 0.115625 260);
-    --indigo-800: oklch(0.412109 0.090625 260);
-    --indigo-900: oklch(0.300781 0.065625 260);
-    --indigo-950: oklch(0.191406 0.040625 260);
-
-    --violet-50: oklch(0.988281 0.0046875 280);
-    --violet-100: oklch(0.964844 0.0171875 280);
-    --violet-200: oklch(0.919922 0.0421875 280);
-    --violet-300: oklch(0.857422 0.078125 280);
-    --violet-400: oklch(0.794922 0.114063 280);
-    --violet-500: oklch(0.734375 0.151562 280);
-    --violet-600: oklch(0.619141 0.135937 280);
-    --violet-700: oklch(0.529297 0.115625 280);
-    --violet-800: oklch(0.416016 0.090625 280);
-    --violet-900: oklch(0.304688 0.065625 280);
-    --violet-950: oklch(0.193359 0.040625 280);
-
-    --purple-50: oklch(0.988281 0.0046875 300);
-    --purple-100: oklch(0.966797 0.0171875 300);
-    --purple-200: oklch(0.921875 0.0421875 300);
-    --purple-300: oklch(0.859375 0.078125 300);
-    --purple-400: oklch(0.798828 0.114063 300);
-    --purple-500: oklch(0.738281 0.151562 300);
-    --purple-600: oklch(0.625 0.135937 300);
-    --purple-700: oklch(0.533203 0.115625 300);
-    --purple-800: oklch(0.417969 0.090625 300);
-    --purple-900: oklch(0.306641 0.065625 300);
-    --purple-950: oklch(0.195313 0.040625 300);
-
-    --fuchsia-50: oklch(0.988281 0.0046875 320);
-    --fuchsia-100: oklch(0.966797 0.0171875 320);
-    --fuchsia-200: oklch(0.921875 0.0421875 320);
-    --fuchsia-300: oklch(0.861328 0.078125 320);
-    --fuchsia-400: oklch(0.800781 0.114063 320);
-    --fuchsia-500: oklch(0.742188 0.151562 320);
-    --fuchsia-600: oklch(0.626953 0.135937 320);
-    --fuchsia-700: oklch(0.535156 0.115625 320);
-    --fuchsia-800: oklch(0.419922 0.090625 320);
-    --fuchsia-900: oklch(0.308594 0.065625 320);
-    --fuchsia-950: oklch(0.195313 0.040625 320);
-
-    --pink-50: oklch(0.988281 0.0046875 340);
-    --pink-100: oklch(0.966797 0.0171875 340);
-    --pink-200: oklch(0.923828 0.0421875 340);
-    --pink-300: oklch(0.863281 0.078125 340);
-    --pink-400: oklch(0.802734 0.114063 340);
-    --pink-500: oklch(0.744141 0.151562 340);
-    --pink-600: oklch(0.628906 0.135937 340);
-    --pink-700: oklch(0.537109 0.115625 340);
-    --pink-800: oklch(0.419922 0.090625 340);
-    --pink-900: oklch(0.308594 0.065625 340);
-    --pink-950: oklch(0.195313 0.040625 340);
-
-    --rose-50: oklch(0.988281 0.0046875 0);
-    --rose-100: oklch(0.966797 0.0171875 0);
-    --rose-200: oklch(0.923828 0.0421875 0);
-    --rose-300: oklch(0.863281 0.078125 0);
-    --rose-400: oklch(0.802734 0.114063 0);
-    --rose-500: oklch(0.744141 0.151562 0);
-    --rose-600: oklch(0.626953 0.135937 0);
-    --rose-700: oklch(0.535156 0.115625 0);
-    --rose-800: oklch(0.419922 0.090625 0);
-    --rose-900: oklch(0.306641 0.065625 0);
-    --rose-950: oklch(0.193359 0.040625 0);
-
-    --neutral-50: oklch(0.988281 0 0);
-    --neutral-100: oklch(0.964844 0 0);
-    --neutral-200: oklch(0.917969 0 0);
-    --neutral-300: oklch(0.853516 0 0);
-    --neutral-400: oklch(0.789063 0 0);
-    --neutral-500: oklch(0.726563 0 0);
-    --neutral-600: oklch(0.611328 0 0);
-    --neutral-700: oklch(0.523438 0 0);
-    --neutral-800: oklch(0.412109 0 0);
-    --neutral-900: oklch(0.300781 0 0);
-    --neutral-950: oklch(0.193359 0 0);
-
-    --zinc-50: oklch(0.988281 0.004875 275);
-    --zinc-100: oklch(0.964844 0.008 275);
-    --zinc-200: oklch(0.917969 0.008 275);
-    --zinc-300: oklch(0.853516 0.008 275);
-    --zinc-400: oklch(0.789063 0.008 275);
-    --zinc-500: oklch(0.726563 0.008 275);
-    --zinc-600: oklch(0.613281 0.008 275);
-    --zinc-700: oklch(0.523438 0.008 275);
-    --zinc-800: oklch(0.412109 0.008 275);
-    --zinc-900: oklch(0.302734 0.008 275);
-    --zinc-950: oklch(0.193359 0.008 275);
-
-    --gray-50: oklch(0.988281 0.0046875 275);
-    --gray-100: oklch(0.964844 0.016 275);
-    --gray-200: oklch(0.917969 0.016 275);
-    --gray-300: oklch(0.853516 0.016 275);
-    --gray-400: oklch(0.789063 0.016 275);
-    --gray-500: oklch(0.726563 0.016 275);
-    --gray-600: oklch(0.613281 0.016 275);
-    --gray-700: oklch(0.523438 0.016 275);
-    --gray-800: oklch(0.412109 0.016 275);
-    --gray-900: oklch(0.302734 0.016 275);
-    --gray-950: oklch(0.193359 0.016 275);
-
-    --slate-50: oklch(0.988281 0.0046875 275);
-    --slate-100: oklch(0.964844 0.01775 275);
-    --slate-200: oklch(0.917969 0.024 275);
-    --slate-300: oklch(0.853516 0.024 275);
-    --slate-400: oklch(0.789063 0.024 275);
-    --slate-500: oklch(0.726563 0.024 275);
-    --slate-600: oklch(0.613281 0.024 275);
-    --slate-700: oklch(0.523438 0.024 275);
-    --slate-800: oklch(0.412109 0.024 275);
-    --slate-900: oklch(0.302734 0.024 275);
-    --slate-950: oklch(0.193359 0.024 275);
-
-    --mauve-50: oklch(0.988281 0.008 325);
-    --mauve-100: oklch(0.966797 0.008 325);
-    --mauve-200: oklch(0.917969 0.008 325);
-    --mauve-300: oklch(0.853516 0.008 325);
-    --mauve-400: oklch(0.789063 0.008 325);
-    --mauve-500: oklch(0.726563 0.008 325);
-    --mauve-600: oklch(0.613281 0.008 325);
-    --mauve-700: oklch(0.523438 0.008 325);
-    --mauve-800: oklch(0.412109 0.008 325);
-    --mauve-900: oklch(0.302734 0.008 325);
-    --mauve-950: oklch(0.193359 0.008 325);
-
-    --stone-50: oklch(0.988281 0.008 75);
-    --stone-100: oklch(0.964844 0.008 75);
-    --stone-200: oklch(0.917969 0.008 75);
-    --stone-300: oklch(0.853516 0.008 75);
-    --stone-400: oklch(0.789063 0.008 75);
-    --stone-500: oklch(0.726563 0.008 75);
-    --stone-600: oklch(0.613281 0.008 75);
-    --stone-700: oklch(0.523438 0.008 75);
-    --stone-800: oklch(0.412109 0.008 75);
-    --stone-900: oklch(0.302734 0.008 75);
-    --stone-950: oklch(0.193359 0.008 75);
-
-    --sand-50: oklch(0.988281 0.0104375 75);
-    --sand-100: oklch(0.964844 0.012 75);
-    --sand-200: oklch(0.917969 0.012 75);
-    --sand-300: oklch(0.853516 0.012 75);
-    --sand-400: oklch(0.789063 0.012 75);
-    --sand-500: oklch(0.726563 0.012 75);
-    --sand-600: oklch(0.613281 0.012 75);
-    --sand-700: oklch(0.523438 0.012 75);
-    --sand-800: oklch(0.412109 0.012 75);
-    --sand-900: oklch(0.302734 0.012 75);
-    --sand-950: oklch(0.193359 0.012 75);
-
-    --olive-50: oklch(0.988281 0.008 120);
-    --olive-100: oklch(0.964844 0.008 120);
-    --olive-200: oklch(0.917969 0.008 120);
-    --olive-300: oklch(0.851563 0.008 120);
-    --olive-400: oklch(0.789063 0.008 120);
-    --olive-500: oklch(0.724609 0.008 120);
-    --olive-600: oklch(0.611328 0.008 120);
-    --olive-700: oklch(0.523438 0.008 120);
-    --olive-800: oklch(0.410156 0.008 120);
-    --olive-900: oklch(0.300781 0.008 120);
-    --olive-950: oklch(0.191406 0.008 120);
-}

From f0ed1da962a162a34b0803956f093b137a0dc233 Mon Sep 17 00:00:00 2001
From: Demian Katz <demian.katz@villanova.edu>
Date: Sat, 27 Dec 2025 16:14:48 -0500
Subject: [PATCH 32/33] Update lockfile.

---
 client/package-lock.json | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 0156b1333..5ad5549ee 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,7 +9,6 @@
       "dependencies": {
         "@date-io/dayjs": "^2",
         "@emotion/styled": "^11",
-        "@fortawesome/fontawesome-free": "^6",
         "@mui/icons-material": "^5",
         "@mui/lab": "^5.0.0-alpha.150",
         "@mui/material": "^5",
@@ -882,15 +881,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
-    "node_modules/@fortawesome/fontawesome-free": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
-      "integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -2589,17 +2579,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "18.2.14",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
-      "integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",

From 85546b4db80abcafe1cb6ceeb0222faf3b513337 Mon Sep 17 00:00:00 2001
From: Demian Katz <demian.katz@villanova.edu>
Date: Sat, 27 Dec 2025 16:16:38 -0500
Subject: [PATCH 33/33] Update changelog.

---
 CHANGELOG.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b357e364f..f9bfbefa8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file, in reverse chronological order by release.
 
+## Next Release - TBD
+
+### Added
+
+- Nothing.
+
+### Changed
+
+- Improved styles across the application.
+- Updated dependencies.
+
+### Deprecated
+
+- Nothing.
+
+### Removed
+
+- Nothing.
+
+### Fixed
+
+- Nothing.
+
 ## 2.5.1 - 2025-07-05
 
 ### Added