improve signal name styles

Author: thetarnav

packages/ui/src/signal/SignalNode.css.ts

@@ -21,6 +21,10 @@ export const SignalNode = {
     color: color.gray[800],
     fontWeight: 600,
     fontFamily: theme.font.mono,
+    ":after": {
+      content: ":",
+      color: color.disabled,
+    },
   }),
 }
 

packages/ui/src/signal/SignalNode.tsx

@@ -143,7 +143,8 @@ export const SignalNode: Component<{ signal: GraphSignal }> = ({ signal }) => {
   return (
     <div class={styles.SignalNode.container} {...hoverProps}>
       <div class={styles.SignalNode.name}>
-        {signal.name}:{/* <span class={styles.SignalNode.id}>#{signal.id}</span> */}
+        {signal.name}
+        {/* <span class={styles.SignalNode.id}>#{signal.id}</span> */}
       </div>
       <ValuePreview value={signal.value} updated={isUpdated()} highlighted={isHighlighted()} />
     </div>