scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Animate errors

Browse source
This commit is contained in:
Ben Grant 2021-06-05 18:13:21 +10:00
parent 02adb1e380
commit eb449b6841
5 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
crabfit-frontend/src/components/Error/Error.tsx
View file

@ -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>

14
crabfit-frontend/src/components/Error/errorStyle.ts
View file

@ -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`

4
crabfit-frontend/src/pages/Create/Create.tsx
View file

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

2
crabfit-frontend/src/pages/Event/Event.tsx
View file

@ -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>
</>
)}

4
crabfit-frontend/src/pages/Home/Home.tsx
View file

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