From 60b90932d305569b6754e2197f36324ac1819c42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Eduardo=20=C3=81lvarez=20Lerebours?=
 <45927529+JE1999@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:40:21 -0400
Subject: [PATCH] feat(styles): add `style.module.css` and move styles from tsx
 (#146)

* feat(styles): add style.module.css and move styles from tsx

created new style.module.css files to maintain tsx component styles separately. Styles previously located in tsx files were moved to improve modularity and code organization.

* fix(style): fix formatting in boxContentCenter

bug fixed to comply with prettier formatting rules.
---
 src/app/[lang]/liveness/form.tsx              | 24 ++++---------------
 src/app/[lang]/liveness/styles.module.css     |  8 +++++++
 src/components/LivenessModal/index.tsx        |  9 +------
 .../LivenessModal/styles.module.css           |  7 ++++++
 src/components/LivenessQuickStart/index.tsx   | 12 +++-------
 .../LivenessQuickStart/styles.module.css      |  7 ++++++
 .../elements/boxContentCenter/index.tsx       | 16 ++++---------
 .../boxContentCenter/styles.module.css        | 13 ++++++++++
 src/components/layout/footer.tsx              | 20 ++++------------
 src/components/layout/styles.module.css       |  7 ++++++
 10 files changed, 58 insertions(+), 65 deletions(-)
 create mode 100644 src/app/[lang]/liveness/styles.module.css
 create mode 100644 src/components/LivenessQuickStart/styles.module.css
 create mode 100644 src/components/elements/boxContentCenter/styles.module.css

diff --git a/src/app/[lang]/liveness/form.tsx b/src/app/[lang]/liveness/form.tsx
index 2663050b..2def8b5a 100644
--- a/src/app/[lang]/liveness/form.tsx
+++ b/src/app/[lang]/liveness/form.tsx
@@ -26,6 +26,8 @@ import { createTermsSchema } from '@/common/validation-schemas';
 import { LivenessModal } from '@/components/LivenessModal';
 import { useLanguage } from '../provider';
 
+import styles from './styles.module.css';
+
 type TermsForm = z.infer<ReturnType<typeof createTermsSchema>>;
 import theme from '@/components/themes/theme';
 
@@ -52,16 +54,7 @@ export function Form({ cedula }: Props) {
     <form onSubmit={onSubmit}>
       <GridContainer>
         <GridItem lg={12} md={12}>
-          <div
-            style={{
-              background: '#EFF7FF',
-              borderRadius: '6px',
-              padding: '30px 20px',
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
+          <div className={styles.liveness_conditions}>
             <CameraAltOutlinedIcon
               sx={{
                 fontSize: '45px',
@@ -85,16 +78,7 @@ export function Form({ cedula }: Props) {
         </GridItem>
 
         <GridItem lg={12} md={12}>
-          <div
-            style={{
-              background: '#EFF7FF',
-              borderRadius: '6px',
-              padding: '30px 20px',
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
+          <div className={styles.liveness_conditions}>
             <SentimentSatisfiedOutlinedIcon
               sx={{
                 fontSize: '45px',
diff --git a/src/app/[lang]/liveness/styles.module.css b/src/app/[lang]/liveness/styles.module.css
new file mode 100644
index 00000000..88c66515
--- /dev/null
+++ b/src/app/[lang]/liveness/styles.module.css
@@ -0,0 +1,8 @@
+.liveness_conditions {
+  background: #eff7ff;
+  border-radius: 6px;
+  padding: 30px 20px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
diff --git a/src/components/LivenessModal/index.tsx b/src/components/LivenessModal/index.tsx
index 53a8ef25..980b0482 100644
--- a/src/components/LivenessModal/index.tsx
+++ b/src/components/LivenessModal/index.tsx
@@ -58,14 +58,7 @@ export function LivenessModal({ cedula, setOpen }: Props) {
           </div>
         </AppBar>
         <div style={{ paddingTop: '100px' }}>
-          <div
-            style={{
-              width: '100%',
-              maxWidth: '800px',
-              margin: 'auto',
-              padding: '0 10px',
-            }}
-          >
+          <div className={styles.liveness_container}>
             <LivenessQuickStart cedula={cedula} />
           </div>
         </div>
diff --git a/src/components/LivenessModal/styles.module.css b/src/components/LivenessModal/styles.module.css
index 00494d41..20f87e65 100644
--- a/src/components/LivenessModal/styles.module.css
+++ b/src/components/LivenessModal/styles.module.css
@@ -10,6 +10,13 @@
   position: absolute;
 }
 
+.liveness_container {
+  width: 100%;
+  max-width: 800px;
+  margin: auto;
+  padding: 0 10px;
+}
+
 @media only screen and (max-width: 1200px) {
   .layer_logo {
     display: none;
diff --git a/src/components/LivenessQuickStart/index.tsx b/src/components/LivenessQuickStart/index.tsx
index 82fb3c66..64cadf29 100644
--- a/src/components/LivenessQuickStart/index.tsx
+++ b/src/components/LivenessQuickStart/index.tsx
@@ -14,6 +14,8 @@ import { useLocalizedText } from './localizedText';
 import { unwrap } from '@/common/helpers';
 import awsExports from '@/aws-exports';
 
+import styles from './styles.module.css';
+
 Amplify.configure(awsExports);
 
 type Props = { cedula: string };
@@ -91,15 +93,7 @@ export function LivenessQuickStart({ cedula }: Props) {
   return (
     <ThemeProvider>
       {loading ? (
-        <div
-          style={{
-            width: '100%',
-            height: '55vh',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
+        <div className={styles.liveness_container}>
           <CircularProgress sx={{ color: 'white' }} />
         </div>
       ) : sessionId ? (
diff --git a/src/components/LivenessQuickStart/styles.module.css b/src/components/LivenessQuickStart/styles.module.css
new file mode 100644
index 00000000..90019603
--- /dev/null
+++ b/src/components/LivenessQuickStart/styles.module.css
@@ -0,0 +1,7 @@
+.liveness_container {
+  width: 100%;
+  height: 55vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/elements/boxContentCenter/index.tsx b/src/components/elements/boxContentCenter/index.tsx
index e2d31588..cb114dc9 100644
--- a/src/components/elements/boxContentCenter/index.tsx
+++ b/src/components/elements/boxContentCenter/index.tsx
@@ -1,19 +1,11 @@
 import Box from '@mui/material/Box';
 
+import styles from './styles.module.css';
+
 export default function BoxContentCenter({ children }: any) {
   return (
-    <Box
-      sx={{
-        width: '100%',
-        minHeight: `calc(100vh - 630px)`,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <Box sx={{ width: '100%', maxWidth: '560px', padding: '0 10px' }}>
-        {children}
-      </Box>
+    <Box className={styles.box_container}>
+      <Box className={styles.box_content}>{children}</Box>
     </Box>
   );
 }
diff --git a/src/components/elements/boxContentCenter/styles.module.css b/src/components/elements/boxContentCenter/styles.module.css
new file mode 100644
index 00000000..3eb67f28
--- /dev/null
+++ b/src/components/elements/boxContentCenter/styles.module.css
@@ -0,0 +1,13 @@
+.box_container {
+  width: 100%;
+  min-height: calc(100vh - 630px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box_content {
+  width: 100%;
+  max-width: 560px;
+  padding: 0 10px;
+}
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 3ef0eacd..3e58f728 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -17,6 +17,8 @@ import { useLanguage } from '@/app/[lang]/provider';
 import DivGrow from '../elements/divGrow';
 import theme from '../themes/theme';
 
+import styles from './styles.module.css';
+
 export default function Index() {
   const { intl } = useLanguage();
 
@@ -25,14 +27,7 @@ export default function Index() {
       <div
         style={{ background: theme.palette.primary.main, padding: '75px 25px' }}
       >
-        <div
-          style={{
-            width: '100%',
-            maxWidth: '1400px',
-            margin: 'auto',
-            padding: '0px 24px',
-          }}
-        >
+        <div className={styles.footer_container}>
           <GridContainer spacing={4}>
             <GridItem md={12} lg={2}>
               <Image src={logoGOB.src} alt="logo" width="198" height="80" />
@@ -108,14 +103,7 @@ export default function Index() {
       </div>
 
       <div style={{ background: 'white', padding: '12.5px 25px' }}>
-        <div
-          style={{
-            width: '100%',
-            maxWidth: '1400px',
-            margin: 'auto',
-            padding: '0px 24px',
-          }}
-        >
+        <div className={styles.footer_container}>
           <GridContainer>
             <GridItem md={6} lg={6}>
               <div style={{ marginTop: '8px' }}>
diff --git a/src/components/layout/styles.module.css b/src/components/layout/styles.module.css
index e89b1206..bc728ef0 100644
--- a/src/components/layout/styles.module.css
+++ b/src/components/layout/styles.module.css
@@ -1,3 +1,10 @@
+.footer_container {
+  width: 100%;
+  max-width: 1400px;
+  margin: auto;
+  padding: 0px 24px;
+}
+
 .logo {
   flex-grow: 1;
   padding-top: '8px';