From 4a9cdcc9fafe3d5b2ef72f9b8b80743d5882e59c Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Tue, 13 Aug 2019 13:09:44 -0700
Subject: [PATCH 1/9] arrange hight contrast borders

---
 src/view/styles/Button.css       | 2 ++
 src/view/styles/InputSlider.css  | 6 +++---
 src/view/styles/SensorButton.css | 4 +++-
 src/view/styles/Simulator.css    | 2 +-
 src/view/styles/ToolBar.css      | 6 +++++-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/view/styles/Button.css b/src/view/styles/Button.css
index 0d4569e33..a7c64ba4d 100644
--- a/src/view/styles/Button.css
+++ b/src/view/styles/Button.css
@@ -10,10 +10,12 @@
 
 .play-button {
   border-radius: 8px 0px 0px 8px;
+  border-color: var(--vscode-contrastBorder);
 }
 
 .refresh-button {
   border-radius: 0px 8px 8px 0px;
+  border-color: var(--vscode-contrastBorder);
 }
 
 .button:hover {
diff --git a/src/view/styles/InputSlider.css b/src/view/styles/InputSlider.css
index 523e70d77..574096d53 100644
--- a/src/view/styles/InputSlider.css
+++ b/src/view/styles/InputSlider.css
@@ -13,16 +13,16 @@
   width: 48px;
   height: 32px;
   background-color: var(--vscode-editor-background);
-  color: white;
-  border: 0;
   margin-right: 15px;
   margin-top: auto;
   margin-bottom: auto;
   margin-left: 5px;
   color: var(--badge-foreground);
-  border-radius: 2px;
   font-size: 16px;
   font-weight: bold;
+  border-width: 1px;
+  border-radius: 2px;
+  border-color: var(--vscode-contrastBorder);
 }
 
 .slider {
diff --git a/src/view/styles/SensorButton.css b/src/view/styles/SensorButton.css
index c62bfdea4..0edf66284 100644
--- a/src/view/styles/SensorButton.css
+++ b/src/view/styles/SensorButton.css
@@ -4,12 +4,14 @@
   background-color: var(--vscode-button-background);
   width: 320px;
   height: 32px;
-  border: none;
   font-weight: bolder;
   float: left;
   padding-left: 20px;
   margin-bottom: 20px;
   margin-top: 20px;
+  border-color: var(--vscode-contrastBorder);
+  border-width: 1px;
+  border-style: solid;
 }
 
 .sensor-button:focus,
diff --git a/src/view/styles/Simulator.css b/src/view/styles/Simulator.css
index 0106b9a63..7fcc7f8f8 100644
--- a/src/view/styles/Simulator.css
+++ b/src/view/styles/Simulator.css
@@ -7,6 +7,6 @@
 .buttons {
   display: flex;
   flex-direction: row;
-  padding: 20px;
+  padding-top: 20px;
   justify-content: center;
 }
diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css
index 333d73fe4..35ebbddae 100644
--- a/src/view/styles/ToolBar.css
+++ b/src/view/styles/ToolBar.css
@@ -5,13 +5,16 @@
   height: fit-content;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 53px;
+  margin-top: 24px;
   margin-bottom: 50px;
 }
 
 .toolbar,
 .toolbar-icon {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%);
+  border-color: var(--vscode-contrastBorder);
+  border-width: 1px;
+  border-style: solid;
 }
 
 .tag,
@@ -27,6 +30,7 @@
   padding-left: 16px;
   box-shadow: none;
   background: var(--vscode-debugToolBar-background);
