Tweak styles and display messages in AppConsole

Add palette variables to App.css.
Tweak styling for Topbar, Editor, Modal and ConnectionConfigModal to
make everything look less placeholder-y.
Actually display AppConsoleMessages in AppConsole.
Add styles for each type of AppConsoleMessage.

Ignore src/node_modules when generating documentation. This folder
exists because webpack insisted ssh2 be installed in release/app because
it's a native dependency, which causes npm install to create a modules
folder in src. Go figure.

package.json

@@ -39,7 +39,7 @@
     "build:dll": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
     "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
     "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
-    "doc": "typedoc --name Dawn src/**/*.ts src/**/*.tsx",
+    "doc": "typedoc --name Dawn --exclude src/node_modules/** src/**/*.ts src/**/*.tsx",
     "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && npm run build:dll",
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
     "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never && npm run build:dll",

src/common/AppConsoleMessage.ts

@@ -1,3 +1,5 @@
+import { randomUUID } from 'crypto';
+
 /**
  * A type of AppConsoleMessage.
  */
@@ -17,12 +19,18 @@ export default class AppConsoleMessage {
    */
   readonly text: string;
 
+  /**
+   * The unique id of the message for use by React.
+   */
+  readonly uuid: string;
+
   /**
    * @param type - the type of the message
    * @param text - the text content of the message
    */
   constructor(type: MessageType, text: string) {
     this.type = type;
     this.text = text;
+    this.uuid = randomUUID();
   }
 }

src/renderer/App.css

@@ -3,6 +3,13 @@ body {
 }
 
 .App {
+  --window-head-color: blue;
+  --window-head-text-color: white;
+  --window-accent-color: grey;
+  --body-color: white;
+  --body-text-color: black;
+  --body-accent-color: white;
+
   display: flex;
   flex-direction: column;
   height: 100vh;

src/renderer/AppConsole.css

@@ -2,10 +2,31 @@
   padding: 10px;
   font-family: "Courier New", monospace;
   height: 100%;
+  min-height: 0;
 }
 .AppConsole-inner {
   height: 100%;
   background-color: #eee;
   overflow: hidden scroll;
-  overflow-wrap: break-word
+  overflow-wrap: break-word;
+  margin: 0;
+  margin-bottom: 50px;
+  min-height: 0;
+}
+.AppConsole-message {
+  padding: 2px;
+}
+.AppConsole-message-dawn-info {
+}
+.AppConsole-message-dawn-err {
+  color: red;
+}
+.AppConsole-message-robot-err {
+  background-color: salmon;
+  padding-left: 4px;
+  border-left: 6px solid crimson;
+}
+.AppConsole-message-robot-info {
+  padding-left: 4px;
+  border-left: 6px solid var(--window-accent-color);
 }

src/renderer/AppConsole.tsx

@@ -7,14 +7,22 @@ import './AppConsole.css';
  * @param props.messages - array of console messages to display
  */
 export default function AppConsole({
-  // eslint-disable-next-line
   messages,
 }: {
   messages: AppConsoleMessage[];
 }) {
   return (
     <div className="AppConsole">
-      <div className="AppConsole-inner">Test</div>
+      <pre className="AppConsole-inner">
+        {messages.map((msg: AppConsoleMessage) => (
+          <div
+            key={msg.uuid}
+            className={`AppConsole-message AppConsole-message-${msg.type}`}
+          >
+            {msg.text}
+          </div>
+        ))}
+      </pre>
     </div>
   );
 }

src/renderer/Topbar.css

