Updating colors for json theme. (#2807)

Co-authored-by: phix <peter.hicks@astronomer.io>

Author: phixMe

web/package-lock.json

@@ -30,7 +30,7 @@
     "@types/jest": "^29.5.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.6",
-    "@uiw/react-json-view": "^2.0.0-alpha.11",
+    "@uiw/react-json-view": "^2.0.0-alpha.24",
     "@visx/responsive": "3.10.2",
     "autoprefixer": "^10.4.14",
     "copy-webpack-plugin": "^10.2.4",

web/package.json

@@ -1,28 +1,39 @@
 // SPDX-License-Identifier: Apache-2.0
 import { Box } from '@mui/system'
-import { darkTheme } from '@uiw/react-json-view/dark'
-import { theme } from '../../../helpers/theme'
+import { THEME_EXTRA, theme } from '../../../helpers/theme'
+import { githubDarkTheme } from '@uiw/react-json-view/githubDark'
 import JsonView from '@uiw/react-json-view'
 import React from 'react'
 
 interface OwnProps {
   data: object
-  searchable?: boolean
-  placeholder?: string
 }
 
 type JsonViewProps = OwnProps
 
-darkTheme.background = theme.palette.background.default
-darkTheme.backgroundColor = theme.palette.background.default
-darkTheme.borderLeftWidth = 2
-darkTheme.borderLeftColor = theme.palette.grey[500]
-darkTheme.borderLeftStyle = 'dashed'
+githubDarkTheme.background = theme.palette.background.default
+githubDarkTheme.backgroundColor = theme.palette.background.default
+githubDarkTheme.borderLeftWidth = 2
+githubDarkTheme.borderLeftColor = theme.palette.grey[500]
+githubDarkTheme.borderLeftStyle = 'dashed'
+
+const mqTheme = {
+  ...githubDarkTheme,
+  '--w-rjv-info-color': THEME_EXTRA.typography.subdued,
+  '--w-rjv-type-null-color': theme.palette.warning.main,
+  '--w-rjv-type-boolean-color': theme.palette.error.main,
+  '--w-rjv-copied-color': theme.palette.primary.main,
+  '--w-rjv-key-string': theme.palette.common.white,
+  '--w-rjv-type-string-color': theme.palette.info.main,
+  '--w-rjv-ellipsis-color': theme.palette.info.main,
+  '--w-rjv-key-number': theme.palette.primary.main,
+  '--w-rjv-type-float-color': theme.palette.primary.main,
+}
 
 const MqJsonView: React.FC<JsonViewProps> = ({ data }) => {
   return (
     <Box my={2}>
-      <JsonView style={darkTheme} collapsed={2} value={data} />
+      <JsonView style={mqTheme} collapsed={2} value={data} />
     </Box>
   )
 }

web/src/components/core/json-view/MqJsonView.tsx

@@ -50,7 +50,7 @@ const RunInfo: FunctionComponent<RunInfoProps> = (props) => {
   )
 
   return (
-    <Box mt={2}>
+    <Box>
       {<MqCode code={(jobFacets?.sql as SqlFacet)?.query} language={'sql'} />}
       {run.facets && (
         <Box mt={2}>
@@ -61,7 +61,6 @@ const RunInfo: FunctionComponent<RunInfoProps> = (props) => {
             data={run.facets}
             aria-label={i18next.t('jobs.facets_subhead_aria')}
             aria-required='true'
-            placeholder={i18next.t('jobs.search')}
           />
         </Box>
       )}