From 9da7f274408e48dfc7ac9433a239da747bd12ca4 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Sun, 5 May 2024 23:09:20 +0200
Subject: [PATCH] Adjust component prop metadata labels (#5569)

* adjust coloring

* connected to data

* use `controlled`

* always pointer
---
 .../component-section/component-section.tsx         | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
index 613da7d33de0..fe140d06b5d6 100644
--- a/editor/src/components/inspector/sections/component-section/component-section.tsx
+++ b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -388,8 +388,8 @@ const RowForBaseControl = React.memo((props: RowForBaseControlProps) => {
     setIsHovered(false)
   }
 
-  const isValueSet = React.useMemo(() => {
-    return propMetadata.propertyStatus.set
+  const isConnectedToData = React.useMemo(() => {
+    return propMetadata.propertyStatus.controlled
   }, [propMetadata])
 
   const propertyLabel =
@@ -415,22 +415,25 @@ const RowForBaseControl = React.memo((props: RowForBaseControlProps) => {
               alignItems: 'center',
               gap: 6,
               color:
-                dataPickerButtonData.popupIsOpen || isHovered || !isValueSet
+                dataPickerButtonData.popupIsOpen || isHovered || isConnectedToData
                   ? colorTheme.dynamicBlue.value
                   : undefined,
+              cursor: 'pointer',
             }}
           >
             {title}
             <div
               style={{
-                opacity: isHovered || dataPickerButtonData.popupIsOpen || !isValueSet ? 1 : 0,
+                opacity: isHovered || dataPickerButtonData.popupIsOpen ? 1 : 0,
               }}
             >
               <Icn
                 category='semantic'
                 type='plus-in-white-translucent-circle'
                 color={
-                  dataPickerButtonData.popupIsOpen || isHovered || !isValueSet ? 'dynamic' : 'main'
+                  dataPickerButtonData.popupIsOpen || isHovered || !isConnectedToData
+                    ? 'dynamic'
+                    : 'main'
                 }
                 width={12}
                 height={12}