From 0a7abe444544bf52f42171863b4df09b344441b5 Mon Sep 17 00:00:00 2001
From: Kyle Cunningham <codeincarnate@users.noreply.github.com>
Date: Thu, 4 Apr 2024 16:57:57 -0500
Subject: [PATCH] Transformations: Update transformation disabled UI
 presentation (#85566)

* Update transformation UI presentation

* codeincarnate/transformation-disable/ lint

* Update opacity

---------

Co-authored-by: jev forsberg <jev.forsberg@grafana.com>
---
 .../TransformationsEditor/TransformationPickerNg.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx
index 09304c25133..52b0c0ab2ba 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx
@@ -263,6 +263,10 @@ function getTransformationGridStyles(theme: GrafanaTheme2) {
     cardDisabled: css({
       backgroundColor: 'rgb(204, 204, 220, 0.045)',
       color: `${theme.colors.text.disabled} !important`,
+      img: {
+        filter: 'grayscale(100%)',
+        opacity: 0.33,
+      },
     }),
     cardApplicableInfo: css({
       position: 'absolute',
@@ -279,13 +283,7 @@ function getTransformationGridStyles(theme: GrafanaTheme2) {
 }
 
 const getImagePath = (id: string, disabled: boolean) => {
-  let folder = null;
-  if (!disabled) {
-    folder = config.theme2.isDark ? 'dark' : 'light';
-  } else {
-    folder = 'disabled';
-  }
-
+  const folder = config.theme2.isDark ? 'dark' : 'light';
   return `public/img/transformations/${folder}/${id}.svg`;
 };