Improve UI

package.json

@@ -95,6 +95,15 @@
       }
     ],
     "colors": [
+      {
+        "id": "highContrastButtonBorderOverride.color",
+        "description": "Color for the high contrast border updated",
+        "defaults": {
+          "dark": "debugToolBar.background",
+          "light": "debugToolBar.background",
+          "highContrast": "#6FC3DF"
+        }
+      },
       {
         "id": "badgeForegroundOverwrite",
         "description": "Color that fixes the issue with midnight blue ",
@@ -309,4 +318,4 @@
   "extensionDependencies": [
     "ms-python.python"
   ]
-}
+}

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"

src/view/components/toolbar/ToolBar.tsx

@@ -121,6 +121,17 @@ class ToolBar extends React.Component<any, IToolbarState, any> {
               focusable={true}
             />
 
+            <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"
+              focusable={true}
+            />
+
             <Button
               label={TOOLBAR_ICON_ID.SPEAKER}
               width={this.TOOLBAR_BUTTON_WIDTH}
@@ -250,8 +261,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>

src/view/styles/Button.css

@@ -10,10 +10,12 @@
 
 .play-button {
   border-radius: 8px 0px 0px 8px;
+  border-color: var(--vscode-highContrastButtonBorderOverride-color);
 }
 
 .refresh-button {
   border-radius: 0px 8px 8px 0px;
+  border-color: var(--vscode-highContrastButtonBorderOverride-color);
 }
 
 .button:focus,

src/view/styles/InputSlider.css

@@ -13,8 +13,6 @@
   width: 48px;
   height: 32px;
   background-color: var(--vscode-editor-background);
-  color: white;
-  border: 0;
   margin-right: 15px;
   margin-top: auto;
   margin-bottom: auto;
@@ -23,6 +21,9 @@
   border-radius: 2px;
   font-size: 16px;
   font-weight: bold;
+  border-width: 1px;
+  border-radius: 2px;
+  border-color: var(--vscode-highContrastButtonBorderOverride-color);
 }
 
 .slider {

src/view/styles/MotionSensorBar.css

@@ -10,7 +10,6 @@
 }
 
 .MotionSensorBar {
-  margin-top: 10px;
   width: 440px;
   margin-left: auto;
   margin-right: auto;

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-highContrastButtonBorderOverride-color);
+  border-width: 1px;
+  border-style: solid;
 }
 
 .sensor-button:focus,

src/view/styles/Simulator.css

@@ -7,6 +7,6 @@
 .buttons {
   display: flex;
   flex-direction: row;
-  padding: 20px;
+  padding-top: 20px;
   justify-content: center;
 }

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-highContrastButtonBorderOverride-color);
+  border-width: 1px;
+  border-style: solid;
 }
 
 .tag,
@@ -21,12 +24,16 @@
 
 .sensor_modal {
   vertical-align: middle;
-  width: 320px;
+  width: 360px;
+  max-height: 240px;
+  overflow-y: scroll;
+  overflow-x: hidden;
   position: relative;
   height: fit-content;
   padding-left: 16px;
   box-shadow: none;
   background: var(--vscode-debugToolBar-background);
+  margin-left: 1px;
 }
 
 .title {
@@ -47,19 +54,13 @@
   left: 200px;
 }
 
-.close_icon {
-  position: absolute;
-  right: 0;
-}
-
 .description {
   -webkit-appearance: none;
   font-size: 14px;
   color: var(--vscode-foreground);
   word-wrap: break-word;
   width: 320px;
   margin-top: 15px;
-  margin-bottom: 15px;
   text-align: left;
   line-height: 17px;
   font-weight: 100;