Added icon, changed appearance of active toolbar item

Signed-off-by: jbicker <jan.bicker@typefox.io>

Author: jbicker

arduino-ide-extension/src/browser/monitor/monitor-widget.tsx

@@ -131,6 +131,7 @@ export class MonitorWidget extends ReactWidget {
 
         this.id = MonitorWidget.ID;
         this.title.label = 'Serial Monitor';
+        this.title.iconClass = 'arduino-serial-monitor-tab-icon';
 
         this.lines = [];
         this.tempData = '';

arduino-ide-extension/src/browser/style/main.css

@@ -83,7 +83,7 @@
     opacity: 1;
 }
 
-.arduino-tool-item.item.connected-boards  select {
+.arduino-tool-item.item.connected-boards select {
     line-height: var(--theia-content-line-height);
     font-size: var(--theia-ui-font-size1);
     color: var(--theia-ui-font-color1);

arduino-ide-extension/src/browser/style/serial-monitor.css

@@ -1,3 +1,10 @@
+.p-TabBar.theia-app-centers .p-TabBar-tabIcon.arduino-serial-monitor-tab-icon {
+    background: url(../icons/buttons.svg);
+    background-size: 800%;
+    background-position-y: 41px;
+    background-position-x: 19px;
+}
+
 .serial-monitor-container {
     height: 100%;
     display: flex;
@@ -60,7 +67,7 @@
 }
 
 .p-TabBar-toolbar .item.arduino-monitor.toggled {
-    border: var(--theia-ui-button-color-hover) var(--theia-border-width) solid;
+    background: var(--theia-brand-color2);
 }
 
 .p-TabBar-toolbar .item .clear-all {