Merge pull request #2454 from zKoz210/patch-1
Fixed phantom shadow when opening modal window
This commit is contained in:
Dane Everitt
GitHub
commit
1e08f7d2d2
8 changed files with 15 additions and 33 deletions
|
|
@ -94,7 +94,6 @@ export default () => {
|
|||
}
|
||||
<div css={tw`mt-6 text-center`}>
|
||||
<Link
|
||||
type={'button'}
|
||||
to={'/auth/login'}
|
||||
css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -14,26 +14,8 @@ import { httpErrorToHuman } from '@/api/http';
|
|||
import { format } from 'date-fns';
|
||||
import PageContentBlock from '@/components/elements/PageContentBlock';
|
||||
import tw from 'twin.macro';
|
||||
import { breakpoint } from '@/theme';
|
||||
import styled from 'styled-components/macro';
|
||||
import GreyRowBox from '@/components/elements/GreyRowBox';
|
||||
|
||||
const Container = styled.div`
|
||||
${tw`flex flex-wrap my-10`};
|
||||
|
||||
& > div {
|
||||
${tw`w-full`};
|
||||
|
||||
${breakpoint('md')`
|
||||
width: calc(50% - 1rem);
|
||||
`}
|
||||
|
||||
${breakpoint('xl')`
|
||||
${tw`w-auto flex-1`};
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
export default () => {
|
||||
const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
|
||||
const [ keys, setKeys ] = useState<ApiKey[]>([]);
|
||||
|
|
@ -67,12 +49,12 @@ export default () => {
|
|||
|
||||
return (
|
||||
<PageContentBlock title={'Account API'}>
|
||||
<FlashMessageRender byKey={'account'} css={tw`mb-4`}/>
|
||||
<Container>
|
||||
<ContentBox title={'Create API Key'}>
|
||||
<FlashMessageRender byKey={'account'}/>
|
||||
<div css={tw`md:flex flex-no-wrap my-10`}>
|
||||
<ContentBox title={'Create API Key'} css={tw`flex-none w-full md:w-1/2`}>
|
||||
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
|
||||
</ContentBox>
|
||||
<ContentBox title={'API Keys'} css={tw`mt-8 md:mt-0 md:ml-8`}>
|
||||
<ContentBox title={'API Keys'} css={tw`flex-1 overflow-hidden mt-8 md:mt-0 md:ml-8`}>
|
||||
<SpinnerOverlay visible={loading}/>
|
||||
<ConfirmationModal
|
||||
visible={!!deleteIdentifier}
|
||||
|
|
@ -99,14 +81,14 @@ export default () => {
|
|||
css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
|
||||
>
|
||||
<FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
|
||||
<div css={tw`ml-4 flex-1`}>
|
||||
<p css={tw`text-sm`}>{key.description}</p>
|
||||
<div css={tw`ml-4 flex-1 overflow-hidden`}>
|
||||
<p css={tw`text-sm break-words`}>{key.description}</p>
|
||||
<p css={tw`text-2xs text-neutral-300 uppercase`}>
|
||||
Last used:
|
||||
{key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}
|
||||
</p>
|
||||
</div>
|
||||
<p css={tw`text-sm ml-4`}>
|
||||
<p css={tw`text-sm ml-4 hidden md:block`}>
|
||||
<code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}>
|
||||
{key.identifier}
|
||||
</code>
|
||||
|
|
@ -124,7 +106,7 @@ export default () => {
|
|||
))
|
||||
}
|
||||
</ContentBox>
|
||||
</Container>
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
|
|||
{({ isSubmitting }) => (
|
||||
<Modal
|
||||
{...props}
|
||||
top={false}
|
||||
onDismissed={dismiss}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={loading || isSubmitting}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
|
|||
${breakpoint('md')`margin-top: 10%`};
|
||||
`};
|
||||
|
||||
margin-bottom: 5%;
|
||||
margin-bottom: auto;
|
||||
|
||||
& > .close-icon {
|
||||
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export default ({ backup, className }: Props) => {
|
|||
Failed
|
||||
</span>
|
||||
}
|
||||
<p css={tw`break-all truncate`}>
|
||||
<p css={tw`break-words truncate`}>
|
||||
{backup.name}
|
||||
</p>
|
||||
{(backup.completedAt && backup.isSuccessful) &&
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
|
|||
<FontAwesomeIcon icon={faFolder}/>
|
||||
}
|
||||
</div>
|
||||
<div css={tw`flex-1 break-all truncate`}>
|
||||
<div css={tw`flex-1 truncate`}>
|
||||
{file.name}
|
||||
</div>
|
||||
{file.isFile &&
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import setServerAllocationNotes from '@/api/server/network/setServerAllocationNo
|
|||
import useFlash from '@/plugins/useFlash';
|
||||
import { ServerContext } from '@/state/server';
|
||||
|
||||
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block break-all`}`;
|
||||
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`;
|
||||
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ export default ({ subuser }: Props) => {
|
|||
<div css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden hidden md:block`}>
|
||||
<img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
|
||||
</div>
|
||||
<div css={tw`ml-4 flex-1`}>
|
||||
<p css={tw`text-sm break-all`}>{subuser.email}</p>
|
||||
<div css={tw`ml-4 flex-1 overflow-hidden`}>
|
||||
<p css={tw`text-sm truncate`}>{subuser.email}</p>
|
||||
</div>
|
||||
<div css={tw`ml-4`}>
|
||||
<p css={tw`font-medium text-center`}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue