From f69a7786da3ba21373574ee6c96371769a72ac42 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Tue, 25 Jan 2022 22:03:00 +0100
Subject: Fixed issue with json viewer

---
 src/components/Content/Content.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/components/Content')

diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 95ee444..1341e4f 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
-import {Dispatch, SetStateAction, useMemo} from "react";
+import {Dispatch, SetStateAction, useContext, useMemo} from "react";
 import {RequestPayload, ResponsePayload} from "~hooks/useRequests";
 import ReactJson from 'react-json-view';
 import styles from './Content.module.scss';
 import {Button, Col, Container, Row} from "react-bootstrap";
+import {DarkModeContext} from "../../contexts/DarkMode";
 
 function getHeader(headers: { [key: string]: string }, key: string, unit?: string): string | null {
   console.log(headers, key)
@@ -63,6 +64,7 @@ export default function Content({ raw, setRaw, data }: ContentProps): JSX.Elemen
 };
 
 function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
+    const { darkMode } = useContext(DarkModeContext);
     const contentType = useMemo(() => {
       if (raw) {
         return '';
@@ -84,6 +86,7 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
 
     if (['application/pdf', 'text/html'].includes(contentType)) {
       return <iframe
+        className="bg-white"
         src={`data:${contentType};base64,${data.body}`}
         srcDoc={contentType === 'text/html' ? atob(data.body) : undefined}
         loading='lazy'
@@ -94,10 +97,12 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, 'setRaw'>) {
     if (contentType.startsWith('application/json')) {
       return <ReactJson
         src={JSON.parse(atob(data.body))}
+        theme={darkMode ? "monokai" : undefined}
         style={{
           padding: '1em',
           width: '100%',
           height: '100%',
+          overflowY: 'auto',
         }}
       />
     }
-- 
cgit v1.2.3