@@ -1,8 +1,8 @@
 .Topbar {
   width: calc(100% - 20px);
-  font-family: Tahoma, sans-serif;
   padding: 10px;
   user-select: none;
+  font-family: Arial, sans-serif;
 }
 .Topbar-left-group {
   float: left;
@@ -19,6 +19,7 @@
 .Topbar-dawn-version {
   font-size: 25px;
   margin-right: 40px;
+  font-family: Tahoma, sans-serif;
 }
 .Topbar-info-card {
   margin-right: 10px;

src/renderer/editor/Editor.css

@@ -11,6 +11,7 @@
 }
 .Editor-file-name {
   margin-right: 5px;
+  font-family: Verdana, monospace;
 }
 .Editor-file-status {
   font-style: italic;

src/renderer/modals/ConnectionConfigModal.css

@@ -0,0 +1,26 @@
+.ConnectionConfigModal-content {
+  font-family: Arial, sans-serif;
+}
+.ConnectionConfigModal-config-field {
+  display: block;
+  padding: 2px 0 2px;
+}
+.ConnectionConfigModal-section .ConnectionConfigModal-config-field {
+  padding-left: 12px;
+}
+.ConnectionConfigModal-config-field input {
+  margin-left: 4px;
+  border: none;
+  border-bottom: 1px solid var(--window-accent-color);
+  outline: none;
+  font-size: 16px;
+}
+.ConnectionConfigModal-config-field input:focus{
+  border-color: var(--window-head-color);
+}
+.ConnectionConfigModal-section:not(:first-child) {
+  margin-top: 8px;
+}
+.ConnectionConfigModal-section-header {
+  padding: 4px 0 4px 0;
+}

src/renderer/modals/ConnectionConfigModal.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
 import Modal from './Modal';
+import './ConnectionConfigModal.css';
 
 /**
  * Modal component exposing info about the connection to the robot (IP address, port, etc.)
@@ -31,33 +32,49 @@ export default function ConnectionConfigModal({
   FieldStationNum: string;
 }) {
   return (
-    <Modal modalTitle="Connection info" onClose={onClose} isActive={isActive}>
-      <div>
+    <Modal
+      modalTitle="Connection settings"
+      onClose={onClose}
+      isActive={isActive}
+      className="ConnectionConfigModal-content"
+    >
+      <label htmlFor="IPAddress" className="ConnectionConfigModal-config-field">
         IP Address:
-        <input id="IPAddress" onChange={onChange} value={IPAddress} />
-      </div>
-      <div>
+        <input name="IPAddress" onChange={onChange} value={IPAddress} />
+      </label>
+      <label
+        htmlFor="SSHAddress"
+        className="ConnectionConfigModal-config-field"
+      >
         SSH Address:
-        <input id="SSHAddress" onChange={onChange} value={SSHAddress} />
-      </div>
-      <div>
-        Field Control Settings
-        <div>
+        <input name="SSHAddress" onChange={onChange} value={SSHAddress} />
+      </label>
+      <div className="ConnectionConfigModal-section">
+        <div className="ConnectionConfigModal-section-header">
+          Field Control Settings
+        </div>
+        <label
+          htmlFor="FieldIPAddress"
+          className="ConnectionConfigModal-config-field"
+        >
           Field Control IP Address:
           <input
-            id="FieldIPAddress"
+            name="FieldIPAddress"
             onChange={onChange}
             value={FieldIPAddress}
           />
-        </div>
-        <div>
+        </label>
+        <label
+          htmlFor="FieldStationNum"
+          className="ConnectionConfigModal-config-field"
+        >
           Field Control Station Number:
           <input
-            id="FieldStationNum"
+            name="FieldStationNum"
             onChange={onChange}
             value={FieldStationNum}
           />
-        </div>
+        </label>
       </div>
     </Modal>
   );

src/renderer/modals/Modal.css

@@ -4,24 +4,31 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: white;
+  background-color: var(--body-color);
   border-radius: 5px;
 }
 .modal-active {
   display: block;
 }
 .Modal-title-bar {
   white-space: nowrap;
-  padding: 20px;
-  background-color: blue;
+  padding: 10px 10px 10px 20px;
+  background-color: var(--window-head-color);
   border-radius: inherit;
+  color: var(--window-head-text-color);
+  font-family: Tahoma, sans-serif;
 }
 .Modal-title {
   padding-right: 20vw;
 }
 .Modal-close-button {
   background-color: transparent;
   border: none;
+  color: var(--window-head-text-color);
+  font-weight: bold;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
 }
 .Modal-content {
   padding: 20px;

src/renderer/modals/Modal.tsx

@@ -7,17 +7,20 @@ import './Modal.css';
  * @param props.onClose - handler called when the modal is closed by any means
  * @param props.isActive - whether to display the modal
  * @param props.modalTitle - displayed title of the modal
+ * @param props.className - additional className given to the modal content wrapper
  */
 export default function Modal({
   onClose,
   isActive,
   modalTitle,
   children,
+  className = '',
 }: {
   onClose: () => void;
   isActive: boolean;
   modalTitle: string;
   children: ReactNode;
+  className?: string;
 }) {
   return (
     <div className={`Modal${isActive ? ' modal-active' : ''}`}>
@@ -27,7 +30,10 @@ export default function Modal({
           X
         </button>
       </div>
-      <div className="Modal-content">{children}</div>
+      <div className={`Modal-content ${className}`}>{children}</div>
     </div>
   );
 }
+Modal.defaultProps = {
+  className: '',
+};