StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Slight UI tweaking to make life easier on people

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

15
resources/scripts/components/server/Console.tsx
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>