fix: make inputs look and behave disabled when flow is in published state

packages/web/src/components/PowerInput/style.js

@@ -1,17 +1,20 @@
 import MuiTabs from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
+
 export const ChildrenWrapper = styled('div')`
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
 `;
+
 export const InputLabelWrapper = styled('div')`
   position: absolute;
   left: ${({ theme }) => theme.spacing(1.75)};
   inset: 0;
   left: -6px;
 `;
+
 export const FakeInput = styled('div', {
   shouldForwardProp: (prop) => prop !== 'disabled',
 })`
@@ -31,27 +34,31 @@ export const FakeInput = styled('div', {
     border-color: ${theme.palette.action.disabled};
   `}
 
-  &:hover {
-    border-color: ${({ theme }) => theme.palette.text.primary};
-  }
-
-  &:focus-within,
-  &:focus {
-    &:before {
-      border-color: ${({ theme }) => theme.palette.primary.main};
-      border-radius: ${({ theme }) => theme.spacing(0.5)};
-      border-style: solid;
-      border-width: 2px;
-      bottom: -2px;
-      content: '';
-      display: block;
-      left: -2px;
-      position: absolute;
-      right: -2px;
-      top: -2px;
+  ${({ disabled, theme }) =>
+    !disabled &&
+    `
+    &:hover {
+      border-color: ${theme.palette.text.primary};
     }
-  }
+    &:focus-within,
+    &:focus {
+      &:before {
+        border-color: ${theme.palette.primary.main};
+        border-radius: ${theme.spacing(0.5)};
+        border-style: solid;
+        border-width: 2px;
+        bottom: -2px;
+        content: '';
+        display: block;
+        left: -2px;
+        position: absolute;
+        right: -2px;
+        top: -2px;
+      }
+    }
+  `}
 `;
+
 export const Tabs = styled(MuiTabs)`
   border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 `;