+  margin-left: 1px;
 }
 
 .title {

From 926dcb54d1fdfa69e1bde9b030379576529070b0 Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Tue, 13 Aug 2019 13:24:58 -0700
Subject: [PATCH 2/9] added scrollbar

---
 src/view/components/toolbar/ToolBar.tsx | 10 ++++++++++
 src/view/styles/ToolBar.css             |  5 ++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index 49b603574..6d0bd4315 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -114,6 +114,16 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               styleLabel="toolbar"
             />
 
+            <Button
+              label={TOOLBAR_ICON_ID.NEO_PIXEL}
+              width={this.TOOLBAR_BUTTON_WIDTH}
+              onClick={(e: React.MouseEvent<HTMLElement>) => {
+                this.handleOnClick(e, TOOLBAR_ICON_ID.NEO_PIXEL);
+              }}
+              image={TOOLBAR_SVG.NEO_PIXEL_SVG}
+              styleLabel="toolbar"
+            />
+
             <Button
               label={TOOLBAR_ICON_ID.SPEAKER}
               width={this.TOOLBAR_BUTTON_WIDTH}
diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css
index 35ebbddae..36f78bb5e 100644
--- a/src/view/styles/ToolBar.css
+++ b/src/view/styles/ToolBar.css
@@ -24,7 +24,10 @@
 
 .sensor_modal {
   vertical-align: middle;
-  width: 320px;
+  width: 360px;
+  max-height: 296px;
+  overflow-y: scroll;
+  overflow-x: hidden;
   position: relative;
   height: fit-content;
   padding-left: 16px;

From f2830e97b0abaa2f6c1cc240021eb4a73ad973c0 Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Wed, 14 Aug 2019 16:40:00 -0700
Subject: [PATCH 3/9] fixing highcontrast color

---
 package.json                     | 20 ++++++++++++++++++++
 src/view/styles/Button.css       |  4 ++--
 src/view/styles/InputSlider.css  |  2 +-
 src/view/styles/SensorButton.css |  2 +-
 src/view/styles/ToolBar.css      |  9 ++-------
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index f7a997832..ad267284b 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,26 @@
         }
       }
     ],
