refactor(liveness): convert inline css to class (#664)

* refactor(liveness): convert cancel button inline css to class * refactor(liveness): convert recording icon inline css to class * refactor(liveness): convert description bullets inline css to class Co-authored-by: MJ☔ <[email protected]>
aws-amplify · Dec 28, 2022 · 829c399 · 829c399
1 parent 886bc24
commit 829c399
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 24 deletions.
diff --git a/packages/react/src/components/Liveness/shared/CancelButton.tsx b/packages/react/src/components/Liveness/shared/CancelButton.tsx
@@ -5,6 +5,7 @@ import { useLivenessActor } from '../hooks';
 import { useFaceLivenessDetector } from '../providers';
 import { Button } from '../../../primitives';
 import { IconClose } from '../../../primitives/Icon/icons';
+import { LivenessClassNames } from '../types/classNames';
 
 export interface CancelButtonProps {
   sourceScreen: string;
@@ -37,7 +38,7 @@ export const CancelButton: React.FC<CancelButtonProps> = (props) => {
       variation="link"
       onClick={handleClick}
       size="large"
-      backgroundColor="background.primary"
+      className={LivenessClassNames.CancelButton}
       aria-label={translate('Cancel Liveness check')}
     >
       <IconClose aria-hidden="true" size="large" data-testid="close-icon" />

diff --git a/packages/react/src/components/Liveness/shared/DescriptionBullet.tsx b/packages/react/src/components/Liveness/shared/DescriptionBullet.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Flex, Text } from '../../../primitives';
+import { LivenessClassNames } from '../types/classNames';
 
 export interface DescriptionBulletProps {
   index: number;
@@ -14,24 +15,22 @@ export const DescriptionBullet = (
   const { index, title, desc } = props;
 
   return (
-    <Flex direction="row" gap="small">
-      <Flex
-        shrink={0}
-        alignItems="center"
-        justifyContent="center"
-        borderRadius="100%"
-        backgroundColor="brand.primary.80"
-        width="xl"
-        height="xl"
-      >
-        <Text fontWeight="bold" as="span" color="font.inverse">
+    <Flex className={LivenessClassNames.DescriptionBullet}>
+      <Flex className={LivenessClassNames.DescriptionBulletIndexContainer}>
+        <Text as="span" className={LivenessClassNames.DescriptionBulletIndex}>
           {index}
         </Text>
       </Flex>
 
-      <Flex direction="column" gap="xxs">
-        {title && <Text fontWeight="bold">{title}</Text>}
-        <Text color="font.primary">{desc}</Text>
+      <Flex className={LivenessClassNames.DescriptionBulletMessageContainer}>
+        {title && (
+          <Text className={LivenessClassNames.DescriptionBulletMessageTitle}>
+            {title}
+          </Text>
+        )}
+        <Text className={LivenessClassNames.DescriptionBulletMessageBody}>
+          {desc}
+        </Text>
       </Flex>
     </Flex>
   );

diff --git a/packages/react/src/components/Liveness/shared/RecordingIcon.tsx b/packages/react/src/components/Liveness/shared/RecordingIcon.tsx
@@ -1,17 +1,11 @@
 import React from 'react';
 
 import { Text, Flex, Icon } from '../../../primitives';
+import { LivenessClassNames } from '../types/classNames';
 
 export const RecordingIcon: React.FC = () => {
   return (
-    <Flex
-      direction="column"
-      alignItems="center"
-      backgroundColor="background.primary"
-      padding="xxs"
-      gap="xxs"
-      borderRadius="small"
-    >
+    <Flex className={LivenessClassNames.RecordingIcon}>
       <Flex data-testid="rec-icon" justifyContent="center">
         <Icon viewBox={{ width: 20, height: 20 }} width="20" height="20">
           <circle cx="10" cy="10" r="8" fill="red" />

diff --git a/packages/react/src/components/Liveness/types/classNames.ts b/packages/react/src/components/Liveness/types/classNames.ts
@@ -1,5 +1,4 @@
 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',
@@ -9,4 +8,13 @@ export enum LivenessClassNames {
   CameraModuleCancelButtonContainer = 'amplify-liveness-camera-module__cancel-button-container',
   CameraModuleOverlayCountdown = 'amplify-liveness-camera-module__overlay--countdown',
   CameraModuleCountdownTimerContainer = 'amplify-liveness-camera-module__countdown-timer-container',
+  CancelButton = 'amplify-liveness__cancel-button',
+  DescriptionBullet = 'amplify-liveness-description-bullet',
+  DescriptionBulletIndexContainer = 'amplify-liveness-description-bullet__index-container',
+  DescriptionBulletIndex = 'amplify-liveness-description-bullet__index',
+  DescriptionBulletMessageContainer = 'amplify-liveness-description-bullet__message-container',
+  DescriptionBulletMessageTitle = 'amplify-liveness-description-bullet__message--title',
+  DescriptionBulletMessageBody = 'amplify-liveness-description-bullet__message--body',
+  FadeOut = 'amplify-liveness-fade-out',
+  RecordingIcon = 'amplify-liveness__recording-icon',
 }
diff --git a/packages/ui/src/theme/css/component/liveness.scss b/packages/ui/src/theme/css/component/liveness.scss
@@ -1,3 +1,16 @@
+.amplify-liveness__cancel-button {
+  background-color: var(--amplify-colors-background-primary);
+}
+
+.amplify-liveness__recording-icon {
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--amplify-colors-background-primary);
+  padding: var(--amplify-space-xxs);
+  gap: var(--amplify-space-xxs);
+  border-radius: var(--amplify-radii-small);
+}
+
 .amplify-liveness-fade-out {
   animation-name: amplify-liveness-animation-fadeout;
   animation-duration: 2s;
@@ -75,6 +88,39 @@
   padding: 8px;
 }
 
+.amplify-liveness-description-bullet {
+  flex-direction: row;
+  gap: var(--amplify-space-small);
+}
+
+.amplify-liveness-description-bullet__index-container {
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: var(--amplify-colors-brand-primary-80);
+  width: var(--amplify-space-xl);
+  height: var(--amplify-space-xl);
+}
+
+.amplify-liveness-description-bullet__index {
+  font-weight: var(--amplify-font-weights-bold);
+  color: var(--amplify-colors-font-inverse);
+}
+
+.amplify-liveness-description-bullet__message-container {
+  flex-direction: column;
+  gap: var(--amplify-space-xxs);
+}
+
+.amplify-liveness-description-bullet__message--title {
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-description-bullet__message--body {
+  color: var(--amplify-colors-font-primary);
+}
+
 @media (pointer: coarse) and (hover: none) {
   .amplify-liveness-camera-module {
     position: fixed;