fix(ui): improve mobile responsiveness (#40)

* [REF] stepper responsive

* [REF] show alert term and conditions

* [REF] background primary dialog on mobile

* [REF] label stepper

* chore(lint): use prettier

---------

Co-authored-by: Gustavo Valverde <g.valverde02@gmail.com>
Former-commit-id: 83e388088e4d4bdd7c83bc50ab893252e49b0471 [formerly c0fdc08e1bfc615f5c96b05f5e7340b8d72f1a84] [formerly 8b51d2967aea5ebc33fc18c417c96548dc723170 [formerly 9863785fdfb51e0eed0acf81fb5bbcde5f07a5d3]] [formerly 292f79dccc31761f4a37a84886dee23ab70769ee [formerly 343323fcd73470c94ad1c3c537ea75ebea51a81d] [formerly 3012ec3844d6dba2441c29a54e04b817bca87027 [formerly 0e8c8b19fee016c2290208daa6a28564c54b98e8]]] [formerly e5d488b1a1caa68b7e996ecdccf7212ce9054102 [formerly 4ddebb057831d394a097d2722f48a80139acc32a] [formerly 02b82081cb877dde6070a73d159f400a6fe66e44 [formerly e43af1e56ac1b7f5d8bc704feb506d3f52d96c81]] [formerly c9a0a2eaf719bfaa8da4cce7f1d61c421222662f [formerly 8d7c76046a066c28655d67dbf814b0e5c97f65f1] [formerly 1eb217c2e1ddbdf97cc33583f494c940a7559fe8 [formerly 6595a9deef4b46b9366a406286a3d4f6f1d6116a]]]] [formerly a4f548df7d74c5b324a107cc5476ee489242dd5d [formerly dbda6363b8f329bea6ff66b2df28ba851d162cf8] [formerly f3fe8d5ad56d0ff69e6fd55a4cf4b49b5133489e [formerly 91f88e3ab72ef16600e89552d1ce5a31a3d5e05c]] [formerly 59323d94bde2d4868ba514fd9bfd21168839e6ce [formerly 857a73e893298cd58bb526e15c42954719959937] [formerly b8dc8973eb12ac3232ea3ba444df3cd01d67c76f [formerly fcb3ef2f26caa98f3ef9d96acbd2a8c41801efa8]]] [formerly 2e73ebb267b68d116e9cbcfb5d8844016d81174c [formerly b49b760813b9a72d62c087d2ed2fb1bd304acd20] [formerly b17bdd71453d82a518c8ecd43571899956ccb9d3 [formerly 535e57d32e06f361531a636a96556fc05e0fae35]] [formerly a41cd501fffcfc1a2deb47b119bdf4ca14f0f6df [formerly d261e40dbb8f2d5b51a873d654d3ab32f276c941] [formerly 6bcb30048adf4567bf79d1508f7c90c87df88bff [formerly 72440af]]]]]
Former-commit-id: bcb8917ff2c7e9b93f08cb357a48fe2ac300fe8f [formerly 5edaad45df852dae6f2ece34872585e918596136] [formerly a92eb2fd1c4479ad3205ff75e51825697f557a7a [formerly 1136fd79b740e7037073f7a79ff971497f1ae7c9]] [formerly 87189957edae38b6f7e7d30dd30b3f091dc57c44 [formerly 60a6f3fa51f4a867b8801703adf8aaeb50df3796] [formerly 3c81508ffc996ed20af5b810fc2aaa6565c2e6c4 [formerly a6c1d8850e00a4bc689a053150a0448188ceb920]]] [formerly 6e7fa59a6fe517c89c86130861ced5135ed889bc [formerly d34fdcc44edf127bf83b81d240ce74818a915f65] [formerly 7cf23e7128f3470d5cd45924370323ab5c787c96 [formerly bc7e5db086a006604e82aa6f59d6104d7b1a9f04]] [formerly 05b722ff3557016a7b1559af884cbee9e2956bfc [formerly 74bf5956427a8bb7338da647e7a1875b3bc09ce7] [formerly d9f14965ab99c0bc7bef8d0aedfeaafb9775f312 [formerly ea8ed65d7422cdc87a32fbc24b2e2caa35031cc9]]]]
Former-commit-id: c991140554d2a2a9a8c0ff11f5e0008454e1c029 [formerly d3503149b23311f942343259fac41464738fa174] [formerly 0a1ed1751eac4ffbcd7e006af32020ccc0bd2d63 [formerly 81226242ec551c1c3669f2c5741b375b609558b7]] [formerly 3a76052b0b00edc031373f356835b2539b18cfeb [formerly 409cc79c9ff1f78264818d54d54591b8e6318115] [formerly 435b45b796f5806b519209478f74d19f9db06812 [formerly e3f8ff69e79f869a70f7dce945806947e5b992d0]]]
Former-commit-id: e0c2139c7715f2a8601ed0a3bb954054014e0d3c [formerly a41edf2733d470bfaeafc6082c7d7e56c88741cd] [formerly 29938dc6dbf173b225f318bcc6f65b6e3332c00b [formerly 004dcd8406abbf154ef2e39687af249764cdf16d]]
Former-commit-id: bdb6a219b5b06ebf08bcc655e76e447fd4c48bab [formerly 512999229cece9db73dc69193129eb3ec59a5c63]
Former-commit-id: 17a4d72a1bc262e0cc522d72739a372354ebff2a

src/pages/register/stepper/index.tsx

@@ -4,6 +4,8 @@ import Stepper from '@mui/material/Stepper';
 import Button from '@mui/material/Button';
 import Step from '@mui/material/Step';
 import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import axios from 'axios';
 
@@ -14,7 +16,11 @@ import Step2 from './step2';
 import Step3 from './step3';
 
 const steps = ['Identificación', 'Verificación', 'Registro'];
-const optionalLabels = ['NDI del usuario', 'Prueba de vida', 'Cuenta de usuario'];
+const optionalLabels = [
+  'ID del usuario',
+  'Prueba de vida',
+  'Cuenta de usuario',
+];
 
 export async function getServerSideProps() {
   await axios.get(`/api/auth`);
@@ -27,6 +33,9 @@ export async function getServerSideProps() {
 export default function StepperRegister() {
   const router = useRouter();
 
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.up('sm'));
+
   const [activeStep, setActiveStep] = React.useState(0);
   const [skipped, setSkipped] = React.useState(new Set<number>());
 
@@ -70,13 +79,12 @@ export default function StepperRegister() {
   return (
     <Box sx={{ width: '100%' }}>
       <Stepper
+        alternativeLabel={!matches}
         sx={{ paddingBottom: '20px' }}
         activeStep={activeStep}
       >
         {steps.map((label, index) => (
-          <Step
-            key={label}
-          >
+          <Step key={label}>
             <StepLabel
               optional={
                 <Typography variant="caption">

src/pages/register/stepper/step2.tsx

@@ -9,6 +9,7 @@ import {
   FormGroup,
   Checkbox,
   Typography,
+  Alert,
 } from '@mui/material';
 import Step2Modal from './step2Modal';
 
@@ -111,6 +112,7 @@ export default function Step2({ infoCedula, handleNext }: IStep2Props) {
           <GridItem lg={12} md={12}>
             <FormGroup>
               <FormControlLabel
+                style={{ display: 'flex', justifyContent: 'center' }}
                 control={
                   <Checkbox
                     color="error"
@@ -126,9 +128,9 @@ export default function Step2({ infoCedula, handleNext }: IStep2Props) {
                 }
               />
               {errors.acceptTermAndConditions && (
-                <Typography color="error">
+                <Alert severity="warning">
                   Para continuar debe aceptar Términos y Políticas de Privacidad
-                </Typography>
+                </Alert>
               )}
             </FormGroup>
           </GridItem>

src/pages/register/stepper/step2Modal.tsx

@@ -11,6 +11,7 @@ import Image from 'next/image';
 import { LivenessQuickStartReact } from '@/components/biometric/face-liveness-detector';
 import { ButtonApp } from '@/components/elements/button';
 import Logo from '../../../../public/assets/logo.png';
+import { theme } from '@/themes';
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -33,6 +34,11 @@ export default function Step2Modal({
         open={true}
         onClose={handleClick}
         TransitionComponent={Transition}
+        PaperProps={{
+          style: {
+            backgroundColor: theme.palette.primary.main,
+          },
+        }}
       >
         <AppBar elevation={0} sx={{ position: 'absolute' }}>
           <div style={{ width: '100%', maxWidth: '1400px', margin: 'auto' }}>
@@ -52,10 +58,7 @@ export default function Step2Modal({
             </Toolbar>
           </div>
         </AppBar>
-        <div
-          className="bg-primary"
-          style={{ minHeight: '100vh', paddingTop: '100px' }}
-        >
+        <div className="bg-primary" style={{ paddingTop: '100px' }}>
           <div
             style={{
               width: '100%',