+    "colors": [
+      {
+        "id": "newHighContrast.color",
+        "description": "Color for the high contrast border updated",
+        "defaults": {
+          "dark": "editor.background",
+          "light": "editor.background",
+          "highContrast": "#6FC3DF"
+        }
+      },
+      {
+        "id": "newHighContrastButton.color",
+        "description": "Color for the high contrast border updated",
+        "defaults": {
+          "dark": "debugToolBar.background",
+          "light": "debugToolBar.background",
+          "highContrast": "#6FC3DF"
+        }
+      }
+    ],
     "menus": {
       "editor/title": [
         {
diff --git a/src/view/styles/Button.css b/src/view/styles/Button.css
index a7c64ba4d..3812259ef 100644
--- a/src/view/styles/Button.css
+++ b/src/view/styles/Button.css
@@ -10,12 +10,12 @@
 
 .play-button {
   border-radius: 8px 0px 0px 8px;
-  border-color: var(--vscode-contrastBorder);
+  border-color: var(--vscode-newHighContrastButton-color);
 }
 
 .refresh-button {
   border-radius: 0px 8px 8px 0px;
-  border-color: var(--vscode-contrastBorder);
+  border-color: var(--vscode-newHighContrastButton-color);
 }
 
 .button:hover {
diff --git a/src/view/styles/InputSlider.css b/src/view/styles/InputSlider.css
index 574096d53..29f645413 100644
--- a/src/view/styles/InputSlider.css
+++ b/src/view/styles/InputSlider.css
@@ -22,7 +22,7 @@
   font-weight: bold;
   border-width: 1px;
   border-radius: 2px;
-  border-color: var(--vscode-contrastBorder);
+  border-color: var(--vscode-newHighContrastButton-color);
 }
 
 .slider {
diff --git a/src/view/styles/SensorButton.css b/src/view/styles/SensorButton.css
index 0edf66284..462d95e54 100644
--- a/src/view/styles/SensorButton.css
+++ b/src/view/styles/SensorButton.css
@@ -9,7 +9,7 @@
   padding-left: 20px;
   margin-bottom: 20px;
   margin-top: 20px;
-  border-color: var(--vscode-contrastBorder);
+  border-color: var(--vscode-newHighContrastButton-color);
   border-width: 1px;
   border-style: solid;
 }
diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css
index 36f78bb5e..e4b0c28e9 100644
--- a/src/view/styles/ToolBar.css
+++ b/src/view/styles/ToolBar.css
@@ -12,7 +12,7 @@
 .toolbar,
 .toolbar-icon {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%);
-  border-color: var(--vscode-contrastBorder);
+  border-color: var(--vscode-newHighContrastButton-color);
   border-width: 1px;
   border-style: solid;
 }
@@ -25,7 +25,7 @@
 .sensor_modal {
   vertical-align: middle;
   width: 360px;
-  max-height: 296px;
+  max-height: 240px;
   overflow-y: scroll;
   overflow-x: hidden;
   position: relative;
@@ -54,11 +54,6 @@
   left: 200px;
 }
 
-.close_icon {
-  position: absolute;
-  right: 0;
-}
-
 .description {
   -webkit-appearance: none;
   font-size: 14px;

From 8cea0c8b3bdd8202b5eb5d185b8fa5a5614ca082 Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Wed, 14 Aug 2019 16:48:07 -0700
Subject: [PATCH 4/9] erasing the title of the sliders

---
 src/view/components/toolbar/ToolBar.tsx | 2 +-
 src/view/styles/ToolBar.css             | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index 6d0bd4315..d19c4b3c3 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -248,7 +248,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
         <br />
         <div className="description">{content["descriptionText"]}</div>
         <div className="try_area">
-          <div className="title"> {content["tryItTitle"]}</div>
+          {/* <div className="title"> {content["tryItTitle"]}</div> */}
           <br />
           <div className="description">{content["tryItDescriptrion"]}</div>
           <div>{component}</div>
diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css
index e4b0c28e9..aa1bbaf41 100644
--- a/src/view/styles/ToolBar.css
+++ b/src/view/styles/ToolBar.css
@@ -61,7 +61,6 @@
   word-wrap: break-word;
   width: 320px;
   margin-top: 15px;
-  margin-bottom: 15px;
   text-align: left;
   line-height: 17px;
   font-weight: 100;

From 7e2fe25a3c8cb26686dff78eb7233435d99effc3 Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Wed, 14 Aug 2019 17:12:17 -0700
Subject: [PATCH 5/9] adding last changes

---
 package.json                                    | 3 ++-
 src/view/components/toolbar/MotionSensorBar.tsx | 3 ---
 src/view/components/toolbar/ToolBar.tsx         | 2 --
 src/view/styles/MotionSensorBar.css             | 1 -
 4 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index ad267284b..f2f1253c7 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,8 @@
         "defaults": {
           "dark": "debugToolBar.background",
           "light": "debugToolBar.background",
-          "highContrast": "#6FC3DF"
+          "highContrast": "#6FC3DF",
+          "tomorrowNightBlue": "#6FC3DF"
         }
       }
     ],
diff --git a/src/view/components/toolbar/MotionSensorBar.tsx b/src/view/components/toolbar/MotionSensorBar.tsx
index 1ac5ae3d9..12a84fac4 100644
--- a/src/view/components/toolbar/MotionSensorBar.tsx
+++ b/src/view/components/toolbar/MotionSensorBar.tsx
@@ -68,9 +68,6 @@ class MotionSensorBar extends React.Component {
   render() {
     return (
       <div className="MotionSensorBar">
-        <div className="header">
-          <div className="title">{MOTION_SENSOR_PROPERTIES.LABEL}</div>
-        </div>
         <SensorButton
           label="Shake"
           type="shake"
diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index d19c4b3c3..2cb873362 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -248,8 +248,6 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
         <br />
         <div className="description">{content["descriptionText"]}</div>
         <div className="try_area">
-          {/* <div className="title"> {content["tryItTitle"]}</div> */}
-          <br />
           <div className="description">{content["tryItDescriptrion"]}</div>
           <div>{component}</div>
         </div>
diff --git a/src/view/styles/MotionSensorBar.css b/src/view/styles/MotionSensorBar.css
index cc298dde0..552e1ddcd 100644
--- a/src/view/styles/MotionSensorBar.css
+++ b/src/view/styles/MotionSensorBar.css
@@ -10,7 +10,6 @@
 }
 
 .MotionSensorBar {
-  margin-top: 10px;
   width: 440px;
   margin-left: auto;
   margin-right: auto;

From 2c6afda67a78a4b55ed1898db83245e05595c5aa Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Wed, 14 Aug 2019 17:13:46 -0700
Subject: [PATCH 6/9] removed unused color

---
 package.json | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/package.json b/package.json
index f2f1253c7..f75e1f5cf 100644
--- a/package.json
+++ b/package.json
@@ -67,15 +67,6 @@
       }
     ],
     "colors": [
-      {
-        "id": "newHighContrast.color",
-        "description": "Color for the high contrast border updated",
-        "defaults": {
-          "dark": "editor.background",
-          "light": "editor.background",
-          "highContrast": "#6FC3DF"
-        }
-      },
       {
         "id": "newHighContrastButton.color",
         "description": "Color for the high contrast border updated",

From 531bd50ac634c22c08377ef068e9b34daab94e11 Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Wed, 14 Aug 2019 18:07:09 -0700
Subject: [PATCH 7/9] remove forgotten dead line

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f75e1f5cf..1da6982c5 100644
--- a/package.json
+++ b/package.json
@@ -73,8 +73,7 @@
         "defaults": {
           "dark": "debugToolBar.background",
           "light": "debugToolBar.background",
-          "highContrast": "#6FC3DF",
-          "tomorrowNightBlue": "#6FC3DF"
+          "highContrast": "#6FC3DF"
         }
       }
     ],

From 181b249656edf33e493d2a462ce9254b10b0b533 Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Thu, 15 Aug 2019 14:29:10 -0700
Subject: [PATCH 8/9] merged with dev

---
 package.json                            | 4 ++--
 src/view/components/toolbar/ToolBar.tsx | 1 +
 src/view/styles/Button.css              | 4 ++--
 src/view/styles/InputSlider.css         | 2 +-
 src/view/styles/SensorButton.css        | 2 +-
 src/view/styles/ToolBar.css             | 2 +-
 6 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 4df94578c..d09111985 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     ],
     "colors": [
       {
-        "id": "newHighContrastButton.color",
+        "id": "highContrastButtonBorderOverwrite.color",
         "description": "Color for the high contrast border updated",
         "defaults": {
           "dark": "debugToolBar.background",
@@ -282,4 +282,4 @@
   "extensionDependencies": [
     "ms-python.python"
   ]
-}
\ No newline at end of file
+}
diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
index 425b283be..ebb0e37d6 100644
--- a/src/view/components/toolbar/ToolBar.tsx
+++ b/src/view/components/toolbar/ToolBar.tsx
@@ -129,6 +129,7 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               }}
               image={TOOLBAR_SVG.NEO_PIXEL_SVG}
               styleLabel="toolbar"
