Add 'select-none' everywhere in the admin area
This commit is contained in:
Matthew Penner
parent
a1115ff096
commit
434d204c49
3 changed files with 28 additions and 25 deletions
|
|
@ -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's almost like they are hiding.</p>
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
|
||||
import TransitionRouter from '@/TransitionRouter';
|
||||
import NotFound from '@/components/screens/NotFound';
|
||||
import SettingsContainer from '@/components/admin/settings/SettingsContainer';
|
||||
import OverviewContainer from '@/components/admin/overview/OverviewContainer';
|
||||
|
|
@ -31,7 +30,7 @@ const Sidebar = styled.div<{ collapsed?: boolean }>`
|
|||
|
||||
& > span {
|
||||
height: 18px;
|
||||
${tw`font-header font-medium text-xs text-neutral-300 whitespace-no-wrap uppercase ml-4 mb-1`};
|
||||
${tw`font-header font-medium text-xs text-neutral-300 whitespace-no-wrap uppercase ml-4 mb-1 select-none`};
|
||||
${props => props.collapsed && tw`opacity-0`};
|
||||
|
||||
&:not(:first-of-type) {
|
||||
|
|
@ -40,7 +39,7 @@ const Sidebar = styled.div<{ collapsed?: boolean }>`
|
|||
}
|
||||
|
||||
& > a {
|
||||
${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer`};
|
||||
${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none`};
|
||||
${props => props.collapsed ? tw`justify-center` : tw`px-4`};
|
||||
|
||||
& > svg {
|
||||
|
|
@ -86,7 +85,7 @@ export default ({ location, match }: RouteComponentProps) => {
|
|||
{ !collapsed ?
|
||||
<h1 css={tw`text-2xl text-neutral-50 whitespace-no-wrap`}>{name}</h1>
|
||||
:
|
||||
<img src={'/favicons/android-icon-48x48.png'} />
|
||||
<img src={'/favicons/android-icon-48x48.png'} alt={'Pterodactyl Icon'} />
|
||||
}
|
||||
</div>
|
||||
|
||||
|
|
@ -150,11 +149,11 @@ export default ({ location, match }: RouteComponentProps) => {
|
|||
</NavLink>
|
||||
|
||||
<div className={'user'}>
|
||||
<img src={'https://cdn.krygon.app/avatars/52564280420073473/7db9f06013ec39f7fa5c1e79241c43afa1f152d82cbb193ecaab7753b9a3e61e?size=64'} alt="Profile Picture" css={tw`h-10 w-10 rounded-full`} />
|
||||
<img src={'https://cdn.krygon.app/avatars/52564280420073473/7db9f06013ec39f7fa5c1e79241c43afa1f152d82cbb193ecaab7753b9a3e61e?size=64'} alt="Profile Picture" css={tw`h-10 w-10 rounded-full select-none`} />
|
||||
|
||||
<div css={tw`flex flex-col ml-4`}>
|
||||
<span css={tw`font-header font-medium text-sm text-neutral-50 whitespace-no-wrap leading-tight`}>Matthew Penner</span>
|
||||
<span css={tw`font-header font-normal text-xs text-neutral-300 whitespace-no-wrap leading-tight`}>Super Administrator</span>
|
||||
<span css={tw`font-header font-medium text-sm text-neutral-50 whitespace-no-wrap leading-tight select-none`}>Matthew Penner</span>
|
||||
<span css={tw`font-header font-normal text-xs text-neutral-300 whitespace-no-wrap leading-tight select-none`}>Super Administrator</span>
|
||||
</div>
|
||||
|
||||
<NavLink to={'/auth/logout'} css={tw`h-8 w-8 flex items-center justify-center text-neutral-300 hover:text-neutral-50 ml-auto transition-all duration-100`}>
|
||||
|
|
@ -164,7 +163,7 @@ export default ({ location, match }: RouteComponentProps) => {
|
|||
</Sidebar>
|
||||
|
||||
<div css={tw`h-full w-full flex flex-col items-center`}>
|
||||
<div css={tw`min-h-screen w-full flex flex-col px-4 py-12 overflow-x-hidden`} style={{ maxWidth: '86rem' }}>
|
||||
<div css={tw`min-h-screen w-full flex flex-col px-16 py-12 overflow-x-hidden`} style={{ maxWidth: '86rem' }}>
|
||||
{/* <TransitionRouter> */}
|
||||
<Switch location={location}>
|
||||
<Route path={`${match.path}`} component={OverviewContainer} exact/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue