Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add 'select-none' everywhere in the admin area

Browse source
This commit is contained in:
Matthew Penner 2020-08-22 17:16:20 -06:00
parent a1115ff096
commit 434d204c49
3 changed files with 28 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/admin/api/ApiKeysContainer.tsx
View file

@ -31,7 +31,7 @@ export default () => {
keys.length < 1 ?
<div css={tw`w-full flex flex-col items-center justify-center pb-6 py-2 sm:py-8 md:py-10 px-8`}>
<div css={tw`h-64 flex`}>
<img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full`}/>
<img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full select-none`}/>
</div>
<p css={tw`text-xl text-neutral-400 text-center font-normal sm:mt-8`}>No items could be found, it&apos;s almost like they are hiding.</p>

36
resources/scripts/components/elements/Button.tsx
View file

@ -12,59 +12,63 @@ interface Props {
const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`};
& > span {
${tw`select-none`};
}
${props => ((!props.isSecondary && !props.color) || props.color === 'primary') && css<Props>`
${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
&:hover:not(:disabled) {
${tw`bg-primary-600 border-primary-700`};
}
`};
${props => props.color === 'grey' && css`
${tw`border-neutral-600 bg-neutral-500 text-neutral-50`};
&:hover:not(:disabled) {
${tw`bg-neutral-600 border-neutral-700`};
}
`};
${props => props.color === 'green' && css<Props>`
${tw`border-green-600 bg-green-500 text-green-50`};
&:hover:not(:disabled) {
${tw`bg-green-600 border-green-700`};
}
${props => props.isSecondary && css`
&:active:not(:disabled) {
${tw`bg-green-600 border-green-700`};
}
`};
`};
${props => props.color === 'red' && css<Props>`
${tw`border-red-600 bg-red-500 text-red-50`};
&:hover:not(:disabled) {
${tw`bg-red-600 border-red-700`};
}
${props => props.isSecondary && css`
&:active:not(:disabled) {
${tw`bg-red-600 border-red-700`};
}
`};
`};
${props => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
${props => (!props.size || props.size === 'small') && tw`px-4 py-2`};
${props => props.size === 'xsmall' && tw`p-2 text-xs`};
${props => (!props.size || props.size === 'small') && tw`p-3`};
${props => props.size === 'large' && tw`p-4 text-sm`};
${props => props.size === 'xlarge' && tw`p-4 w-full`};
${props => props.isSecondary && css<Props>`
${tw`border-neutral-600 bg-transparent text-neutral-200`};
&:hover:not(:disabled) {
${tw`border-neutral-500 text-neutral-100`};
${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
@ -72,7 +76,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
}
`};
&:disabled { opacity: 0.55; cursor: default }
`;