+              focusable={true}
             />
 
             <Button
diff --git a/src/view/styles/Button.css b/src/view/styles/Button.css
index b3ae4b78f..fd1616cb2 100644
--- a/src/view/styles/Button.css
+++ b/src/view/styles/Button.css
@@ -10,12 +10,12 @@
 
 .play-button {
   border-radius: 8px 0px 0px 8px;
-  border-color: var(--vscode-newHighContrastButton-color);
+  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
 }
 
 .refresh-button {
   border-radius: 0px 8px 8px 0px;
-  border-color: var(--vscode-newHighContrastButton-color);
+  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
 }
 
 .button:focus,
diff --git a/src/view/styles/InputSlider.css b/src/view/styles/InputSlider.css
index 29f645413..46cc75f8f 100644
--- a/src/view/styles/InputSlider.css
+++ b/src/view/styles/InputSlider.css
@@ -22,7 +22,7 @@
   font-weight: bold;
   border-width: 1px;
   border-radius: 2px;
-  border-color: var(--vscode-newHighContrastButton-color);
+  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
 }
 
 .slider {
diff --git a/src/view/styles/SensorButton.css b/src/view/styles/SensorButton.css
index 462d95e54..4aa073cf9 100644
--- a/src/view/styles/SensorButton.css
+++ b/src/view/styles/SensorButton.css
@@ -9,7 +9,7 @@
   padding-left: 20px;
   margin-bottom: 20px;
   margin-top: 20px;
-  border-color: var(--vscode-newHighContrastButton-color);
+  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
   border-width: 1px;
   border-style: solid;
 }
diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css
index aa1bbaf41..1287b131c 100644
--- a/src/view/styles/ToolBar.css
+++ b/src/view/styles/ToolBar.css
@@ -12,7 +12,7 @@
 .toolbar,
 .toolbar-icon {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%);
-  border-color: var(--vscode-newHighContrastButton-color);
+  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
   border-width: 1px;
   border-style: solid;
 }

From 6ac2ed30620a61c03c0b3528bb39c9fef9831fbc Mon Sep 17 00:00:00 2001
From: Fatou Mounzeo <t-famoun@microsoft.com>
Date: Thu, 15 Aug 2019 16:38:57 -0700
Subject: [PATCH 9/9] change overwrite to override

---
 package.json                     | 2 +-
 src/view/styles/Button.css       | 4 ++--
 src/view/styles/InputSlider.css  | 2 +-
 src/view/styles/SensorButton.css | 2 +-
 src/view/styles/ToolBar.css      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index e66a7dd80..24f63c176 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     ],
     "colors": [
       {
-        "id": "highContrastButtonBorderOverwrite.color",
+        "id": "highContrastButtonBorderOverride.color",
         "description": "Color for the high contrast border updated",
         "defaults": {
           "dark": "debugToolBar.background",
diff --git a/src/view/styles/Button.css b/src/view/styles/Button.css
index fd1616cb2..5ba6e6009 100644
--- a/src/view/styles/Button.css
+++ b/src/view/styles/Button.css
@@ -10,12 +10,12 @@
 
 .play-button {
   border-radius: 8px 0px 0px 8px;
-  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
+  border-color: var(--vscode-highContrastButtonBorderOverride-color);
 }
 
 .refresh-button {
   border-radius: 0px 8px 8px 0px;
-  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
+  border-color: var(--vscode-highContrastButtonBorderOverride-color);
 }
 
 .button:focus,
diff --git a/src/view/styles/InputSlider.css b/src/view/styles/InputSlider.css
index 46cc75f8f..755f5b28b 100644
--- a/src/view/styles/InputSlider.css
+++ b/src/view/styles/InputSlider.css
@@ -22,7 +22,7 @@
   font-weight: bold;
   border-width: 1px;
   border-radius: 2px;
-  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
+  border-color: var(--vscode-highContrastButtonBorderOverride-color);
 }
 
 .slider {
diff --git a/src/view/styles/SensorButton.css b/src/view/styles/SensorButton.css
index 4aa073cf9..bbafef065 100644
--- a/src/view/styles/SensorButton.css
+++ b/src/view/styles/SensorButton.css
@@ -9,7 +9,7 @@
   padding-left: 20px;
   margin-bottom: 20px;
   margin-top: 20px;
-  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
+  border-color: var(--vscode-highContrastButtonBorderOverride-color);
   border-width: 1px;
   border-style: solid;
 }
diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css
index 1287b131c..2dfe1a17c 100644
--- a/src/view/styles/ToolBar.css
+++ b/src/view/styles/ToolBar.css
@@ -12,7 +12,7 @@
 .toolbar,
 .toolbar-icon {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%);
-  border-color: var(--vscode-highContrastButtonBorderOverwrite-color);
+  border-color: var(--vscode-highContrastButtonBorderOverride-color);
   border-width: 1px;
   border-style: solid;
 }