refactor(LIvenessCameraModule): change inline style to css class (#663)

* refactor(liveness) amplify-liveness-camera-module style to class * refactor(liveness) amplify-liveness-camera-module more style to class * refactor(liveness) amplify-liveness-camera-module even more style to class * fix(theme): update test snapshot * refactor(liveness): use enum for classnames Co-authored-by: MJ☔ <[email protected]>
aws-amplify · Dec 27, 2022 · 886bc24 · 886bc24
1 parent 6e1ae45
commit 886bc24
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 52 deletions.
diff --git a/packages/react/src/components/Liveness/LivenessCheck/LivenessCameraModule.tsx b/packages/react/src/components/Liveness/LivenessCheck/LivenessCameraModule.tsx
@@ -12,6 +12,7 @@ import {
 import { CancelButton, Instruction, RecordingIcon, Overlay } from '../shared';
 import { isFirefox, isAndroid, isIOS } from '../utils/device';
 import { Flex, Loader, Text, View } from '../../../primitives';
+import { LivenessClassNames } from '../types/classNames';
 
 export const selectVideoConstraints = createLivenessSelector(
   (state) => state.context.videoAssociatedParams?.videoConstraints
@@ -84,10 +85,7 @@ export const LivenessCameraModule = (
 
   const centeredLoader = (
     <View
-      position="absolute"
-      left="50%"
-      top="50%"
-      transform="translate(-50%,-50%)"
+      className={LivenessClassNames.CameraModuleCenteredLoader}
       data-testid="centered-loader"
     >
       <Loader size="large" />
@@ -103,33 +101,13 @@ export const LivenessCameraModule = (
   }
 
   return (
-    <Flex
-      direction="column"
-      alignItems="center"
-      justifyContent="center"
-      position={isMobileScreen ? 'fixed' : 'relative'}
-      backgroundColor="black"
-      {...(isMobileScreen && {
-        top: 0,
-        left: 0,
-        height: '100%',
-        width: '100%',
-      })}
-    >
+    <Flex className={LivenessClassNames.CameraModule}>
       {!isCameraReady && centeredLoader}
 
       <View
         as="canvas"
         ref={freshnessColorRef}
-        height="100%"
-        width="100%"
-        position="fixed"
-        top={0}
-        left={0}
-        style={{
-          pointerEvents: 'none',
-          zIndex: 1,
-        }}
+        className={LivenessClassNames.CameraModuleCanvas}
         hidden
       />
 
@@ -149,18 +127,14 @@ export const LivenessCameraModule = (
         width={mediaWidth}
         onCanPlay={handleMediaPlay}
         data-testid="video"
-        className={isRecordingStopped ? 'amplify-liveness-fade-out' : null}
+        className={`${LivenessClassNames.CameraModuleVideo} ${
+          isRecordingStopped ? LivenessClassNames.FadeOut : null
+        }`}
       />
       <Flex
-        direction="column"
-        position="absolute"
-        top={0}
-        left={0}
-        width="100%"
-        height="100%"
-        alignItems="center"
-        justifyContent="center"
-        className={isRecordingStopped ? 'amplify-liveness-fade-out' : null}
+        className={`${LivenessClassNames.CameraModuleVideoContainer} ${
+          isRecordingStopped ? LivenessClassNames.FadeOut : null
+        }`}
       >
         <View
           as="canvas"
@@ -171,36 +145,24 @@ export const LivenessCameraModule = (
       </Flex>
 
       {isRecording && (
-        <View
-          style={{ zIndex: 1 }}
-          position="absolute"
-          top="medium"
-          left="medium"
-        >
+        <View className={LivenessClassNames.CameraModuleRecordingIconContainer}>
           <RecordingIcon />
         </View>
       )}
 
-      <View
-        style={{ zIndex: 2 }}
-        position="absolute"
-        top="medium"
-        right="medium"
-      >
+      <View className={LivenessClassNames.CameraModuleCancelButtonContainer}>
         <CancelButton sourceScreen={LIVENESS_EVENT_LIVENESS_CHECK_SCREEN} />
       </View>
       {countDownRunning && (
         <Overlay
-          style={{ zIndex: 1 }}
           anchorOrigin={{ horizontal: 'center', vertical: 'end' }}
+          className={LivenessClassNames.CameraModuleOverlayCountdown}
         >
           <Instruction />
 
           {isNotRecording && (
             <View
-              backgroundColor="background.primary"
-              borderRadius="100%"
-              padding="8px"
+              className={LivenessClassNames.CameraModuleCountdownTimerContainer}
             >
               <CountdownCircleTimer
                 isPlaying={isNotRecording}

diff --git a/packages/react/src/components/Liveness/types/classNames.ts b/packages/react/src/components/Liveness/types/classNames.ts
@@ -0,0 +1,12 @@
+export enum LivenessClassNames {
+  FadeOut = 'amplify-liveness-fade-out',
+  CameraModule = 'amplify-liveness-camera-module',
+  CameraModuleCenteredLoader = 'amplify-liveness-camera-module__centered-loader',
+  CameraModuleCanvas = 'amplify-liveness-camera-module__canvas',
+  CameraModuleVideo = 'amplify-liveness-camera-module__video',
+  CameraModuleVideoContainer = 'amplify-liveness-camera-module__video-container',
+  CameraModuleRecordingIconContainer = 'amplify-liveness-camera-module__recording-icon-container',
+  CameraModuleCancelButtonContainer = 'amplify-liveness-camera-module__cancel-button-container',
+  CameraModuleOverlayCountdown = 'amplify-liveness-camera-module__overlay--countdown',
+  CameraModuleCountdownTimerContainer = 'amplify-liveness-camera-module__countdown-timer-container',
+}
diff --git a/packages/ui/src/theme/__tests__/defaultTheme.test.ts b/packages/ui/src/theme/__tests__/defaultTheme.test.ts
@@ -390,6 +390,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
         --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
         --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
+        --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
         --amplify-components-loader-width: var(--amplify-font-sizes-medium);
         --amplify-components-loader-height: var(--amplify-font-sizes-medium);
         --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);

diff --git a/packages/ui/src/theme/__tests__/overrides.test.ts b/packages/ui/src/theme/__tests__/overrides.test.ts
@@ -424,6 +424,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
         --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
         --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
+        --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-black);
         --amplify-components-loader-width: var(--amplify-font-sizes-medium);
         --amplify-components-loader-height: var(--amplify-font-sizes-medium);
         --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);

diff --git a/packages/ui/src/theme/css/component/liveness.scss b/packages/ui/src/theme/css/component/liveness.scss
@@ -12,3 +12,75 @@
     opacity: 0;
   }
 }
+
+.amplify-liveness-camera-module {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(
+    --amplify-components-liveness-camera-module-background-color
+  );
+  position: relative;
+}
+
+.amplify-liveness-camera-module__canvas {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.amplify-liveness-camera-module__centered-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-camera-module__video-container {
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.amplify-liveness-camera-module__recording-icon-container {
+  z-index: 1;
+  position: absolute;
+  top: var(--amplify-space-medium);
+  left: var(--amplify-space-medium);
+}
+
+.amplify-liveness-camera-module__cancel-button-container {
+  z-index: 2;
+  position: absolute;
+  top: var(--amplify-space-medium);
+  right: var(--amplify-space-medium);
+}
+
+.amplify-liveness-camera-module__overlay--countdown {
+  z-index: 1;
+}
+
+.amplify-liveness-camera-module__countdown-timer-container {
+  background-color: var(--amplify-colors-background-primary);
+  border-radius: 100%;
+  padding: 8px;
+}
+
+@media (pointer: coarse) and (hover: none) {
+  .amplify-liveness-camera-module {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+}
diff --git a/packages/ui/src/theme/tokens/components/index.ts b/packages/ui/src/theme/tokens/components/index.ts
@@ -19,6 +19,7 @@ import { heading, HeadingTokens } from './heading';
 import { icon, IconTokens } from './icon';
 import { image, ImageTokens } from './image';
 import { link, LinkTokens } from './link';
+import { liveness, LivenessTokens } from './liveness';
 import { loader, LoaderTokens } from './loader';
 import { menu, MenuTokens } from './menu';
 import { pagination, PaginationTokens } from './pagination';
@@ -67,6 +68,7 @@ export interface ComponentTokens {
   icon: IconTokens;
   image: ImageTokens;
   link: LinkTokens;
+  liveness: LivenessTokens;
   loader: LoaderTokens;
   menu: MenuTokens;
   pagination: PaginationTokens;
@@ -113,6 +115,7 @@ export const components: ComponentTokens = {
   icon,
   image,
   link,
+  liveness,
   loader,
   menu,
   pagination,

diff --git a/packages/ui/src/theme/tokens/components/liveness.ts b/packages/ui/src/theme/tokens/components/liveness.ts
@@ -0,0 +1,11 @@
+import { DesignToken, ColorValue } from '../types/designToken';
+
+export interface LivenessTokens {
+  cameraModule: { backgroundColor: DesignToken<ColorValue> };
+}
+
+export const liveness: LivenessTokens = {
+  cameraModule: {
+    backgroundColor: { value: '{colors.black}' },
+  },
+};