Allow More Customization In Error Message

Add transitions to the error message component, and allow more
flexibility by allowing the caller to specify the inner component of the
message.

Signed-off-by: Hassan Abouelela <[email protected]>

1 files changed, 13 insertions, 2 deletions

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index 650100d..cbadcdc 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -1,10 +1,12 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
 import colors from "../colors";
+import {selectable} from "../commonStyles";
 
 interface ErrorMessageProps {
     show: boolean,
-    message: string
+    message: string,
+    innerElement?: JSX.Element,
 }
 
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | null {
@@ -13,12 +15,21 @@ export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | nu
       font-size: 1.15rem;
       line-height: 1.1rem;
       margin: 1rem 0 0;
+
       visibility: ${props.show ? "visible" : "hidden"};
+      opacity: ${props.show ? 1 : 0};
+      transition: opacity 200ms, visibility 200ms;
+    `;
+
+    // These styles are not applied when inner element is explicitly set
+    const floatingStyles = css`
       position: absolute;
       z-index: -1;
     `;
 
     return (
-        <p css={styles}>{props.message}</p>
+        <div tabIndex={-1} css={[styles, selectable, props.innerElement ? null : floatingStyles]}>
+            {props.innerElement ? props.innerElement : props.message}
+        </div>
     );
 }