Remove lightbox button, semantic compatibility fixes (microsoft#8518)

shakao · web-flow · commit 6a08a8ecfd2f · 2021-09-24T10:15:27.000-07:00
diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
@@ -128,13 +128,14 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
         const { activeTab, height } = this.state;
 
         const isTabTutorial = tutorialOptions?.tutorial && !pxt.BrowserUtils.useOldTutorialLayout();
+        const isLockedEditor = pxt.appTarget.appTheme.lockedEditor;
         const hasSimulator = !pxt.appTarget.simulator?.headless;
         const marginHeight = hasSimulator ? "6.5rem" : "3rem";
 
         return <div id="simulator" className="simulator">
             <TabPane id="editorSidebar" activeTabName={activeTab} style={height ? { height: `calc(${height}px + ${marginHeight})` } : undefined}>
                 {hasSimulator && <TabContent name={SIMULATOR_TAB} icon="game" onSelected={this.showSimulatorTab} ariaLabel={lf("Open the simulator tab")}>
-                    {isTabTutorial && this.tutorialExitButton()}
+                    {isTabTutorial && !isLockedEditor && this.tutorialExitButton()}
                     <div className="ui items simPanel" ref={this.handleSimPanelRef}>
                         <div id="boardview" className="ui vertical editorFloat" role="region" aria-label={lf("Simulator")} tabIndex={inHome ? -1 : 0} />
                         <simtoolbar.SimulatorToolbar parent={parent} collapsed={collapseEditorTools} simSerialActive={simSerialActive} devSerialActive={deviceSerialActive} showSimulatorSidebar={this.showSimulatorTab} />
diff --git a/webapp/src/tutorial.tsx b/webapp/src/tutorial.tsx
@@ -735,7 +735,7 @@ export class TutorialCard extends data.Component<TutorialCardProps, TutorialCard
                     <div className="avatar-container">
                         {(!showDialog && hasHint) && <sui.Button
                             className={`ui circular label blue hintbutton hidelightbox ${this.props.pokeUser ? 'shake flash' : ''}`}
-                            icon="lightbulb outline"
+                            icon="lightbulb"
                             aria-label={tutorialAriaLabel} title={tutorialHintTooltip}
                             onClick={hintOnClick} onKeyDown={sui.fireClickOnEnter}
                         />}
@@ -744,7 +744,6 @@ export class TutorialCard extends data.Component<TutorialCardProps, TutorialCard
                     </div>
                     {this.state.showSeeMore && !tutorialStepExpanded && <sui.Button className="fluid compact lightgrey" icon="chevron down" tabIndex={0} text={lf("More...")} onClick={this.toggleExpanded} onKeyDown={sui.fireClickOnEnter} />}
                     {this.state.showSeeMore && tutorialStepExpanded && <sui.Button className="fluid compact lightgrey" icon="chevron up" tabIndex={0} text={lf("Less...")} onClick={this.toggleExpanded} onKeyDown={sui.fireClickOnEnter} />}
-                    <sui.Button ref="tutorialok" id="tutorialOkButton" className="large green okbutton showlightbox" text={lf("Ok")} onClick={this.closeLightbox} onKeyDown={sui.fireClickOnEnter} />
                 </div>
                 {hasNext ? <sui.Button icon={`${isRtl ? 'left' : 'right'} chevron large`} className={`nextbutton right attached ${!hasNext ? 'disabled' : ''}  ${tutorialCodeValidated ? 'isValidated' : ''}`} text={lf("Next")} textClass="widedesktop only" ariaLabel={lf("Go to the next step of the tutorial.")}
                     onClick={nextOnClick} onKeyDown={sui.fireClickOnEnter} /> : undefined}
