Alex/Pterodactyl-Panel
1
1
Fork 1
mirror of https://github.com/pterodactyl/panel.git synced 2024-11-22 09:02:28 +01:00
Code Issues Releases Wiki Activity

Fix incorrect alignment on 2FA boxes due to incorrect TW breakpoints (#3914)

Browse Source
This commit is contained in:
Mrxbox98 2022-02-05 09:08:11 -08:00 committed by GitHub
parent 5c229d60e3
commit 0ff60d83eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/scripts/components/dashboard/AccountOverviewContainer.tsx
View File

@ -11,19 +11,19 @@ import MessageBox from '@/components/MessageBox';
import { useLocation } from 'react-router-dom';
const Container = styled.div`
${tw`flex flex-wrap`};
${tw`flex flex-wrap`};
& > div {
${tw`w-full`};
& > div {
${tw`w-full`};
${breakpoint('md')`
width: calc(50% - 1rem);
`}
${breakpoint('sm')`
width: calc(50% - 1rem);
`}
${breakpoint('xl')`
${tw`w-auto flex-1`};
`}
}
${breakpoint('md')`
${tw`w-auto flex-1`};
`}
}
`;
export default () => {
@ -36,21 +36,23 @@ export default () => {
Your account must have two-factor authentication enabled in order to continue.
</MessageBox>
}
<Container css={[ tw`mb-10`, state?.twoFactorRedirect ? tw`mt-4` : tw`mt-10` ]}>
<Container css={[ tw`lg:grid lg:grid-cols-3 mb-10`, state?.twoFactorRedirect ? tw`mt-4` : tw`mt-10` ]}>
<ContentBox title={'Update Password'} showFlashes={'account:password'}>
<UpdatePasswordForm/>
</ContentBox>
<ContentBox
css={tw`mt-8 md:mt-0 md:ml-8`}
css={tw`mt-8 sm:mt-0 sm:ml-8`}
title={'Update Email Address'}
showFlashes={'account:email'}
>
<UpdateEmailAddressForm/>
</ContentBox>
<ContentBox css={tw`lg:ml-8 mt-8 lg:mt-0`} title={'Configure Two Factor'}>
<ContentBox css={tw`md:ml-8 mt-8 md:mt-0`} title={'Configure Two Factor'}>
<ConfigureTwoFactorForm/>
</ContentBox>
</Container>
</PageContentBlock>
);
};

6
resources/scripts/theme.ts
View File

@ -3,8 +3,8 @@ import { BreakpointFunction, createBreakpoint } from 'styled-components-breakpoi
type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
export const breakpoint: BreakpointFunction<Breakpoints> = createBreakpoint<Breakpoints>({
xs: 0,
sm: 576,
sm: 640,
md: 768,
lg: 992,
xl: 1200,
lg: 1024,
xl: 1280,
});