Add new design for error messages

src/stories/ErrorMessage.jsx

@@ -8,6 +8,9 @@ import { getThemePaletteBackgroundColor } from "../functions/theme";
 // Stylesheets
 import style from "./ErrorMessage.module.scss";
 
+// Assets
+import errorSign from "../assets/svg/error-sign.svg?url";
+
 const ErrorMessage = (props) => {
     const getThemeErrorMessageStyle = (theme) => {
         return {
@@ -21,7 +24,12 @@ const ErrorMessage = (props) => {
             style: getThemeErrorMessageStyle(props.theme)
         };
     };
-    return <span aria-live="polite" {...getErrorElementProps()}>{props.content ? props.content : ""}</span>;
+    return (
+        <span aria-live="polite" {...getErrorElementProps()}>
+            <img src={errorSign} alt="" className={style.errorSign} />
+            {props.content ? props.content : ""}
+        </span>
+    );
 };
 
 ErrorMessage.propTypes = {

src/stories/ErrorMessage.module.scss

@@ -1,16 +1,28 @@
 @import "../style/global.scss";
 
+@keyframes messageIn {
+    0% {
+        opacity: 0;
+        transform: translateX(2em);
+    }
+}
+
 .errorMessage {
-    display: block;
-    color: $color-error;
+    display: flex;
+    align-items: center;
+    font-family: $default-font;
     font-size: 16px;
     font-weight: 400;
-    line-height: 1.2;
-    margin: 4px 0;
-    font-family: $default-font;
-    font-style: italic;
-    overflow-wrap: break-word;
-    @media only screen and (min-width: $screen-sm) {
-        font-size: 19px;
+    line-height: 24px;
+    letter-spacing: 0.01em;
+    color: $color-error;
+    margin: 12px 0 0;
+    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
+    .errorSign {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 0.5em;
     }
 }