From 836131aa9dc3d4dd584d5293e6c51e05592ea15b Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 20 Feb 2020 08:20:36 -0800
Subject: [PATCH 1/5] Add tooltip for sensors

---
 .../components/toolbar/SensorModalUtils.tsx   |  2 +-
 src/view/components/toolbar/ToolBar.tsx       | 43 ++++++++++++-------
 src/view/translations/en.json                 |  2 +-
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx
index 51c274b8c..052f6bee6 100644
--- a/src/view/components/toolbar/SensorModalUtils.tsx
+++ b/src/view/components/toolbar/SensorModalUtils.tsx
@@ -53,7 +53,7 @@ export const CPX_TOOLBAR_ICON_ID = {
 export const MICROBIT_TOOLBAR_ID = {
     TEMPERATURE: "toolbar-temperature-sensor",
     LIGHT: "toolbar-light-sensor",
-    ACCELEROMETER: "toolbar-accelerometer",
+    ACCELEROMETER: "toolbar-accelerometer-sensor",
     LEDS: "toolbar-microbit-led",
     PUSH_BUTTON: "toolbar-microbit-button",
 };
diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index 88b064261..ec0799d39 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -13,6 +13,8 @@ import {
     IModalContent,
     LABEL_TO_MODAL_CONTENT,
 } from "./SensorModalUtils";
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+
 
 interface IToolbarState {
     currentOpenedId: string;
@@ -26,6 +28,7 @@ interface IProps extends WrappedComponentProps {
     }>;
 }
 
+
 class ToolBar extends React.Component<IProps, IToolbarState, any> {
     private readonly TOOLBAR_BUTTON_WIDTH: number = 32;
 
@@ -46,22 +49,30 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
                         {buttonList.map(
                             (currrentButton: any, index: number) => {
                                 return (
-                                    <Button
-                                        key={index}
-                                        label={currrentButton.label}
-                                        width={this.TOOLBAR_BUTTON_WIDTH}
-                                        onClick={(
-                                            e: React.MouseEvent<HTMLElement>
-                                        ) => {
-                                            this.handleOnClick(
-                                                e,
-                                                currrentButton.label
-                                            );
-                                        }}
-                                        image={currrentButton.image}
-                                        styleLabel="toolbar"
-                                        focusable={true}
-                                    />
+                                    <TooltipHost tooltipProps={
+                                        {
+                                            onRenderContent: () => (
+                                                <FormattedMessage id={`${currrentButton.label}.title`} />
+
+                                            )
+                                        }
+                                    } key={index}>  <Button
+                                            key={index}
+                                            label={currrentButton.label}
+                                            width={this.TOOLBAR_BUTTON_WIDTH}
+                                            onClick={(
+                                                e: React.MouseEvent<HTMLElement>
+                                            ) => {
+                                                this.handleOnClick(
+                                                    e,
+                                                    currrentButton.label
+                                                );
+                                            }}
+                                            image={currrentButton.image}
+                                            styleLabel="toolbar"
+                                            focusable={true}
+                                        /></TooltipHost>
+
                                 );
                             }
                         )}
diff --git a/src/view/translations/en.json b/src/view/translations/en.json
index ecd96d80f..03ba3349c 100644
--- a/src/view/translations/en.json
+++ b/src/view/translations/en.json
@@ -42,4 +42,4 @@
     "toolbar-microbit-button.title": "Buttons",
     "toolbar-microbit-button.description": "There are two buttons on the front of the micro:bit (labelled A and B). The third button is to trigger both A and B buttons. You can detect when these buttons are pressed, allowing you to trigger code on the device.",
     "toolbar-microbit-button.tryItDescription": "Click them with your mouse. Pressing “A” “B” on your keyboard will be implemented soon!"
-}
+}
\ No newline at end of file

From 8dcdca9e6b56357f133e48a75b5148c4d4ee953c Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 20 Feb 2020 08:29:16 -0800
Subject: [PATCH 2/5] Lint changes

