Made all the icons monochrome

app/components/Column.tsx

@@ -24,7 +24,7 @@ function ColumnElement(column: ColumnProps) {
       }
     >
       <div className="flex items-center text-slate-800 bg-slate-50 mb-[3px] p-2 pb-0 transition dark:bg-slate-900 dark:text-slate-300">
-        {column.icon && <column.icon className={`${iconColor} h-6 w-6 mr-1`} />}
+        {column.icon && <column.icon className="h-6 w-6 mr-1" />}
         <Title className="">{title}</Title>
       </div>
       <div className="overflow-y-auto h-viewerHeight no-scrollbar">

app/components/ColumnItem.tsx

@@ -30,7 +30,7 @@ function ColumnItemElement({
     }
 
     if (isSelected) {
-      return "bg-slate-200 hover:bg-slate-300 transition duration-75 ease-out dark:bg-white dark:bg-opacity-[5%] dark:hover:bg-white dark:hover:bg-opacity-[10%] dark:text-slate-400";
+      return "bg-slate-200 hover:bg-slate-300 transition duration-75 ease-out dark:bg-white dark:bg-opacity-[5%] dark:hover:bg-white dark:hover:bg-opacity-[10%] dark:text-slate-200";
     }
 
     return "hover:bg-slate-100 transition duration-75 ease-out dark:hover:bg-white dark:hover:bg-opacity-[5%] dark:text-slate-400";
@@ -54,7 +54,7 @@ function ColumnItemElement({
       ref={htmlElement}
     >
       <div className="w-4 flex-none flex-col justify-items-center">
-      {item.icon && <item.icon className={`h-5 w-5 ${isSelected && isHighlighted ? iconColor : "text-slate-500"}`} />}
+      {item.icon && <item.icon className={`h-5 w-5 ${isSelected && isHighlighted ? "text-slate-900 dark:text-slate-300" : "text-slate-500"}`} />}
 
       </div>
 

app/components/InfoHeader.tsx

@@ -45,15 +45,15 @@ export function InfoHeader({ relatedPaths }: InfoHeaderProps) {
   return (
     <div className="mb-4 pb-4">
       <div className="flex items-center">
-        <Title className="flex-1 mr-2 text-slate-700 transition dark:text-slate-400">
+        <Title className="flex-1 mr-2 text-slate-700 transition dark:text-slate-200">
           {selectedName ?? "nothing"}
         </Title>
         <div>
-          <ValueIcon type={selectedInfo} size={ValueIconSize.Medium} />
+          <ValueIcon monochrome type={selectedInfo} size={ValueIconSize.Medium} />
         </div>
       </div>
       <div
-        className="relative w-full h-full"
+        className="relative w-full h-full" 
         onMouseEnter={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
       >

app/components/ValueIcon.tsx

@@ -43,7 +43,7 @@ export const ValueIcon: FunctionComponent<ValueIconProps> = ({
   size = ValueIconSize.Small,
   monochrome = false,
 }) => {
-  let classes = monochrome ? `text-gray-600` : colorForTypeName(type.name);
+  let classes = monochrome ? `text-slate-300` : colorForTypeName(type.name);
   switch (size) {
     case ValueIconSize.Small:
       classes += " h-4 w-4";

app/utilities/jsonColumnView.ts

@@ -122,10 +122,10 @@ export function generateNodesToPath(
 function iconForType(type: JSONValueType): IconComponent {
   switch (type.name) {
     case "object": {
-      return ObjectIcon;
+      return CubeIcon;
     }
     case "array": {
-      return ArrayIcon;
+      return CollectionIcon;
     }
     case "null": {
       return EyeOffIcon;