refactor: polished the log UI (SigNoz#3591)

manishm · Sep 27, 2023 · 0cf18a3 · 0cf18a3
1 parent e85c761
commit 0cf18a3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/frontend/src/container/LogDetailedView/FieldRenderer.styles.ts b/frontend/src/container/LogDetailedView/FieldRenderer.styles.ts
@@ -0,0 +1,20 @@
+import { Tag } from 'antd';
+import styled from 'styled-components';
+
+export const TagContainer = styled(Tag)`
+	&&& {
+		border-radius: 0.25rem;
+		padding: 0.063rem 0.5rem;
+		font-weight: 600;
+		font-size: 0.75rem;
+		line-height: 1.25rem;
+	}
+`;
+
+export const TagLabel = styled.span`
+	font-weight: 400;
+`;
+
+export const TagValue = styled.span`
+	text-transform: capitalize;
+`;
diff --git a/frontend/src/container/LogDetailedView/FieldRenderer.tsx b/frontend/src/container/LogDetailedView/FieldRenderer.tsx
@@ -1,6 +1,6 @@
 import { blue } from '@ant-design/colors';
-import { Tag } from 'antd';
 
+import { TagContainer, TagLabel, TagValue } from './FieldRenderer.styles';
 import { FieldRendererProps } from './LogDetailedView.types';
 import { getFieldAttributes } from './utils';
 
@@ -12,8 +12,14 @@ function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
 			{dataType && newField && logType ? (
 				<>
 					<span style={{ color: blue[4] }}>{newField} </span>
-					<Tag>Type: {logType}</Tag>
-					<Tag>Data type: {dataType}</Tag>
+					<TagContainer>
+						<TagLabel>Type: </TagLabel>
+						<TagValue>{logType}</TagValue>
+					</TagContainer>
+					<TagContainer>
+						<TagLabel>Data type: </TagLabel>
+						<TagValue>{dataType}</TagValue>
+					</TagContainer>
 				</>
 			) : (
 				<span style={{ color: blue[4] }}>{field}</span>