Feat styles for json viewer (#131)

* feat: new visual styles for the json view component * feat: refined styles
aws-samples · Oct 23, 2023 · 8deaf4c · 8deaf4c
1 parent e2e255b
commit 8deaf4c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/lib/user-interface/react-app/src/components/chatbot/chat-message.tsx b/lib/user-interface/react-app/src/components/chatbot/chat-message.tsx
@@ -15,6 +15,7 @@ import { JsonView, darkStyles } from "react-json-view-lite";
 import ReactMarkdown from "react-markdown";
 import { Dispatch } from "react";
 import "react-json-view-lite/dist/index.css";
+import "../../styles/app.scss";
 
 export interface ChatMessageProps {
   message: ChatBotHistoryItem;
@@ -31,7 +32,17 @@ export default function ChatMessage(props: ChatMessageProps) {
             props.message.metadata &&
             props.configuration.showMetadata && (
               <ExpandableSection variant="footer" headerText="Metadata">
-                <JsonView data={props.message.metadata} style={darkStyles} />
+                <JsonView
+                  data={props.message.metadata}
+                  style={{
+                    ...darkStyles,
+                    stringValue: "jsonStrings",
+                    numberValue: "jsonNumbers",
+                    booleanValue: "jsonBool",
+                    nullValue: "jsonNull",
+                    container: "jsonContainer",
+                  }}
+                />
               </ExpandableSection>
             )
           }

diff --git a/lib/user-interface/react-app/src/styles/app.scss b/lib/user-interface/react-app/src/styles/app.scss
@@ -54,3 +54,28 @@ body.awsui-dark-mode {
     }
   }
 }
+
+.jsonContainer {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1em;
+  background-color: #0e1b2ac3;
+}
+
+.jsonStrings {
+  color: rgb(74, 234, 167);
+
+}
+
+.jsonNumbers {
+  color: rgb(255, 223, 60);
+}
+
+.jsonBool {
+  color: rgb(252, 178, 250);
+  font-weight: 600;
+}
+
+.jsonNull {
+  color:rgb(74, 205, 234);
+  font-weight: 600;
+}