Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

separation styles #146

Merged
merged 3 commits into from
Dec 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 4 additions & 20 deletions src/app/[lang]/liveness/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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',
Expand All @@ -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',
Expand Down
8 changes: 8 additions & 0 deletions src/app/[lang]/liveness/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.liveness_conditions {
background: #eff7ff;
border-radius: 6px;
padding: 30px 20px;
display: flex;
align-items: center;
flex-direction: row;
}
9 changes: 1 addition & 8 deletions src/components/LivenessModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions src/components/LivenessModal/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 3 additions & 9 deletions src/components/LivenessQuickStart/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand Down Expand Up @@ -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 ? (
Expand Down
7 changes: 7 additions & 0 deletions src/components/LivenessQuickStart/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.liveness_container {
width: 100%;
height: 55vh;
display: flex;
align-items: center;
justify-content: center;
}
16 changes: 4 additions & 12 deletions src/components/elements/boxContentCenter/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
13 changes: 13 additions & 0 deletions src/components/elements/boxContentCenter/styles.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
20 changes: 4 additions & 16 deletions src/components/layout/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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" />
Expand Down Expand Up @@ -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' }}>
Expand Down
7 changes: 7 additions & 0 deletions src/components/layout/styles.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
.footer_container {
width: 100%;
max-width: 1400px;
margin: auto;
padding: 0px 24px;
}

.logo {
flex-grow: 1;
padding-top: '8px';
Expand Down
Loading