(airflow) branch main updated: Update styles for renderedjson component (#40964)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new b713b302a6 Update styles for renderedjson component (#40964)
b713b302a6 is described below

commit b713b302a6689b2b2732751bfcba829700de9d9e
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Tue Jul 23 12:23:20 2024 -0400

    Update styles for renderedjson component (#40964)
---
 .../www/static/js/components/RenderedJsonField.tsx | 23 +++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/airflow/www/static/js/components/RenderedJsonField.tsx 
b/airflow/www/static/js/components/RenderedJsonField.tsx
index 518f6b9fd8..a5e216f64d 100644
--- a/airflow/www/static/js/components/RenderedJsonField.tsx
+++ b/airflow/www/static/js/components/RenderedJsonField.tsx
@@ -21,9 +21,17 @@ import React from "react";
 
 import ReactJson from "react-json-view";
 
-import { Flex, Button, Code, Spacer, useClipboard } from "@chakra-ui/react";
+import {
+  Flex,
+  Button,
+  Code,
+  Spacer,
+  useClipboard,
+  useTheme,
+  FlexProps,
+} from "@chakra-ui/react";
 
-interface Props {
+interface Props extends FlexProps {
   content: string;
 }
 
@@ -41,12 +49,13 @@ const JsonParse = (content: string) => {
   return [isJson, contentJson, contentFormatted];
 };
 
-const RenderedJsonField = ({ content }: Props) => {
+const RenderedJsonField = ({ content, ...rest }: Props) => {
   const [isJson, contentJson, contentFormatted] = JsonParse(content);
   const { onCopy, hasCopied } = useClipboard(contentFormatted);
+  const theme = useTheme();
 
   return isJson ? (
-    <Flex>
+    <Flex {...rest} p={2}>
       <ReactJson
         src={contentJson}
         name={false}
@@ -55,7 +64,11 @@ const RenderedJsonField = ({ content }: Props) => {
         indentWidth={2}
         displayDataTypes={false}
         enableClipboard={false}
-        style={{ backgroundColor: "inherit" }}
+        style={{
+          backgroundColor: "inherit",
+          fontSize: theme.fontSizes.md,
+          font: theme.fonts.mono,
+        }}
       />
       <Spacer />
       <Button aria-label="Copy" onClick={onCopy}>