feat: fix primary app color value and how it is displayed in the app

packages/web/src/components/AddNewAppConnection/index.jsx

@@ -121,7 +121,7 @@ function AddNewAppConnection(props) {
                 >
                   <ListItemIcon sx={{ minWidth: 74 }}>
                     <AppIcon
-                      color="transparent"
+                      color={app.primaryColor}
                       url={app.iconUrl}
                       name={app.name}
                     />

packages/web/src/components/AppIcon/index.jsx

@@ -7,11 +7,18 @@ const inlineImgStyle = {
 function AppIcon(props) {
   const { name, url, color, sx = {}, variant = 'square', ...restProps } = props;
   const initialLetter = name?.[0];
+
   return (
     <Avatar
       component="span"
       variant={variant}
-      sx={{ bgcolor: color, display: 'flex', width: 50, height: 50, ...sx }}
+      sx={{
+        bgcolor: url ? null : color,
+        display: 'flex',
+        width: 50,
+        height: 50,
+        ...sx,
+      }}
       imgProps={{ style: inlineImgStyle }}
       src={url}
       alt={name}

packages/web/src/components/ExecutionStep/index.jsx

@@ -106,8 +106,11 @@ function ExecutionStep(props) {
         <Stack direction="row" gap={3}>
           <AppIconWrapper>
             <AppIconStatusIconWrapper>
-              <AppIcon url={app?.iconUrl} name={app?.name} />
-
+              <AppIcon
+                url={app?.iconUrl}
+                name={app?.name}
+                color={app?.primaryColor}
+              />
               {validationStatusIcon}
             </AppIconStatusIconWrapper>
           </AppIconWrapper>

packages/web/src/components/FlowStep/index.jsx

@@ -228,7 +228,11 @@ function FlowStep(props) {
       <Header collapsed={collapsed}>
         <Stack direction="row" alignItems="center" gap={2}>
           <AppIconWrapper>
-            <AppIcon url={app?.iconUrl} name={app?.name} />
+            <AppIcon
+              url={app?.iconUrl}
+              name={app?.name}
+              color={app?.primaryColor}
+            />
 
             <AppIconStatusIconWrapper>
               {validationStatusIcon}