diff --git a/components/REPL/REPLInput.tsx b/components/REPL/REPLInput.tsx index d8c2c27..b83b458 100644 --- a/components/REPL/REPLInput.tsx +++ b/components/REPL/REPLInput.tsx @@ -38,9 +38,12 @@ const REPLInput: NextPage<{historyCallback: CallableFunction}> = ({historyCallba return false; }; - return
- - + return
+ +
+ + +
; }; diff --git a/lib/commands/definitions.tsx b/lib/commands/definitions.tsx index f75c140..9956680 100644 --- a/lib/commands/definitions.tsx +++ b/lib/commands/definitions.tsx @@ -36,29 +36,29 @@ export function printSyntax(cmd: Command): string[] { let flagsDesc = []; if (cmd.flags && cmd.flags.length > 0) { flagsOption = " ["; + flagsDesc.push(""); flagsDesc.push("Flags:"); cmd.flags.forEach((flag => { flagsOption += `-${flag.short} `; flagsDesc.push(`\t-${flag.short}\t--${flag.long}\t${flag.desc}`); })); flagsOption = flagsOption.substring(0, flagsOption.length-1) + "]"; - flagsDesc.push(""); } let subcmdOption = ""; let subcmdDesc = []; if (cmd.subcommands && cmd.subcommands.length > 0) { subcmdOption = " ["; + subcmdDesc.push(""); subcmdDesc.push("Subcommands:"); cmd.subcommands.forEach((subcmd => { subcmdOption += `${subcmd.name}|`; subcmdDesc.push(`\t${subcmd.name}\t${subcmd.desc}`); })); subcmdOption = subcmdOption.substring(0, subcmdOption.length-1) + "]"; - subcmdDesc.push(""); } - return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`, ""].concat(flagsDesc).concat(subcmdDesc); + return [`Usage: ${cmd.name}${flagsOption}${subcmdOption}`].concat(flagsDesc).concat(subcmdDesc); } const about: Command = { diff --git a/pages/index.tsx b/pages/index.tsx index b81bd9d..5f446b1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,9 +1,12 @@ import type { NextPage } from "next"; import REPL from "../components/REPL"; +import styles from "../styles/Home.module.css"; const Home: NextPage = () => { return ( - +
+ +
); }; diff --git a/styles/Home.module.css b/styles/Home.module.css new file mode 100644 index 0000000..a41afc5 --- /dev/null +++ b/styles/Home.module.css @@ -0,0 +1,7 @@ +.container { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; + padding: 10px; +} \ No newline at end of file diff --git a/styles/REPL/REPLHistory.module.css b/styles/REPL/REPLHistory.module.css index 397458e..a47ac6d 100644 --- a/styles/REPL/REPLHistory.module.css +++ b/styles/REPL/REPLHistory.module.css @@ -1,10 +1,12 @@ .container { - height: 70vh; overflow: auto; display: flex; flex-direction: column-reverse; + flex-grow: 2; + font-size: 1.25rem; + font-family: "CascadiaCode", monospace; } .line { - border-bottom: 1px solid #000; + padding: 3px 0; } \ No newline at end of file diff --git a/styles/REPL/REPLInput.module.css b/styles/REPL/REPLInput.module.css index f2e024e..055dcc6 100644 --- a/styles/REPL/REPLInput.module.css +++ b/styles/REPL/REPLInput.module.css @@ -1,18 +1,36 @@ .wrapper > input, .wrapper > span { + padding: .125rem 0; font-size: 1.25rem; - font-family: "CascadiaCode"; - padding: .125rem .25rem; - width: calc(100% - 1rem); + font-family: "CascadiaCode", monospace; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + color: var(--repl-color); } .wrapper { position: relative; - border: 2px solid #000; + flex-grow: 2; + display: block; +} + +.wrapperwrapper { + display: flex; + width: 100%; + flex-direction: row; + flex-wrap: nowrap; +} + +.inputstart { + padding: .125rem 0; + font-size: 1.25rem; + font-family: "CascadiaCode", monospace; } .in, .in:focus { border: 0; outline-width: 0; + background: transparent; } .completionWrapper { @@ -34,5 +52,5 @@ } .completion { - color: #ccc + color: var(--repl-color-hint); } diff --git a/styles/globals.css b/styles/globals.css index 22d9b4d..808c6a8 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -5,4 +5,13 @@ * { box-sizing: border-box; + --repl-color: #188a18; + --repl-color-hint: #092909; +} + +body { + margin: 0; + padding: 0; + color: var(--repl-color); + background: #000; } \ No newline at end of file