ref(liveness): use gov design colors and fix global css (#39)

* [REF] color FaceLivenessDetector * fix(css): issues betweeen yarn `build` and `start` * chore: remove unused code * chore(css): missing variables * fix(liveness): regressive count * fix(liveness): center faces --------- Co-authored-by: Gustavo Valverde <g.valverde02@gmail.com>
ogticrd · Jun 23, 2023 · 833ee66 · 833ee66
1 parent ae660d3
commit 833ee66
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 60 deletions.
diff --git a/src/components/biometric/face-liveness-detector.tsx b/src/components/biometric/face-liveness-detector.tsx
@@ -1,5 +1,5 @@
 import { FaceLivenessDetector } from '@aws-amplify/ui-react-liveness';
-import { Loader, Theme, ThemeProvider, useTheme } from '@aws-amplify/ui-react';
+import { Loader, ThemeProvider } from '@aws-amplify/ui-react';
 
 import React from 'react';
 import { useState, useEffect } from 'react';
@@ -8,8 +8,6 @@ import { useSnackbar } from '@/components/elements/alert';
 import { defaultLivenessDisplayText } from './displayText';
 
 export function LivenessQuickStartReact({ handleNextForm, cedula }: any) {
-  // const { tokens } = useTheme();
-
   const next = handleNextForm;
   const id = cedula;
   const [loading, setLoading] = useState<boolean>(true);
@@ -56,43 +54,13 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) {
     if (error) {
       AlertError('No se ha podido validar correctamente la identidad.');
     }
-  // TODO: AlertError is causing re-rendering issues. But not adding it causes eslint error.
+    // TODO: AlertError is causing re-rendering issues. But not adding it causes eslint error.
   }, [error]);
 
-  const theme: Theme = {
-    name: 'Face Liveness Theme',
-    tokens: {
-      colors: {
-        background: {
-          primary: {
-            // value: tokens.colors.neutral['90'].value,
-            value: '#fff',
-          },
-          secondary: {
-            // value: tokens.colors.neutral['100'].value,
-            value: '#000',
-          },
-        },
-        font: {
-          primary: {
-            // value: tokens.colors.white.value,
-            value: '#000',
-          },
-        },
-        brand: {
-          primary: {
-            '80': '#003876',
-            '90': '#003876',
-          },
-        },
-      },
-    },
-  };
-
   return (
     <>
       <br />
-      <ThemeProvider theme={theme}>
+      <ThemeProvider>
         {loading ? (
           <Loader />
         ) : (

diff --git a/src/components/elements/button/index.tsx b/src/components/elements/button/index.tsx
@@ -40,7 +40,6 @@ interface IButtonApp {
 }
 
 export const ButtonApp = ({
-  outlined,
   disabled,
   variant = 'contained',
   submit,

diff --git a/src/pages/register/stepper/step2.tsx b/src/pages/register/stepper/step2.tsx
@@ -5,11 +5,9 @@ import { useCallback, useState } from 'react';
 
 import {
   Box,
-  Button,
   FormControlLabel,
   FormGroup,
   Checkbox,
-  Grid,
   Typography,
 } from '@mui/material';
 import Step2Modal from './step2Modal';

diff --git a/src/pages/register/stepper/step2Modal.tsx b/src/pages/register/stepper/step2Modal.tsx
@@ -59,7 +59,7 @@ export default function Step2Modal({
           <div
             style={{
               width: '100%',
-              maxWidth: '600px',
+              maxWidth: '700px',
               margin: 'auto',
               padding: '0 10px',
             }}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,61 +1,64 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");
+/* Variables */
+:root {
+  --primary-color: #003876;
+  --success-color: #2ecc71;
+  --secondary-color: #0087ff;
+  --error-color: #ee2a24;
+  --info-color: #23c3df;
+}
 
+/* Global styles */
 body {
-  font-family: Poppins, sans-serif;
-  background-image: url("../../public/assets/forma.png") !important;
+  font-family: 'Poppins', sans-serif;
+  background-image: url('../../public/assets/forma.png');
   background-repeat: no-repeat;
   background-position: right;
   background-size: 300px;
 }
 
-.swal2-container {
-  z-index: 1600 !important;
-}
-
-.text-bold {
-  font-weight: bold;
-}
-
+/* Text utility classes */
 .text-primary {
-  color: #003876;
+  color: var(--primary-color);
 }
 
 .text-success {
-  color: #2ecc71;
+  color: var(--success-color);
 }
 
 .text-secondary {
-  color: #0087ff;
+  color: var(--secondary-color);
 }
 
 .text-error {
-  color: #ee2a24;
+  color: var(--error-color);
 }
 
 .text-info {
-  color: #23c3df;
+  color: var(--info-color);
 }
 
+/* Background utility classes */
 .bg-primary {
-  background: #003876;
+  background: var(--primary-color);
 }
 
 .bg-success {
-  background: #2ecc71;
+  background: var(--success-color);
 }
 
 .bg-secondary {
-  background: #0087ff;
+  background: var(--secondary-color);
 }
 
 .bg-error {
-  background: #ee2a24;
+  background: var(--error-color);
 }
 
 .bg-info {
-  background: #23c3df;
+  background: var(--info-color);
 }
 
+/* Padding utility classes */
 .p-1 {
   padding: 5px;
 }
@@ -137,3 +140,62 @@ body {
   z-index: 500 !important;
   padding: 450px;
 }
+
+/* Face live */
+
+.amplify-card {
+  background: transparent;
+}
+
+.amplify-alert {
+  background: #b8cef9 !important;
+}
+
+.amplify-alert__heading,
+.amplify-alert__body,
+.amplify-icon {
+  color: var(--primary-color);
+}
+
+.amplify-text {
+  /* TODO: this is to fix regresive count, but this is not the right approach*/
+  color: rgb(211, 211, 211) !important;
+}
+
+.amplify-button {
+  background: white;
+  border: 1px solid #003876;
+  color: var(--primary-color);
+}
+
+.amplify-button:hover {
+  background: #e3e3e3;
+  color: var(--primary-color);
+  border: 1px solid #003876;
+}
+
+[data-amplify-theme] {
+  /* --amplify-colors-background-primary: var(--primary-color); */
+  --amplify-colors-font-primary: white;
+  /* --amplify-colors-brand-primary-10: var(--primary-color); */
+  /* --amplify-colors-brand-primary-80: var(--primary-color);
+  --amplify-colors-brand-primary-90: var(--primary-color);
+  --amplify-colors-brand-primary-100: var(--primary-color); */
+}
+
+.amplify-flex.amplify-liveness-figures {
+  margin: 0 auto;
+}
+
+.amplify-liveness-instruction-overlay div .amplify-liveness-toast {
+  background: white;
+  color: var(--primary-color);
+}
+
+.amplify-liveness-toast__message div p {
+  color: black !important;
+}
+
+.amplify-liveness-toast--default div .amplify-liveness-toast__message {
+  color: black;
+}