---
 src/view/components/toolbar/ToolBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index ec0799d39..d08bb3a24 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import * as React from "react";
 import {
     FormattedMessage,
@@ -13,7 +14,6 @@ import {
     IModalContent,
     LABEL_TO_MODAL_CONTENT,
 } from "./SensorModalUtils";
-import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 
 
 interface IToolbarState {

From 7cde2cb77d637dc73303c4efac846b196e127e97 Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 20 Feb 2020 09:24:01 -0800
Subject: [PATCH 3/5] Update snapshot tests for the tooltip

---
 src/view/__snapshots__/App.spec.tsx.snap      | 1232 +++++++++--------
 .../cpx/__snapshots__/Cpx.spec.tsx.snap       | 1232 +++++++++--------
 src/view/components/toolbar/ToolBar.tsx       |   26 +-
 .../device/__snapshots__/Device.spec.tsx.snap |  528 +++----
 4 files changed, 1645 insertions(+), 1373 deletions(-)

diff --git a/src/view/__snapshots__/App.spec.tsx.snap b/src/view/__snapshots__/App.spec.tsx.snap
index 22047558d..b995da821 100644
--- a/src/view/__snapshots__/App.spec.tsx.snap
+++ b/src/view/__snapshots__/App.spec.tsx.snap
@@ -3961,657 +3961,767 @@ exports[`App component  should render correctly 1`] = `
           <div
             className="toolbar-icon"
           >
-            <button
-              aria-label="toolbar slider-switch"
-              className="toolbar-button button"
-              id="toolbar-slider-switch-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 20 16"
-                width="20px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  Switch
-                </title>
-                <desc>
-                  Created with Sketch.
-                </desc>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="slider_switch"
-                  stroke="none"
-                  stroke-width="1"
-                >
-                  <g
-                    className="button-icon"
-                    id="Group-10"
-                    transform="translate(0.000000, 3.000000)"
-                  >
-                    <g
-                      id="Group-4"
-                    >
-                      <path
-                        d="M5,0 L15,0 C17.7614237,-5.07265313e-16 20,2.23857625 20,5 C20,7.76142375 17.7614237,10 15,10 L5,10 C2.23857625,10 3.38176876e-16,7.76142375 0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z M5,1.2 C2.90131795,1.2 1.2,2.90131795 1.2,5 C1.2,7.09868205 2.90131795,8.8 5,8.8 L15,8.8 C17.098682,8.8 18.8,7.09868205 18.8,5 C18.8,2.90131795 17.098682,1.2 15,1.2 L5,1.2 Z"
-                        fill-rule="nonzero"
-                        id="Rectangle"
-                      />
-                      <circle
-                        cx="5"
-                        cy="5"
-                        id="Oval"
-                        r="2.5"
-                      />
-                    </g>
-                  </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar push-button"
-              className="toolbar-button button"
-              id="toolbar-push-button-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
+               
+              <button
+                aria-label="toolbar slider-switch"
+                className="toolbar-button button"
+                id="toolbar-slider-switch-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
                 }
-              }
-              tabIndex={0}
-            >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  Push Button
-                </title>
-                <desc>
-                  Created with Sketch.
-                </desc>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="push_btn"
-                  stroke="none"
-                  stroke-width="1"
+                tabIndex={0}
+              >
+                <svg
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 20 16"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    Switch
+                  </title>
+                  <desc>
+                    Created with Sketch.
+                  </desc>
                   <g
-                    className="button-icon"
-                    id="Group-10"
-                    transform="translate(1.000000, 1.000000)"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="slider_switch"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="Group-8"
+                      className="button-icon"
+                      id="Group-10"
+                      transform="translate(0.000000, 3.000000)"
                     >
-                      <path
-                        d="M2,0 L12,0 C13.1045695,-2.02906125e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 1.3527075e-16,13.1045695 0,12 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M2,1.2 C1.5581722,1.2 1.2,1.5581722 1.2,2 L1.2,12 C1.2,12.4418278 1.5581722,12.8 2,12.8 L12,12.8 C12.4418278,12.8 12.8,12.4418278 12.8,12 L12.8,2 C12.8,1.5581722 12.4418278,1.2 12,1.2 L2,1.2 Z"
-                        fill-rule="nonzero"
-                        id="Rectangle"
-                      />
-                      <circle
-                        cx="7"
-                        cy="7"
-                        id="Oval"
-                        r="3.5"
-                      />
+                      <g
+                        id="Group-4"
+                      >
+                        <path
+                          d="M5,0 L15,0 C17.7614237,-5.07265313e-16 20,2.23857625 20,5 C20,7.76142375 17.7614237,10 15,10 L5,10 C2.23857625,10 3.38176876e-16,7.76142375 0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z M5,1.2 C2.90131795,1.2 1.2,2.90131795 1.2,5 C1.2,7.09868205 2.90131795,8.8 5,8.8 L15,8.8 C17.098682,8.8 18.8,7.09868205 18.8,5 C18.8,2.90131795 17.098682,1.2 15,1.2 L5,1.2 Z"
+                          fill-rule="nonzero"
+                          id="Rectangle"
+                        />
+                        <circle
+                          cx="5"
+                          cy="5"
+                          id="Oval"
+                          r="2.5"
+                        />
+                      </g>
                     </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar red-led"
-              className="toolbar-button button"
-              id="toolbar-red-led-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  Red LED
-                </title>
-                <desc>
-                  Created with Sketch.
-                </desc>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="red_LED"
-                  stroke="none"
-                  stroke-width="1"
+               
+              <button
+                aria-label="toolbar push-button"
+                className="toolbar-button button"
+                id="toolbar-push-button-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
+              >
+                <svg
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 16 16"
+                  width="16px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    Push Button
+                  </title>
+                  <desc>
+                    Created with Sketch.
+                  </desc>
                   <g
-                    className="button-icon"
-                    fill-rule="nonzero"
-                    id="Group-10"
-                    transform="translate(3.000000, 0.000000)"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="push_btn"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="red_LED"
+                      className="button-icon"
+                      id="Group-10"
+                      transform="translate(1.000000, 1.000000)"
                     >
-                      <path
-                        d="M9.66,8.22 L9.66,9.34 C9.67207548,9.48313939 9.61659012,9.6237023 9.51,9.72 C9.40841613,9.82599772 9.26675788,9.88411393 9.12,9.88 L8.27,9.88 L8.45,10.08 C8.66182619,10.3044565 8.77987709,10.6013724 8.78,10.91 L8.78,15.45 C8.74261072,15.7279186 8.50542238,15.9353341 8.225,15.9353341 C7.94457762,15.9353341 7.70738928,15.7279186 7.67,15.45 L7.67,10.91 C7.68004066,10.8842785 7.68004066,10.8557215 7.67,10.83 L6.79,9.88 L3.87,9.88 L3,10.83 C2.98995934,10.8557215 2.98995934,10.8842785 3,10.91 L3,15.45 C3,15.7537566 2.75375661,16 2.45,16 C2.14624339,16 1.9,15.7537566 1.9,15.45 L1.9,10.91 C1.89639548,10.6025545 2.01094012,10.3054544 2.22,10.08 L2.4,9.88 L1.54,9.88 C1.39203102,9.89122505 1.24745182,9.83191051 1.15,9.72 C1.04659498,9.61738925 0.992005545,9.4754567 1,9.33 L1,8.22 C0.995083542,8.18015107 0.995083542,8.13984893 1,8.1 L9.64,8.1 C9.65162558,8.1390139 9.65834402,8.1793245 9.66,8.22 Z"
-                        id="Path"
-                      />
-                      <path
-                        d="M9.11,3.81 L9.1100498,6.9 L1.56,6.9 L1.56,3.81 C1.5493174,2.80322131 1.94179172,1.83399894 2.64996503,1.11831186 C3.35813834,0.402624772 4.32316464,-5.66732473e-05 5.33,-4.4408921e-16 C6.33766756,0.00269204012 7.30113489,0.414060117 8,1.14 C8.71491032,1.84390238 9.11518744,2.80673114 9.11,3.81 Z"
-                        id="Path"
-                      />
+                      <g
+                        id="Group-8"
+                      >
+                        <path
+                          d="M2,0 L12,0 C13.1045695,-2.02906125e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 1.3527075e-16,13.1045695 0,12 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M2,1.2 C1.5581722,1.2 1.2,1.5581722 1.2,2 L1.2,12 C1.2,12.4418278 1.5581722,12.8 2,12.8 L12,12.8 C12.4418278,12.8 12.8,12.4418278 12.8,12 L12.8,2 C12.8,1.5581722 12.4418278,1.2 12,1.2 L2,1.2 Z"
+                          fill-rule="nonzero"
+                          id="Rectangle"
+                        />
+                        <circle
+                          cx="7"
+                          cy="7"
+                          id="Oval"
+                          r="3.5"
+                        />
+                      </g>
                     </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar sound-sensor"
-              className="toolbar-button button"
-              id="toolbar-sound-sensor-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                height="18px"
-                version="1.1"
-                viewBox="0 0 16 18"
-                width="16px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  Sound Sensor
-                </title>
-                <desc>
-                  Created with Sketch.
-                </desc>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="sound_sensor"
-                  stroke="none"
-                  stroke-width="1"
+               
+              <button
+                aria-label="toolbar red-led"
+                className="toolbar-button button"
+                id="toolbar-red-led-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
+              >
+                <svg
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 16 16"
+                  width="16px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    Red LED
+                  </title>
+                  <desc>
+                    Created with Sketch.
+                  </desc>
                   <g
-                    className="button-icon"
-                    id="Group-11"
-                    transform="translate(2.000000, 0.000000)"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="red_LED"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="sound_sensor"
+                      className="button-icon"
+                      fill-rule="nonzero"
+                      id="Group-10"
+                      transform="translate(3.000000, 0.000000)"
                     >
                       <g
-                        id="Group-10"
-                        transform="translate(0.699999, 0.500000)"
+                        id="red_LED"
                       >
                         <path
-                          d="M4.65016298,15.17144 L4.65016298,13.7922942 C3.41527114,13.6318998 2.27078933,13.0204521 1.42065147,12.0614597 C0.509552396,11.0338061 0.00398839588,9.68310861 0.00476157979,8.28145 L0.00834533542,5.98768213 C-0.00652451305,5.89234444 -0.00148383948,5.79482389 0.0231545884,5.70166373 C0.0479493684,5.60784878 0.0920825187,5.52041375 0.152773487,5.44534368 C0.214260428,5.36930716 0.291307036,5.30778738 0.378750119,5.26528351 C0.467116009,5.22234964 0.563755426,5.2 0.661734024,5.2 C0.759712621,5.2 0.856352039,5.22234964 0.944763779,5.26530579 C1.03216101,5.30778738 1.10920762,5.36930716 1.17071652,5.44537084 C1.23138553,5.52041375 1.27551868,5.60784878 1.30030061,5.70161513 C1.32495189,5.79482389 1.32999256,5.89234444 1.31870647,5.94145 L1.31870647,8.28145 C1.31870647,9.39842656 1.7407743,10.4688536 2.49065412,11.2565939 C3.23776665,12.0414273 4.24899942,12.48144 5.30237579,12.48144 C6.35576276,12.48144 7.36702974,12.0414195 8.1141248,11.2565952 C8.86399397,10.4688567 9.28605464,9.39842995 9.28605464,8.28145 L9.28605464,5.94145 C9.28605464,5.7641305 9.35340694,5.59327417 9.47477135,5.46583435 C9.5988672,5.33554463 9.76913931,5.26145 9.94778672,5.26145 L9.95606024,5.26156411 C10.1315221,5.26640491 10.2972241,5.34259908 10.4172766,5.47214571 C10.534967,5.59895982 10.5999995,5.76713855 10.5999995,5.94145 L10.5999995,8.28125635 C10.6009032,9.6813488 10.0967463,11.030573 9.1877971,12.05803 C8.3395495,13.0167651 7.19732431,13.6291336 5.96410787,13.7917484 L5.96410787,15.1721304 L7.56185834,15.1758074 C7.71875063,15.202875 7.86029753,15.2869159 7.96145211,15.4119207 C8.06030087,15.5342853 8.11404343,15.6880984 8.11404343,15.84644 C8.11404343,16.0047816 8.06030087,16.1585947 7.96129407,16.2811548 C7.86029753,16.4059641 7.71875063,16.490005 7.51085483,16.52144 L3.04293061,16.5170774 C2.8859552,16.4900107 2.74438664,16.4059406 2.64341658,16.2810571 C2.54447382,16.1586811 2.49066056,16.0048291 2.49066056,15.84644 C2.49066056,15.6880509 2.54447382,15.5341989 2.64341658,15.4118229 C2.74438664,15.2869394 2.8859552,15.2028693 3.09390627,15.17144 L4.65016298,15.17144 Z"
-                          fill-rule="nonzero"
-                          id="Shape"
+                          d="M9.66,8.22 L9.66,9.34 C9.67207548,9.48313939 9.61659012,9.6237023 9.51,9.72 C9.40841613,9.82599772 9.26675788,9.88411393 9.12,9.88 L8.27,9.88 L8.45,10.08 C8.66182619,10.3044565 8.77987709,10.6013724 8.78,10.91 L8.78,15.45 C8.74261072,15.7279186 8.50542238,15.9353341 8.225,15.9353341 C7.94457762,15.9353341 7.70738928,15.7279186 7.67,15.45 L7.67,10.91 C7.68004066,10.8842785 7.68004066,10.8557215 7.67,10.83 L6.79,9.88 L3.87,9.88 L3,10.83 C2.98995934,10.8557215 2.98995934,10.8842785 3,10.91 L3,15.45 C3,15.7537566 2.75375661,16 2.45,16 C2.14624339,16 1.9,15.7537566 1.9,15.45 L1.9,10.91 C1.89639548,10.6025545 2.01094012,10.3054544 2.22,10.08 L2.4,9.88 L1.54,9.88 C1.39203102,9.89122505 1.24745182,9.83191051 1.15,9.72 C1.04659498,9.61738925 0.992005545,9.4754567 1,9.33 L1,8.22 C0.995083542,8.18015107 0.995083542,8.13984893 1,8.1 L9.64,8.1 C9.65162558,8.1390139 9.65834402,8.1793245 9.66,8.22 Z"
+                          id="Path"
                         />
-                        <rect
-                          className="button-rectangle"
-                          height="9.3"
-                          id="Rectangle-2"
-                          rx="1.9"
-                          stroke-width="1.2"
-                          width="3.8"
-                          x="3.40000068"
-                          y="1.1"
+                        <path
+                          d="M9.11,3.81 L9.1100498,6.9 L1.56,6.9 L1.56,3.81 C1.5493174,2.80322131 1.94179172,1.83399894 2.64996503,1.11831186 C3.35813834,0.402624772 4.32316464,-5.66732473e-05 5.33,-4.4408921e-16 C6.33766756,0.00269204012 7.30113489,0.414060117 8,1.14 C8.71491032,1.84390238 9.11518744,2.80673114 9.11,3.81 Z"
+                          id="Path"
                         />
                       </g>
                     </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar temperature-sensor"
-              className="toolbar-button button"
-              id="toolbar-temperature-sensor-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  Temperature Sensor
-                </title>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="temperature"
-                  stroke="none"
-                  stroke-width="1"
+               
+              <button
+                aria-label="toolbar sound-sensor"
+                className="toolbar-button button"
+                id="toolbar-sound-sensor-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
+              >
+                <svg
+                  height="18px"
+                  version="1.1"
+                  viewBox="0 0 16 18"
+                  width="16px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    Sound Sensor
+                  </title>
+                  <desc>
+                    Created with Sketch.
+                  </desc>
                   <g
-                    className="button-icon"
-                    fill-rule="nonzero"
-                    id="thermometer"
-                    transform="translate(4.000000, 0.000000)"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="sound_sensor"
+                    stroke="none"
+                    stroke-width="1"
                   >
-                    <path
-                      d="M6.66665625,9.01853125 L6.66665625,2.66665625 C6.66665625,1.19390625 5.47275,0 4,0 C2.52725,0 1.33334375,1.19390625 1.33334375,2.66665625 L1.33334375,9.0185 C0.515,9.7509375 0,10.8153438 0,12 C0,14.2091562 1.790875,16 4,16 C6.209125,16 8,14.2091562 8,12 C8,10.8153438 7.485,9.7509375 6.66665625,9.01853125 Z M4,14.6666563 C2.52725,14.6666563 1.33334375,13.47275 1.33334375,12 C1.33334375,11.2300937 1.659625,10.515875 2.2225625,10.0120312 L2.6666875,9.61453125 L2.6666875,2.66665625 C2.6666875,1.93028125 3.26365625,1.3333125 4.00003125,1.3333125 C4.73640625,1.3333125 5.333375,1.93025 5.333375,2.66665625 L5.333375,9.61453125 L5.7775,10.0120312 C6.3404375,10.515875 6.66671875,11.2300625 6.66671875,12 C6.66665625,13.47275 5.47275,14.6666563 4,14.6666563 Z"
-                      id="Shape"
-                    />
-                    <rect
-                      height="8"
-                      id="Rectangle"
-                      width="1.33334375"
-                      x="3.33334375"
-                      y="5.33334375"
-                    />
-                    <circle
-                      cx="4"
-                      cy="12"
-                      id="Oval"
-                      r="2"
-                    />
+                    <g
+                      className="button-icon"
+                      id="Group-11"
+                      transform="translate(2.000000, 0.000000)"
+                    >
+                      <g
+                        id="sound_sensor"
+                      >
+                        <g
+                          id="Group-10"
+                          transform="translate(0.699999, 0.500000)"
+                        >
+                          <path
+                            d="M4.65016298,15.17144 L4.65016298,13.7922942 C3.41527114,13.6318998 2.27078933,13.0204521 1.42065147,12.0614597 C0.509552396,11.0338061 0.00398839588,9.68310861 0.00476157979,8.28145 L0.00834533542,5.98768213 C-0.00652451305,5.89234444 -0.00148383948,5.79482389 0.0231545884,5.70166373 C0.0479493684,5.60784878 0.0920825187,5.52041375 0.152773487,5.44534368 C0.214260428,5.36930716 0.291307036,5.30778738 0.378750119,5.26528351 C0.467116009,5.22234964 0.563755426,5.2 0.661734024,5.2 C0.759712621,5.2 0.856352039,5.22234964 0.944763779,5.26530579 C1.03216101,5.30778738 1.10920762,5.36930716 1.17071652,5.44537084 C1.23138553,5.52041375 1.27551868,5.60784878 1.30030061,5.70161513 C1.32495189,5.79482389 1.32999256,5.89234444 1.31870647,5.94145 L1.31870647,8.28145 C1.31870647,9.39842656 1.7407743,10.4688536 2.49065412,11.2565939 C3.23776665,12.0414273 4.24899942,12.48144 5.30237579,12.48144 C6.35576276,12.48144 7.36702974,12.0414195 8.1141248,11.2565952 C8.86399397,10.4688567 9.28605464,9.39842995 9.28605464,8.28145 L9.28605464,5.94145 C9.28605464,5.7641305 9.35340694,5.59327417 9.47477135,5.46583435 C9.5988672,5.33554463 9.76913931,5.26145 9.94778672,5.26145 L9.95606024,5.26156411 C10.1315221,5.26640491 10.2972241,5.34259908 10.4172766,5.47214571 C10.534967,5.59895982 10.5999995,5.76713855 10.5999995,5.94145 L10.5999995,8.28125635 C10.6009032,9.6813488 10.0967463,11.030573 9.1877971,12.05803 C8.3395495,13.0167651 7.19732431,13.6291336 5.96410787,13.7917484 L5.96410787,15.1721304 L7.56185834,15.1758074 C7.71875063,15.202875 7.86029753,15.2869159 7.96145211,15.4119207 C8.06030087,15.5342853 8.11404343,15.6880984 8.11404343,15.84644 C8.11404343,16.0047816 8.06030087,16.1585947 7.96129407,16.2811548 C7.86029753,16.4059641 7.71875063,16.490005 7.51085483,16.52144 L3.04293061,16.5170774 C2.8859552,16.4900107 2.74438664,16.4059406 2.64341658,16.2810571 C2.54447382,16.1586811 2.49066056,16.0048291 2.49066056,15.84644 C2.49066056,15.6880509 2.54447382,15.5341989 2.64341658,15.4118229 C2.74438664,15.2869394 2.8859552,15.2028693 3.09390627,15.17144 L4.65016298,15.17144 Z"
+                            fill-rule="nonzero"
+                            id="Shape"
+                          />
+                          <rect
+                            className="button-rectangle"
+                            height="9.3"
+                            id="Rectangle-2"
+                            rx="1.9"
+                            stroke-width="1.2"
+                            width="3.8"
+                            x="3.40000068"
+                            y="1.1"
+                          />
+                        </g>
+                      </g>
+                    </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar light-sensor"
-              className="toolbar-button button"
-              id="toolbar-light-sensor-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                fill="none"
-                height="16px"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  Light sensor
-                </title>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="light_sensor"
-                  stroke="none"
-                  stroke-width="1"
+               
+              <button
+                aria-label="toolbar temperature-sensor"
+                className="toolbar-button button"
+                id="toolbar-temperature-sensor-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
+              >
+                <svg
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 16 16"
+                  width="16px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    Temperature Sensor
+                  </title>
                   <g
-                    className="button-icon"
-                    fill-rule="nonzero"
-                    id="Group-10"
-                    transform="translate(4.000000, 0.000000)"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="temperature"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="light-bulb"
+                      className="button-icon"
+                      fill-rule="nonzero"
+                      id="thermometer"
+                      transform="translate(4.000000, 0.000000)"
                     >
                       <path
-                        d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
+                        d="M6.66665625,9.01853125 L6.66665625,2.66665625 C6.66665625,1.19390625 5.47275,0 4,0 C2.52725,0 1.33334375,1.19390625 1.33334375,2.66665625 L1.33334375,9.0185 C0.515,9.7509375 0,10.8153438 0,12 C0,14.2091562 1.790875,16 4,16 C6.209125,16 8,14.2091562 8,12 C8,10.8153438 7.485,9.7509375 6.66665625,9.01853125 Z M4,14.6666563 C2.52725,14.6666563 1.33334375,13.47275 1.33334375,12 C1.33334375,11.2300937 1.659625,10.515875 2.2225625,10.0120312 L2.6666875,9.61453125 L2.6666875,2.66665625 C2.6666875,1.93028125 3.26365625,1.3333125 4.00003125,1.3333125 C4.73640625,1.3333125 5.333375,1.93025 5.333375,2.66665625 L5.333375,9.61453125 L5.7775,10.0120312 C6.3404375,10.515875 6.66671875,11.2300625 6.66671875,12 C6.66665625,13.47275 5.47275,14.6666563 4,14.6666563 Z"
                         id="Shape"
                       />
-                      <path
-                        d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
-                        id="Shape"
+                      <rect
+                        height="8"
+                        id="Rectangle"
+                        width="1.33334375"
+                        x="3.33334375"
+                        y="5.33334375"
                       />
-                      <path
-                        d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
-                        id="Shape"
+                      <circle
+                        cx="4"
+                        cy="12"
+                        id="Oval"
+                        r="2"
                       />
                     </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar neo-pixels"
-              className="toolbar-button button"
-              id="toolbar-neo-pixels-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  neon_pixel
-                </title>
-                <desc>
-                  Created with Sketch.
-                </desc>
-                <g
+               
+              <button
+                aria-label="toolbar light-sensor"
+                className="toolbar-button button"
+                id="toolbar-light-sensor-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
+              >
+                <svg
                   fill="none"
-                  fill-rule="evenodd"
-                  id="neon_pixel"
-                  stroke="none"
-                  stroke-width="1"
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 16 16"
+                  width="16px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    Light sensor
+                  </title>
                   <g
-                    className="button-icon"
-                    id="Group-10"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="light_sensor"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="Group-7"
+                      className="button-icon"
+                      fill-rule="nonzero"
+                      id="Group-10"
+                      transform="translate(4.000000, 0.000000)"
                     >
-                      <circle
-                        cx="8"
-                        cy="1.6"
-                        id="Oval-3"
-                        r="1.6"
-                      />
-                      <circle
-                        cx="8"
-                        cy="14.4"
-                        id="Oval-3-Copy"
-                        r="1.6"
-                      />
-                      <circle
-                        cx="1.6"
-                        cy="8"
-                        id="Oval-3-Copy-2"
-                        r="1.6"
-                      />
-                      <circle
-                        cx="14.4"
-                        cy="8"
-                        id="Oval-3-Copy-3"
-                        r="1.6"
-                      />
-                      <circle
-                        cx="12.2666667"
-                        cy="3.73333333"
-                        id="Oval-3-Copy-4"
-                        r="1.6"
-                      />
-                      <circle
-                        cx="3.73333333"
-                        cy="3.73333333"
-                        id="Oval-3-Copy-6"
-                        r="1.6"
-                      />
-                      <circle
-                        cx="3.73333333"
-                        cy="12.2666667"
-                        id="Oval-3-Copy-7"
-                        r="1.6"
-                      />
-                      <circle
-                        cx="12.2666667"
-                        cy="12.2666667"
-                        id="Oval-3-Copy-5"
-                        r="1.6"
-                      />
+                      <g
+                        id="light-bulb"
+                      >
+                        <path
+                          d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
+                          id="Shape"
+                        />
+                        <path
+                          d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
+                          id="Shape"
+                        />
+                        <path
+                          d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
+                          id="Shape"
+                        />
+                      </g>
                     </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar speaker"
-              className="toolbar-button button"
-              id="toolbar-speaker-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  Speaker
-                </title>
-                <desc>
-                  Created with Sketch.
-                </desc>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="speaker"
-                  stroke="none"
-                  stroke-width="1"
+               
+              <button
+                aria-label="toolbar neo-pixels"
+                className="toolbar-button button"
+                id="toolbar-neo-pixels-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
+              >
+                <svg
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 16 16"
+                  width="16px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    neon_pixel
+                  </title>
+                  <desc>
+                    Created with Sketch.
+                  </desc>
                   <g
-                    className="button-icon"
-                    id="Group-10"
-                    transform="translate(1.000000, 1.000000)"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="neon_pixel"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="sound"
+                      className="button-icon"
+                      id="Group-10"
                     >
-                      <path
-                        d="M0,4.46138 C0,4.35093 0.089543,4.26138 0.2,4.26138 L3.35989,4.26138 C3.41494,4.26138 3.46756,4.23869 3.50534,4.19866 L7.40837,0.0631292 C7.53259,-0.0684915 7.75382,0.0194193 7.75382,0.200402 L7.75382,13.7995 C7.75382,13.9805 7.53259,14.0684 7.40837,13.9368 L3.50534,9.80125 C3.46756,9.76122 3.41494,9.73853 3.35989,9.73853 L0.2,9.73853 C0.0895431,9.73853 0,9.64898 0,9.53853 L0,4.46138 Z M9.47694,1.2485 C9.47694,1.11913 9.59801,1.02371 9.72228,1.05971 C12.189,1.77423 14,4.16201 14,6.99903 C14,9.83605 12.189,12.2238 9.72228,12.9384 C9.59801,12.9743 9.47694,12.8789 9.47694,12.7496 L9.47694,12.0651 C9.47694,11.9778 9.53367,11.9011 9.61583,11.8716 C11.4213,11.2241 12.9096,9.1562 12.9096,7.03991 C12.9096,4.92363 11.4213,2.85576 9.61583,2.20821 C9.53367,2.17874 9.47694,2.10205 9.47694,2.01476 L9.47694,1.2485 Z"
-                        id="Shape"
-                      />
+                      <g
+                        id="Group-7"
+                      >
+                        <circle
+                          cx="8"
+                          cy="1.6"
+                          id="Oval-3"
+                          r="1.6"
+                        />
+                        <circle
+                          cx="8"
+                          cy="14.4"
+                          id="Oval-3-Copy"
+                          r="1.6"
+                        />
+                        <circle
+                          cx="1.6"
+                          cy="8"
+                          id="Oval-3-Copy-2"
+                          r="1.6"
+                        />
+                        <circle
+                          cx="14.4"
+                          cy="8"
+                          id="Oval-3-Copy-3"
+                          r="1.6"
+                        />
+                        <circle
+                          cx="12.2666667"
+                          cy="3.73333333"
+                          id="Oval-3-Copy-4"
+                          r="1.6"
+                        />
+                        <circle
+                          cx="3.73333333"
+                          cy="3.73333333"
+                          id="Oval-3-Copy-6"
+                          r="1.6"
+                        />
+                        <circle
+                          cx="3.73333333"
+                          cy="12.2666667"
+                          id="Oval-3-Copy-7"
+                          r="1.6"
+                        />
+                        <circle
+                          cx="12.2666667"
+                          cy="12.2666667"
+                          id="Oval-3-Copy-5"
+                          r="1.6"
+                        />
+                      </g>
                     </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar motion-sensor"
-              className="toolbar-button button"
-              id="toolbar-motion-sensor-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+               
+              <button
+                aria-label="toolbar speaker"
+                className="toolbar-button button"
+                id="toolbar-speaker-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
                 }
-              }
-              tabIndex={0}
+                tabIndex={0}
+              >
+                <svg
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 16 16"
+                  width="16px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                  <title>
+                    Speaker
+                  </title>
+                  <desc>
+                    Created with Sketch.
+                  </desc>
+                  <g
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="speaker"
+                    stroke="none"
+                    stroke-width="1"
+                  >
+                    <g
+                      className="button-icon"
+                      id="Group-10"
+                      transform="translate(1.000000, 1.000000)"
+                    >
+                      <g
+                        id="sound"
+                      >
+                        <path
+                          d="M0,4.46138 C0,4.35093 0.089543,4.26138 0.2,4.26138 L3.35989,4.26138 C3.41494,4.26138 3.46756,4.23869 3.50534,4.19866 L7.40837,0.0631292 C7.53259,-0.0684915 7.75382,0.0194193 7.75382,0.200402 L7.75382,13.7995 C7.75382,13.9805 7.53259,14.0684 7.40837,13.9368 L3.50534,9.80125 C3.46756,9.76122 3.41494,9.73853 3.35989,9.73853 L0.2,9.73853 C0.0895431,9.73853 0,9.64898 0,9.53853 L0,4.46138 Z M9.47694,1.2485 C9.47694,1.11913 9.59801,1.02371 9.72228,1.05971 C12.189,1.77423 14,4.16201 14,6.99903 C14,9.83605 12.189,12.2238 9.72228,12.9384 C9.59801,12.9743 9.47694,12.8789 9.47694,12.7496 L9.47694,12.0651 C9.47694,11.9778 9.53367,11.9011 9.61583,11.8716 C11.4213,11.2241 12.9096,9.1562 12.9096,7.03991 C12.9096,4.92363 11.4213,2.85576 9.61583,2.20821 C9.53367,2.17874 9.47694,2.10205 9.47694,2.01476 L9.47694,1.2485 Z"
+                          id="Shape"
+                        />
+                      </g>
+                    </g>
+                  </g>
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                fill="none"
-                height="16px"
-                version="1.1"
-                viewBox="0 0 17 16"
-                width="17px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
+               
+              <button
+                aria-label="toolbar motion-sensor"
+                className="toolbar-button button"
+                id="toolbar-motion-sensor-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
               >
-                <g
+                <svg
                   fill="none"
-                  fill-rule="evenodd"
-                  id="motion_sensor"
-                  stroke="none"
-                  stroke-width="1"
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 17 16"
+                  width="17px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
-                    className="button-icon"
-                    id="Group-10"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="motion_sensor"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="Group-12"
+                      className="button-icon"
+                      id="Group-10"
                     >
-                      <path
-                        d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
-                        id="Fill-1"
-                      />
-                      <polygon
-                        id="Fill-3"
-                        points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
-                      />
-                      <polygon
-                        id="Fill-10"
-                        points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
-                      />
+                      <g
+                        id="Group-12"
+                      >
+                        <path
+                          d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
+                          id="Fill-1"
+                        />
+                        <polygon
+                          id="Fill-3"
+                          points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
+                        />
+                        <polygon
+                          id="Fill-10"
+                          points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
+                        />
+                      </g>
                     </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar ir-sensor"
-              className="toolbar-button button"
-              id="toolbar-ir-sensor-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 16 16"
-                width="16px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  IR
-                </title>
-                <desc>
-                  Created with Sketch.
-                </desc>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="IR"
-                  stroke="none"
-                  stroke-width="1"
+               
+              <button
+                aria-label="toolbar ir-sensor"
+                className="toolbar-button button"
+                id="toolbar-ir-sensor-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
+              >
+                <svg
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 16 16"
+                  width="16px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    IR
+                  </title>
+                  <desc>
+                    Created with Sketch.
+                  </desc>
                   <g
-                    className="button-icon"
-                    id="Group-10"
-                    transform="translate(2.000000, 4.000000)"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="IR"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="Group-6"
+                      className="button-icon"
+                      id="Group-10"
+                      transform="translate(2.000000, 4.000000)"
                     >
-                      <path
-                        d="M2,9 L0,9 L0,0 L2,0 L2,9 Z M6.31788079,1.52182952 L6.31788079,4.29106029 L8.07284768,4.29106029 C9.0794702,4.29106029 9.66887417,3.77962578 9.66887417,2.91268191 C9.66887417,2.05821206 9.04635762,1.52182952 8.05298013,1.52182952 L6.31788079,1.52182952 Z M6.31788079,5.73804574 L6.31788079,9 L4.31788079,9 L4.31788079,0 L8.33112583,0 C10.4304636,0 11.7218543,1.0977131 11.7218543,2.88773389 C11.7218543,4.03534304 11.0860927,5.03326403 9.98675497,5.44490644 L12,9 L9.73509934,9 L7.95364238,5.73804574 L6.31788079,5.73804574 Z"
-                        id="IR"
-                      />
+                      <g
+                        id="Group-6"
+                      >
+                        <path
+                          d="M2,9 L0,9 L0,0 L2,0 L2,9 Z M6.31788079,1.52182952 L6.31788079,4.29106029 L8.07284768,4.29106029 C9.0794702,4.29106029 9.66887417,3.77962578 9.66887417,2.91268191 C9.66887417,2.05821206 9.04635762,1.52182952 8.05298013,1.52182952 L6.31788079,1.52182952 Z M6.31788079,5.73804574 L6.31788079,9 L4.31788079,9 L4.31788079,0 L8.33112583,0 C10.4304636,0 11.7218543,1.0977131 11.7218543,2.88773389 C11.7218543,4.03534304 11.0860927,5.03326403 9.98675497,5.44490644 L12,9 L9.73509934,9 L7.95364238,5.73804574 L6.31788079,5.73804574 Z"
+                          id="IR"
+                        />
+                      </g>
                     </g>
                   </g>
-                </g>
-              </svg>
-            </button>
-            <button
-              aria-label="toolbar gpio"
-              className="toolbar-button button"
-              id="toolbar-gpio-button"
-              onClick={[Function]}
-              role="button"
-              style={
-                Object {
-                  "width": 32,
-                }
-              }
-              tabIndex={0}
+                </svg>
+              </button>
+            </div>
+            <div
+              className="ms-TooltipHost root-49"
+              onBlurCapture={[Function]}
+              onFocusCapture={[Function]}
+              onKeyDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
             >
-              <svg
-                height="16px"
-                version="1.1"
-                viewBox="0 0 18 16"
-                width="18px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <title>
-                  GPIO
-                </title>
-                <desc>
-                  Created with Sketch.
-                </desc>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="GPIO"
-                  stroke="none"
-                  stroke-width="1"
+               
+              <button
+                aria-label="toolbar gpio"
+                className="toolbar-button button"
+                id="toolbar-gpio-button"
+                onClick={[Function]}
+                role="button"
+                style={
+                  Object {
+                    "width": 32,
+                  }
+                }
+                tabIndex={0}
+              >
+                <svg
+                  height="16px"
+                  version="1.1"
+                  viewBox="0 0 18 16"
+                  width="18px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
+                  <title>
+                    GPIO
+                  </title>
+                  <desc>
+                    Created with Sketch.
+                  </desc>
                   <g
-                    className="button-icon"
-                    id="Group-10"
-                    transform="translate(0.000000, 5.000000)"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="GPIO"
+                    stroke="none"
+                    stroke-width="1"
                   >
-                    <path
-                      d="M4.80046857,3.47534517 C4.80046857,5.04142012 3.93244826,6 2.49863335,6 C0.938305349,6 0,4.8678501 0,2.99408284 C0,1.14398422 0.941819602,0 2.46349082,0 C3.70050761,0 4.6212417,0.808678501 4.74775478,2.01183432 L3.47559547,2.01183432 C3.34908239,1.51084813 2.96954315,1.20710059 2.46349082,1.20710059 C1.74306911,1.20710059 1.31433034,1.86982249 1.31433034,2.97830375 C1.31433034,4.10650888 1.78875439,4.79289941 2.52674736,4.79289941 C3.11362749,4.79289941 3.52128075,4.40631164 3.55290902,3.83037475 L3.55642327,3.7357002 L2.62866068,3.7357002 L2.62866068,2.74161736 L4.80046857,2.74161736 L4.80046857,3.47534517 Z M5.76337368,0.153846154 L7.9843811,0.153846154 C9.0737993,0.153846154 9.81179227,0.950690335 9.81179227,2.17357002 C9.81179227,3.38461538 9.03514252,4.17751479 7.90706755,4.17751479 L7.05310426,4.17751479 L7.05310426,5.84615385 L5.76337368,5.84615385 L5.76337368,0.153846154 Z M7.05310426,1.26627219 L7.05310426,3.08481262 L7.63647013,3.08481262 C8.18469348,3.08481262 8.50800469,2.76923077 8.50800469,2.17751479 C8.50800469,1.57790927 8.18820773,1.26627219 7.64349863,1.26627219 L7.05310426,1.26627219 Z M12.0468567,5.84615385 L10.7571261,5.84615385 L10.7571261,0.153846154 L12.0468567,0.153846154 L12.0468567,5.84615385 Z M15.5048809,0 C17.0300664,0 18,1.14792899 18,2.99802761 C18,4.85207101 17.0300664,6 15.5048809,6 C13.9726669,6 13.0027333,4.85207101 13.0027333,2.99802761 C13.0027333,1.14792899 13.9832097,0 15.5048809,0 Z M15.5048809,1.19921105 C14.7914877,1.19921105 14.3170636,1.90138067 14.3170636,2.99802761 C14.3170636,4.09861933 14.7844592,4.80078895 15.5048809,4.80078895 C16.2182741,4.80078895 16.6891839,4.09861933 16.6891839,2.99802761 C16.6891839,1.90138067 16.2147599,1.19921105 15.5048809,1.19921105 Z"
-                      id="GPIO"
-                    />
+                    <g
+                      className="button-icon"
+                      id="Group-10"
+                      transform="translate(0.000000, 5.000000)"
+                    >
+                      <path
+                        d="M4.80046857,3.47534517 C4.80046857,5.04142012 3.93244826,6 2.49863335,6 C0.938305349,6 0,4.8678501 0,2.99408284 C0,1.14398422 0.941819602,0 2.46349082,0 C3.70050761,0 4.6212417,0.808678501 4.74775478,2.01183432 L3.47559547,2.01183432 C3.34908239,1.51084813 2.96954315,1.20710059 2.46349082,1.20710059 C1.74306911,1.20710059 1.31433034,1.86982249 1.31433034,2.97830375 C1.31433034,4.10650888 1.78875439,4.79289941 2.52674736,4.79289941 C3.11362749,4.79289941 3.52128075,4.40631164 3.55290902,3.83037475 L3.55642327,3.7357002 L2.62866068,3.7357002 L2.62866068,2.74161736 L4.80046857,2.74161736 L4.80046857,3.47534517 Z M5.76337368,0.153846154 L7.9843811,0.153846154 C9.0737993,0.153846154 9.81179227,0.950690335 9.81179227,2.17357002 C9.81179227,3.38461538 9.03514252,4.17751479 7.90706755,4.17751479 L7.05310426,4.17751479 L7.05310426,5.84615385 L5.76337368,5.84615385 L5.76337368,0.153846154 Z M7.05310426,1.26627219 L7.05310426,3.08481262 L7.63647013,3.08481262 C8.18469348,3.08481262 8.50800469,2.76923077 8.50800469,2.17751479 C8.50800469,1.57790927 8.18820773,1.26627219 7.64349863,1.26627219 L7.05310426,1.26627219 Z M12.0468567,5.84615385 L10.7571261,5.84615385 L10.7571261,0.153846154 L12.0468567,0.153846154 L12.0468567,5.84615385 Z M15.5048809,0 C17.0300664,0 18,1.14792899 18,2.99802761 C18,4.85207101 17.0300664,6 15.5048809,6 C13.9726669,6 13.0027333,4.85207101 13.0027333,2.99802761 C13.0027333,1.14792899 13.9832097,0 15.5048809,0 Z M15.5048809,1.19921105 C14.7914877,1.19921105 14.3170636,1.90138067 14.3170636,2.99802761 C14.3170636,4.09861933 14.7844592,4.80078895 15.5048809,4.80078895 C16.2182741,4.80078895 16.6891839,4.09861933 16.6891839,2.99802761 C16.6891839,1.90138067 16.2147599,1.19921105 15.5048809,1.19921105 Z"
+                        id="GPIO"
+                      />
+                    </g>
                   </g>
-                </g>
-              </svg>
-            </button>
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
index 43bd8b49d..8d80bdd4b 100644
--- a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
+++ b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
@@ -3953,657 +3953,767 @@ Array [
       <div
         className="toolbar-icon"
       >
-        <button
-          aria-label="toolbar slider-switch"
-          className="toolbar-button button"
-          id="toolbar-slider-switch-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 20 16"
-            width="20px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              Switch
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="slider_switch"
-              stroke="none"
-              stroke-width="1"
-            >
-              <g
-                className="button-icon"
-                id="Group-10"
-                transform="translate(0.000000, 3.000000)"
-              >
-                <g
-                  id="Group-4"
-                >
-                  <path
-                    d="M5,0 L15,0 C17.7614237,-5.07265313e-16 20,2.23857625 20,5 C20,7.76142375 17.7614237,10 15,10 L5,10 C2.23857625,10 3.38176876e-16,7.76142375 0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z M5,1.2 C2.90131795,1.2 1.2,2.90131795 1.2,5 C1.2,7.09868205 2.90131795,8.8 5,8.8 L15,8.8 C17.098682,8.8 18.8,7.09868205 18.8,5 C18.8,2.90131795 17.098682,1.2 15,1.2 L5,1.2 Z"
-                    fill-rule="nonzero"
-                    id="Rectangle"
-                  />
-                  <circle
-                    cx="5"
-                    cy="5"
-                    id="Oval"
-                    r="2.5"
-                  />
-                </g>
-              </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar push-button"
-          className="toolbar-button button"
-          id="toolbar-push-button-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
+           
+          <button
+            aria-label="toolbar slider-switch"
+            className="toolbar-button button"
+            id="toolbar-slider-switch-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
             }
-          }
-          tabIndex={0}
-        >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              Push Button
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="push_btn"
-              stroke="none"
-              stroke-width="1"
+            tabIndex={0}
+          >
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 20 16"
+              width="20px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Switch
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                id="Group-10"
-                transform="translate(1.000000, 1.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="slider_switch"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="Group-8"
+                  className="button-icon"
+                  id="Group-10"
+                  transform="translate(0.000000, 3.000000)"
                 >
-                  <path
-                    d="M2,0 L12,0 C13.1045695,-2.02906125e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 1.3527075e-16,13.1045695 0,12 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M2,1.2 C1.5581722,1.2 1.2,1.5581722 1.2,2 L1.2,12 C1.2,12.4418278 1.5581722,12.8 2,12.8 L12,12.8 C12.4418278,12.8 12.8,12.4418278 12.8,12 L12.8,2 C12.8,1.5581722 12.4418278,1.2 12,1.2 L2,1.2 Z"
-                    fill-rule="nonzero"
-                    id="Rectangle"
-                  />
-                  <circle
-                    cx="7"
-                    cy="7"
-                    id="Oval"
-                    r="3.5"
-                  />
+                  <g
+                    id="Group-4"
+                  >
+                    <path
+                      d="M5,0 L15,0 C17.7614237,-5.07265313e-16 20,2.23857625 20,5 C20,7.76142375 17.7614237,10 15,10 L5,10 C2.23857625,10 3.38176876e-16,7.76142375 0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z M5,1.2 C2.90131795,1.2 1.2,2.90131795 1.2,5 C1.2,7.09868205 2.90131795,8.8 5,8.8 L15,8.8 C17.098682,8.8 18.8,7.09868205 18.8,5 C18.8,2.90131795 17.098682,1.2 15,1.2 L5,1.2 Z"
+                      fill-rule="nonzero"
+                      id="Rectangle"
+                    />
+                    <circle
+                      cx="5"
+                      cy="5"
+                      id="Oval"
+                      r="2.5"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar red-led"
-          className="toolbar-button button"
-          id="toolbar-red-led-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              Red LED
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="red_LED"
-              stroke="none"
-              stroke-width="1"
+           
+          <button
+            aria-label="toolbar push-button"
+            className="toolbar-button button"
+            id="toolbar-push-button-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
+          >
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Push Button
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                fill-rule="nonzero"
-                id="Group-10"
-                transform="translate(3.000000, 0.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="push_btn"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="red_LED"
+                  className="button-icon"
+                  id="Group-10"
+                  transform="translate(1.000000, 1.000000)"
                 >
-                  <path
-                    d="M9.66,8.22 L9.66,9.34 C9.67207548,9.48313939 9.61659012,9.6237023 9.51,9.72 C9.40841613,9.82599772 9.26675788,9.88411393 9.12,9.88 L8.27,9.88 L8.45,10.08 C8.66182619,10.3044565 8.77987709,10.6013724 8.78,10.91 L8.78,15.45 C8.74261072,15.7279186 8.50542238,15.9353341 8.225,15.9353341 C7.94457762,15.9353341 7.70738928,15.7279186 7.67,15.45 L7.67,10.91 C7.68004066,10.8842785 7.68004066,10.8557215 7.67,10.83 L6.79,9.88 L3.87,9.88 L3,10.83 C2.98995934,10.8557215 2.98995934,10.8842785 3,10.91 L3,15.45 C3,15.7537566 2.75375661,16 2.45,16 C2.14624339,16 1.9,15.7537566 1.9,15.45 L1.9,10.91 C1.89639548,10.6025545 2.01094012,10.3054544 2.22,10.08 L2.4,9.88 L1.54,9.88 C1.39203102,9.89122505 1.24745182,9.83191051 1.15,9.72 C1.04659498,9.61738925 0.992005545,9.4754567 1,9.33 L1,8.22 C0.995083542,8.18015107 0.995083542,8.13984893 1,8.1 L9.64,8.1 C9.65162558,8.1390139 9.65834402,8.1793245 9.66,8.22 Z"
-                    id="Path"
-                  />
-                  <path
-                    d="M9.11,3.81 L9.1100498,6.9 L1.56,6.9 L1.56,3.81 C1.5493174,2.80322131 1.94179172,1.83399894 2.64996503,1.11831186 C3.35813834,0.402624772 4.32316464,-5.66732473e-05 5.33,-4.4408921e-16 C6.33766756,0.00269204012 7.30113489,0.414060117 8,1.14 C8.71491032,1.84390238 9.11518744,2.80673114 9.11,3.81 Z"
-                    id="Path"
-                  />
+                  <g
+                    id="Group-8"
+                  >
+                    <path
+                      d="M2,0 L12,0 C13.1045695,-2.02906125e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 1.3527075e-16,13.1045695 0,12 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M2,1.2 C1.5581722,1.2 1.2,1.5581722 1.2,2 L1.2,12 C1.2,12.4418278 1.5581722,12.8 2,12.8 L12,12.8 C12.4418278,12.8 12.8,12.4418278 12.8,12 L12.8,2 C12.8,1.5581722 12.4418278,1.2 12,1.2 L2,1.2 Z"
+                      fill-rule="nonzero"
+                      id="Rectangle"
+                    />
+                    <circle
+                      cx="7"
+                      cy="7"
+                      id="Oval"
+                      r="3.5"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar sound-sensor"
-          className="toolbar-button button"
-          id="toolbar-sound-sensor-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="18px"
-            version="1.1"
-            viewBox="0 0 16 18"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              Sound Sensor
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="sound_sensor"
-              stroke="none"
-              stroke-width="1"
+           
+          <button
+            aria-label="toolbar red-led"
+            className="toolbar-button button"
+            id="toolbar-red-led-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
+          >
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Red LED
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                id="Group-11"
-                transform="translate(2.000000, 0.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="red_LED"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="sound_sensor"
+                  className="button-icon"
+                  fill-rule="nonzero"
+                  id="Group-10"
+                  transform="translate(3.000000, 0.000000)"
                 >
                   <g
-                    id="Group-10"
-                    transform="translate(0.699999, 0.500000)"
+                    id="red_LED"
                   >
                     <path
-                      d="M4.65016298,15.17144 L4.65016298,13.7922942 C3.41527114,13.6318998 2.27078933,13.0204521 1.42065147,12.0614597 C0.509552396,11.0338061 0.00398839588,9.68310861 0.00476157979,8.28145 L0.00834533542,5.98768213 C-0.00652451305,5.89234444 -0.00148383948,5.79482389 0.0231545884,5.70166373 C0.0479493684,5.60784878 0.0920825187,5.52041375 0.152773487,5.44534368 C0.214260428,5.36930716 0.291307036,5.30778738 0.378750119,5.26528351 C0.467116009,5.22234964 0.563755426,5.2 0.661734024,5.2 C0.759712621,5.2 0.856352039,5.22234964 0.944763779,5.26530579 C1.03216101,5.30778738 1.10920762,5.36930716 1.17071652,5.44537084 C1.23138553,5.52041375 1.27551868,5.60784878 1.30030061,5.70161513 C1.32495189,5.79482389 1.32999256,5.89234444 1.31870647,5.94145 L1.31870647,8.28145 C1.31870647,9.39842656 1.7407743,10.4688536 2.49065412,11.2565939 C3.23776665,12.0414273 4.24899942,12.48144 5.30237579,12.48144 C6.35576276,12.48144 7.36702974,12.0414195 8.1141248,11.2565952 C8.86399397,10.4688567 9.28605464,9.39842995 9.28605464,8.28145 L9.28605464,5.94145 C9.28605464,5.7641305 9.35340694,5.59327417 9.47477135,5.46583435 C9.5988672,5.33554463 9.76913931,5.26145 9.94778672,5.26145 L9.95606024,5.26156411 C10.1315221,5.26640491 10.2972241,5.34259908 10.4172766,5.47214571 C10.534967,5.59895982 10.5999995,5.76713855 10.5999995,5.94145 L10.5999995,8.28125635 C10.6009032,9.6813488 10.0967463,11.030573 9.1877971,12.05803 C8.3395495,13.0167651 7.19732431,13.6291336 5.96410787,13.7917484 L5.96410787,15.1721304 L7.56185834,15.1758074 C7.71875063,15.202875 7.86029753,15.2869159 7.96145211,15.4119207 C8.06030087,15.5342853 8.11404343,15.6880984 8.11404343,15.84644 C8.11404343,16.0047816 8.06030087,16.1585947 7.96129407,16.2811548 C7.86029753,16.4059641 7.71875063,16.490005 7.51085483,16.52144 L3.04293061,16.5170774 C2.8859552,16.4900107 2.74438664,16.4059406 2.64341658,16.2810571 C2.54447382,16.1586811 2.49066056,16.0048291 2.49066056,15.84644 C2.49066056,15.6880509 2.54447382,15.5341989 2.64341658,15.4118229 C2.74438664,15.2869394 2.8859552,15.2028693 3.09390627,15.17144 L4.65016298,15.17144 Z"
-                      fill-rule="nonzero"
-                      id="Shape"
+                      d="M9.66,8.22 L9.66,9.34 C9.67207548,9.48313939 9.61659012,9.6237023 9.51,9.72 C9.40841613,9.82599772 9.26675788,9.88411393 9.12,9.88 L8.27,9.88 L8.45,10.08 C8.66182619,10.3044565 8.77987709,10.6013724 8.78,10.91 L8.78,15.45 C8.74261072,15.7279186 8.50542238,15.9353341 8.225,15.9353341 C7.94457762,15.9353341 7.70738928,15.7279186 7.67,15.45 L7.67,10.91 C7.68004066,10.8842785 7.68004066,10.8557215 7.67,10.83 L6.79,9.88 L3.87,9.88 L3,10.83 C2.98995934,10.8557215 2.98995934,10.8842785 3,10.91 L3,15.45 C3,15.7537566 2.75375661,16 2.45,16 C2.14624339,16 1.9,15.7537566 1.9,15.45 L1.9,10.91 C1.89639548,10.6025545 2.01094012,10.3054544 2.22,10.08 L2.4,9.88 L1.54,9.88 C1.39203102,9.89122505 1.24745182,9.83191051 1.15,9.72 C1.04659498,9.61738925 0.992005545,9.4754567 1,9.33 L1,8.22 C0.995083542,8.18015107 0.995083542,8.13984893 1,8.1 L9.64,8.1 C9.65162558,8.1390139 9.65834402,8.1793245 9.66,8.22 Z"
+                      id="Path"
                     />
-                    <rect
-                      className="button-rectangle"
-                      height="9.3"
-                      id="Rectangle-2"
-                      rx="1.9"
-                      stroke-width="1.2"
-                      width="3.8"
-                      x="3.40000068"
-                      y="1.1"
+                    <path
+                      d="M9.11,3.81 L9.1100498,6.9 L1.56,6.9 L1.56,3.81 C1.5493174,2.80322131 1.94179172,1.83399894 2.64996503,1.11831186 C3.35813834,0.402624772 4.32316464,-5.66732473e-05 5.33,-4.4408921e-16 C6.33766756,0.00269204012 7.30113489,0.414060117 8,1.14 C8.71491032,1.84390238 9.11518744,2.80673114 9.11,3.81 Z"
+                      id="Path"
                     />
                   </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar temperature-sensor"
-          className="toolbar-button button"
-          id="toolbar-temperature-sensor-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              Temperature Sensor
-            </title>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="temperature"
-              stroke="none"
-              stroke-width="1"
+           
+          <button
+            aria-label="toolbar sound-sensor"
+            className="toolbar-button button"
+            id="toolbar-sound-sensor-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
+          >
+            <svg
+              height="18px"
+              version="1.1"
+              viewBox="0 0 16 18"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Sound Sensor
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                fill-rule="nonzero"
-                id="thermometer"
-                transform="translate(4.000000, 0.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="sound_sensor"
+                stroke="none"
+                stroke-width="1"
               >
-                <path
-                  d="M6.66665625,9.01853125 L6.66665625,2.66665625 C6.66665625,1.19390625 5.47275,0 4,0 C2.52725,0 1.33334375,1.19390625 1.33334375,2.66665625 L1.33334375,9.0185 C0.515,9.7509375 0,10.8153438 0,12 C0,14.2091562 1.790875,16 4,16 C6.209125,16 8,14.2091562 8,12 C8,10.8153438 7.485,9.7509375 6.66665625,9.01853125 Z M4,14.6666563 C2.52725,14.6666563 1.33334375,13.47275 1.33334375,12 C1.33334375,11.2300937 1.659625,10.515875 2.2225625,10.0120312 L2.6666875,9.61453125 L2.6666875,2.66665625 C2.6666875,1.93028125 3.26365625,1.3333125 4.00003125,1.3333125 C4.73640625,1.3333125 5.333375,1.93025 5.333375,2.66665625 L5.333375,9.61453125 L5.7775,10.0120312 C6.3404375,10.515875 6.66671875,11.2300625 6.66671875,12 C6.66665625,13.47275 5.47275,14.6666563 4,14.6666563 Z"
-                  id="Shape"
-                />
-                <rect
-                  height="8"
-                  id="Rectangle"
-                  width="1.33334375"
-                  x="3.33334375"
-                  y="5.33334375"
-                />
-                <circle
-                  cx="4"
-                  cy="12"
-                  id="Oval"
-                  r="2"
-                />
+                <g
+                  className="button-icon"
+                  id="Group-11"
+                  transform="translate(2.000000, 0.000000)"
+                >
+                  <g
+                    id="sound_sensor"
+                  >
+                    <g
+                      id="Group-10"
+                      transform="translate(0.699999, 0.500000)"
+                    >
+                      <path
+                        d="M4.65016298,15.17144 L4.65016298,13.7922942 C3.41527114,13.6318998 2.27078933,13.0204521 1.42065147,12.0614597 C0.509552396,11.0338061 0.00398839588,9.68310861 0.00476157979,8.28145 L0.00834533542,5.98768213 C-0.00652451305,5.89234444 -0.00148383948,5.79482389 0.0231545884,5.70166373 C0.0479493684,5.60784878 0.0920825187,5.52041375 0.152773487,5.44534368 C0.214260428,5.36930716 0.291307036,5.30778738 0.378750119,5.26528351 C0.467116009,5.22234964 0.563755426,5.2 0.661734024,5.2 C0.759712621,5.2 0.856352039,5.22234964 0.944763779,5.26530579 C1.03216101,5.30778738 1.10920762,5.36930716 1.17071652,5.44537084 C1.23138553,5.52041375 1.27551868,5.60784878 1.30030061,5.70161513 C1.32495189,5.79482389 1.32999256,5.89234444 1.31870647,5.94145 L1.31870647,8.28145 C1.31870647,9.39842656 1.7407743,10.4688536 2.49065412,11.2565939 C3.23776665,12.0414273 4.24899942,12.48144 5.30237579,12.48144 C6.35576276,12.48144 7.36702974,12.0414195 8.1141248,11.2565952 C8.86399397,10.4688567 9.28605464,9.39842995 9.28605464,8.28145 L9.28605464,5.94145 C9.28605464,5.7641305 9.35340694,5.59327417 9.47477135,5.46583435 C9.5988672,5.33554463 9.76913931,5.26145 9.94778672,5.26145 L9.95606024,5.26156411 C10.1315221,5.26640491 10.2972241,5.34259908 10.4172766,5.47214571 C10.534967,5.59895982 10.5999995,5.76713855 10.5999995,5.94145 L10.5999995,8.28125635 C10.6009032,9.6813488 10.0967463,11.030573 9.1877971,12.05803 C8.3395495,13.0167651 7.19732431,13.6291336 5.96410787,13.7917484 L5.96410787,15.1721304 L7.56185834,15.1758074 C7.71875063,15.202875 7.86029753,15.2869159 7.96145211,15.4119207 C8.06030087,15.5342853 8.11404343,15.6880984 8.11404343,15.84644 C8.11404343,16.0047816 8.06030087,16.1585947 7.96129407,16.2811548 C7.86029753,16.4059641 7.71875063,16.490005 7.51085483,16.52144 L3.04293061,16.5170774 C2.8859552,16.4900107 2.74438664,16.4059406 2.64341658,16.2810571 C2.54447382,16.1586811 2.49066056,16.0048291 2.49066056,15.84644 C2.49066056,15.6880509 2.54447382,15.5341989 2.64341658,15.4118229 C2.74438664,15.2869394 2.8859552,15.2028693 3.09390627,15.17144 L4.65016298,15.17144 Z"
+                        fill-rule="nonzero"
+                        id="Shape"
+                      />
+                      <rect
+                        className="button-rectangle"
+                        height="9.3"
+                        id="Rectangle-2"
+                        rx="1.9"
+                        stroke-width="1.2"
+                        width="3.8"
+                        x="3.40000068"
+                        y="1.1"
+                      />
+                    </g>
+                  </g>
+                </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar light-sensor"
-          className="toolbar-button button"
-          id="toolbar-light-sensor-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            fill="none"
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              Light sensor
-            </title>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="light_sensor"
-              stroke="none"
-              stroke-width="1"
+           
+          <button
+            aria-label="toolbar temperature-sensor"
+            className="toolbar-button button"
+            id="toolbar-temperature-sensor-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
+          >
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Temperature Sensor
+              </title>
               <g
-                className="button-icon"
-                fill-rule="nonzero"
-                id="Group-10"
-                transform="translate(4.000000, 0.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="temperature"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="light-bulb"
+                  className="button-icon"
+                  fill-rule="nonzero"
+                  id="thermometer"
+                  transform="translate(4.000000, 0.000000)"
                 >
                   <path
-                    d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
+                    d="M6.66665625,9.01853125 L6.66665625,2.66665625 C6.66665625,1.19390625 5.47275,0 4,0 C2.52725,0 1.33334375,1.19390625 1.33334375,2.66665625 L1.33334375,9.0185 C0.515,9.7509375 0,10.8153438 0,12 C0,14.2091562 1.790875,16 4,16 C6.209125,16 8,14.2091562 8,12 C8,10.8153438 7.485,9.7509375 6.66665625,9.01853125 Z M4,14.6666563 C2.52725,14.6666563 1.33334375,13.47275 1.33334375,12 C1.33334375,11.2300937 1.659625,10.515875 2.2225625,10.0120312 L2.6666875,9.61453125 L2.6666875,2.66665625 C2.6666875,1.93028125 3.26365625,1.3333125 4.00003125,1.3333125 C4.73640625,1.3333125 5.333375,1.93025 5.333375,2.66665625 L5.333375,9.61453125 L5.7775,10.0120312 C6.3404375,10.515875 6.66671875,11.2300625 6.66671875,12 C6.66665625,13.47275 5.47275,14.6666563 4,14.6666563 Z"
                     id="Shape"
                   />
-                  <path
-                    d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
-                    id="Shape"
+                  <rect
+                    height="8"
+                    id="Rectangle"
+                    width="1.33334375"
+                    x="3.33334375"
+                    y="5.33334375"
                   />
-                  <path
-                    d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
-                    id="Shape"
+                  <circle
+                    cx="4"
+                    cy="12"
+                    id="Oval"
+                    r="2"
                   />
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar neo-pixels"
-          className="toolbar-button button"
-          id="toolbar-neo-pixels-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              neon_pixel
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
+           
+          <button
+            aria-label="toolbar light-sensor"
+            className="toolbar-button button"
+            id="toolbar-light-sensor-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
+          >
+            <svg
               fill="none"
-              fill-rule="evenodd"
-              id="neon_pixel"
-              stroke="none"
-              stroke-width="1"
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Light sensor
+              </title>
               <g
-                className="button-icon"
-                id="Group-10"
+                fill="none"
+                fill-rule="evenodd"
+                id="light_sensor"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="Group-7"
+                  className="button-icon"
+                  fill-rule="nonzero"
+                  id="Group-10"
+                  transform="translate(4.000000, 0.000000)"
                 >
-                  <circle
-                    cx="8"
-                    cy="1.6"
-                    id="Oval-3"
-                    r="1.6"
-                  />
-                  <circle
-                    cx="8"
-                    cy="14.4"
-                    id="Oval-3-Copy"
-                    r="1.6"
-                  />
-                  <circle
-                    cx="1.6"
-                    cy="8"
-                    id="Oval-3-Copy-2"
-                    r="1.6"
-                  />
-                  <circle
-                    cx="14.4"
-                    cy="8"
-                    id="Oval-3-Copy-3"
-                    r="1.6"
-                  />
-                  <circle
-                    cx="12.2666667"
-                    cy="3.73333333"
-                    id="Oval-3-Copy-4"
-                    r="1.6"
-                  />
-                  <circle
-                    cx="3.73333333"
-                    cy="3.73333333"
-                    id="Oval-3-Copy-6"
-                    r="1.6"
-                  />
-                  <circle
-                    cx="3.73333333"
-                    cy="12.2666667"
-                    id="Oval-3-Copy-7"
-                    r="1.6"
-                  />
-                  <circle
-                    cx="12.2666667"
-                    cy="12.2666667"
-                    id="Oval-3-Copy-5"
-                    r="1.6"
-                  />
+                  <g
+                    id="light-bulb"
+                  >
+                    <path
+                      d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
+                      id="Shape"
+                    />
+                    <path
+                      d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
+                      id="Shape"
+                    />
+                    <path
+                      d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
+                      id="Shape"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar speaker"
-          className="toolbar-button button"
-          id="toolbar-speaker-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              Speaker
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="speaker"
-              stroke="none"
-              stroke-width="1"
+           
+          <button
+            aria-label="toolbar neo-pixels"
+            className="toolbar-button button"
+            id="toolbar-neo-pixels-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
+          >
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                neon_pixel
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                id="Group-10"
-                transform="translate(1.000000, 1.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="neon_pixel"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="sound"
+                  className="button-icon"
+                  id="Group-10"
                 >
-                  <path
-                    d="M0,4.46138 C0,4.35093 0.089543,4.26138 0.2,4.26138 L3.35989,4.26138 C3.41494,4.26138 3.46756,4.23869 3.50534,4.19866 L7.40837,0.0631292 C7.53259,-0.0684915 7.75382,0.0194193 7.75382,0.200402 L7.75382,13.7995 C7.75382,13.9805 7.53259,14.0684 7.40837,13.9368 L3.50534,9.80125 C3.46756,9.76122 3.41494,9.73853 3.35989,9.73853 L0.2,9.73853 C0.0895431,9.73853 0,9.64898 0,9.53853 L0,4.46138 Z M9.47694,1.2485 C9.47694,1.11913 9.59801,1.02371 9.72228,1.05971 C12.189,1.77423 14,4.16201 14,6.99903 C14,9.83605 12.189,12.2238 9.72228,12.9384 C9.59801,12.9743 9.47694,12.8789 9.47694,12.7496 L9.47694,12.0651 C9.47694,11.9778 9.53367,11.9011 9.61583,11.8716 C11.4213,11.2241 12.9096,9.1562 12.9096,7.03991 C12.9096,4.92363 11.4213,2.85576 9.61583,2.20821 C9.53367,2.17874 9.47694,2.10205 9.47694,2.01476 L9.47694,1.2485 Z"
-                    id="Shape"
-                  />
+                  <g
+                    id="Group-7"
+                  >
+                    <circle
+                      cx="8"
+                      cy="1.6"
+                      id="Oval-3"
+                      r="1.6"
+                    />
+                    <circle
+                      cx="8"
+                      cy="14.4"
+                      id="Oval-3-Copy"
+                      r="1.6"
+                    />
+                    <circle
+                      cx="1.6"
+                      cy="8"
+                      id="Oval-3-Copy-2"
+                      r="1.6"
+                    />
+                    <circle
+                      cx="14.4"
+                      cy="8"
+                      id="Oval-3-Copy-3"
+                      r="1.6"
+                    />
+                    <circle
+                      cx="12.2666667"
+                      cy="3.73333333"
+                      id="Oval-3-Copy-4"
+                      r="1.6"
+                    />
+                    <circle
+                      cx="3.73333333"
+                      cy="3.73333333"
+                      id="Oval-3-Copy-6"
+                      r="1.6"
+                    />
+                    <circle
+                      cx="3.73333333"
+                      cy="12.2666667"
+                      id="Oval-3-Copy-7"
+                      r="1.6"
+                    />
+                    <circle
+                      cx="12.2666667"
+                      cy="12.2666667"
+                      id="Oval-3-Copy-5"
+                      r="1.6"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar motion-sensor"
-          className="toolbar-button button"
-          id="toolbar-motion-sensor-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+           
+          <button
+            aria-label="toolbar speaker"
+            className="toolbar-button button"
+            id="toolbar-speaker-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
             }
-          }
-          tabIndex={0}
+            tabIndex={0}
+          >
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <title>
+                Speaker
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
+              <g
+                fill="none"
+                fill-rule="evenodd"
+                id="speaker"
+                stroke="none"
+                stroke-width="1"
+              >
+                <g
+                  className="button-icon"
+                  id="Group-10"
+                  transform="translate(1.000000, 1.000000)"
+                >
+                  <g
+                    id="sound"
+                  >
+                    <path
+                      d="M0,4.46138 C0,4.35093 0.089543,4.26138 0.2,4.26138 L3.35989,4.26138 C3.41494,4.26138 3.46756,4.23869 3.50534,4.19866 L7.40837,0.0631292 C7.53259,-0.0684915 7.75382,0.0194193 7.75382,0.200402 L7.75382,13.7995 C7.75382,13.9805 7.53259,14.0684 7.40837,13.9368 L3.50534,9.80125 C3.46756,9.76122 3.41494,9.73853 3.35989,9.73853 L0.2,9.73853 C0.0895431,9.73853 0,9.64898 0,9.53853 L0,4.46138 Z M9.47694,1.2485 C9.47694,1.11913 9.59801,1.02371 9.72228,1.05971 C12.189,1.77423 14,4.16201 14,6.99903 C14,9.83605 12.189,12.2238 9.72228,12.9384 C9.59801,12.9743 9.47694,12.8789 9.47694,12.7496 L9.47694,12.0651 C9.47694,11.9778 9.53367,11.9011 9.61583,11.8716 C11.4213,11.2241 12.9096,9.1562 12.9096,7.03991 C12.9096,4.92363 11.4213,2.85576 9.61583,2.20821 C9.53367,2.17874 9.47694,2.10205 9.47694,2.01476 L9.47694,1.2485 Z"
+                      id="Shape"
+                    />
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            fill="none"
-            height="16px"
-            version="1.1"
-            viewBox="0 0 17 16"
-            width="17px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
+           
+          <button
+            aria-label="toolbar motion-sensor"
+            className="toolbar-button button"
+            id="toolbar-motion-sensor-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
           >
-            <g
+            <svg
               fill="none"
-              fill-rule="evenodd"
-              id="motion_sensor"
-              stroke="none"
-              stroke-width="1"
+              height="16px"
+              version="1.1"
+              viewBox="0 0 17 16"
+              width="17px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
               <g
-                className="button-icon"
-                id="Group-10"
+                fill="none"
+                fill-rule="evenodd"
+                id="motion_sensor"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="Group-12"
+                  className="button-icon"
+                  id="Group-10"
                 >
-                  <path
-                    d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
-                    id="Fill-1"
-                  />
-                  <polygon
-                    id="Fill-3"
-                    points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
-                  />
-                  <polygon
-                    id="Fill-10"
-                    points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
-                  />
+                  <g
+                    id="Group-12"
+                  >
+                    <path
+                      d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
+                      id="Fill-1"
+                    />
+                    <polygon
+                      id="Fill-3"
+                      points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
+                    />
+                    <polygon
+                      id="Fill-10"
+                      points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar ir-sensor"
-          className="toolbar-button button"
-          id="toolbar-ir-sensor-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              IR
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="IR"
-              stroke="none"
-              stroke-width="1"
+           
+          <button
+            aria-label="toolbar ir-sensor"
+            className="toolbar-button button"
+            id="toolbar-ir-sensor-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
+          >
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                IR
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                id="Group-10"
-                transform="translate(2.000000, 4.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="IR"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="Group-6"
+                  className="button-icon"
+                  id="Group-10"
+                  transform="translate(2.000000, 4.000000)"
                 >
-                  <path
-                    d="M2,9 L0,9 L0,0 L2,0 L2,9 Z M6.31788079,1.52182952 L6.31788079,4.29106029 L8.07284768,4.29106029 C9.0794702,4.29106029 9.66887417,3.77962578 9.66887417,2.91268191 C9.66887417,2.05821206 9.04635762,1.52182952 8.05298013,1.52182952 L6.31788079,1.52182952 Z M6.31788079,5.73804574 L6.31788079,9 L4.31788079,9 L4.31788079,0 L8.33112583,0 C10.4304636,0 11.7218543,1.0977131 11.7218543,2.88773389 C11.7218543,4.03534304 11.0860927,5.03326403 9.98675497,5.44490644 L12,9 L9.73509934,9 L7.95364238,5.73804574 L6.31788079,5.73804574 Z"
-                    id="IR"
-                  />
+                  <g
+                    id="Group-6"
+                  >
+                    <path
+                      d="M2,9 L0,9 L0,0 L2,0 L2,9 Z M6.31788079,1.52182952 L6.31788079,4.29106029 L8.07284768,4.29106029 C9.0794702,4.29106029 9.66887417,3.77962578 9.66887417,2.91268191 C9.66887417,2.05821206 9.04635762,1.52182952 8.05298013,1.52182952 L6.31788079,1.52182952 Z M6.31788079,5.73804574 L6.31788079,9 L4.31788079,9 L4.31788079,0 L8.33112583,0 C10.4304636,0 11.7218543,1.0977131 11.7218543,2.88773389 C11.7218543,4.03534304 11.0860927,5.03326403 9.98675497,5.44490644 L12,9 L9.73509934,9 L7.95364238,5.73804574 L6.31788079,5.73804574 Z"
+                      id="IR"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar gpio"
-          className="toolbar-button button"
-          id="toolbar-gpio-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 18 16"
-            width="18px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              GPIO
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="GPIO"
-              stroke="none"
-              stroke-width="1"
+           
+          <button
+            aria-label="toolbar gpio"
+            className="toolbar-button button"
+            id="toolbar-gpio-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
+          >
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 18 16"
+              width="18px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                GPIO
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                id="Group-10"
-                transform="translate(0.000000, 5.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="GPIO"
+                stroke="none"
+                stroke-width="1"
               >
-                <path
-                  d="M4.80046857,3.47534517 C4.80046857,5.04142012 3.93244826,6 2.49863335,6 C0.938305349,6 0,4.8678501 0,2.99408284 C0,1.14398422 0.941819602,0 2.46349082,0 C3.70050761,0 4.6212417,0.808678501 4.74775478,2.01183432 L3.47559547,2.01183432 C3.34908239,1.51084813 2.96954315,1.20710059 2.46349082,1.20710059 C1.74306911,1.20710059 1.31433034,1.86982249 1.31433034,2.97830375 C1.31433034,4.10650888 1.78875439,4.79289941 2.52674736,4.79289941 C3.11362749,4.79289941 3.52128075,4.40631164 3.55290902,3.83037475 L3.55642327,3.7357002 L2.62866068,3.7357002 L2.62866068,2.74161736 L4.80046857,2.74161736 L4.80046857,3.47534517 Z M5.76337368,0.153846154 L7.9843811,0.153846154 C9.0737993,0.153846154 9.81179227,0.950690335 9.81179227,2.17357002 C9.81179227,3.38461538 9.03514252,4.17751479 7.90706755,4.17751479 L7.05310426,4.17751479 L7.05310426,5.84615385 L5.76337368,5.84615385 L5.76337368,0.153846154 Z M7.05310426,1.26627219 L7.05310426,3.08481262 L7.63647013,3.08481262 C8.18469348,3.08481262 8.50800469,2.76923077 8.50800469,2.17751479 C8.50800469,1.57790927 8.18820773,1.26627219 7.64349863,1.26627219 L7.05310426,1.26627219 Z M12.0468567,5.84615385 L10.7571261,5.84615385 L10.7571261,0.153846154 L12.0468567,0.153846154 L12.0468567,5.84615385 Z M15.5048809,0 C17.0300664,0 18,1.14792899 18,2.99802761 C18,4.85207101 17.0300664,6 15.5048809,6 C13.9726669,6 13.0027333,4.85207101 13.0027333,2.99802761 C13.0027333,1.14792899 13.9832097,0 15.5048809,0 Z M15.5048809,1.19921105 C14.7914877,1.19921105 14.3170636,1.90138067 14.3170636,2.99802761 C14.3170636,4.09861933 14.7844592,4.80078895 15.5048809,4.80078895 C16.2182741,4.80078895 16.6891839,4.09861933 16.6891839,2.99802761 C16.6891839,1.90138067 16.2147599,1.19921105 15.5048809,1.19921105 Z"
-                  id="GPIO"
-                />
+                <g
+                  className="button-icon"
+                  id="Group-10"
+                  transform="translate(0.000000, 5.000000)"
+                >
+                  <path
+                    d="M4.80046857,3.47534517 C4.80046857,5.04142012 3.93244826,6 2.49863335,6 C0.938305349,6 0,4.8678501 0,2.99408284 C0,1.14398422 0.941819602,0 2.46349082,0 C3.70050761,0 4.6212417,0.808678501 4.74775478,2.01183432 L3.47559547,2.01183432 C3.34908239,1.51084813 2.96954315,1.20710059 2.46349082,1.20710059 C1.74306911,1.20710059 1.31433034,1.86982249 1.31433034,2.97830375 C1.31433034,4.10650888 1.78875439,4.79289941 2.52674736,4.79289941 C3.11362749,4.79289941 3.52128075,4.40631164 3.55290902,3.83037475 L3.55642327,3.7357002 L2.62866068,3.7357002 L2.62866068,2.74161736 L4.80046857,2.74161736 L4.80046857,3.47534517 Z M5.76337368,0.153846154 L7.9843811,0.153846154 C9.0737993,0.153846154 9.81179227,0.950690335 9.81179227,2.17357002 C9.81179227,3.38461538 9.03514252,4.17751479 7.90706755,4.17751479 L7.05310426,4.17751479 L7.05310426,5.84615385 L5.76337368,5.84615385 L5.76337368,0.153846154 Z M7.05310426,1.26627219 L7.05310426,3.08481262 L7.63647013,3.08481262 C8.18469348,3.08481262 8.50800469,2.76923077 8.50800469,2.17751479 C8.50800469,1.57790927 8.18820773,1.26627219 7.64349863,1.26627219 L7.05310426,1.26627219 Z M12.0468567,5.84615385 L10.7571261,5.84615385 L10.7571261,0.153846154 L12.0468567,0.153846154 L12.0468567,5.84615385 Z M15.5048809,0 C17.0300664,0 18,1.14792899 18,2.99802761 C18,4.85207101 17.0300664,6 15.5048809,6 C13.9726669,6 13.0027333,4.85207101 13.0027333,2.99802761 C13.0027333,1.14792899 13.9832097,0 15.5048809,0 Z M15.5048809,1.19921105 C14.7914877,1.19921105 14.3170636,1.90138067 14.3170636,2.99802761 C14.3170636,4.09861933 14.7844592,4.80078895 15.5048809,4.80078895 C16.2182741,4.80078895 16.6891839,4.09861933 16.6891839,2.99802761 C16.6891839,1.90138067 16.2147599,1.19921105 15.5048809,1.19921105 Z"
+                    id="GPIO"
+                  />
+                </g>
               </g>
-            </g>
-          </svg>
-        </button>
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>,
diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index d08bb3a24..d78ca44c5 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { TooltipHost } from "office-ui-fabric-react";
 import * as React from "react";
 import {
     FormattedMessage,
@@ -15,7 +15,6 @@ import {
     LABEL_TO_MODAL_CONTENT,
 } from "./SensorModalUtils";
 
-
 interface IToolbarState {
     currentOpenedId: string;
     showModal: boolean;
@@ -28,7 +27,6 @@ interface IProps extends WrappedComponentProps {
     }>;
 }
 
-
 class ToolBar extends React.Component<IProps, IToolbarState, any> {
     private readonly TOOLBAR_BUTTON_WIDTH: number = 32;
 
@@ -49,14 +47,18 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
                         {buttonList.map(
                             (currrentButton: any, index: number) => {
                                 return (
-                                    <TooltipHost tooltipProps={
-                                        {
+                                    <TooltipHost
+                                        tooltipProps={{
                                             onRenderContent: () => (
-                                                <FormattedMessage id={`${currrentButton.label}.title`} />
-
-                                            )
-                                        }
-                                    } key={index}>  <Button
+                                                <FormattedMessage
+                                                    id={`${currrentButton.label}.title`}
+                                                />
+                                            ),
+                                        }}
+                                        key={index}
+                                    >
+                                        {" "}
+                                        <Button
                                             key={index}
                                             label={currrentButton.label}
                                             width={this.TOOLBAR_BUTTON_WIDTH}
@@ -71,8 +73,8 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
                                             image={currrentButton.image}
                                             styleLabel="toolbar"
                                             focusable={true}
-                                        /></TooltipHost>
-
+                                        />
+                                    </TooltipHost>
                                 );
                             }
                         )}
diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
index bd522d074..4ad9e03d4 100644
--- a/src/view/container/device/__snapshots__/Device.spec.tsx.snap
+++ b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
@@ -2644,289 +2644,339 @@ exports[`Device component  should render correctly 1`] = `
       <div
         className="toolbar-icon"
       >
-        <button
-          aria-label="toolbar microbit-button"
-          className="toolbar-button button"
-          id="toolbar-microbit-button-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
+           
+          <button
+            aria-label="toolbar microbit-button"
+            className="toolbar-button button"
+            id="toolbar-microbit-button-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
           >
-            <title>
-              Push Button
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="push_btn"
-              stroke="none"
-              stroke-width="1"
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Push Button
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                id="Group-10"
-                transform="translate(1.000000, 1.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="push_btn"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="Group-8"
+                  className="button-icon"
+                  id="Group-10"
+                  transform="translate(1.000000, 1.000000)"
                 >
-                  <path
-                    d="M2,0 L12,0 C13.1045695,-2.02906125e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 1.3527075e-16,13.1045695 0,12 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M2,1.2 C1.5581722,1.2 1.2,1.5581722 1.2,2 L1.2,12 C1.2,12.4418278 1.5581722,12.8 2,12.8 L12,12.8 C12.4418278,12.8 12.8,12.4418278 12.8,12 L12.8,2 C12.8,1.5581722 12.4418278,1.2 12,1.2 L2,1.2 Z"
-                    fill-rule="nonzero"
-                    id="Rectangle"
-                  />
-                  <circle
-                    cx="7"
-                    cy="7"
-                    id="Oval"
-                    r="3.5"
-                  />
+                  <g
+                    id="Group-8"
+                  >
+                    <path
+                      d="M2,0 L12,0 C13.1045695,-2.02906125e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 1.3527075e-16,13.1045695 0,12 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z M2,1.2 C1.5581722,1.2 1.2,1.5581722 1.2,2 L1.2,12 C1.2,12.4418278 1.5581722,12.8 2,12.8 L12,12.8 C12.4418278,12.8 12.8,12.4418278 12.8,12 L12.8,2 C12.8,1.5581722 12.4418278,1.2 12,1.2 L2,1.2 Z"
+                      fill-rule="nonzero"
+                      id="Rectangle"
+                    />
+                    <circle
+                      cx="7"
+                      cy="7"
+                      id="Oval"
+                      r="3.5"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar microbit-led"
-          className="toolbar-button button"
-          id="toolbar-microbit-led-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
+           
+          <button
+            aria-label="toolbar microbit-led"
+            className="toolbar-button button"
+            id="toolbar-microbit-led-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
           >
-            <title>
-              Red LED
-            </title>
-            <desc>
-              Created with Sketch.
-            </desc>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="red_LED"
-              stroke="none"
-              stroke-width="1"
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Red LED
+              </title>
+              <desc>
+                Created with Sketch.
+              </desc>
               <g
-                className="button-icon"
-                fill-rule="nonzero"
-                id="Group-10"
-                transform="translate(3.000000, 0.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="red_LED"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="red_LED"
+                  className="button-icon"
+                  fill-rule="nonzero"
+                  id="Group-10"
+                  transform="translate(3.000000, 0.000000)"
                 >
-                  <path
-                    d="M9.66,8.22 L9.66,9.34 C9.67207548,9.48313939 9.61659012,9.6237023 9.51,9.72 C9.40841613,9.82599772 9.26675788,9.88411393 9.12,9.88 L8.27,9.88 L8.45,10.08 C8.66182619,10.3044565 8.77987709,10.6013724 8.78,10.91 L8.78,15.45 C8.74261072,15.7279186 8.50542238,15.9353341 8.225,15.9353341 C7.94457762,15.9353341 7.70738928,15.7279186 7.67,15.45 L7.67,10.91 C7.68004066,10.8842785 7.68004066,10.8557215 7.67,10.83 L6.79,9.88 L3.87,9.88 L3,10.83 C2.98995934,10.8557215 2.98995934,10.8842785 3,10.91 L3,15.45 C3,15.7537566 2.75375661,16 2.45,16 C2.14624339,16 1.9,15.7537566 1.9,15.45 L1.9,10.91 C1.89639548,10.6025545 2.01094012,10.3054544 2.22,10.08 L2.4,9.88 L1.54,9.88 C1.39203102,9.89122505 1.24745182,9.83191051 1.15,9.72 C1.04659498,9.61738925 0.992005545,9.4754567 1,9.33 L1,8.22 C0.995083542,8.18015107 0.995083542,8.13984893 1,8.1 L9.64,8.1 C9.65162558,8.1390139 9.65834402,8.1793245 9.66,8.22 Z"
-                    id="Path"
-                  />
-                  <path
-                    d="M9.11,3.81 L9.1100498,6.9 L1.56,6.9 L1.56,3.81 C1.5493174,2.80322131 1.94179172,1.83399894 2.64996503,1.11831186 C3.35813834,0.402624772 4.32316464,-5.66732473e-05 5.33,-4.4408921e-16 C6.33766756,0.00269204012 7.30113489,0.414060117 8,1.14 C8.71491032,1.84390238 9.11518744,2.80673114 9.11,3.81 Z"
-                    id="Path"
-                  />
+                  <g
+                    id="red_LED"
+                  >
+                    <path
+                      d="M9.66,8.22 L9.66,9.34 C9.67207548,9.48313939 9.61659012,9.6237023 9.51,9.72 C9.40841613,9.82599772 9.26675788,9.88411393 9.12,9.88 L8.27,9.88 L8.45,10.08 C8.66182619,10.3044565 8.77987709,10.6013724 8.78,10.91 L8.78,15.45 C8.74261072,15.7279186 8.50542238,15.9353341 8.225,15.9353341 C7.94457762,15.9353341 7.70738928,15.7279186 7.67,15.45 L7.67,10.91 C7.68004066,10.8842785 7.68004066,10.8557215 7.67,10.83 L6.79,9.88 L3.87,9.88 L3,10.83 C2.98995934,10.8557215 2.98995934,10.8842785 3,10.91 L3,15.45 C3,15.7537566 2.75375661,16 2.45,16 C2.14624339,16 1.9,15.7537566 1.9,15.45 L1.9,10.91 C1.89639548,10.6025545 2.01094012,10.3054544 2.22,10.08 L2.4,9.88 L1.54,9.88 C1.39203102,9.89122505 1.24745182,9.83191051 1.15,9.72 C1.04659498,9.61738925 0.992005545,9.4754567 1,9.33 L1,8.22 C0.995083542,8.18015107 0.995083542,8.13984893 1,8.1 L9.64,8.1 C9.65162558,8.1390139 9.65834402,8.1793245 9.66,8.22 Z"
+                      id="Path"
+                    />
+                    <path
+                      d="M9.11,3.81 L9.1100498,6.9 L1.56,6.9 L1.56,3.81 C1.5493174,2.80322131 1.94179172,1.83399894 2.64996503,1.11831186 C3.35813834,0.402624772 4.32316464,-5.66732473e-05 5.33,-4.4408921e-16 C6.33766756,0.00269204012 7.30113489,0.414060117 8,1.14 C8.71491032,1.84390238 9.11518744,2.80673114 9.11,3.81 Z"
+                      id="Path"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar temperature-sensor"
-          className="toolbar-button button"
-          id="toolbar-temperature-sensor-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
-            }
-          }
-          tabIndex={0}
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
-          >
-            <title>
-              Temperature Sensor
-            </title>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="temperature"
-              stroke="none"
-              stroke-width="1"
-            >
-              <g
-                className="button-icon"
-                fill-rule="nonzero"
-                id="thermometer"
-                transform="translate(4.000000, 0.000000)"
-              >
-                <path
-                  d="M6.66665625,9.01853125 L6.66665625,2.66665625 C6.66665625,1.19390625 5.47275,0 4,0 C2.52725,0 1.33334375,1.19390625 1.33334375,2.66665625 L1.33334375,9.0185 C0.515,9.7509375 0,10.8153438 0,12 C0,14.2091562 1.790875,16 4,16 C6.209125,16 8,14.2091562 8,12 C8,10.8153438 7.485,9.7509375 6.66665625,9.01853125 Z M4,14.6666563 C2.52725,14.6666563 1.33334375,13.47275 1.33334375,12 C1.33334375,11.2300937 1.659625,10.515875 2.2225625,10.0120312 L2.6666875,9.61453125 L2.6666875,2.66665625 C2.6666875,1.93028125 3.26365625,1.3333125 4.00003125,1.3333125 C4.73640625,1.3333125 5.333375,1.93025 5.333375,2.66665625 L5.333375,9.61453125 L5.7775,10.0120312 C6.3404375,10.515875 6.66671875,11.2300625 6.66671875,12 C6.66665625,13.47275 5.47275,14.6666563 4,14.6666563 Z"
-                  id="Shape"
-                />
-                <rect
-                  height="8"
-                  id="Rectangle"
-                  width="1.33334375"
-                  x="3.33334375"
-                  y="5.33334375"
-                />
-                <circle
-                  cx="4"
-                  cy="12"
-                  id="Oval"
-                  r="2"
-                />
-              </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar light-sensor"
-          className="toolbar-button button"
-          id="toolbar-light-sensor-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
+           
+          <button
+            aria-label="toolbar temperature-sensor"
+            className="toolbar-button button"
+            id="toolbar-temperature-sensor-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
             }
