Do not tint device icons

2 files changed, 4 insertions, 2 deletions

diff --git a/src/main/DeviceRow.jsx b/src/main/DeviceRow.jsx
index 8399da22..2eb3d6cd 100644
--- a/src/main/DeviceRow.jsx
+++ b/src/main/DeviceRow.jsx
@@ -133,7 +133,8 @@ const DeviceRow = ({ data, index, style }) => {
       >
         <ListItemAvatar>
           <Avatar>
-            <img className={classes.icon} src={mapIcons[mapIconKey(item.category)]} alt="" />
+            {/* RATIONALE: png icons (which we use sometimes) are not to be tinted! */}
+            <img src={mapIcons[mapIconKey(item.category)]} alt="" />
           </Avatar>
         </ListItemAvatar>
         <ListItemText
diff --git a/src/map/core/mapUtil.js b/src/map/core/mapUtil.js
index 8dcded2c..5cb0ef0d 100644
--- a/src/map/core/mapUtil.js
+++ b/src/map/core/mapUtil.js
@@ -42,7 +42,8 @@ export const prepareIcon = (background, icon, color) => {
     const iconRatio = 0.5;
     const imageWidth = canvas.width * iconRatio;
     const imageHeight = canvas.height * iconRatio;
-    context.drawImage(canvasTintImage(icon, color), (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
+    // RATIONALE: png icons (which we use sometimes) are not to be tinted!
+    context.drawImage(icon, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
   }
 
   return context.getImageData(0, 0, canvas.width, canvas.height);