Improve Styles, including Dark Mode

client/components/ThemeMenu.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+import { useGlobalContext } from "../context/GlobalContext";
+
+export default function ThemeMenu() {
+    const {
+        state: { userTheme },
+        action: { setUserTheme },
+    } = useGlobalContext();
+
+    function changeTheme(e) {
+        setUserTheme(e.target.value);
+    }
+
+    return (
+        <FormControl className="user-theme__menu">
+            <InputLabel id="user-theme__label">Theme</InputLabel>
+            <Select
+                id="user-theme"
+                value={userTheme}
+                label="Theme"
+                labelId="user-theme__label"
+                onChange={changeTheme}
+            >
+                <MenuItem value={"system"}>System</MenuItem>
+                <MenuItem value={"light"}>Light</MenuItem>
+                <MenuItem value={"dark"}>Dark</MenuItem>
+            </Select>
+        </FormControl>
+    );
+}

client/components/edit/ObjectButtonBar.tsx

@@ -20,7 +20,7 @@ const ObjectButtonBar = ({ pid }: ObjectButtonBarProps): React.ReactElement => {
             <ObjectStatus pid={pid} />
             <EditParentsButton pid={pid} />
             <button onClick={() => clearPidFromChildListStorage(pid)}>
-                <Refresh style={{ height: "14px" }} titleAccess="Refresh children" />
+                <Refresh style={{ height: "20px", verticalAlign: "sub" }} titleAccess="Refresh children" />
             </button>
             <ObjectPreviewButton pid={pid} />
             <DeleteObjectButton pid={pid} />

client/components/edit/ObjectStatus.module.css

@@ -1,19 +1,29 @@
+.active,
+.inactive,
+.deleted,
+.unknown {
+    display: inline-flex;
+    width: 100px;
+    text-align: left;
+}
+
+.indicator__label {
+    flex: 1 1 0%;
+    text-align: center;
+}
+
 .active .indicator {
-    color: green;
+    color: var(--object-status-active);
 }
 
 .inactive .indicator {
-    color: yellow;
+    color: var(--object-status-inactive);
 }
 
 .deleted .indicator {
-    color: red;
+    color: var(--object-status-deleted);
 }
 
 .unknown .indicator {
-    color: gray;
-}
-
-.indicator {
-    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
+    color: var(--object-status-unknown);
 }

client/components/edit/ObjectStatus.tsx

@@ -27,7 +27,7 @@ export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement =>
     const stateMsg = loaded ? (
         <button onClick={clickAction} className={styles[stateTxt.toLowerCase()]}>
             <span className={styles.indicator}>&#9673;</span>&nbsp;
-            {stateTxt}
+            <span className={styles.indicator__label}>{stateTxt}</span>
         </button>
     ) : (
         ""

client/components/edit/__snapshots__/ObjectStatus.test.tsx.snap

@@ -12,7 +12,11 @@ exports[`ObjectStatus defaults to unknown state 1`] = `
       ◉
     </span>
 
-    Unknown
+    <span
+      className="indicator__label"
+    >
+      Unknown
+    </span>
   </button>,
   ",",
 ]
@@ -30,7 +34,11 @@ exports[`ObjectStatus displays the state found in the response 1`] = `
       ◉
     </span>
 
-    Inactive
+    <span
+      className="indicator__label"
+    >
+      Inactive
+    </span>
   </button>,
   ",",
 ]

client/components/edit/children/Child.tsx

@@ -1,3 +1,4 @@
+import styles from "./ChildList.module.css";
 import React, { useState } from "react";
 import { useEditorContext } from "../../../context/EditorContext";
 import ChildList from "./ChildList";
@@ -41,7 +42,11 @@ export const Child = ({
     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 ? (
@@ -53,33 +58,36 @@ export const Child = ({
             forceThumbs={thumbnail}
         />
     ) : (
-        ""
+        null
     );
     const hasExtraTools = thumbnail || models || showChildCounts;
     const extraTools = hasExtraTools ? (
-        <Grid item xs={1}>
+        <Grid item xs>
             {thumbnail ? <ObjectThumbnail pid={pid} /> : ""}
             {showChildCounts ? <ObjectChildCounts pid={pid} /> : ""}
             {models ? <ObjectModels pid={pid} /> : ""}
         </Grid>
     ) : null;
     return (
-        <>
-            <Grid container>
-                <Grid item xs={hasExtraTools ? 7 : 8}>
-                    {expandControl}
+        <div className={styles.childlist__item}>
+            <Grid container sx={{ spacing: 2, alignItems: "center" }}>
+				<Grid item xs={6}>
+                    {expandControl}{" "}
                     {loaded && parentPid ? <ChildPosition pid={pid} parentPid={parentPid} /> : ""}
-                    <Link href={"/edit/object/" + pid}>{(title.length > 0 ? title : "-") + ` [${pid}]`}</Link>{" "}
-                    <CopyPidButton pid={pid} />
+                    <Link href={"/edit/object/" + pid}>{title || "(no title)"}</Link>
                 </Grid>
-                <Grid item xs={4}>
+				<Grid item xs>
+					{pid}
+					<CopyPidButton pid={pid} />
+				</Grid>
+                <Grid item xs="auto">
                     {loaded ? <ObjectButtonBar pid={pid} /> : ""}
                     <ObjectLoader pid={pid} />
                 </Grid>
                 {extraTools}
             </Grid>
             {childList}
-        </>
+        </div>
     );
 };
 

client/components/edit/children/ChildList.module.css

@@ -1,7 +1,38 @@
 .childlist {
+    margin-block: 0.75rem;
+}
+
+.childlist__list {
+    margin-block: 0;
+    padding-inline: 0;
     list-style-type: none;
+	background-color: white;
+}
+.childlist__list > li {
+    margin-block: 0;
+	border-block-start: 1px solid var(--page-list-border);
+}
+
+.childlist__item {
+    margin-block: 0;
+	padding: 0.25rem;
+}
+
+.childlist__expandicon {
+	vertical-align: bottom;
+}
+
+/* Nested */
+
+.childlist__list .childlist {
+	margin-inline-start: 1.5rem;
 }
 
-.childlist li {
-    border-top: 1px solid gray;
+/* Pagination alignment */
+
+.childlist .pagination {
+	margin-block-end: 1px;
+}
+.childlist .pagination li {
+	margin: 0;
 }

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 {
@@ -88,38 +89,34 @@ 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 ? (
             <Pagination
+                sx={{ ml: 3 }}
                 count={pageCount}
                 page={page}
                 siblingCount={2}
@@ -135,20 +132,26 @@ export const ChildList = ({
     const endNumber = startNumber + pageSize - 1;
     const paginatorLabel =
         children.numFound > 1 ? (
-            <p>
+            <>
                 Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
                 {children.numFound}
-            </p>
+            </>
         ) : null;
     return (
-        <>
+        <div className={styles.childlist}>
             {thumbsButton}
             {modelsButton}
             {childButton}
-            {paginatorLabel}
-            {paginator}
-            <ul className={styles.childlist}>{contents}</ul>
-        </>
+			<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>
     );
 };
 

client/components/edit/children/__snapshots__/Child.test.tsx.snap

@@ -2,16 +2,16 @@
 
 exports[`Child handles empty titles appropriately 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="MuiGrid-root MuiGrid-container child__container css-11lq3yg-MuiGrid-root"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 css-vok43g-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 child__label css-vok43g-MuiGrid-root"
   >
     <span
       onClick={[Function]}
     >
       <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium child__expand-icon css-i4bv87-MuiSvgIcon-root"
         data-testid="AddBoxIcon"
         focusable="false"
         role="img"
@@ -46,16 +46,16 @@ exports[`Child handles empty titles appropriately 1`] = `
 
 exports[`Child renders a thumbnail 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="MuiGrid-root MuiGrid-container child__container css-11lq3yg-MuiGrid-root"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-7 css-uqwprf-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-7 child__label css-uqwprf-MuiGrid-root"
   >
     <span
       onClick={[Function]}
     >
       <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium child__expand-icon css-i4bv87-MuiSvgIcon-root"
         data-testid="AddBoxIcon"
         focusable="false"
         role="img"
@@ -194,16 +194,16 @@ exports[`Child renders thumbnail and child counts 1`] = `
 
 exports[`Child renders using ajax-loaded data 1`] = `
 <div
-  className="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  className="MuiGrid-root MuiGrid-container child__container css-11lq3yg-MuiGrid-root"
 >
   <div
-    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 css-vok43g-MuiGrid-root"
+    className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 child__label css-vok43g-MuiGrid-root"
   >
     <span
       onClick={[Function]}
     >
       <svg
-        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium child__expand-icon css-i4bv87-MuiSvgIcon-root"
         data-testid="AddBoxIcon"
         focusable="false"
         role="img"