improve toast colors

frontend/connectivity/__tests__/connect_device/index_test.ts

@@ -121,6 +121,12 @@ describe("showLogOnScreen", () => {
   it("routes `success` to toastr.success()", () => {
     assertToastr([MessageType.success], success);
   });
+
+  it("routes `debug` to toastr.info()", () => {
+    const log = fakeLog(MessageType.debug, ["toast"]);
+    showLogOnScreen(log);
+    expect(info).toHaveBeenCalledWith(log.message, TITLE(), "gray");
+  });
 });
 
 describe("speakLogAloud", () => {

frontend/connectivity/connect_device.ts

@@ -70,6 +70,8 @@ export function showLogOnScreen(log: Log) {
         return fun;
       case MessageType.busy:
         return busy;
+      case MessageType.debug:
+        return (msg: string, title: string) => info(msg, title, "gray");
       case MessageType.info:
       default:
         return info;

frontend/css/toastr.scss

@@ -40,6 +40,7 @@
   }
   &.yellow,
   &.blue,
+  &.gray,
   &.orange {
     .toast-title,
     .toast-message {
@@ -47,6 +48,10 @@
     }
   }
   &.green,
+  &.dark-blue,
+  &.dark-gray,
+  &.dark-red,
+  &.dark-orange,
   &.red {
     .toast-title,
     .toast-message {