fix: show Output of Program masonry tile in green

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/masonry/Masonry.css

@@ -33,11 +33,14 @@
       background: #0066cc;
     }
     &[data-kind="read"] {
-      background: #63993d30;
+      background: #b9841230;
     }
     &[data-kind="code"] {
       background: #ca6c0f30;
     }
+    &[data-kind="output-of-program"] {
+      background: #63993d30;
+    }
   }
 }
 
@@ -49,11 +52,14 @@
     background: #e0f0ff;
   }
   &[data-kind="read"] {
-    background: #e9f7df;
+    background: #fff4cc;
   }
   &[data-kind="code"] {
     background: #ffe8cc;
   }
+  &[data-kind="output-of-program"] {
+    background: #e9f7df;
+  }
 }
 
 .pdl-masonry-index {

pdl-live-react/src/view/masonry/MasonryTile.tsx

@@ -87,7 +87,11 @@ export default function MasonryTile({
   )
 
   return (
-    <MasonryTileWrapper sml={sml} kind={kind} header={header}>
+    <MasonryTileWrapper
+      sml={sml}
+      kind={/^[^.]+$/.test(id) ? "output-of-program" : kind}
+      header={header}
+    >
       <Panel isScrollable={sml !== "xl"} className="pdl-masonry-tile-panel">
         <PanelMain maxHeight={maxHeight}>
           <Result