From 1f1861e1d89303499ecd0f699ca40896fc7b83c8 Mon Sep 17 00:00:00 2001
From: jbicker <jan.bicker@typefox.io>
Date: Fri, 14 Jun 2019 14:36:46 +0200
Subject: [PATCH] Adapted design of toolbar.

Signed-off-by: jbicker <jan.bicker@typefox.io>
---
 .../browser/arduino-frontend-contribution.tsx |  21 +-
 .../browser/components/connected-boards.tsx   |   3 +-
 .../src/browser/icons/buttons.svg             | 869 ++++++++++++++++++
 .../src/browser/style/main.css                |  34 +
 .../toolbar/arduino-toolbar-contribution.ts   |   9 +-
 .../src/browser/toolbar/arduino-toolbar.tsx   |  55 +-
 6 files changed, 947 insertions(+), 44 deletions(-)
 create mode 100644 arduino-ide-extension/src/browser/icons/buttons.svg

diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
index 3d6cc06c..9389324e 100644
--- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
+++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
@@ -99,7 +99,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
             isVisible: widget => this.isArduinoToolbar(widget),
             isEnabled: widget => this.isArduinoToolbar(widget),
             execute: async () => {
-                const widget = this.editorManager.currentEditor;
+                const widget = this.getCurrentWidget();
                 if (widget instanceof EditorWidget) {
                     await widget.saveable.save();
                 }
@@ -120,7 +120,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
             isVisible: widget => this.isArduinoToolbar(widget),
             isEnabled: widget => this.isArduinoToolbar(widget),
             execute: async () => {
-                const widget = this.editorManager.currentEditor;
+                const widget = this.getCurrentWidget();
                 if (widget instanceof EditorWidget) {
                     await widget.saveable.save();
                 }
@@ -148,7 +148,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
                     await this.sketchFactory.createNewSketch(uri);
                 } catch (e) {
                     await this.messageService.error(e.toString());
-                } 
+                }
             }
         }));
         registry.registerCommand(ArduinoCommands.REFRESH_BOARDS, {
@@ -157,13 +157,24 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
         })
     }
 
+    protected getCurrentWidget(): EditorWidget | undefined {
+        let widget = this.editorManager.currentEditor;
+        if (!widget) {
+            const visibleWidgets = this.editorManager.all.filter(w => w.isVisible);
+            if (visibleWidgets.length > 0) {
+                widget = visibleWidgets[0];
+            }
+        }
+        return widget;
+    }
+
     private async onNoBoardsInstalled() {
         const action = await this.messageService.info("You have no boards installed. Use the boards mangager to install one.", "Open Boards Manager");
         if (!action) {
             return;
         }
 
-        this.boardsListWidgetFrontendContribution.openView({reveal: true});
+        this.boardsListWidgetFrontendContribution.openView({ reveal: true });
     }
 
     private async onUnknownBoard() {
@@ -173,7 +184,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
             return;
         }
 
