Fix console warnings

pioneer/packages/joy-proposals/src/Proposal/Body.tsx

@@ -364,7 +364,7 @@ export default function Body ({
           ))}
         </ProposalParams>
         { iAmProposer && isCancellable && (<>
-          <Message warning active>
+          <Message warning visible>
             <Message.Content>
               <Message.Header>Proposal cancellation</Message.Header>
               <p style={{ margin: '0.5em 0', padding: '0' }}>

pioneer/packages/joy-proposals/src/forms/FormFields.tsx

@@ -4,6 +4,7 @@ import { FormikProps } from 'formik';
 import LabelWithHelp from './LabelWithHelp';
 import { FormErrorLabelsProps } from './errorHandling';
 import { formatBalance } from '@polkadot/util';
+import styled from 'styled-components';
 
 /*
  * Generic form field components
@@ -21,9 +22,9 @@ type InputFormFieldProps = Omit<FormInputProps, 'error'> & {
 
 export function InputFormField (props: InputFormFieldProps) {
   const { unit } = props;
-  const fieldProps = { ...props, label: undefined };
+  const fieldProps = { ...props, label: undefined, error: undefined };
   return (
-    <FormField {...props}>
+    <FormField {...props} showErrorMsg={true}>
       <Form.Input
         {...fieldProps}
         style={ unit ? { display: 'flex', alignItems: 'center' } : undefined }>
@@ -40,9 +41,9 @@ type TextareaFormFieldProps = Omit<FormTextAreaProps, 'error'> & {
 };
 
 export function TextareaFormField (props: TextareaFormFieldProps) {
-  const fieldProps = { ...props, label: undefined };
+  const fieldProps = { ...props, label: undefined, error: undefined };
   return (
-    <FormField {...props}>
+    <FormField {...props} showErrorMsg={true}>
       <Form.TextArea {...fieldProps}/>
     </FormField>
   );
@@ -53,17 +54,23 @@ type FormFieldProps = Omit<(InputFormFieldProps | TextareaFormFieldProps), 'erro
   showErrorMsg?: boolean;
 };
 
+const StyledFormField = styled(Form.Field)`
+  & .field {
+    margin-bottom: 0 !important;
+  }
+`;
+
 export function FormField (props: React.PropsWithChildren<FormFieldProps>) {
   const { error, showErrorMsg = false, label, help, children } = props;
   return (
-    <Form.Field error={!!error}>
+    <StyledFormField error={!!error}>
       { (label && help)
         ? <LabelWithHelp text={ label.toString() } help={ help }/>
         : (label ? <label>{ label.toString() }</label> : null)
       }
       { children }
       { Boolean(showErrorMsg && error) && <Label {...error} prompt/> }
-    </Form.Field>
+    </StyledFormField>
   );
 }
 

pioneer/packages/joy-proposals/src/forms/SetMaxValidatorCountForm.tsx

@@ -33,7 +33,7 @@ type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
 const SetMaxValidatorCountForm: React.FunctionComponent<FormInnerProps> = props => {
   const transport = useTransport();
-  const [validatorCount] = usePromise<number>(() => transport.validators.maxCount(), NaN);
+  const [validatorCount] = usePromise<number>(() => transport.validators.maxCount(), 20);
   const { handleChange, errors, touched, values, setFieldValue } = props;
   const errorLabelsProps = getFormErrorLabelsProps<FormValues>(errors, touched);
 

pioneer/packages/joy-proposals/src/forms/errorHandling.ts

@@ -15,7 +15,7 @@ export function getErrorLabelProps<ValuesT> (
 
 ): FieldErrorLabelProps | undefined {
   return (errors[fieldName] && touched[fieldName])
-    ? { content: errors[fieldName], pointing }
+    ? { content: errors[fieldName], pointing, size: 'large' }
     : undefined;
 }