-          }
-          tabIndex={0}
-        >
-          <svg
-            fill="none"
-            height="16px"
-            version="1.1"
-            viewBox="0 0 16 16"
-            width="16px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
+            tabIndex={0}
           >
-            <title>
-              Light sensor
-            </title>
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              id="light_sensor"
-              stroke="none"
-              stroke-width="1"
+            <svg
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
+              <title>
+                Temperature Sensor
+              </title>
               <g
-                className="button-icon"
-                fill-rule="nonzero"
-                id="Group-10"
-                transform="translate(4.000000, 0.000000)"
+                fill="none"
+                fill-rule="evenodd"
+                id="temperature"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="light-bulb"
+                  className="button-icon"
+                  fill-rule="nonzero"
+                  id="thermometer"
+                  transform="translate(4.000000, 0.000000)"
                 >
                   <path
-                    d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
+                    d="M6.66665625,9.01853125 L6.66665625,2.66665625 C6.66665625,1.19390625 5.47275,0 4,0 C2.52725,0 1.33334375,1.19390625 1.33334375,2.66665625 L1.33334375,9.0185 C0.515,9.7509375 0,10.8153438 0,12 C0,14.2091562 1.790875,16 4,16 C6.209125,16 8,14.2091562 8,12 C8,10.8153438 7.485,9.7509375 6.66665625,9.01853125 Z M4,14.6666563 C2.52725,14.6666563 1.33334375,13.47275 1.33334375,12 C1.33334375,11.2300937 1.659625,10.515875 2.2225625,10.0120312 L2.6666875,9.61453125 L2.6666875,2.66665625 C2.6666875,1.93028125 3.26365625,1.3333125 4.00003125,1.3333125 C4.73640625,1.3333125 5.333375,1.93025 5.333375,2.66665625 L5.333375,9.61453125 L5.7775,10.0120312 C6.3404375,10.515875 6.66671875,11.2300625 6.66671875,12 C6.66665625,13.47275 5.47275,14.6666563 4,14.6666563 Z"
                     id="Shape"
                   />
