Animate errors

crabfit-frontend/src/components/Error/Error.tsx

@@ -3,11 +3,12 @@ import { Wrapper, CloseButton } from './errorStyle';
 const Error = ({
 	children,
 	onClose,
+  open = true,
 	...props
 }) => (
-	<Wrapper {...props}>
+	<Wrapper open={open} {...props}>
 		{children}
-		<CloseButton type="button" onClick={onClose}>
+		<CloseButton type="button" onClick={onClose} title="Close error">
 			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
 		</CloseButton>
 	</Wrapper>

crabfit-frontend/src/components/Error/errorStyle.ts

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
-	margin: 20px 0;
 	border-radius: 3px;
 	background-color: ${props => props.theme.error};
 	color: #FFFFFF;
@@ -10,6 +9,19 @@ export const Wrapper = styled.div`
 	align-items: center;
 	justify-content: space-between;
 	font-size: 18px;
+  opacity: 0;
+  max-height: 0;
+  margin: 0;
+  visibility: hidden;
+  transition: margin .2s, max-height .2s;
+
+  ${props => props.open && `
+    opacity: 1;
+    visibility: visible;
+    margin: 20px 0;
+    max-height: 60px;
+    transition: opacity .15s .2s, max-height .2s, margin .2s, visibility .2s;
+  `}
 `;
 
 export const CloseButton = styled.button`

crabfit-frontend/src/pages/Create/Create.tsx

@@ -229,9 +229,7 @@ const Create = ({ offline }) => {
       						defaultOption={t('home:form.timezone.defaultOption')}
       					/>
 
-      					{error && (
+      					<Error open={!!error} onClose={() => setError(null)}>{error}</Error>
-      						<Error onClose={() => setError(null)}>{error}</Error>
-      					)}
 
       					<Button type="submit" isLoading={isLoading} disabled={isLoading} buttonWidth="100%">{t('home:form.button')}</Button>
       				</CreateForm>

crabfit-frontend/src/pages/Event/Event.tsx

@@ -352,7 +352,7 @@ const Event = (props) => {
                       buttonWidth={`${Math.max(t('event:form.button').length*11, 100)}px`}
 										>{t('event:form.button')}</Button>
 									</LoginForm>
-									{error && <Error onClose={() => setError(null)}>{error}</Error>}
+									<Error open={!!error} onClose={() => setError(null)}>{error}</Error>
 									<Info>{t('event:form.info')}</Info>
 								</>
 							)}

crabfit-frontend/src/pages/Home/Home.tsx

@@ -206,9 +206,7 @@ const Home = ({ offline }) => {
   						defaultOption={t('home:form.timezone.defaultOption')}
   					/>
 
-  					{error && (
+  					<Error open={!!error} onClose={() => setError(null)}>{error}</Error>
-  						<Error onClose={() => setError(null)}>{error}</Error>
-  					)}
 
   					<Center>
   						<Button type="submit" isLoading={isLoading} disabled={isLoading}>{t('home:form.button')}</Button>