-        this.boardsListWidgetFrontendContribution.openView({reveal: true});
+        this.boardsListWidgetFrontendContribution.openView({ reveal: true });
     }
 
     private isArduinoToolbar(maybeToolbarWidget: any): boolean {
diff --git a/arduino-ide-extension/src/browser/components/connected-boards.tsx b/arduino-ide-extension/src/browser/components/connected-boards.tsx
index 163e2e72..e90163e4 100644
--- a/arduino-ide-extension/src/browser/components/connected-boards.tsx
+++ b/arduino-ide-extension/src/browser/components/connected-boards.tsx
@@ -3,6 +3,7 @@ import { BoardsService, Board } from '../../common/protocol/boards-service';
 // import { SelectBoardDialog } from './select-board-dialog';
 import { QuickPickService } from '@theia/core/lib/common/quick-pick-service';
 import { BoardsNotificationService } from '../boards-notification-service';
+import { ARDUINO_TOOLBAR_ITEM_CLASS } from '../toolbar/arduino-toolbar';
 
 export class ConnectedBoards extends React.Component<ConnectedBoards.Props, ConnectedBoards.State> {
     static TOOLBAR_ID: 'connected-boards-toolbar';
@@ -28,7 +29,7 @@ export class ConnectedBoards extends React.Component<ConnectedBoards.Props, Conn
             content = [ <option key="loading" value="0">{label}</option> ];
         }
 
-        return <div className={ConnectedBoards.Styles.CONNECTED_BOARDS_CLASS}>
+        return <div className={`${ARDUINO_TOOLBAR_ITEM_CLASS} item ${ConnectedBoards.Styles.CONNECTED_BOARDS_CLASS}`}>
             <select disabled={!this.state.boards}
                 onChange={this.onBoardSelect.bind(this)}
                 value={this.state.selection}>
diff --git a/arduino-ide-extension/src/browser/icons/buttons.svg b/arduino-ide-extension/src/browser/icons/buttons.svg
new file mode 100644
index 00000000..347eba06
--- /dev/null
+++ b/arduino-ide-extension/src/browser/icons/buttons.svg
@@ -0,0 +1,869 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="198px"
+   height="99px"
+   viewBox="0 0 198 99"
+   enable-background="new 0 0 198 99"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="buttons.svg"><metadata
+     id="metadata327"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs325" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1215"
+     inkscape:window-height="1000"
+     id="namedview323"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="4"
+     inkscape:cx="45.252385"
+     inkscape:cy="36.224987"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><g
+     id="g5"
+     transform="translate(-0.12000084,0)"><circle
+       cx="16.620001"
+       cy="16.608999"
+       r="12"
+       id="circle7"
+       style="fill:#ffcc00" /><polyline
+       stroke-miterlimit="10"
+       points="21.453,12.745 15.788,20.571    11.775,16.658  "
+       id="polyline9"
+       style="fill:none;stroke:#655100;stroke-width:2.30489993;stroke-miterlimit:10" /></g><g
+     id="g11"
+     transform="translate(-0.12000084,0)"><circle
+       cx="16.620001"
+       cy="49.465"
+       r="12"
+       id="circle13"
+       style="fill:#ffffff" /><polyline
+       stroke-miterlimit="10"
+       points="21.453,45.601 15.788,53.427    11.775,49.514  "
+       id="polyline15"
+       style="fill:none;stroke:#006468;stroke-width:2.30489993;stroke-miterlimit:10" /></g><g
+     id="g17"
+     transform="translate(-0.12000084,0)"><circle
+       cx="16.620001"
+       cy="82.476997"
+       r="12"
+       id="circle19"
+       style="fill:#4db7bb" /><polyline
+       stroke-miterlimit="10"
+       points="21.453,78.612 15.788,86.438    11.775,82.525  "
+       id="polyline21"
+       style="fill:none;stroke:#006468;stroke-width:2.30489993;stroke-miterlimit:10" /></g><g
+     id="g23"
+     transform="translate(-0.26100159,0)"><circle
+       cx="49.761002"
+       cy="16.608999"
+       r="12"
+       id="circle25"
+       style="fill:#ffcc00" /><polygon
+       points="45.412,15.313 49.307,15.313 49.307,11.53 54.701,16.875 49.331,22.245 49.331,18.563 45.412,18.539 "
+       id="polygon27"
+       style="fill:#655100" /></g><g
+     id="g29"
+     transform="translate(-0.26100159,0)"><circle
+       cx="49.761002"
+       cy="49.465"
+       r="12"
+       id="circle31"
+       style="fill:#ffffff" /><polygon
+       points="45.412,48.169 49.307,48.169 49.307,44.386 54.701,49.731 49.331,55.101 49.331,51.419 45.412,51.394 "
+       id="polygon33"
+       style="fill:#006468" /></g><g
+     id="g35"
+     transform="translate(-0.26100159,0)"><circle
+       cx="49.761002"
+       cy="82.476997"
+       r="12"
+       id="circle37"
+       style="fill:#4db7bb" /><polygon
+       points="45.412,81.18 49.307,81.18 49.307,77.397 54.701,82.743 49.331,88.113 49.331,84.43 45.412,84.406 "
+       id="polygon39"
+       style="fill:#006468" /></g><g
+     id="g41"
+     transform="translate(-0.54399872,0)"><rect
+       x="105.544"
+       y="6.1090002"
+       width="21"
+       height="21"
+       id="rect43"
+       style="fill:#ffcc00" /><polygon
+       points="114.44,19.083 114.44,15.116 110.586,15.116 116.032,9.621 121.502,15.091 117.751,15.091 117.726,19.083 "
+       id="polygon45"
+       style="fill:#655100" /><rect
+       x="110.511"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect47"
+       style="fill:#655100" /><rect
+       x="112.518"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect49"
+       style="fill:#655100" /><rect
+       x="114.517"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect51"
+       style="fill:#655100" /><rect
+       x="116.525"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect53"
+       style="fill:#655100" /><rect
+       x="118.524"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect55"
+       style="fill:#655100" /><rect
+       x="120.531"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect57"
+       style="fill:#655100" /></g><g
+     id="g59"
+     transform="translate(-0.68600464,0)"><rect
+       x="138.686"
+       y="6.1090002"
+       width="21"
+       height="21"
+       id="rect61"
+       style="fill:#ffcc00" /><polygon
+       points="150.79,9.621 150.79,13.588 154.644,13.588 149.198,19.083 143.728,13.612 147.479,13.613 147.504,9.621 "
+       id="polygon63"
+       style="fill:#655100" /><rect
+       x="143.65199"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect65"
+       style="fill:#655100" /><rect
+       x="145.66"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect67"
+       style="fill:#655100" /><rect
+       x="147.659"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect69"
+       style="fill:#655100" /><rect
+       x="149.666"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect71"
+       style="fill:#655100" /><rect
+       x="151.666"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect73"
+       style="fill:#655100" /><rect
+       x="153.673"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect75"
+       style="fill:#655100" /></g><g
+     id="g77"
+     transform="translate(-0.54399872,0)"><rect
+       x="105.544"
+       y="38.965"
+       width="21"
+       height="21"
+       id="rect79"
+       style="fill:#ffffff" /><polygon
+       points="114.44,51.939 114.44,47.971 110.586,47.971 116.032,42.476 121.502,47.947 117.751,47.947 117.726,51.939 "
+       id="polygon81"
+       style="fill:#006468" /><rect
+       x="110.511"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect83"
+       style="fill:#006468" /><rect
+       x="112.518"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect85"
+       style="fill:#006468" /><rect
+       x="114.517"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect87"
+       style="fill:#006468" /><rect
+       x="116.525"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect89"
+       style="fill:#006468" /><rect
+       x="118.524"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect91"
+       style="fill:#006468" /><rect
+       x="120.531"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect93"
+       style="fill:#006468" /></g><g
+     id="g95"
+     transform="translate(-0.68600464,0)"><rect
+       x="138.686"
+       y="38.965"
+       width="21"
+       height="21"
+       id="rect97"
+       style="fill:#ffffff" /><polygon
+       points="150.79,42.476 150.79,46.444 154.644,46.444 149.198,51.939 143.728,46.468 147.479,46.468 147.504,42.477 "
+       id="polygon99"
+       style="fill:#006468" /><rect
+       x="143.65199"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect101"
+       style="fill:#006468" /><rect
+       x="145.66"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect103"
+       style="fill:#006468" /><rect
+       x="147.659"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect105"
+       style="fill:#006468" /><rect
+       x="149.666"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect107"
+       style="fill:#006468" /><rect
+       x="151.666"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect109"
+       style="fill:#006468" /><rect
+       x="153.673"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect111"
+       style="fill:#006468" /></g><g
+     id="g113"
+     transform="translate(-0.54399872,0)"><rect
+       x="105.544"
+       y="71.976997"
+       width="21"
+       height="21"
+       id="rect115"
+       style="fill:#4db7bb" /><polygon
+       points="114.44,84.95 114.44,80.983 110.586,80.983 116.032,75.488 121.502,80.959 117.751,80.958 117.726,84.95 "
+       id="polygon117"
+       style="fill:#006468" /><rect
+       x="110.511"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect119"
+       style="fill:#006468" /><rect
+       x="112.518"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect121"
+       style="fill:#006468" /><rect
+       x="114.517"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect123"
+       style="fill:#006468" /><rect
+       x="116.525"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect125"
+       style="fill:#006468" /><rect
+       x="118.524"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect127"
+       style="fill:#006468" /><rect
+       x="120.531"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect129"
+       style="fill:#006468" /></g><g
+     id="g131"
+     transform="translate(-0.68600464,0)"><rect
+       x="138.686"
+       y="71.976997"
+       width="21"
+       height="21"
+       id="rect133"
+       style="fill:#4db7bb" /><polygon
+       points="150.79,75.488 150.79,79.455 154.644,79.455 149.198,84.95 143.728,79.48 147.479,79.48 147.504,75.488 "
+       id="polygon135"
+       style="fill:#006468" /><rect
+       x="143.65199"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect137"
+       style="fill:#006468" /><rect
+       x="145.66"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect139"
+       style="fill:#006468" /><rect
+       x="147.659"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect141"
+       style="fill:#006468" /><rect
+       x="149.666"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect143"
+       style="fill:#006468" /><rect
+       x="151.666"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect145"
+       style="fill:#006468" /><rect
+       x="153.673"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect147"
+       style="fill:#006468" /></g><g
+     id="g149"
+     transform="translate(-0.40299988,0)"><path
+       d="M 87.445,22.097"
+       id="path151"
+       inkscape:connector-curvature="0"
+       style="fill:#655100" /><rect
+       x="72.403"
+       y="6.1090002"
+       width="21"
+       height="21"
+       id="rect153"
+       style="fill:#ffcc00" /><polygon
+       points="83.44,10.094 84.441,10.094 88.421,14.079 88.421,15.057 87.445,15.057 83.44,15.057 "
+       id="polygon155"
+       style="fill:#655100" /><polygon
+       points="78.404,11.093 78.404,22.097 87.445,22.097 87.445,14.87 88.421,14.87 88.421,23.134 77.399,23.134 77.399,10.094 83.562,10.094 83.568,11.093 "
+       id="polygon157"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="12.111"
+       width="0.995"
+       height="0.99599999"
+       id="rect159"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="12.111"
+       width="0.995"
+       height="0.99599999"
+       id="rect161"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="14.103"
+       width="0.995"
+       height="0.99599999"
+       id="rect163"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="14.103"
+       width="0.995"
+       height="0.99599999"
+       id="rect165"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="16.115999"
+       width="0.995"
+       height="0.99599999"
+       id="rect167"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="16.115999"
+       width="0.995"
+       height="0.99599999"
+       id="rect169"
+       style="fill:#655100" /><rect
+       x="83.403"
+       y="16.115999"
+       width="0.995"
+       height="0.99599999"
+       id="rect171"
+       style="fill:#655100" /><rect
+       x="85.400002"
+       y="16.115999"
+       width="0.995"
+       height="0.99599999"
+       id="rect173"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="18.118"
+       width="0.995"
+       height="0.99599999"
+       id="rect175"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="18.118"
+       width="0.995"
+       height="0.99599999"
+       id="rect177"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="20.132"
+       width="0.995"
+       height="0.99599999"
+       id="rect179"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="20.132"
+       width="0.995"
+       height="0.99599999"
+       id="rect181"
+       style="fill:#655100" /><rect
+       x="83.403"
+       y="18.118"
+       width="0.995"
+       height="0.99599999"
+       id="rect183"
+       style="fill:#655100" /><rect
+       x="85.400002"
+       y="18.118"
+       width="0.995"
+       height="0.99599999"
+       id="rect185"
+       style="fill:#655100" /><rect
+       x="83.403"
+       y="20.132"
+       width="0.995"
+       height="0.99599999"
+       id="rect187"
+       style="fill:#655100" /><rect
+       x="85.400002"
+       y="20.132"
+       width="0.995"
+       height="0.99599999"
+       id="rect189"
+       style="fill:#655100" /></g><g
+     id="g191"
+     transform="translate(-0.40299988,0)"><path
+       d="M 87.445,54.953"
+       id="path193"
+       inkscape:connector-curvature="0"
+       style="fill:#006468" /><rect
+       x="72.403"
+       y="38.965"
+       width="21"
+       height="21"
+       id="rect195"
+       style="fill:#ffffff" /><polygon
+       points="83.44,42.95 84.441,42.95 88.421,46.935 88.421,47.912 87.445,47.912 83.44,47.912 "
+       id="polygon197"
+       style="fill:#006468" /><polygon
+       points="78.404,43.949 78.404,54.953 87.445,54.953 87.445,47.726 88.421,47.726 88.421,55.99 77.399,55.99 77.399,42.95 83.586,42.95 83.599,43.951 "
+       id="polygon199"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="44.966999"
+       width="0.995"
+       height="0.99599999"
+       id="rect201"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="44.966999"
+       width="0.995"
+       height="0.99599999"
+       id="rect203"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="46.959"
+       width="0.995"
+       height="0.99599999"
+       id="rect205"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="46.959"
+       width="0.995"
+       height="0.99599999"
+       id="rect207"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="48.972"
+       width="0.995"
+       height="0.99599999"
+       id="rect209"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="48.972"
+       width="0.995"
+       height="0.99599999"
+       id="rect211"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="48.972"
+       width="0.995"
+       height="0.99599999"
+       id="rect213"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="48.972"
+       width="0.995"
+       height="0.99599999"
+       id="rect215"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="50.973999"
+       width="0.995"
+       height="0.99599999"
+       id="rect217"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="50.973999"
+       width="0.995"
+       height="0.99599999"
+       id="rect219"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="52.987"
+       width="0.995"
+       height="0.99599999"
+       id="rect221"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="52.987"
+       width="0.995"
+       height="0.99599999"
+       id="rect223"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="50.973999"
+       width="0.995"
+       height="0.99599999"
+       id="rect225"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="50.973999"
+       width="0.995"
+       height="0.99599999"
+       id="rect227"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="52.987"
+       width="0.995"
+       height="0.99599999"
+       id="rect229"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="52.987"
+       width="0.995"
+       height="0.99599999"
+       id="rect231"
+       style="fill:#006468" /></g><g
+     id="g233"
+     transform="translate(-0.40299988,0)"><path
+       d="M 87.445,87.965"
+       id="path235"
+       inkscape:connector-curvature="0"
+       style="fill:#006468" /><rect
+       x="72.403"
+       y="71.976997"
+       width="21"
+       height="21"
+       id="rect237"
+       style="fill:#4db7bb" /><polygon
+       points="83.44,75.961 84.441,75.961 88.421,79.946 88.421,80.924 87.445,80.924 83.44,80.924 "
+       id="polygon239"
+       style="fill:#006468" /><polygon
+       points="78.404,76.961 78.404,87.965 87.445,87.965 87.445,80.738 88.421,80.738 88.421,89.002 77.399,89.002 77.399,75.961 83.586,75.961 83.599,76.963 "
+       id="polygon241"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="77.977997"
+       width="0.995"
+       height="0.99599999"
+       id="rect243"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="77.977997"
+       width="0.995"
+       height="0.99599999"
+       id="rect245"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="79.970001"
+       width="0.995"
+       height="0.99599999"
+       id="rect247"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="79.970001"
+       width="0.995"
+       height="0.99599999"
+       id="rect249"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="81.984001"
+       width="0.995"
+       height="0.99599999"
+       id="rect251"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="81.984001"
+       width="0.995"
+       height="0.99599999"
+       id="rect253"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="81.984001"
+       width="0.995"
+       height="0.99599999"
+       id="rect255"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="81.984001"
+       width="0.995"
+       height="0.99599999"
+       id="rect257"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="83.986"
+       width="0.995"
+       height="0.99599999"
+       id="rect259"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="83.986"
+       width="0.995"
+       height="0.99599999"
+       id="rect261"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="85.999001"
+       width="0.995"
+       height="0.99599999"
+       id="rect263"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="85.999001"
+       width="0.995"
+       height="0.99599999"
+       id="rect265"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="83.986"
+       width="0.995"
+       height="0.99599999"
+       id="rect267"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="83.986"
+       width="0.995"
+       height="0.99599999"
+       id="rect269"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="85.999001"
+       width="0.995"
+       height="0.99599999"
+       id="rect271"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="85.999001"
+       width="0.995"
+       height="0.99599999"
+       id="rect273"
+       style="fill:#006468" /></g><g
+     id="g275"
+     transform="translate(-0.82800293,0)"><rect
+       x="171.828"
+       y="6.1090002"
+       width="21"
+       height="21"
+       id="rect277"
+       style="fill:#ffcc00" /><rect
+       x="187.819"
+       y="16.101"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect279"
+       style="fill:#655100" /><rect
+       x="189.825"
+       y="16.101"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect281"
+       style="fill:#655100" /><rect
+       x="174.83299"
+       y="16.101"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect283"
+       style="fill:#655100" /><circle
+       stroke-miterlimit="10"
+       cx="181.80299"
+       cy="16.101"
+       r="4.0900002"
+       id="circle285"
+       style="fill:none;stroke:#655100;stroke-width:1.95439994;stroke-miterlimit:10" /><rect
+       x="175.895"
+       y="18.427999"
+       transform="matrix(0.6915,0.7224,-0.7224,0.6915,69.5827,-121.6599)"
+       width="2.6800001"
+       height="4.4229999"
+       id="rect287"
+       style="fill:#655100" /><rect
+       x="180.789"
+       y="15.103"
+       width="2.0280001"
+       height="1.9960001"
+       id="rect289"
+       style="fill:#655100" /></g><g
+     id="g291"
+     transform="translate(-0.82800293,0)"><rect
+       x="171.828"
+       y="38.965"
+       width="21"
+       height="21"
+       id="rect293"
+       style="fill:#ffffff" /><rect
+       x="187.819"
+       y="48.957001"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect295"
+       style="fill:#006468" /><rect
+       x="189.825"
+       y="48.957001"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect297"
+       style="fill:#006468" /><rect
+       x="174.83299"
+       y="48.957001"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect299"
+       style="fill:#006468" /><circle
+       stroke-miterlimit="10"
+       cx="181.80299"
+       cy="48.957001"
+       r="4.0900002"
+       id="circle301"
+       style="fill:none;stroke:#006468;stroke-width:1.95439994;stroke-miterlimit:10" /><rect
+       x="175.895"
+       y="51.284"
+       transform="matrix(0.6915,0.7224,-0.7224,0.6915,93.3163,-111.5246)"
+       width="2.6800001"
+       height="4.4229999"
+       id="rect303"
+       style="fill:#006468" /><rect
+       x="180.789"
+       y="47.959"
+       width="2.0280001"
+       height="1.9960001"
+       id="rect305"
+       style="fill:#006468" /></g><g
+     id="g307"
+     transform="translate(-0.82800293,0)"><rect
+       x="171.828"
+       y="71.976997"
+       width="21"
+       height="21"
+       id="rect309"
+       style="fill:#4db7bb" /><rect
+       x="187.819"
+       y="81.969002"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect311"
+       style="fill:#006468" /><rect
+       x="189.825"
+       y="81.969002"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect313"
+       style="fill:#006468" /><rect
+       x="174.83299"
+       y="81.969002"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect315"
+       style="fill:#006468" /><circle
+       stroke-miterlimit="10"
+       cx="181.80299"
+       cy="81.969002"
+       r="4.0900002"
+       id="circle317"
+       style="fill:none;stroke:#006468;stroke-width:1.95439994;stroke-miterlimit:10" /><rect
+       x="175.895"
+       y="84.295998"
+       transform="matrix(0.6915,0.7224,-0.7224,0.6915,117.1625,-101.3412)"
+       width="2.6800001"
+       height="4.4229999"
+       id="rect319"
+       style="fill:#006468" /><rect
+       x="180.789"
+       y="80.970001"
+       width="2.0280001"
+       height="1.9960001"
+       id="rect321"
+       style="fill:#006468" /></g></svg>
\ No newline at end of file
diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css
index c1d8501c..151af68c 100644
--- a/arduino-ide-extension/src/browser/style/main.css
+++ b/arduino-ide-extension/src/browser/style/main.css
@@ -9,3 +9,37 @@
 #outputView {
     color: var(--theia-ui-font-color3);
 }