-                  <path
-                    d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
-                    id="Shape"
+                  <rect
+                    height="8"
+                    id="Rectangle"
+                    width="1.33334375"
+                    x="3.33334375"
+                    y="5.33334375"
                   />
-                  <path
-                    d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
-                    id="Shape"
+                  <circle
+                    cx="4"
+                    cy="12"
+                    id="Oval"
+                    r="2"
                   />
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
-        <button
-          aria-label="toolbar accelerometer"
-          className="toolbar-button button"
-          id="toolbar-accelerometer-button"
-          onClick={[Function]}
-          role="button"
-          style={
-            Object {
-              "width": 32,
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+           
+          <button
+            aria-label="toolbar light-sensor"
+            className="toolbar-button button"
+            id="toolbar-light-sensor-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
             }
-          }
-          tabIndex={0}
+            tabIndex={0}
+          >
+            <svg
+              fill="none"
+              height="16px"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <title>
+                Light sensor
+              </title>
+              <g
+                fill="none"
+                fill-rule="evenodd"
+                id="light_sensor"
+                stroke="none"
+                stroke-width="1"
+              >
+                <g
+                  className="button-icon"
+                  fill-rule="nonzero"
+                  id="Group-10"
+                  transform="translate(4.000000, 0.000000)"
+                >
+                  <g
+                    id="light-bulb"
+                  >
+                    <path
+                      d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
+                      id="Shape"
+                    />
+                    <path
+                      d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
+                      id="Shape"
+                    />
+                    <path
+                      d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
+                      id="Shape"
+                    />
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </button>
+        </div>
+        <div
+          className="ms-TooltipHost root-49"
+          onBlurCapture={[Function]}
+          onFocusCapture={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          <svg
-            fill="none"
-            height="16px"
-            version="1.1"
-            viewBox="0 0 17 16"
-            width="17px"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlnsXlink="http://www.w3.org/1999/xlink"
+           
+          <button
+            aria-label="toolbar accelerometer-sensor"
+            className="toolbar-button button"
+            id="toolbar-accelerometer-sensor-button"
+            onClick={[Function]}
+            role="button"
+            style={
+              Object {
+                "width": 32,
+              }
+            }
+            tabIndex={0}
           >
-            <g
+            <svg
               fill="none"
-              fill-rule="evenodd"
-              id="motion_sensor"
-              stroke="none"
-              stroke-width="1"
+              height="16px"
+              version="1.1"
+              viewBox="0 0 17 16"
+              width="17px"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
             >
               <g
-                className="button-icon"
-                id="Group-10"
+                fill="none"
+                fill-rule="evenodd"
+                id="motion_sensor"
+                stroke="none"
+                stroke-width="1"
               >
                 <g
-                  id="Group-12"
+                  className="button-icon"
+                  id="Group-10"
                 >
-                  <path
-                    d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
-                    id="Fill-1"
-                  />
-                  <polygon
-                    id="Fill-3"
-                    points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
-                  />
-                  <polygon
-                    id="Fill-10"
-                    points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
-                  />
+                  <g
+                    id="Group-12"
+                  >
+                    <path
+                      d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
+                      id="Fill-1"
+                    />
+                    <polygon
+                      id="Fill-3"
+                      points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
+                    />
+                    <polygon
+                      id="Fill-10"
+                      points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
+                    />
+                  </g>
                 </g>
               </g>
-            </g>
-          </svg>
-        </button>
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>

From e4136cd1c5dc413ac333a97e3b70b6ec7238f2c6 Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 20 Feb 2020 09:27:27 -0800
Subject: [PATCH 4/5] Remove unecessary space

---
 src/view/components/toolbar/ToolBar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index d78ca44c5..d529e57c9 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -57,7 +57,6 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
                                         }}
                                         key={index}
                                     >
