style: global pass to improve stylings.

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>

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>
         );

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>
     );
 };

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;
+    }
+}

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;

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);
 }

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>
     ) : (
         ""

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>
     );
 };
 

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;
 }