Tweak style for key value pair data descriptions

Author: peterMuriuki

packages/react-utils/src/components/KeyValuePairs/index.css

@@ -3,12 +3,14 @@
   grid-template-columns: repeat(3, minmax(32px, 1fr));
 }
 
+.singleKeyValue-pair__value,
 .keyValueGrid-pair__value {
-  color: #000;
+  color: rgba(0, 0, 0, 0.85);
 }
 
+.singleKeyValue-pair__label,
 .keyValueGrid-pair__label {
-  color: #777;
+  color: rgba(0, 0, 0, 0.65);
 }
 
 .keyValueGrid-pair__value,
@@ -23,5 +25,6 @@
 dl.keyValueGrid,
 dl.singleKeyValue {
   margin-bottom: 0;
-  line-height: 1.2em;
+  line-height: 1.4em;
+  font-weight: 400;
 }

packages/react-utils/src/components/KeyValuePairs/index.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import { Typography } from 'antd';
 import './index.css';
 
-const { Text } = Typography;
-
 type KeyValuePairs = Record<string, string | number | boolean | JSX.Element>;
 
 export const KeyValueGrid = (props: KeyValuePairs) => {
@@ -34,12 +31,8 @@ export const SingleKeyNestedValue = (props: KeyValuePairs) => {
   return (
     <dl className="singleKeyValue">
       <div className="singleKeyValue-pair">
-        <dt className="singleKeyValue-pair__label">
-          <Text type={'secondary'}>{key}</Text>
-        </dt>
-        <dd className="singleKeyValue-pair__value">
-          <Text>{value}</Text>
-        </dd>
+        <dt className="singleKeyValue-pair__label">{key}</dt>
+        <dd className="singleKeyValue-pair__value">{value}</dd>
       </div>
     </dl>
   );