From 6833a1aa88a0538cabff08545fd8c32a29cff1ba Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Tue, 15 Oct 2024 21:02:24 +0500
Subject: [PATCH] fix(color-icon): render shape and label color based on schema
 primary_color

---
 .../Body/Graph/Nodes/Node/index.tsx           |  6 +++-
 src/components/common/TypeBadge/index.tsx     | 29 ++++++++++---------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx
index c3a66e3f4..538b2e9fd 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx
@@ -8,6 +8,7 @@ import { SchemaExtended } from '~/components/ModalsContainer/BlueprintModal/type
 import { fontProps } from '~/components/Universe/Graph/Cubes/Text/constants'
 import { truncateText } from '~/utils/truncateText'
 import { NODE_RADIUS } from '../../constants'
+import { useSchemaStore } from '~/stores/useSchemaStore'
 
 export const NODE_TYPE_COLORS = ['#ff13c9', '#5af0ff', '#3233ff', '#c2f0c2', '#ff6666', '#99ccff', '#ffb3b3']
 
@@ -40,6 +41,7 @@ export const boxGeometry = new BoxGeometry(2, 2, 2)
 
 export const Node = memo(({ node, setSelectedNode, onSimulationUpdate, isSelected }: Props) => {
   const meshRef = useRef<Mesh | null>(null)
+  const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType])
   const [showTooltip, setShowTooltip] = useState(false)
 
   console.log(isSelected)
@@ -89,7 +91,9 @@ export const Node = memo(({ node, setSelectedNode, onSimulationUpdate, isSelecte
     }
   })
 
-  const color = NODE_TYPE_COLORS[node?.children?.length] || 'red'
+  const primaryColor = normalizedSchemasByType[node.type]?.primary_color
+
+  const color = primaryColor ?? (NODE_TYPE_COLORS[node?.children?.length] || 'red')
 
   const handleClick = (e: { stopPropagation: () => void }) => {
     e.stopPropagation()
diff --git a/src/components/common/TypeBadge/index.tsx b/src/components/common/TypeBadge/index.tsx
index a127a148e..f194c0492 100644
--- a/src/components/common/TypeBadge/index.tsx
+++ b/src/components/common/TypeBadge/index.tsx
@@ -15,10 +15,13 @@ type BadgeProps = {
 
 export const TypeBadge = ({ type }: Props) => {
   let badgeProps: Omit<BadgeProps, 'label'>
-  const [getPrimaryColorByType] = useSchemaStore((s) => [s.getPrimaryColorByType])
+  const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType])
   const nodeType = type.toLowerCase()
 
-  const primaryColor = getPrimaryColorByType(type)
+  const primaryColor = normalizedSchemasByType[type]?.primary_color
+  const primaryIcon = normalizedSchemasByType[type]?.icon
+
+  const icon = primaryIcon ? `svg-icons/${primaryIcon}.svg` : null
 
   switch (nodeType) {
     case 'video':
@@ -26,7 +29,7 @@ export const TypeBadge = ({ type }: Props) => {
     case 'podcast':
     case 'clip':
       badgeProps = {
-        iconStart: 'video_badge.svg',
+        iconStart: icon ?? 'video_badge.svg',
         color: primaryColor ?? colors.CLIP,
       }
 
@@ -34,7 +37,7 @@ export const TypeBadge = ({ type }: Props) => {
 
     case 'show':
       badgeProps = {
-        iconStart: 'show_badge.svg',
+        iconStart: icon ?? 'show_badge.svg',
         color: primaryColor ?? colors.SHOW,
       }
 
@@ -42,7 +45,7 @@ export const TypeBadge = ({ type }: Props) => {
 
     case 'tweet':
       badgeProps = {
-        iconStart: 'twitter_badge.svg',
+        iconStart: icon ?? 'twitter_badge.svg',
         color: primaryColor ?? colors.TWEET,
       }
 
@@ -50,7 +53,7 @@ export const TypeBadge = ({ type }: Props) => {
 
     case 'episode':
       badgeProps = {
-        iconStart: 'audio_badge.svg',
+        iconStart: icon ?? 'audio_badge.svg',
         color: primaryColor ?? colors.EPISODE,
       }
 
@@ -58,15 +61,15 @@ export const TypeBadge = ({ type }: Props) => {
 
     case 'document':
       badgeProps = {
-        iconStart: 'notes_badge.svg',
+        iconStart: icon ?? 'notes_badge.svg',
         color: primaryColor ?? colors.TEXT,
       }
 
       break
 
-    case 'organization':
+    case primaryIcon ?? 'organization':
       badgeProps = {
-        iconStart: 'organization_badge.svg',
+        iconStart: icon ?? 'organization_badge.svg',
         color: primaryColor ?? colors.ORGANIZATION,
       }
 
@@ -76,7 +79,7 @@ export const TypeBadge = ({ type }: Props) => {
     case 'guest':
     case 'host':
       badgeProps = {
-        iconStart: 'person_badge.svg',
+        iconStart: icon ?? 'person_badge.svg',
         color: primaryColor ?? colors.PERSON,
       }
 
@@ -84,7 +87,7 @@ export const TypeBadge = ({ type }: Props) => {
 
     case 'event':
       badgeProps = {
-        iconStart: 'event_badge.svg',
+        iconStart: icon ?? 'event_badge.svg',
         color: primaryColor ?? colors.EVENT,
       }
 
@@ -92,7 +95,7 @@ export const TypeBadge = ({ type }: Props) => {
 
     case 'topic':
       badgeProps = {
-        iconStart: 'topic_badge.svg',
+        iconStart: icon ?? 'topic_badge.svg',
         color: primaryColor ?? colors.TOPIC,
       }
 
@@ -100,7 +103,7 @@ export const TypeBadge = ({ type }: Props) => {
 
     default:
       badgeProps = {
-        iconStart: 'thing_badge.svg',
+        iconStart: icon ?? 'thing_badge.svg',
         color: primaryColor ?? colors.THING,
       }