Merge branch 'UEPR-282-face-sensing' of github.com:scratchfoundation/scratch-editor into UEPR-56-UEPR-282

Author: adzhindzhi

packages/scratch-gui/src/components/alerts/alert.css

@@ -2,7 +2,7 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
-.alert {
+body .alert {
     width: 100%;
     display: flex;
     flex-direction: row;

packages/scratch-gui/src/components/cards/card.css

@@ -2,13 +2,13 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
-.card-container-overlay {
+body .card-container-overlay {
     position: fixed;
     pointer-events: none;
     z-index: $z-index-card;
 }
 
-.card-container {
+body .card-container {
     position:absolute;
     pointer-events: auto;
     z-index: $z-index-card;

packages/scratch-gui/src/components/drag-layer/drag-layer.css

@@ -2,7 +2,7 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
-.drag-layer {
+body .drag-layer {
     position: fixed;
     pointer-events: none;
     z-index: $z-index-drag-layer;

packages/scratch-gui/src/components/gui/gui.css

@@ -229,7 +229,7 @@
 }
 
 /* Sprite Selection Watermark */
-.watermark {
+body .watermark {
     position: absolute;
     top: 1.25rem;
     pointer-events: none;
@@ -251,7 +251,7 @@
 }
 /* Alerts */
 
-.alerts-container {
+body .alerts-container {
     display: flex;
     justify-content: center;
     width: 100%;

packages/scratch-gui/src/components/library/library.jsx

@@ -232,10 +232,11 @@ class LibraryComponent extends React.Component {
     handleSelect (id) {
         const selectedItem = this.getFilteredData().find(item => this.constructKey(item) === id);
 
-        if (this.state.shouldShowFaceSensingCallout && !this.driver && selectedItem.extensionId !== 'faceSensing') {
-            return;
-        }
         if (this.state.shouldShowFaceSensingCallout && selectedItem.extensionId === 'faceSensing') {
+            if (!this.driver) {
+                return;
+            }
+       
             setHasUsedFaceSensing(this.props.username);
             this.setState({
                 shouldShowFaceSensingCallout: false

packages/scratch-gui/src/components/monitor-list/monitor-list.css

@@ -1,4 +1,4 @@
-.monitor-list {
+body .monitor-list {
     /* Width/height are set by the component, margin: auto centers in fullscreen */
     margin: auto;
     pointer-events: none;

packages/scratch-gui/src/components/monitor/monitor.css

@@ -2,7 +2,7 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
-.monitor-container {
+body .monitor-container {
     position: absolute;
     background: $ui-primary;
     z-index: $z-index-monitor;

packages/scratch-gui/src/components/sprite-info/sprite-info.css

@@ -47,7 +47,7 @@
     user-select: none;
 }
 
-.icon {
+body .icon {
     width: 100%;
     height: 100%;
     pointer-events: none;

packages/scratch-gui/src/components/sprite-selector-item/sprite-selector-item.css

@@ -54,7 +54,7 @@
     align-items: center;
 }
 
-.sprite-image {
+body .sprite-image {
     user-select: none;
     pointer-events: none;
     max-width: 32px;

packages/scratch-gui/src/components/stage/stage.css

@@ -53,7 +53,7 @@
 /* we want stage overlays to all be positioned in the same spot as the stage, but can't put them inside the border
 because we want their overflow to be visible, and the bordered element must have overflow: hidden set so that the
 stage doesn't "spill" out from under its rounded corners. instead, shift these over by the border width. */
-.stage-overlays {
+body .stage-overlays {
     position: absolute;
     top: $stage-standard-border-width;
     left: $stage-standard-border-width;
@@ -67,9 +67,9 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
     left: $stage-full-screen-border-width;
 }
 
-.monitor-wrapper,
-.frame-wrapper,
-.green-flag-overlay-wrapper {
+body .monitor-wrapper,
+body .frame-wrapper,
+body .green-flag-overlay-wrapper {
     position: absolute;
     top: 0;
     left: 0;
@@ -84,7 +84,7 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
     filter: drop-shadow(5px 5px 5px $ui-black-transparent);
 }
 
-.stage-bottom-wrapper {
+body .stage-bottom-wrapper {
     position: absolute;
     display: flex;
     flex-direction: column;