Slight UI tweaking to make life easier on people

Author: DaneEveritt

resources/scripts/components/App.tsx

@@ -11,7 +11,7 @@ import { Provider } from 'react-redux';
 import { SiteSettings } from '@/state/settings';
 import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
-import tw from 'twin.macro';
+import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
 import { createBrowserHistory } from 'history';
 import { setupInterceptors } from '@/api/interceptors';
@@ -74,6 +74,7 @@ const App = () => {
     return (
         <>
             <GlobalStylesheet/>
+            <TailwindGlobalStyles/>
             <StoreProvider store={store}>
                 <Provider store={store}>
                     <ProgressBar/>

resources/scripts/components/elements/Input.tsx

@@ -38,28 +38,28 @@ const inputStyle = css<Props>`
     // Reset to normal styling.
     resize: none;
     ${tw`appearance-none outline-none w-full min-w-0`};
-    ${tw`p-3 border rounded text-sm transition-all duration-150`};
+    ${tw`p-3 border-2 rounded text-sm transition-all duration-150`};
     ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
     
     & + .input-help {
         ${tw`mt-1 text-xs`};
-        ${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`};
+        ${props => props.hasError ? tw`text-red-200` : tw`text-neutral-200`};
     }
     
     &:required, &:invalid {
         ${tw`shadow-none`};
     }
     
     &:not(:disabled):not(:read-only):focus {
-        ${tw`shadow-md border-primary-400`};
+        ${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
     }
 
     &:disabled {
         ${tw`opacity-75`};
     }
     
     ${props => props.isLight && light};
-    ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
+    ${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300 focus:border-red-300! focus:ring-red-200!`};
 `;
 
 const Input = styled.input<Props>`

resources/scripts/components/server/Console.tsx

@@ -56,6 +56,13 @@ const TerminalDiv = styled.div`
     }
 `;
 
+const CommandInput = styled.input`
+    ${tw`text-sm transition-colors duration-150 px-2 bg-transparent border-0 border-b-2 border-transparent text-neutral-100 p-2 pl-0 w-full focus:ring-0`}
+    &:focus {
+        ${tw`border-cyan-700`};
+    }
+`;
+
 export default () => {
     const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mcontainer@pterodactyl~ \u001b[0m';
     const ref = useRef<HTMLDivElement>(null);
@@ -209,13 +216,15 @@ export default () => {
                 <TerminalDiv id={'terminal'} ref={ref}/>
             </div>
             {canSendCommands &&
-            <div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex`}>
+            <div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
                 <div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
                 <div css={tw`w-full`}>
-                    <input
+                    <CommandInput
                         type={'text'}
+                        placeholder={'Type a command...'}
+                        aria-label={'Console command input.'}
+                        aria-description={'Type a command and press enter to send to server.'}
                         disabled={!instance || !connected}
-                        css={tw`bg-transparent text-neutral-100 p-2 pl-0 w-full`}
                         onKeyDown={handleCommandKeyDown}
                     />
                 </div>

tailwind.config.js

@@ -1,5 +1,3 @@
-const colors = require('tailwindcss/colors');
-
 module.exports = {
     theme: {
         fontFamily: {
@@ -10,13 +8,79 @@ module.exports = {
         colors: {
             transparent: 'transparent',
             black: 'hsl(210, 27%, 10%)',
-            white: '#fff',
-            primary: colors.blue,
-            neutral: colors.coolGray,
-            cyan: colors.cyan,
-            green: colors.green,
-            yellow: colors.amber,
-            red: colors.red,
+            white: '#ffffff',
+            primary: {
+                50: 'hsl(202, 100%, 95%)', // lightest
+                100: 'hsl(204, 100%, 86%)', // lighter
+                200: 'hsl(206, 93%, 73%)',
+                300: 'hsl(208, 88%, 62%)',
+                400: 'hsl(210, 83%, 53%)', // light
+                500: 'hsl(212, 92%, 43%)', // base
+                600: 'hsl(214, 95%, 36%)', // dark
+                700: 'hsl(215, 96%, 32%)',
+                800: 'hsl(216, 98%, 25%)', // darker
+                900: 'hsl(218, 100%, 17%)', // darkest
+            },
+            neutral: {
+                50: 'hsl(216, 33%, 97%)',
+                100: 'hsl(214, 15%, 91%)',
+                200: 'hsl(210, 16%, 82%)',
+                300: 'hsl(211, 13%, 65%)',
+                400: 'hsl(211, 10%, 53%)',
+                500: 'hsl(211, 12%, 43%)',
+                600: 'hsl(209, 14%, 37%)',
+                700: 'hsl(209, 18%, 30%)',
+                800: 'hsl(209, 20%, 25%)',
+                900: 'hsl(210, 24%, 16%)',
+            },
+            red: {
+                50: 'hsl(360, 100%, 95%)',
+                100: 'hsl(360, 100%, 87%)',
+                200: 'hsl(360, 100%, 80%)',
+                300: 'hsl(360, 91%, 69%)',
+                400: 'hsl(360, 83%, 62%)',
+                500: 'hsl(356, 75%, 53%)',
+                600: 'hsl(354, 85%, 44%)',
+                700: 'hsl(352, 90%, 35%)',
+                800: 'hsl(350, 94%, 28%)',
+                900: 'hsl(348, 94%, 20%)',
+            },
+            yellow: {
+                50: 'hsl(49, 100%, 96%)',
+                100: 'hsl(48, 100%, 88%)',
+                200: 'hsl(48, 95%, 76%)',
+                300: 'hsl(48, 94%, 68%)',
+                400: 'hsl(44, 92%, 63%)',
+                500: 'hsl(42, 87%, 55%)',
+                600: 'hsl(36, 77%, 49%)',
+                700: 'hsl(29, 80%, 44%)',
+                800: 'hsl(22, 82%, 39%)',
+                900: 'hsl(15, 86%, 30%)',
+            },
+            cyan: {
+                50: 'hsl(171, 82%, 94%)',
+                100: 'hsl(172, 97%, 88%)',
+                200: 'hsl(174, 96%, 78%)',
+                300: 'hsl(176, 87%, 67%)',
+                400: 'hsl(178, 78%, 57%)',
+                500: 'hsl(180, 77%, 47%)',
+                600: 'hsl(182, 85%, 39%)',
+                700: 'hsl(184, 90%, 34%)',
+                800: 'hsl(186, 91%, 29%)',
+                900: 'hsl(188, 91%, 23%)',
+            },
+            green: {
+                50: 'hsl(125, 65%, 93%)',
+                100: 'hsl(127, 65%, 85%)',
+                200: 'hsl(124, 63%, 74%)',
+                300: 'hsl(123, 53%, 55%)',
+                400: 'hsl(123, 57%, 45%)',
+                500: 'hsl(122, 73%, 35%)',
+                600: 'hsl(122, 80%, 29%)',
+                700: 'hsl(125, 79%, 26%)',
+                800: 'hsl(125, 86%, 20%)',
+                900: 'hsl(125, 97%, 14%)',
+            },
         },
         extend: {
             fontSize: {