Change snapshot and fix other minor issues

Author: michaeljqzq

src/component/helpOverlay/helpOverlay.css

@@ -9,7 +9,6 @@
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 5; /* Specify a stack order in case you're using a different order for other elements */
- cursor: pointer; /* Add a pointer on hover */
 }
 
 .closeButton {
@@ -20,7 +19,7 @@
 
 .instruction {
  position: absolute;
- width: 720px;
+ width: 750px;
  height: 500px;
  margin: -250px 0 0 -360px;
  top: 50%;
@@ -37,14 +36,15 @@
  display: inline-block;
  width: 465px;
  height: 100%;
- margin-left: 127px;
+ margin-left: 142px;
 }
 
 .step {
  width: 155px;
  height: 100%;
  display: inline-block;
  position: relative;
+ cursor: pointer;
 }
 
 .step div {
@@ -84,7 +84,7 @@
  display: inline-block;
  font-size: 25px;
  height: 100%;
- margin-left: 85px;
+ margin-left: 100px;
  /*padding-top: 10px;*/
  text-align: center;
  color: white;
@@ -108,9 +108,8 @@
 
 .text-instruction-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- font-weight: 300;
+ font-weight: normal;
  color: #333333;
- height: 53px;
  line-height: 27px;
  font-size: 20px;
  margin-bottom: 20px
@@ -166,22 +165,23 @@
  left: 360px;
  width: 360px;
  height: 100%;
- padding: 80px 30px;
+ padding: 80px 0;
 }
 
 .picture-container {
- height: 210px;
+ height: 234px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
+ border: 2px solid rgba(204,205,206,0.5);
 }
 
 .picture {
  position: absolute;
  transition: 0.5s all ease;
  top: 0;
- width: 300px;
- height: 214px;
+ width: 360px;
+ height: 234px;
  margin-bottom: 20px;
 }
 
@@ -193,12 +193,12 @@
 .picture-indicator {
  display: inline-block;
  margin: 0 10px;
- width: 17px;
- height: 17px;
- border: 4px solid white;
+ width: 9px;
+ height: 9px;
  border-radius: 100%;
  background: #cccdce;
  transition: 0.5s all ease;
+ cursor: pointer;
 }
 
 .picture-indicator-selected {
@@ -210,6 +210,7 @@
  font-size: 15px;
  line-height: 20px;
  margin-top: 30px;
+ height: 30px;
 }
 
 .operation-button-1 {
@@ -219,6 +220,7 @@
  border: 1px solid #cccdce;
  padding: 4px 30px;
  margin: 0 10px 0 0;
+ cursor: pointer;
 }
 
 .operation-button-1:hover {
@@ -230,23 +232,24 @@
  padding: 4px 30px;
  background-color: #0078d7;
  color: white;
+ cursor: pointer;
 }
 
 .operation-button-2:hover {
  background-color: #0063b1;
 }
 
 .link-container {
- margin-top: 5px;
+ margin-top: 15px;
 }
 
 .link-container a {
- float: right;
- padding: 0 10px;
+ padding-right: 10px;
+ font-size: 12px;
 }
 
 .link-container a:visited {
- text-decoration: 
+ text-decoration: none;
 }
 
 .element-none {

src/component/helpOverlay/helpOverlay.js

@@ -3,12 +3,12 @@ import { traceEvent } from '../../lib/telemetry.js';
 import './helpOverlay.css';
 import closeButton from '../../img/closeButton.png';
 // import connectionStringInPortal from '../../img/connectionStringInPortal.png';
-import img1 from '../../img/test-1.png';
-import img2_1 from '../../img/test-2-1.png';
-import img2_2 from '../../img/test-2-2.png';
-import img2_3 from '../../img/test-2-3.png';
-import img3_1 from '../../img/test-3-1.png';
-import img3_2 from '../../img/test-3-2.png';
+import img1 from '../../img/step1.png';
+import img2_1 from '../../img/step2_1.png';
+import img2_2 from '../../img/step2_2.png';
+import img2_3 from '../../img/step2_3.png';
+import img3_1 from '../../img/step3_1.png';
+import img3_2 from '../../img/step3_2.png';
 
 class HelpOverlay extends Component {
  constructor(props) {
@@ -17,13 +17,14 @@ class HelpOverlay extends Component {
  step: 0,
  numOfSteps: 3,
  subStep: 0,
+ timeSpan: 3000,
  numOfSubStep: [3,3,2],
- offset: [[0,50,120],[0,90,140],[0,50]]
+ offset: [[0,50,120],[0,70,120],[0,50]]
  };
  if(this.toggleInterval) {
  clearInterval(this.toggleInterval);
  }
- this.toggleInterval = setInterval(()=>{this.toggleStep();},5000);
+ this.toggleInterval = setInterval(()=>{this.toggleStep();},this.state.timeSpan);
  }
 
  nextStep = () => {
@@ -51,7 +52,7 @@ class HelpOverlay extends Component {
  if(this.toggleInterval) {
  clearInterval(this.toggleInterval);
  }
- this.toggleInterval = setInterval(()=>{this.toggleStep();},5000);
+ this.toggleInterval = setInterval(()=>{this.toggleStep();},this.state.timeSpan);
  }
 
  goToSubStep = (id) => {
@@ -122,7 +123,7 @@ class HelpOverlay extends Component {
  if(this.toggleInterval) {
  clearInterval(this.toggleInterval);
  }
- this.toggleInterval = setInterval(()=>{this.toggleStep();},5000);
+ this.toggleInterval = setInterval(()=>{this.toggleStep();},this.state.timeSpan);
  }
  }
 
@@ -178,7 +179,7 @@ class HelpOverlay extends Component {
  </div>
  <div className={`paragraph-container ${this.state.step === 1 ? '':'element-none'}`}>
  <div className={`paragraph ${this.state.subStep === 0 ? 'paragraph-selected':''}`} style={{transform:"translate(0,-"+this.state.offset[this.state.step][this.state.subStep]+"px"}}>
- 1. In the Azure portal(https://portal.azure.com/), click New > Internet of Things > IoT Hub to provision a new IoT hub.
+ 1. In the <a target="_blank" href="https://portal.azure.com/">Azure portal</a>, click New > Internet of Things > IoT Hub to provision a new IoT hub.
  </div>
  <div className={`paragraph ${this.state.subStep === 1 ? 'paragraph-selected':''}`} style={{transform:"translate(0,-"+this.state.offset[this.state.step][this.state.subStep]+"px"}}>
  2. In the Device Explorer pane, click Add to add a device to your IoT hub.
@@ -209,6 +210,10 @@ class HelpOverlay extends Component {
  {this.state.step === this.state.numOfSteps - 1 ? "Got it" : "Next"}
  </div>
  </div>
+ <div className="link-container">
+ <a target="_blank" href="https://docs.microsoft.com/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started">See doc</a>
+ <a target="_blank" href="https://github.com/Azure-Samples/raspberry-pi-web-simulator">View source</a>
+ </div>
  </div>
  <div onWheel={this.changeSubStep} className="picture-instruction">
  <div className={`picture-container ${this.state.step === 0 ? '':'element-none'}`} >
@@ -228,10 +233,7 @@ class HelpOverlay extends Component {
  <div className={`picture-indicator ${this.state.step === 0 || this.state.numOfSubStep[this.state.step] <= 1 ? 'element-hide':''} ${this.state.subStep === 1 ? 'picture-indicator-selected':''}`} onClick={this.goToSubStep.bind(this,1)} />
  <div className={`picture-indicator ${this.state.step === 0 || this.state.numOfSubStep[this.state.step] <= 2 ? 'element-hide':''} ${this.state.subStep === 2 ? 'picture-indicator-selected':''}`} onClick={this.goToSubStep.bind(this,2)} />
  </div>
- <div className="link-container">
- <a target="_blank" href="https://docs.microsoft.com/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started">See doc</a>
- <a target="_blank" href="https://github.com/Azure-Samples/raspberry-pi-web-simulator">View source</a>
- </div>
+ 
  </div>
  </div>
  </div>