1020 modify extractor description UI (#1048)

* UI changes for Extractor Modal and Extractor Page * Update ListenerItem.tsx
clowder-framework · May 14, 2024 · c847780 · c847780
1 parent 3b2027b
commit c847780
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/frontend/src/components/listeners/ListenerInfo.tsx b/frontend/src/components/listeners/ListenerInfo.tsx
@@ -13,6 +13,14 @@ type ListenerInfoProps = {
 	defaultExpanded?: boolean;
 };
 
+const customStyles = {
+	authorInfo: {
+		color: theme.palette.info.main,
+		fontSize: "12px",
+		margin: "0.75em 0 0.75em 0",
+	},
+};
+
 export const ListenerInfo = (props: ListenerInfoProps) => {
 	const { selectedExtractor, defaultExpanded } = props;
 
@@ -32,19 +40,19 @@ export const ListenerInfo = (props: ListenerInfoProps) => {
 					<></>
 				)}
 			</Box>
-			{selectedExtractor && selectedExtractor["description"] ? (
-				<Typography>{selectedExtractor["description"]}</Typography>
-			) : null}
 			{selectedExtractor &&
 			selectedExtractor["created"] &&
 			selectedExtractor["properties"] &&
 			selectedExtractor["properties"]["author"] ? (
-				<ClowderFootnote style={{ color: theme.palette.info.main }}>
+				<ClowderFootnote style={customStyles.authorInfo}>
 					{`Created by ${
 						selectedExtractor["properties"]["author"]
 					} at ${parseDate(selectedExtractor["created"])}`}
 				</ClowderFootnote>
 			) : null}
+			{selectedExtractor && selectedExtractor["description"] ? (
+				<Typography>{selectedExtractor["description"]}</Typography>
+			) : null}
 			{selectedExtractor ? (
 				<ListenerInfoDetails
 					listener={selectedExtractor}

diff --git a/frontend/src/components/listeners/ListenerItem.tsx b/frontend/src/components/listeners/ListenerItem.tsx
@@ -64,7 +64,7 @@ export default function ListenerItem(props: ListenerCardProps) {
 				!extractor["alive"] ? (
 					<Typography
 						sx={{
-							padding: "0.5em",
+							padding: "2em",
 							color: "rgba(0, 0, 0, 0.26)",
 							fontSize: "14px",
 						}}
@@ -74,8 +74,8 @@ export default function ListenerItem(props: ListenerCardProps) {
 				) : (
 					<Typography
 						sx={{
-							padding: "0.5em",
-							color: theme.palette.primary.light,
+							padding: "2em",
+							color: theme.palette.info.main,
 							fontSize: "14px",
 						}}
 					>