fix other styling issues with toast being too high up on mobile

aws-amplify · Jan 9, 2024 · 4bfea8e · 4bfea8e
1 parent 4e4252a
commit 4bfea8e
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 52 deletions.
diff --git a/...react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx b/...react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
@@ -310,6 +310,64 @@ export const LivenessCameraModule = (
       >
         {!isCameraReady && centeredLoader}
 
+        <Overlay
+          horizontal="center"
+          vertical={
+            isRecording && !isFlashingFreshness ? 'start' : 'space-between'
+          }
+          className={LivenessClassNames.InstructionOverlay}
+        >
+          {isRecording && (
+            <DefaultRecordingIcon
+              recordingIndicatorText={recordingIndicatorText}
+            />
+          )}
+
+          {!isStartView && !isWaitingForCamera && !isCheckSucceeded && (
+            <DefaultCancelButton
+              cancelLivenessCheckText={cancelLivenessCheckText}
+            />
+          )}
+
+          <Flex
+            className={classNames(
+              LivenessClassNames.Hint,
+              shouldShowFullScreenCamera && `${LivenessClassNames.Hint}--mobile`
+            )}
+          >
+            <Hint hintDisplayText={hintDisplayText} />
+          </Flex>
+
+          {errorState && (
+            <ErrorView
+              onRetry={() => {
+                send({ type: 'CANCEL' });
+              }}
+              displayText={errorDisplayText}
+            >
+              {renderErrorModal({
+                errorState,
+                overrideErrorDisplayText: errorDisplayText,
+              })}
+            </ErrorView>
+          )}
+
+          {/* 
+              We only want to show the MatchIndicator when we're recording
+              and when the face is in either the too far state, or the 
+              initial face identified state. Using the a memoized MatchIndicator here
+              so that even when this component re-renders the indicator is only
+              re-rendered if the percentage prop changes.
+            */}
+          {isRecording &&
+          !isFlashingFreshness &&
+          showMatchIndicatorStates.includes(faceMatchState!) ? (
+            <MemoizedMatchIndicator
+              percentage={Math.ceil(faceMatchPercentage!)}
+            />
+          ) : null}
+        </Overlay>
+
         <View
           as="canvas"
           ref={freshnessColorRef}
@@ -345,57 +403,6 @@ export const LivenessCameraModule = (
             <View as="canvas" ref={canvasRef} />
           </Flex>
 
-          {isRecording && (
-            <DefaultRecordingIcon
-              recordingIndicatorText={recordingIndicatorText}
-            />
-          )}
-
-          {!isStartView && !isWaitingForCamera && !isCheckSucceeded && (
-            <DefaultCancelButton
-              cancelLivenessCheckText={cancelLivenessCheckText}
-            />
-          )}
-
-          <Overlay
-            horizontal="center"
-            vertical={
-              isRecording && !isFlashingFreshness ? 'start' : 'space-between'
-            }
-            className={LivenessClassNames.InstructionOverlay}
-          >
-            <Hint hintDisplayText={hintDisplayText} />
-
-            {errorState && (
-              <ErrorView
-                onRetry={() => {
-                  send({ type: 'CANCEL' });
-                }}
-                displayText={errorDisplayText}
-              >
-                {renderErrorModal({
-                  errorState,
-                  overrideErrorDisplayText: errorDisplayText,
-                })}
-              </ErrorView>
-            )}
-
-            {/* 
-              We only want to show the MatchIndicator when we're recording
-              and when the face is in either the too far state, or the 
-              initial face identified state. Using the a memoized MatchIndicator here
-              so that even when this component re-renders the indicator is only
-              re-rendered if the percentage prop changes.
-            */}
-            {isRecording &&
-            !isFlashingFreshness &&
-            showMatchIndicatorStates.includes(faceMatchState!) ? (
-              <MemoizedMatchIndicator
-                percentage={Math.ceil(faceMatchPercentage!)}
-              />
-            ) : null}
-          </Overlay>
-
           {isStartView &&
             !isMobileScreen &&
             selectableDevices &&

diff --git a/packages/ui/src/theme/css/component/liveness.scss b/packages/ui/src/theme/css/component/liveness.scss
@@ -42,6 +42,7 @@
   left: 0;
   height: 100%;
   width: 100%;
+  z-index: 2;
 }
 
 .amplify-liveness-video {
@@ -110,7 +111,7 @@
 }
 
 .amplify-liveness-instruction-overlay {
-  z-index: 1;
+  z-index: 2;
 }
 
 .amplify-liveness-countdown-container {
@@ -131,6 +132,7 @@
   padding: var(--amplify-space-small);
   max-width: 100%;
 }
+
 .amplify-liveness-toast__message {
   color: var(--amplify-colors-font-primary);
   text-align: center;
@@ -336,6 +338,10 @@
   font-weight: var(--amplify-font-weights-bold);
 }
 
+.amplify-liveness-hint--mobile {
+  margin-top: var(--amplify-space-xxxl);
+}
+
 .amplify-liveness-hint__text {
   align-items: center;
   gap: var(--amplify-space-xs);
@@ -415,5 +421,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
   height: 480px;
 }