PrettyJson theme + updated network accent colors (#830)

* Update network accent colors * PrettyJson theme updated
stellar · Apr 23, 2024 · f39007d · f39007d
1 parent 5f273b2
commit f39007d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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);
   }
 }