Merge pull request #16 from pioneers/styling4

Styling polish

.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
     'import/extensions': 'off',
     'import/no-unresolved': 'off',
     'import/no-import-module-exports': 'off',
-    'no-bitwise': 'off',
     'no-shadow': 'off',
     '@typescript-eslint/no-shadow': 'error',
     'no-unused-vars': 'off',

src/main/network/CodeTransfer.ts

@@ -119,7 +119,7 @@ export default class CodeTransfer {
       client
         .on('error', (err: Error) => {
           reject(
-            new Error('SSH connection error when uploading student code.', {
+            new Error('SSH connection error when transmitting student code.', {
               cause: err,
             }),
           );
@@ -129,7 +129,7 @@ export default class CodeTransfer {
             if (err) {
               reject(
                 new Error(
-                  'SFTP connection error when uploading student code.',
+                  'SFTP connection error when transmitting student code.',
                   { cause: err },
                 ),
               );

src/main/network/RuntimeComms.ts

@@ -248,9 +248,6 @@ export default class RuntimeComms {
    * most recently known Runtime IP and port.
    */
   #connectTcp() {
-    this.#commsListener.onRuntimeError(
-      new Error('Attempting to connect tcp socket'),
-    );
     this.#tcpDisconnected = false;
     this.#disconnectTcp();
     const tcpStream = new PacketStream().on(

src/renderer/App.css

@@ -3,7 +3,7 @@ body {
 }
 
 .App {
-  --window-head-color: blue;
+  --window-head-color: navy;
   --window-head-text-color: white;
   --window-accent-color: grey;
   --body-color: white;
@@ -29,9 +29,10 @@ body {
   height: 100%;
   background-color: rgb(0 0 0 / 50%);
   display: none;
-  z-index: 4;
+  z-index: 20;
+  backdrop-filter: blur(2px);
 }
-.App-modal-container:has(.modal-active) {
+.App-modal-container:has(.Modal-active) {
   display: block;
 }
 .App-confirm-dialog-text {

src/renderer/App.tsx

@@ -1,3 +1,4 @@
+/* eslint no-bitwise: 'off' */
 import {
   StrictMode,
   useState,
@@ -16,6 +17,7 @@ import ConfirmModal from './modals/ConfirmModal';
 import ConnectionConfigModal, {
   ConnectionConfigChangeEvent,
 } from './modals/ConnectionConfigModal';
+import HelpModal from './modals/HelpModal';
 import GamepadInfoModal from './modals/GamepadInfoModal';
 import ResizeBar from './ResizeBar';
 import {
@@ -312,6 +314,9 @@ export default function App() {
           setFieldIPAddress(data.fieldIPAddress);
           setFieldStationNum(data.fieldStationNumber);
           setShowDirtyUploadWarning(data.showDirtyUploadWarning);
+          document.getElementsByTagName(
+            'title',
+          )[0].innerText = `Dawn ${data.dawnVersion}`;
         }),
         window.electron.ipcRenderer.on(
           'renderer-battery-update',
@@ -399,6 +404,7 @@ export default function App() {
           onConnectionConfigModalOpen={() =>
             changeActiveModal('ConnectionConfig')
           }
+          onHelpModalOpen={() => changeActiveModal('Help')}
           dawnVersion={dawnVersion}
           robotLatencyMs={robotLatencyMs}
           robotBatteryVoltage={robotBatteryVoltage}
@@ -467,6 +473,7 @@ export default function App() {
             FieldIPAddress={FieldIPAddress}
             FieldStationNum={FieldStationNum}
           />
+          <HelpModal isActive={activeModal === 'Help'} onClose={closeModal} />
           <GamepadInfoModal
             isActive={activeModal === 'GamepadInfo'}
             onClose={closeModal}

src/renderer/AppConsole.css

@@ -18,6 +18,7 @@
 }
 .AppConsole-message {
   padding: 2px;
+  text-wrap: wrap;
 }
 .AppConsole-message-dawn-err {
   color: red;

src/renderer/DeviceInfo.css

@@ -14,16 +14,25 @@
   font: bold 20px Verdana, sans-serif;
   user-select: all;
   margin-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .DeviceInfo-device-type {
   font-style: italic;
 }
+.DeviceInfo-device-props-wrapper {
+  margin: 5px 10px 0 10px;
+  overflow-x: auto;
+}
 .DeviceInfo-device-props {
   font-family: Verdana, sans-serif;
-  margin: 5px 0 0 10px;
-  width: 75%;
+  width: 100%;
+  height: 100%;
   user-select: text;
 }
+.DeviceInfo-prop-value {
+  text-align: right;
+}
 .DeviceInfo-disconnected {
   font: 15px Verdana, sans-serif;
 }

src/renderer/DeviceInfo.tsx

@@ -26,22 +26,26 @@ export default function DeviceInfo({
             <div className="DeviceInfo-device" key={device.id}>
               <div className="DeviceInfo-device-id">{device.id}</div>
               <div className="DeviceInfo-device-type">{deviceType}</div>
-              <table className="DeviceInfo-device-props">
-                <tbody>
-                  {Object.entries(device).map(
-                    ([key, value]) =>
-                      key !== 'id' && (
-                        <tr
-                          className="DeviceInfo-device-prop"
-                          key={device.id + key}
-                        >
-                          <td className="DeviceInfo-prop-key">{key}</td>
-                          <td className="DeviceInfo-prop-value">{value}</td>
-                        </tr>
-                      ),
-                  )}
-                </tbody>
-              </table>
+              <div className="DeviceInfo-device-props-wrapper">
+                <table className="DeviceInfo-device-props">
+                  <tbody>
+                    {Object.entries(device).map(
+                      ([key, value]) =>
+                        key !== 'id' && (
+                          <tr
+                            className="DeviceInfo-device-prop"
+                            key={device.id + key}
+                          >
+                            <td className="DeviceInfo-prop-key">{key}</td>
+                            <td className="DeviceInfo-prop-value">
+                              {String(value)}
+                            </td>
+                          </tr>
+                        ),
+                    )}
+                  </tbody>
+                </table>
+              </div>
             </div>
           );
         })

src/renderer/Editor.css

@@ -10,11 +10,14 @@
   align-items: center;
 }
 .Editor-file-name {
-  margin-right: 5px;
+  margin-right: 10px;
   font-family: Verdana, monospace;
 }
 .Editor-file-status {
   font-style: italic;
+  padding-top: 3px;
+  border-bottom: 1px dashed gray;
+  cursor: help;
 }
 .Editor-ace-wrapper {
   position: relative;
@@ -33,8 +36,8 @@
   font-weight: bold;
   align-items: center;
   justify-content: center;
-  padding: auto;
   color: white;
+  backdrop-filter: blur(2px);
 }
 .Editor-kbctrl-enabled .Editor-kbctrl-overlay {
   display: flex;
@@ -56,6 +59,7 @@
   flex-direction: row;
   padding: 5px 0 5px 20px;
   overflow-x: auto;
+  border-bottom: 4px double var(--body-accent-color);
 }
 .Editor-toolbar-group {
   margin-right: 20px;
@@ -91,6 +95,7 @@
   transition: filter 0.25s;
   /* Fix other filter variables so transition is directly from black to blue: */
   filter: invert(0%) sepia(100%) hue-rotate(180deg) saturate(0);
+  pointer-events: none;
 }
 .Editor-tbbtn-toggled img {
   /* CSS filter witchcraft producing #0088ff */

src/renderer/Editor.tsx

@@ -262,7 +262,7 @@ export default function Editor({
       </div>
       <div className="Editor-ace-wrapper">
         <div className="Editor-kbctrl-overlay">
-          <span>Keyboard input sent to robot -- disable to edit code</span>
+          <span>Keyboard input sent to robot &mdash; disable to edit code</span>
         </div>
         <AceEditor
           fontSize={fontSize}

src/renderer/Topbar.css

@@ -4,18 +4,18 @@
   font-family: Arial, sans-serif;
   border-bottom: 1px solid var(--body-accent-color);
 }
-.Topbar-left-group {
-  float: left;
+.Topbar > * {
+  height: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
+.Topbar-left-group {
+  float: left;
+}
 .Topbar-right-group {
   float: right;
 }
-.Topbar-tail {
-  clear: both;
-}
 .Topbar-dawn-version {
   font-size: 25px;
   margin-right: 40px;
@@ -29,18 +29,19 @@
   font-weight: bold;
   font-size: 15px;
 }
+
 .Topbar-robot-disconnected {
-  background-color: red;
+  background-color: indianred;
 }
 .Topbar-runtime-version {
   background-color: blue;
 }
 .Topbar-info-card-red {
-  background-color: red;
+  background-color: salmon;
 }
 .Topbar-info-card-yellow {
-  background-color: yellow;
+  background-color: orange;
 }
 .Topbar-info-card-green {
-  background-color: green;
+  background-color: limegreen;
 }