Fix notification icons (#642)

Author: fstasi

arduino-ide-extension/src/browser/serial/monitor/monitor-view-contribution.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { injectable, inject } from 'inversify';
-import { AbstractViewContribution } from '@theia/core/lib/browser';
+import { AbstractViewContribution, codicon } from '@theia/core/lib/browser';
 import { MonitorWidget } from './monitor-widget';
 import { MenuModelRegistry, Command, CommandRegistry } from '@theia/core';
 import {
@@ -32,7 +32,7 @@ export namespace SerialMonitor {
       {
         id: 'serial-monitor-clear-output',
         label: 'Clear Output',
-        iconClass: 'clear-all',
+        iconClass: codicon('clear-all'),
       },
       'vscode/output.contribution/clearOutput.label'
     );

arduino-ide-extension/src/browser/serial/serial-connection-manager.ts

@@ -354,7 +354,7 @@ export class SerialConnectionManager {
         this.messageService.warn(
           nls.localize(
             'arduino/serial/reconnect',
-            'Reconnecting {0} to {1} in {2] seconds...',
+            'Reconnecting {0} to {1} in {2} seconds...',
             Board.toString(board, {
               useFqbn: false,
             }),

arduino-ide-extension/src/browser/theia/messages/notification-center-component.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { NotificationComponent } from './notification-component';
 import { NotificationCenterComponent as TheiaNotificationCenterComponent } from '@theia/messages/lib/browser/notification-center-component';
 import { nls } from '@theia/core/lib/common';
+import { codicon } from '@theia/core/lib/browser';
 
 const PerfectScrollbar = require('react-perfect-scrollbar');
 
@@ -28,15 +29,15 @@ export class NotificationCenterComponent extends TheiaNotificationCenterComponen
           <div className="theia-notification-center-header-actions">
             <ul className="theia-notification-actions">
               <li
-                className="collapse"
+                className={codicon('chevron-down', true)}
                 title={nls.localize(
                   'vscode/notificationsStatus/hideNotifications',
                   'Hide Notification Center'
                 )}
                 onClick={this.onHide}
               />
               <li
-                className="clear-all"
+                className={codicon('clear-all', true)}
                 title={nls.localize(
                   'vscode/notificationsCommands/clearAllNotifications',
                   'Clear All'

arduino-ide-extension/src/browser/theia/messages/notification-component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NotificationComponent as TheiaNotificationComponent } from '@theia/messages/lib/browser/notification-component';
 import { nls } from '@theia/core/lib/common';
+import { codicon } from '@theia/core/lib/browser';
 
 export class NotificationComponent extends TheiaNotificationComponent {
   render(): React.ReactNode {
@@ -15,7 +16,7 @@ export class NotificationComponent extends TheiaNotificationComponent {
         >
           <div className="theia-notification-list-item-content-main">
             <div
-              className={`theia-notification-icon theia-notification-icon-${type}`}
+              className={`theia-notification-icon ${codicon(type)} ${type}`}
             />
             <div className="theia-notification-message">
               <span
@@ -26,7 +27,11 @@ export class NotificationComponent extends TheiaNotificationComponent {
             <ul className="theia-notification-actions">
               {expandable && (
                 <li
-                  className={collapsed ? 'expand' : 'collapse'}
+                  className={
+                    codicon('chevron-down') + collapsed
+                      ? ' expand'
+                      : ' collapse'
+                  }
                   title={
                     collapsed
                       ? nls.localize('theia/messages/expand', 'Expand')
@@ -38,7 +43,7 @@ export class NotificationComponent extends TheiaNotificationComponent {
               )}
               {!this.isProgress && (
                 <li
-                  className="clear"
+                  className={codicon('close', true)}
                   title={nls.localize('vscode/abstractTree/clear', 'Clear')}
                   data-message-id={messageId}
                   onClick={this.onClear}

i18n/en.json

@@ -274,7 +274,7 @@
             "disconnected": "Disconnected {0} from {1}.",
             "unexpectedError": "Unexpected error. Reconnecting {0} on port {1}.",
             "failedReconnect": "Failed to reconnect {0} to serial port after 10 consecutive attempts. The {1} serial port is busy.",
-            "reconnect": "Reconnecting {0} to {1} in {2] seconds..."
+            "reconnect": "Reconnecting {0} to {1} in {2} seconds..."
         },
         "component": {
             "uninstall": "Uninstall",