Skip to content

Commit 29f0d7a

Browse files
authored
ENG-846 - Enhance DiscourseNodeConfigPanel to display node color alongside text. Added a color indicator using formatHexColor for improved visual representation of node settings. (#699)
1 parent 25d8e3a commit 29f0d7a

1 file changed

Lines changed: 11 additions & 1 deletion

File tree

apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type { CustomField } from "roamjs-components/components/ConfigPanels/type
1515
import posthog from "posthog-js";
1616
import getDiscourseRelations from "~/utils/getDiscourseRelations";
1717
import { deleteBlock } from "roamjs-components/writes";
18+
import { formatHexColor } from "./DiscourseNodeCanvasSettings";
1819

1920
type DiscourseNodeConfigPanelProps = React.ComponentProps<
2021
CustomField["options"]["component"]
@@ -127,7 +128,16 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
127128
onClick={() => navigateToNode(n.type)}
128129
style={{ verticalAlign: "middle" }}
129130
>
130-
{n.text}
131+
<div className="flex items-center gap-2">
132+
<span
133+
className="h-3 w-3 rounded-full"
134+
style={{
135+
backgroundColor:
136+
formatHexColor(n.canvasSettings?.color) || "#000",
137+
}}
138+
/>
139+
<span>{n.text}</span>
140+
</div>
131141
</td>
132142
<td>
133143
<Tooltip content="Edit" hoverOpenDelay={500}>

0 commit comments

Comments
 (0)