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