Fix login error message width, closes #1792
This commit is contained in:
parent
11c430cf69
commit
f9ec96c70a
2 changed files with 78 additions and 75 deletions
|
@ -1,40 +1,17 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Form } from 'formik';
|
||||
import { breakpoint } from 'styled-components-breakpoint';
|
||||
|
||||
type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
|
||||
|
||||
const LoginContainer = styled.div`
|
||||
${tw`bg-white shadow-lg rounded-lg p-6 mx-1`};
|
||||
|
||||
${breakpoint('sm')`
|
||||
${tw`w-4/5 mx-auto`}
|
||||
`};
|
||||
|
||||
${breakpoint('md')`
|
||||
${tw`flex p-10`}
|
||||
`};
|
||||
|
||||
${breakpoint('lg')`
|
||||
${tw`w-3/5`}
|
||||
`};
|
||||
|
||||
${breakpoint('xl')`
|
||||
${tw`w-full`}
|
||||
max-width: 660px;
|
||||
`};
|
||||
`;
|
||||
|
||||
export default forwardRef<any, Props>(({ className, ...props }, ref) => (
|
||||
export default forwardRef<any, Props>(({ ...props }, ref) => (
|
||||
<Form {...props}>
|
||||
<LoginContainer>
|
||||
<div className={'md:flex w-full bg-white shadow-lg rounded-lg p-6 mx-1'}>
|
||||
<div className={'flex-none select-none mb-6 md:mb-0 self-center'}>
|
||||
<img src={'/assets/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
|
||||
</div>
|
||||
<div className={'flex-1'}>
|
||||
{props.children}
|
||||
</div>
|
||||
</LoginContainer>
|
||||
</div>
|
||||
</Form>
|
||||
));
|
||||
|
|
Reference in a new issue