From f39007d64ae0a37a910468520fbebacae64b2936 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:43:12 -0400
Subject: [PATCH] PrettyJson theme + updated network accent colors (#830)

* Update network accent colors

* PrettyJson theme updated
---
 src/components/NetworkIndicator/styles.scss |  4 ++--
 src/components/PrettyJson/index.tsx         | 17 +++++++++++++++--
 src/components/PrettyJson/styles.scss       | 20 ++++++++++++++++++--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/NetworkIndicator/styles.scss b/src/components/NetworkIndicator/styles.scss
index 85d9232c..09b9a331 100644
--- a/src/components/NetworkIndicator/styles.scss
+++ b/src/components/NetworkIndicator/styles.scss
@@ -20,11 +20,11 @@
     background-color: var(--NetworkSelector-dot-color);
 
     &[data-network="futurenet"] {
-      --NetworkSelector-dot-color: var(--sds-clr-lilac-09);
+      --NetworkSelector-dot-color: var(--sds-clr-mint-09);
     }
 
     &[data-network="testnet"] {
-      --NetworkSelector-dot-color: var(--sds-clr-sky-09);
+      --NetworkSelector-dot-color: var(--sds-clr-pink-09);
     }
 
     &[data-network="mainnet"] {
diff --git a/src/components/PrettyJson/index.tsx b/src/components/PrettyJson/index.tsx
index cf7c3c07..e9a09941 100644
--- a/src/components/PrettyJson/index.tsx
+++ b/src/components/PrettyJson/index.tsx
@@ -20,6 +20,13 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
   const Value = ({ children }: { children: React.ReactNode }) => (
     <div className="PrettyJson__value">{children}</div>
   );
+  const ValueType = ({
+    children,
+    type,
+  }: {
+    children: React.ReactNode;
+    type: string;
+  }) => <span className={`PrettyJson__value--${type}`}>{children}</span>;
   const Quotes = () => <span className="PrettyJson__quotes">{'"'}</span>;
   const Colon = () => <span className="PrettyJson__colon">{":"}</span>;
   const Comma = () => <span className="PrettyJson__comma">{","}</span>;
@@ -147,7 +154,13 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
                 <Quotes />
               </>
             ) : (
-              `"${item}"`
+              <>
+                <Quotes />
+                <ValueType type={isNaN(Number(item)) ? "string" : "number"}>
+                  {item}
+                </ValueType>
+                <Quotes />
+              </>
             )}
             <Comma />
           </Value>
@@ -162,7 +175,7 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
       default:
         return (
           <Value>
-            {`${item}`}
+            <ValueType type={typeof item}>{`${item}`}</ValueType>
             <Comma />
           </Value>
         );
diff --git a/src/components/PrettyJson/styles.scss b/src/components/PrettyJson/styles.scss
index 8f8d59dc..1d09e72b 100644
--- a/src/components/PrettyJson/styles.scss
+++ b/src/components/PrettyJson/styles.scss
@@ -17,14 +17,30 @@
   }
 
   &__value {
-    color: var(--sds-clr-gray-11);
     white-space: nowrap;
+
+    &--string {
+      color: var(--sds-clr-navy-11);
+    }
+
+    &--number {
+      color: var(--sds-clr-lime-11);
+    }
+
+    &--boolean {
+      color: var(--sds-clr-pink-11);
+    }
   }
 
+  &__value,
   &__comma,
   &__quotes,
   &__bracket,
   &__key {
-    color: var(--sds-clr-gray-11);
+    color: var(--sds-clr-gray-12);
+  }
+
+  .Link {
+    font-family: var(--sds-ff-monospace);
   }
 }