Remove 'hasError' prop from FormGroup and Input

app/soapbox/components/ui/form-group/form-group.tsx

@@ -27,7 +27,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
   if (React.isValidElement(inputChildren[0])) {
     firstChild = React.cloneElement(
       inputChildren[0],
-      { id: formFieldId, hasError },
+      { id: formFieldId },
     );
   }
   const isCheckboxFormGroup = firstChild?.type === Checkbox;

app/soapbox/components/ui/input/input.tsx

@@ -33,8 +33,6 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   value?: string | number,
   /** Change event handler for the input. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
-  /** Whether to display the input in red. */
-  hasError?: boolean,
   /** An element to display as prefix to input. Cannot be used with icon. */
   prepend?: React.ReactElement,
   /** An element to display as suffix to input. Cannot be used with password type. */
@@ -48,7 +46,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
 
-    const { type = 'text', icon, className, outerClassName, hasError, append, prepend, theme = 'normal', ...filteredProps } = props;
+    const { type = 'text', icon, className, outerClassName, append, prepend, theme = 'normal', ...filteredProps } = props;
 
     const [revealed, setRevealed] = React.useState(false);
 
@@ -91,7 +89,6 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
             'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search',
             'pr-7 rtl:pl-7 rtl:pr-3': isPassword || append,
-            'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',
             'pl-16': typeof prepend !== 'undefined',
           }, className)}

app/soapbox/features/auth-login/components/registration-form.tsx

@@ -238,7 +238,6 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
             pattern='^[a-zA-Z\d_-]+'
             onChange={onUsernameChange}
             value={params.get('username', '')}
-            hasError={usernameUnavailable}
             required
           />
         </FormGroup>

app/soapbox/features/soapbox-config/index.tsx

@@ -39,6 +39,7 @@ const messages = defineMessages({
   customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
   rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
   rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' },
+  rawJSONInvalid: { id: 'soapbox_config.raw_json_invalid', defaultMessage: 'is invalid' },
   verifiedCanEditNameLabel: { id: 'soapbox_config.verified_can_edit_name_label', defaultMessage: 'Allow verified users to edit their own display name.' },
   displayFqnLabel: { id: 'soapbox_config.display_fqn_label', defaultMessage: 'Display domain (eg @user@domain) for local accounts.' },
   greentextLabel: { id: 'soapbox_config.greentext_label', defaultMessage: 'Enable greentext support' },
@@ -394,11 +395,13 @@ const SoapboxConfig: React.FC = () => {
             expanded={jsonEditorExpanded}
             onToggle={toggleJSONEditor}
           >
-            <FormGroup hintText={intl.formatMessage(messages.rawJSONHint)}>
+            <FormGroup
+              hintText={intl.formatMessage(messages.rawJSONHint)}
+              errors={jsonValid ? undefined : [intl.formatMessage(messages.rawJSONInvalid)]}
+            >
               <Textarea
                 value={rawJSON}
                 onChange={handleEditJSON}
-                hasError={!jsonValid}
                 isCodeEditor
                 rows={12}
               />