From 04acc4915400009a3ef26e938a35b243bcc0170e Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Wed, 20 Sep 2023 15:31:31 +0530
Subject: [PATCH] refactor: polished the log UI (#3591)

---
 .../LogDetailedView/FieldRenderer.styles.ts   | 20 +++++++++++++++++++
 .../LogDetailedView/FieldRenderer.tsx         | 12 ++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/container/LogDetailedView/FieldRenderer.styles.ts

diff --git a/frontend/src/container/LogDetailedView/FieldRenderer.styles.ts b/frontend/src/container/LogDetailedView/FieldRenderer.styles.ts
new file mode 100644
index 0000000000..f4aec0f843
--- /dev/null
+++ 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
index 3df11cb8b5..8df55e491a 100644
--- 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>