Renewed: Improve Styling

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/__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]}
   >

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/DeleteObjectButton.module.css

@@ -0,0 +1,7 @@
+.deleteBtn {
+    &:hover,
+    &:focus {
+        background-color: var(--red-700);
+        border-color: var(--red-700);
+    }
+}

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

client/components/edit/ObjectButtonBar.module.css

@@ -0,0 +1,22 @@
+.objectBar {
+    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;
+
+        &: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;
+        }
+    }
+}

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.trim()).toEqual("Refresh");
         await userEvent.setup().click(refreshIcon);
         await waitFor(() => expect(mockContext.action.clearPidFromChildListStorage).toHaveBeenCalledTimes(1));
         expect(mockContext.action.clearPidFromChildListStorage).toHaveBeenCalledWith(pid);

client/components/edit/ObjectButtonBar.tsx

@@ -1,11 +1,14 @@
 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;
 }
@@ -16,15 +19,21 @@ const ObjectButtonBar = ({ pid }: ObjectButtonBarProps): React.ReactElement => {
     } = useEditorContext();
 
     return (
-        <>
+        <div className={styles.objectBar}>
             <ObjectStatus pid={pid} />
             <EditParentsButton pid={pid} />
-            <button onClick={() => clearPidFromChildListStorage(pid)}>
-                <Refresh style={{ height: "14px" }} titleAccess="Refresh children" />
+            <button
+                type="button"
+                className={styles.refreshBtn}
+                onClick={() => clearPidFromChildListStorage(pid)}
+                title="Refresh children"
+            >
+                <RefreshIcon />
+                Refresh
             </button>
             <ObjectPreviewButton pid={pid} />
             <DeleteObjectButton pid={pid} />
-        </>
+        </div>
     );
 };
 

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 />

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

client/components/edit/ObjectStatus.module.css

@@ -1,19 +1,47 @@
-.active .indicator {
-    color: green;
+.status_btn {
+    min-width: 120px;
+
+    &:is(:hover, &:focus) {
+        color: white;
+    }
 }
 
-.inactive .indicator {
-    color: yellow;
+.status_btn.active {
+    background-color: var(--object-status-active);
+
+    &:hover, &:focus {
+        color: white;
+        background-color: var(--object-status-active-text);
+        border-color: var(--object-status-active-text);
+    }
 }
 
-.deleted .indicator {
-    color: red;
+.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: gray;
+.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);
+    }
 }
 
-.indicator {
-    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
+.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);
+    }
 }

client/components/edit/ObjectStatus.tsx

@@ -1,13 +1,31 @@
-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 CloseIcon from "@mui/icons-material/Close";
+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 />;
+        case "Deleted":
+            return <CloseIcon />;
+        case "Inactive":
+            return <ModeStandbyIcon />;
+    }
+    return <HelpOutlineIcon />;
+}
+
 export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement => {
     const {
         action: { openModal },
@@ -19,15 +37,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.status_btn} ${styles[stateText.toLowerCase()]}`}>
+            <span className={styles.indicator}>{getStatusIcon(stateText)}</span>&nbsp;
+            {stateText}
         </button>
     ) : (
         ""

client/components/edit/ObjectSummary.module.css

@@ -1,9 +1,21 @@
 .infobox {
-    background-color: lightgray;
-    border: 1px solid black;
-    padding: 5px;
+    padding-inline: 1lh;
+    padding-block: 1rem;
+    color: var(--info-text);
+    background-color: var(--info);
+    border: 1px solid var(--info-border);
 }
 
 .infobox h2 {
     margin: 0;
-}
+}
+
+.infobox button {
+    min-width: unset;
+    padding-block: 0.5em 0.4em;
+
+    &:not(:hover,:focus) {
+        background-color: white;
+        border-color: black;
+    }
+}

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";
@@ -38,7 +39,13 @@ 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} />