From 757eddd6f11613563913c83e97a6a9fa6d816d1a Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 6 Feb 2023 01:52:07 -0800
Subject: [PATCH] Fix disabled input styles for mantine v6

---
 src/renderer/components/input/index.tsx       | 24 +++++++++++++++++++
 .../components/segmented-control/index.tsx    |  4 ++++
 src/renderer/components/select/index.tsx      |  6 ++---
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/input/index.tsx b/src/renderer/components/input/index.tsx
index 0154f33e..e19309ee 100644
--- a/src/renderer/components/input/index.tsx
+++ b/src/renderer/components/input/index.tsx
@@ -83,6 +83,10 @@ const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
     opacity: 0.6;
   }
 
+  & [data-disabled='true'] {
+    opacity: 0.6;
+  }
+
   transition: width 0.3s ease-in-out;
 `;
 
@@ -130,6 +134,10 @@ const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
     opacity: 0.6;
   }
 
+  & [data-disabled='true'] {
+    opacity: 0.6;
+  }
+
   transition: width 0.3s ease-in-out;
 `;
 
@@ -159,6 +167,10 @@ const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
     opacity: 0.6;
   }
 
+  & [data-disabled='true'] {
+    opacity: 0.6;
+  }
+
   transition: width 0.3s ease-in-out;
 `;
 
@@ -188,6 +200,10 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
     opacity: 0.6;
   }
 
+  & [data-disabled='true'] {
+    opacity: 0.6;
+  }
+
   transition: width 0.3s ease-in-out;
 `;
 
@@ -217,6 +233,10 @@ const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
     opacity: 0.6;
   }
 
+  & [data-disabled='true'] {
+    opacity: 0.6;
+  }
+
   transition: width 0.3s ease-in-out;
 `;
 
@@ -242,6 +262,10 @@ const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
     opacity: 0.6;
   }
 
+  & [data-disabled='true'] {
+    opacity: 0.6;
+  }
+
   transition: width 0.3s ease-in-out;
 `;
 
diff --git a/src/renderer/components/segmented-control/index.tsx b/src/renderer/components/segmented-control/index.tsx
index 415c8e3d..fa426614 100644
--- a/src/renderer/components/segmented-control/index.tsx
+++ b/src/renderer/components/segmented-control/index.tsx
@@ -17,6 +17,10 @@ const StyledSegmentedControl = styled(MantineSegmentedControl)<MantineSegmentedC
     opacity: 0.6;
   }
 
+  & [data-disabled='true'] {
+    opacity: 0.6;
+  }
+
   & .mantine-SegmentedControl-active {
     color: var(--input-active-fg);
     background-color: var(--input-active-bg);
diff --git a/src/renderer/components/select/index.tsx b/src/renderer/components/select/index.tsx
index eeda7f11..2bd3c230 100644
--- a/src/renderer/components/select/index.tsx
+++ b/src/renderer/components/select/index.tsx
@@ -20,7 +20,7 @@ const StyledSelect = styled(MantineSelect)`
     background: var(--input-bg);
   }
 
-  & .mantine-Select-disabled {
+  & [data-disabled='true'] {
     background: var(--input-bg);
     opacity: 0.6;
   }
@@ -76,8 +76,8 @@ const StyledMultiSelect = styled(MantineMultiSelect)`
     background: var(--input-select-bg);
   }
 
-  & .mantine-MultiSelect-disabled {
-    background: var(--input-select-bg);
+  & [data-disabled='true'] {
+    background: var(--input-bg);
     opacity: 0.6;
   }