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.
ogticrd · Dec 13, 2023 · 60b9093 · 60b9093
1 parent 185d7f2
commit 60b9093
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,10 @@
+.footer_container {
+  width: 100%;
+  max-width: 1400px;
+  margin: auto;
+  padding: 0px 24px;
+}
+
 .logo {
   flex-grow: 1;
   padding-top: '8px';