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 ? ( <> {newField} - Type: {logType} - Data type: {dataType} + + Type: + {logType} + + + Data type: + {dataType} + ) : ( {field}