From af11e3a19b28db8dc4d7c3076096ec90e8f74b74 Mon Sep 17 00:00:00 2001
From: Callum Gare <callum@gare.au>
Date: Wed, 18 May 2022 20:55:50 +1000
Subject: [PATCH] Improve the appearance and readability of the tty

Values take from https://github.com/tsl0922/ttyd/blob/2b4dbacc10f0db7fceb092ea42ea12cd9301f4aa/html/src/components/app.tsx
---
 js/src/MyModal.tsx |  1 +
 js/src/style.scss  | 11 +++++++++++
 js/src/xterm.tsx   | 32 ++++++++++++++++++++++++++++++--
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 js/src/style.scss

diff --git a/js/src/MyModal.tsx b/js/src/MyModal.tsx
index fff165a..c8b2da3 100644
--- a/js/src/MyModal.tsx
+++ b/js/src/MyModal.tsx
@@ -1,6 +1,7 @@
 import { createRef, Component, ComponentChildren } from "preact";
 import { Modal } from "bootstrap";
 import './bootstrap.scss';
+import './style.scss';
 
 interface ModalProps {
   children: ComponentChildren;
diff --git a/js/src/style.scss b/js/src/style.scss
new file mode 100644
index 0000000..55a38de
--- /dev/null
+++ b/js/src/style.scss
@@ -0,0 +1,11 @@
+#terminal {
+  width: auto;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0;
+
+  .terminal {
+    padding: 5px;
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/js/src/xterm.tsx b/js/src/xterm.tsx
index 4e5aa96..0bd4754 100644
--- a/js/src/xterm.tsx
+++ b/js/src/xterm.tsx
@@ -1,9 +1,37 @@
-import { Terminal, IDisposable } from "xterm";
+import { Terminal, IDisposable, ITerminalOptions, ITheme } from "xterm";
 import { FitAddon } from 'xterm-addon-fit';
 import { WebLinksAddon } from 'xterm-addon-web-links';
 import { WebglAddon } from 'xterm-addon-webgl';
 import { ZModemAddon } from "./zmodem";
 
+const termOptions = {
+    fontSize: 13,
+    fontFamily: 'Menlo For Powerline,Consolas,Liberation Mono,Menlo,Courier,monospace',
+    macOptionClickForcesSelection: true,
+    macOptionIsMeta: true,
+    theme: {
+        foreground: '#d4d4d4',
+        background: '#1e1e1e',
+        cursor: '#adadad',
+        black: '#000000',
+        red: '#d81e00',
+        green: '#5ea702',
+        yellow: '#cfae00',
+        blue: '#427ab3',
+        magenta: '#89658e',
+        cyan: '#00a7aa',
+        white: '#dbded8',
+        brightBlack: '#686a66',
+        brightRed: '#f54235',
+        brightGreen: '#99e343',
+        brightYellow: '#fdeb61',
+        brightBlue: '#84b0d8',
+        brightMagenta: '#bc94b7',
+        brightCyan: '#37e6e8',
+        brightWhite: '#f1f1f0',
+    } as ITheme,
+} as ITerminalOptions;
+
 export class OurXterm {
     // The HTMLElement that contains our terminal
     elem: HTMLElement;
@@ -27,7 +55,7 @@ export class OurXterm {
 
     constructor(elem: HTMLElement) {
         this.elem = elem;
-        this.term = new Terminal();
+        this.term = new Terminal(termOptions);
         this.fitAddOn = new FitAddon();
         this.zmodemAddon = new ZModemAddon({
             toTerminal: (x: Uint8Array) => this.term.write(x),