Add 'select-none' everywhere in the admin area

resources/scripts/components/admin/api/ApiKeysContainer.tsx

@@ -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>

resources/scripts/components/elements/Button.tsx

@@ -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 === 'xsmall' && tw`p-2 text-xs`};
-    ${props => (!props.size || props.size === 'small') && tw`px-4 py-2`};
+    ${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 }
 `;
 

resources/scripts/routers/AdminRouter.tsx

@@ -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-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`}>Super Administrator</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/>