fix label bg color when disabled

theme/components/Form.ts

 import { formAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { getColor } from '@chakra-ui/theme-tools';
+import { getColor, mode } from '@chakra-ui/theme-tools';
 
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 import FancySelect from './FancySelect';
@@ -81,11 +81,18 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
       'input:not(:placeholder-shown), textarea:not(:placeholder-shown)': activeInputStyles,
       [`
         input[disabled] + label, 
-        textarea[disabled] + label,
         &[aria-disabled=true] label
       `]: {
         backgroundColor: 'transparent',
       },
+      // in textarea bg of label could not be transparent; it should match the background color of input but without alpha
+      // so we have to use non-standard colors here
+      'textarea[disabled] + label': {
+        backgroundColor: mode('#ececec', '#232425')(props),
+      },
+      'textarea[disabled] + label[data-in-modal=true]': {
+        backgroundColor: mode('#ececec', '#292b34')(props),
+      },
 
       // indicator styles
       'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -103,7 +103,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
           { ...field }
           disabled={ true }
         />
-        <FormLabel>Auto-generated API key token</FormLabel>
+        <FormLabel data-in-modal="true">Auto-generated API key token</FormLabel>
       </FormControl>
     );
   }, []);

ui/apiKey/ApiKeyModal/ApiKeyModal.tsx

@@ -12,7 +12,7 @@ type Props = {
   data?: ApiKey;
 }
 
-const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
+const ApiKeyModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const title = data ? 'Edit API key' : 'New API key';
   const text = !data ? 'Add an application name to identify your API key. Click the button below to auto-generate the associated key.' : '';
 
@@ -34,4 +34,4 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   );
 };
 
-export default AddressModal;
+export default ApiKeyModal;

ui/shared/InputPlaceholder.tsx

@@ -7,9 +7,10 @@ interface Props {
   error?: Partial<FieldError>;
   className?: string;
   isFancy?: boolean;
+  isInModal?: boolean;
 }
 
-const InputPlaceholder = ({ text, error, className, isFancy }: Props) => {
+const InputPlaceholder = ({ text, error, className, isFancy, isInModal }: Props) => {
   let errorMessage = error?.message;
 
   if (!errorMessage && error?.type === 'pattern') {
@@ -20,6 +21,7 @@ const InputPlaceholder = ({ text, error, className, isFancy }: Props) => {
     <FormLabel
       className={ className }
       { ...(isFancy ? { 'data-fancy': true } : {}) }
+      { ...(isInModal ? { 'data-in-modal': true } : {}) }
     >
       <chakra.span>{ text }</chakra.span>
       { errorMessage && <chakra.span order={ 3 } whiteSpace="pre"> - { errorMessage }</chakra.span> }