populated datastreams to green. fix status buttons in ObjectSummary.

Author: crhallberg

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

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 {

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

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>

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;

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;

client/styles/variables.css

@@ -29,25 +29,27 @@
     --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);
 
     --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);
 }