Slight UI tweaking to make life easier on people

This commit is contained in:
Dane Everitt 2020-12-26 11:53:36 -08:00
parent 22687bd078
commit bb2d3e4120
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 91 additions and 17 deletions

View file

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

View file

@ -38,12 +38,12 @@ 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 {
@ -51,7 +51,7 @@ const inputStyle = css<Props>`
}
&: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 {
@ -59,7 +59,7 @@ const inputStyle = css<Props>`
}
${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>`

View file

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