WIP Styling Changes

client/src/components/data-label/data-label.component.jsx

@@ -1,3 +1,4 @@
+import { Typography } from "antd";
 import React from "react";
 
 export default function DataLabel({
@@ -11,14 +12,28 @@ export default function DataLabel({
   if (!visible || (hideIfNull && !!!children)) return null;
 
   return (
-    <div {...props}>
+    <div {...props} style={{ display: "flex" }}>
       <div
         style={{
-          display: vertical ? "block" : "inline-block",
+          flex: 2,
           marginRight: ".2rem",
-        }}>{`${label}: `}</div>
-      <div style={{ display: vertical ? "block" : "inline-block" }}>
-        {children}
+        }}
+      >
+        <Typography.Text type="secondary">{`${label}:`}</Typography.Text>
+      </div>
+      <div
+        style={{
+          flex: 4,
+          marginLeft: ".3rem",
+          fontWeight: "bolder",
+          wordWrap: "break-word",
+        }}
+      >
+        {typeof children === "string" ? (
+          <Typography.Text>{children}</Typography.Text>
+        ) : (
+          children
+        )}
       </div>
     </div>
   );