diff --git a/apps/wing-console/console/ui/src/features/explorer-pane/map-view.tsx b/apps/wing-console/console/ui/src/features/explorer-pane/map-view.tsx index 2d560d89d53..528c4fa443a 100644 --- a/apps/wing-console/console/ui/src/features/explorer-pane/map-view.tsx +++ b/apps/wing-console/console/ui/src/features/explorer-pane/map-view.tsx @@ -61,6 +61,7 @@ interface ConstructNodeProps { collapsed: boolean; icon?: string; hierarchichalRunningState: ResourceRunningState; + depth: number; } const ConstructNode: FunctionComponent> = @@ -79,6 +80,7 @@ const ConstructNode: FunctionComponent> = collapsed, icon, hierarchichalRunningState, + depth, }) => { const select = useCallback( () => onSelectedNodeIdChange(id), @@ -121,7 +123,8 @@ const ConstructNode: FunctionComponent> = className={clsx( "w-full h-full", "rounded-lg", - "bg-white dark:bg-slate-700", + depth % 2 === 0 && "bg-white dark:bg-slate-700", + depth % 2 === 1 && "bg-slate-50 dark:bg-slate-650", highlight && "bg-sky-50 dark:bg-sky-900", "border", "outline outline-0", @@ -509,6 +512,7 @@ const RenderNode = ({ isNodeHidden, nodeInfo, expandedItems, + depth = 0, onCollapse, onExpand, }: { @@ -518,6 +522,7 @@ const RenderNode = ({ isNodeHidden: (path: string) => boolean; nodeInfo?: Map; expandedItems: string[]; + depth?: number; onCollapse: (path: string) => void; onExpand: (path: string) => void; }) => { @@ -569,6 +574,7 @@ const RenderNode = ({ } }} hierarchichalRunningState={constructTreeNode.hierarchichalRunningState} + depth={depth} > {childNodes.map((child) => ( ))}