feat: improve MiniMap node styling with dynamic color functions

- Introduced functions to determine node color and stroke color based on node type for the MiniMap component.
- Updated MiniMap to utilize these functions for enhanced visual representation of nodes.

components/canvas/canvas.tsx

@@ -80,6 +80,14 @@ function withResolvedCompareData(nodes: RFNode[], edges: RFEdge[]): RFNode[] {
   });
 }
 
+function getMiniMapNodeColor(node: RFNode): string {
+  return node.type === "frame" ? "transparent" : "#6366f1";
+}
+
+function getMiniMapNodeStrokeColor(node: RFNode): string {
+  return node.type === "frame" ? "transparent" : "#4f46e5";
+}
+
 function CanvasInner({ canvasId }: CanvasInnerProps) {
   const { screenToFlowPosition } = useReactFlow();
   const { resolvedTheme } = useTheme();
@@ -318,7 +326,8 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
         <Controls className="bg-card! border! shadow-sm! rounded-lg!" />
         <MiniMap
           className="bg-card! border! shadow-sm! rounded-lg!"
-          nodeColor="#6366f1"
+          nodeColor={getMiniMapNodeColor}
+          nodeStrokeColor={getMiniMapNodeStrokeColor}
           maskColor="rgba(0, 0, 0, 0.1)"
         />
       </ReactFlow>