-                                        {" "}
                                         <Button
                                             key={index}
                                             label={currrentButton.label}

From 85129574fc2146b14728293cee8770d7e289a6ea Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Thu, 20 Feb 2020 09:54:43 -0800
Subject: [PATCH 5/5] Update tests

---
 src/view/__snapshots__/App.spec.tsx.snap              | 11 -----------
 .../components/cpx/__snapshots__/Cpx.spec.tsx.snap    | 11 -----------
 .../device/__snapshots__/Device.spec.tsx.snap         |  5 -----
 3 files changed, 27 deletions(-)

diff --git a/src/view/__snapshots__/App.spec.tsx.snap b/src/view/__snapshots__/App.spec.tsx.snap
index b995da821..ac3521338 100644
--- a/src/view/__snapshots__/App.spec.tsx.snap
+++ b/src/view/__snapshots__/App.spec.tsx.snap
@@ -3969,7 +3969,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar slider-switch"
                 className="toolbar-button button"
@@ -4037,7 +4036,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar push-button"
                 className="toolbar-button button"
@@ -4105,7 +4103,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar red-led"
                 className="toolbar-button button"
@@ -4171,7 +4168,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar sound-sensor"
                 className="toolbar-button button"
@@ -4248,7 +4244,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar temperature-sensor"
                 className="toolbar-button button"