+
+#arduino-verify.arduino-tool-icon {
+    background: url(../icons/buttons.svg);
+    background-size: 800%;
+    background-position-x: 141px;
+    background-position-y: 21px;
+}
+
+#arduino-upload.arduino-tool-icon {
+    background: url(../icons/buttons.svg);
+    background-size: 800%;
+    background-position-x: 117px;
+    background-position-y: 21px;
+}
+
+#arduino-verify.arduino-tool-icon:hover {
+    background-position-y: 45px;
+}
+
+#arduino-upload.arduino-tool-icon:hover {
+    background-position-y: 45px;
+}
+
+.p-TabBar-toolbar .item.arduino-tool-item {
+    margin-left: 3px;
+}
+
+.arduino-tool-item.item.connected-boards {
+    opacity: 1;
+}
+
+.arduino-tool-item.item.connected-boards  select {
+    background: var(--theia-layout-color0);
+}
\ No newline at end of file
diff --git a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts
index 3b3a0332..8b776bdf 100644
--- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts
+++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts
@@ -1,7 +1,9 @@
 import { FrontendApplicationContribution, FrontendApplication } from "@theia/core/lib/browser";
 import { injectable, inject } from "inversify";
 import { ArduinoToolbar } from "./arduino-toolbar";
-import { TabBarToolbarRegistry, TabBarToolbarFactory, TabBarToolbar } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
+import { TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
+import { CommandRegistry } from "@theia/core/lib/common/command";
+import { LabelParser } from "@theia/core/lib/browser/label-parser";
 
 @injectable()
 export class ArduinoToolbarContribution implements FrontendApplicationContribution {
@@ -10,8 +12,9 @@ export class ArduinoToolbarContribution implements FrontendApplicationContributi
 
     constructor(
         @inject(TabBarToolbarRegistry) protected tabBarToolBarRegistry: TabBarToolbarRegistry,
-        @inject(TabBarToolbarFactory) protected tabBarToolBarFactory: () => TabBarToolbar) {
-        this.toolbarWidget = new ArduinoToolbar(this.tabBarToolBarRegistry, this.tabBarToolBarFactory);
+        @inject(CommandRegistry) protected commandRegistry: CommandRegistry,
+        @inject(LabelParser) protected labelParser: LabelParser) {
+        this.toolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser);
     }
 
     onStart(app: FrontendApplication) {
diff --git a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
index d23f886f..e0ccef22 100644
--- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
+++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
@@ -1,54 +1,39 @@
-import { Widget } from '@phosphor/widgets';
-import { Message } from '@phosphor/messaging';
-import { TabBarToolbar, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import * as React from 'react';
+import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { LabelParser } from '@theia/core/lib/browser/label-parser';
+import { CommandRegistry } from '@theia/core/lib/common/command';
 
-export class ArduinoToolbar extends Widget {
+export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item';
 
-    protected toolbar: TabBarToolbar | undefined;
+export class ArduinoToolbar extends TabBarToolbar {
 
     constructor(
         protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
-        protected readonly tabBarToolbarFactory: () => TabBarToolbar
+        commands: CommandRegistry, labelParser: LabelParser
     ) {
-        super();
+        super(commands, labelParser);
         this.id = 'arduino-toolbar';
         this.init();
-        this.tabBarToolbarRegistry.onDidChange(() => this.update());
-    }
-
-    protected onAfterAttach(msg: Message): void {
-        if (this.toolbar) {
-            if (this.toolbar.isAttached) {
-                Widget.detach(this.toolbar);
-            }
-            Widget.attach(this.toolbar, this.node);
-        }
-        super.onAfterAttach(msg);
-    }
-
-    protected onBeforeDetach(msg: Message): void {
-        if (this.toolbar && this.toolbar.isAttached) {
-            Widget.detach(this.toolbar);
-        }
-        super.onBeforeDetach(msg);
-    }
-
-    protected onUpdateRequest(msg: Message): void {
-        super.onUpdateRequest(msg);
-        this.updateToolbar();
+        this.tabBarToolbarRegistry.onDidChange(() => this.updateToolbar());
     }
 
     protected updateToolbar(): void {
-        if (!this.toolbar) {
-            return;
-        }
         const items = this ? this.tabBarToolbarRegistry.visibleItems(this) : [];
-        this.toolbar.updateItems(items, this);
+        this.updateItems(items, this);
     }
 
     protected init(): void {
         this.node.classList.add('theia-arduino-toolbar');
-        this.toolbar = this.tabBarToolbarFactory();
         this.update();
     }
+
+    protected renderItem(item: TabBarToolbarItem): React.ReactNode {
+        let innerText = '';
+        const command = this.commands.getCommand(item.command);
+        return <div key={item.id}
+            className={`${ARDUINO_TOOLBAR_ITEM_CLASS} 
+        ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}${command && this.commandIsEnabled(command.id) ? ' enabled' : ''}`} >
+            <div id={item.id} className='arduino-tool-icon' onClick={this.executeCommand} title={item.tooltip}>{innerText}</div>
+        </div>;
+    }
 }