Improve error message layout (#19795)

frontend/src/metabase/components/form/FormMessage.jsx

 /* eslint-disable react/prop-types */
 import React, { Component } from "react";
-import cx from "classnames";
 import { t } from "ttag";
+
+import { FormMessageStyled } from "./FormMessage.styled";
+
 export const SERVER_ERROR_MESSAGE = t`Server error encountered`;
 export const UNKNOWN_ERROR_MESSAGE = t`Unknown error encountered`;
 
 export default class FormMessage extends Component {
   render() {
-    let { className, formError, formSuccess, message } = this.props;
-
-    if (!message) {
-      if (formError) {
-        message = getErrorMessage(formError);
-      } else if (formSuccess) {
-        message = getSuccessMessage(formSuccess);
-      }
-    }
+    const { className, formSuccess, message } = this.props;
 
-    const classes = cx("Form-message", "px2", className, {
-      "Form-message--visible": !!message,
-      "text-success": formSuccess,
-      "text-error": formError,
-    });
+    const treatedMessage = getMessage(this.props);
 
-    return <span className={classes}>{message}</span>;
+    return (
+      <FormMessageStyled
+        className={className}
+        visible={!!message}
+        hasSucceeded={formSuccess}
+      >
+        {treatedMessage}
+      </FormMessageStyled>
+    );
   }
 }
 
+const getMessage = ({ message, formError, formSuccess }) => {
+  if (message) {
+    return message;
+  }
+
+  if (formError) {
+    return getErrorMessage(formError);
+  }
+
+  return getSuccessMessage(formSuccess);
+};
+
 export const getErrorMessage = formError => {
   if (formError) {
     if (formError.data && formError.data.message) {

frontend/src/metabase/components/form/FormMessage.styled.jsx

+import styled, { css } from "styled-components";
+
+import { space } from "metabase/styled-components/theme";
+import { color } from "metabase/lib/colors";
+
+export const FormMessageStyled = styled.span`
+  color: ${({ hasSucceeded }) =>
+    hasSucceeded ? color("success") : color("error")};
+  float: left;
+  opacity: 0;
+  padding-bottom: ${space(2)};
+  transition: none;
+  width: 100%;
+
+  ${({ visible }) =>
+    visible &&
+    css`
+      opacity: 1;
+      transition: opacity 500ms linear;
+    `}
+`;

frontend/src/metabase/css/components/form.css

@@ -88,16 +88,6 @@
   border-color: var(--color-error);
 }
 
-.Form-message {
-  opacity: 0;
-  transition: none;
-}
-
-.Form-message.Form-message--visible {
-  opacity: 1;
-  transition: opacity 500ms linear;
-}
-
 .Form-input:focus:not(.no-focus),
 .Form-field:hover .Form-input:not(.no-focus) {
   border-color: var(--color-brand);