@@ -4316,7 +4311,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar light-sensor"
                 className="toolbar-button button"
@@ -4384,7 +4378,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar neo-pixels"
                 className="toolbar-button button"
@@ -4488,7 +4481,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar speaker"
                 className="toolbar-button button"
@@ -4549,7 +4541,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar motion-sensor"
                 className="toolbar-button button"
@@ -4612,7 +4603,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar ir-sensor"
                 className="toolbar-button button"
@@ -4673,7 +4663,6 @@ exports[`App component  should render correctly 1`] = `
               onMouseEnter={[Function]}
               onMouseLeave={[Function]}
             >
-               
               <button
                 aria-label="toolbar gpio"
                 className="toolbar-button button"
diff --git a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
index 8d80bdd4b..2d51b191f 100644
--- a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
+++ b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
@@ -3961,7 +3961,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar slider-switch"
             className="toolbar-button button"
@@ -4029,7 +4028,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar push-button"
             className="toolbar-button button"
@@ -4097,7 +4095,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar red-led"
             className="toolbar-button button"
@@ -4163,7 +4160,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar sound-sensor"
             className="toolbar-button button"
@@ -4240,7 +4236,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar temperature-sensor"
             className="toolbar-button button"
@@ -4308,7 +4303,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar light-sensor"
             className="toolbar-button button"
@@ -4376,7 +4370,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar neo-pixels"
             className="toolbar-button button"
@@ -4480,7 +4473,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar speaker"
             className="toolbar-button button"
@@ -4541,7 +4533,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar motion-sensor"
             className="toolbar-button button"
@@ -4604,7 +4595,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar ir-sensor"
             className="toolbar-button button"
@@ -4665,7 +4655,6 @@ Array [
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar gpio"
             className="toolbar-button button"
diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
index 4ad9e03d4..39058db18 100644
--- a/src/view/container/device/__snapshots__/Device.spec.tsx.snap
+++ b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
@@ -2652,7 +2652,6 @@ exports[`Device component  should render correctly 1`] = `
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar microbit-button"
             className="toolbar-button button"
@@ -2720,7 +2719,6 @@ exports[`Device component  should render correctly 1`] = `
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar microbit-led"
             className="toolbar-button button"
@@ -2786,7 +2784,6 @@ exports[`Device component  should render correctly 1`] = `
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar temperature-sensor"
             className="toolbar-button button"
@@ -2854,7 +2851,6 @@ exports[`Device component  should render correctly 1`] = `
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar light-sensor"
             className="toolbar-button button"
@@ -2922,7 +2918,6 @@ exports[`Device component  should render correctly 1`] = `
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-           
           <button
             aria-label="toolbar accelerometer-sensor"
             className="toolbar-button button"