beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

rename MuiStyled(MuiContainer) to VerticallyCenteredContainer

Browse source
This commit is contained in:
Abhinav 2022-05-17 15:09:49 +05:30
parent 1739be8c1c
commit e1b5b9ce8e
19 changed files with 69 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Container.ts
View file

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { default as MuiStyled } from '@mui/styled-engine'; import { default as MuiStyled } from '@mui/styled-engine';
import { Container as MuiContainer } from '@mui/material'; import { Container as MuiContainer } from '@mui/material';
const Container = MuiStyled(MuiContainer)` const VerticallyCenteredContainer = MuiStyled(MuiContainer)`
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
@ -13,7 +13,7 @@ const Container = MuiStyled(MuiContainer)`
overflow: auto; overflow: auto;
`; `;
export default Container; export default VerticallyCenteredContainer;
export const DisclaimerContainer = styled.div` export const DisclaimerContainer = styled.div`
margin: 16px 0; margin: 16px 0;

6
src/components/SetPasswordForm.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import Card from 'react-bootstrap/Card'; import Card from 'react-bootstrap/Card';
import Form from 'react-bootstrap/Form'; import Form from 'react-bootstrap/Form';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
@ -38,7 +38,7 @@ function SetPasswordForm(props: Props) {
} }
}; };
return ( return (
<Container> <VerticallyCenteredContainer>
<Card style={{ maxWidth: '540px', padding: '20px' }}> <Card style={{ maxWidth: '540px', padding: '20px' }}>
<Card.Body> <Card.Body>
<div <div
@ -118,7 +118,7 @@ function SetPasswordForm(props: Props) {
)} )}
</Card.Body> </Card.Body>
</Card> </Card>
</Container> </VerticallyCenteredContainer>
); );
} }
export default SetPasswordForm; export default SetPasswordForm;

6
src/components/TwoFactor/Modal/Setup.tsx
View file

@ -3,7 +3,7 @@ import LockIcon from '@mui/icons-material/Lock';
import { PAGES } from 'constants/pages'; import { PAGES } from 'constants/pages';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import { Button, Typography } from '@mui/material'; import { Button, Typography } from '@mui/material';
interface Iprops { interface Iprops {
@ -18,7 +18,7 @@ export default function TwoFactorModalSetupSection({ close }: Iprops) {
}; };
return ( return (
<Container disableGutters sx={{ mb: 2 }}> <VerticallyCenteredContainer disableGutters sx={{ mb: 2 }}>
<LockIcon sx={{ fontSize: (theme) => theme.spacing(5), mb: 2 }} /> <LockIcon sx={{ fontSize: (theme) => theme.spacing(5), mb: 2 }} />
<Typography mb={4}>{constants.TWO_FACTOR_INFO}</Typography> <Typography mb={4}>{constants.TWO_FACTOR_INFO}</Typography>
<Button <Button
@ -28,6 +28,6 @@ export default function TwoFactorModalSetupSection({ close }: Iprops) {
onClick={redirectToTwoFactorSetup}> onClick={redirectToTwoFactorSetup}>
{constants.ENABLE_TWO_FACTOR} {constants.ENABLE_TWO_FACTOR}
</Button> </Button>
</Container> </VerticallyCenteredContainer>
); );
} }

6
src/components/TwoFactor/Setup.tsx
View file

@ -1,4 +1,4 @@
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import { SetupMode } from 'pages/two-factor/setup'; import { SetupMode } from 'pages/two-factor/setup';
import SetupManualMode from 'pages/two-factor/setup/ManualMode'; import SetupManualMode from 'pages/two-factor/setup/ManualMode';
import SetupQRMode from 'pages/two-factor/setup/QRMode'; import SetupQRMode from 'pages/two-factor/setup/QRMode';
@ -16,7 +16,7 @@ export function TwoFactorSetup({ twoFactorSecret }: Iprops) {
const changeToQRMode = () => setSetupMode(SetupMode.QR_CODE); const changeToQRMode = () => setSetupMode(SetupMode.QR_CODE);
return ( return (
<Container sx={{ mb: 3 }}> <VerticallyCenteredContainer sx={{ mb: 3 }}>
{setupMode === SetupMode.QR_CODE ? ( {setupMode === SetupMode.QR_CODE ? (
<SetupQRMode <SetupQRMode
twoFactorSecret={twoFactorSecret} twoFactorSecret={twoFactorSecret}
@ -28,6 +28,6 @@ export function TwoFactorSetup({ twoFactorSecret }: Iprops) {
changeToQRMode={changeToQRMode} changeToQRMode={changeToQRMode}
/> />
)} )}
</Container> </VerticallyCenteredContainer>
); );
} }

6
src/components/TwoFactor/VerifyForm.tsx
View file

@ -4,7 +4,7 @@ import React, { FC, useRef, useState } from 'react';
import OtpInput from 'react-otp-input'; import OtpInput from 'react-otp-input';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import SubmitButton from 'components/SubmitButton'; import SubmitButton from 'components/SubmitButton';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import { Box, Typography, TypographyProps } from '@mui/material'; import { Box, Typography, TypographyProps } from '@mui/material';
import InvalidInputMessage from './InvalidInputMessage'; import InvalidInputMessage from './InvalidInputMessage';
@ -54,7 +54,7 @@ export default function VerifyTwoFactor(props: Props) {
noValidate noValidate
onSubmit={handleSubmit} onSubmit={handleSubmit}
style={{ width: '100%' }}> style={{ width: '100%' }}>
<Container> <VerticallyCenteredContainer>
<Typography mb={2}> <Typography mb={2}>
{constants.ENTER_TWO_FACTOR_OTP} {constants.ENTER_TWO_FACTOR_OTP}
</Typography> </Typography>
@ -83,7 +83,7 @@ export default function VerifyTwoFactor(props: Props) {
loading={waiting} loading={waiting}
disabled={values.otp.length < 6} disabled={values.otp.length < 6}
/> />
</Container> </VerticallyCenteredContainer>
</form> </form>
)} )}
</Formik> </Formik>

4
src/components/TwoFactor/styledComponents.ts
View file

@ -1,4 +1,4 @@
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import styled from 'styled-components'; import styled from 'styled-components';
export const QRCode = styled.img( export const QRCode = styled.img(
@ -9,7 +9,7 @@ export const QRCode = styled.img(
` `
); );
export const LoadingQRCode = styled(Container)( export const LoadingQRCode = styled(VerticallyCenteredContainer)(
({ theme }) => ` ({ theme }) => `
width:200px; width:200px;
aspect-ratio:1; aspect-ratio:1;

6
src/pages/404.tsx
View file

@ -1,4 +1,4 @@
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import { AppContext } from './_app'; import { AppContext } from './_app';
@ -11,12 +11,12 @@ export default function NotFound() {
setLoading(false); setLoading(false);
}, []); }, []);
return ( return (
<Container> <VerticallyCenteredContainer>
{loading ? ( {loading ? (
<span className="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
) : ( ) : (
constants.NOT_FOUND constants.NOT_FOUND
)} )}
</Container> </VerticallyCenteredContainer>
); );
} }

6
src/pages/_app.tsx
View file

@ -3,7 +3,7 @@ import styled, { ThemeProvider as SThemeProvider } from 'styled-components';
import Navbar from 'components/Navbar'; import Navbar from 'components/Navbar';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'photoswipe/dist/photoswipe.css'; import 'photoswipe/dist/photoswipe.css';
import 'styles/global.css'; import 'styles/global.css';
@ -305,11 +305,11 @@ export default function App({ Component, err }) {
closeSidebar, closeSidebar,
}}> }}>
{loading ? ( {loading ? (
<Container> <VerticallyCenteredContainer>
<EnteSpinner> <EnteSpinner>
<span className="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
</EnteSpinner> </EnteSpinner>
</Container> </VerticallyCenteredContainer>
) : ( ) : (
<Component err={err} setLoading={setLoading} /> <Component err={err} setLoading={setLoading} />
)} )}

6
src/pages/change-email/index.tsx
View file

@ -1,4 +1,4 @@
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import LogoImg from 'components/LogoImg'; import LogoImg from 'components/LogoImg';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Alert, Card } from 'react-bootstrap'; import { Alert, Card } from 'react-bootstrap';
@ -26,7 +26,7 @@ function ChangeEmailPage() {
}, []); }, []);
return ( return (
<Container> <VerticallyCenteredContainer>
{waiting ? ( {waiting ? (
<EnteSpinner> <EnteSpinner>
<span className="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
@ -57,7 +57,7 @@ function ChangeEmailPage() {
</Card.Body> </Card.Body>
</EnteCard> </EnteCard>
)} )}
</Container> </VerticallyCenteredContainer>
); );
} }

6
src/pages/credentials/index.tsx
View file

@ -13,7 +13,7 @@ import CryptoWorker, {
import { logoutUser } from 'services/userService'; import { logoutUser } from 'services/userService';
import { isFirstLogin } from 'utils/storage'; import { isFirstLogin } from 'utils/storage';
import SingleInputForm from 'components/SingleInputForm'; import SingleInputForm from 'components/SingleInputForm';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import { Button, Card } from 'react-bootstrap'; import { Button, Card } from 'react-bootstrap';
import { AppContext } from 'pages/_app'; import { AppContext } from 'pages/_app';
import LogoImg from 'components/LogoImg'; import LogoImg from 'components/LogoImg';
@ -94,7 +94,7 @@ export default function Credentials() {
return ( return (
<> <>
<Container> <VerticallyCenteredContainer>
<Card style={{ minWidth: '320px' }} className="text-center"> <Card style={{ minWidth: '320px' }} className="text-center">
<Card.Body style={{ padding: '40px 30px' }}> <Card.Body style={{ padding: '40px 30px' }}>
<Card.Title style={{ marginBottom: '32px' }}> <Card.Title style={{ marginBottom: '32px' }}>
@ -124,7 +124,7 @@ export default function Credentials() {
</div> </div>
</Card.Body> </Card.Body>
</Card> </Card>
</Container> </VerticallyCenteredContainer>
</> </>
); );
} }

6
src/pages/generate/index.tsx
View file

@ -13,7 +13,7 @@ import SetPasswordForm from 'components/SetPasswordForm';
import { justSignedUp, setJustSignedUp } from 'utils/storage'; import { justSignedUp, setJustSignedUp } from 'utils/storage';
import RecoveryKey from 'components/RecoveryKey'; import RecoveryKey from 'components/RecoveryKey';
import { PAGES } from 'constants/pages'; import { PAGES } from 'constants/pages';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import EnteSpinner from 'components/EnteSpinner'; import EnteSpinner from 'components/EnteSpinner';
import { AppContext } from 'pages/_app'; import { AppContext } from 'pages/_app';
import { logError } from 'utils/sentry'; import { logError } from 'utils/sentry';
@ -78,11 +78,11 @@ export default function Generate() {
return ( return (
<> <>
{loading ? ( {loading ? (
<Container> <VerticallyCenteredContainer>
<EnteSpinner> <EnteSpinner>
<span className="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
</EnteSpinner> </EnteSpinner>
</Container> </VerticallyCenteredContainer>
) : recoverModalView ? ( ) : recoverModalView ? (
<RecoveryKey <RecoveryKey
show={recoverModalView} show={recoverModalView}

6
src/pages/login/index.tsx
View file

@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
import EnteSpinner from 'components/EnteSpinner'; import EnteSpinner from 'components/EnteSpinner';
import { AppContext } from 'pages/_app'; import { AppContext } from 'pages/_app';
import Login from 'components/Login'; import Login from 'components/Login';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import { getData, LS_KEYS } from 'utils/storage/localStorage'; import { getData, LS_KEYS } from 'utils/storage/localStorage';
import Card from 'react-bootstrap/Card'; import Card from 'react-bootstrap/Card';
import { PAGES } from 'constants/pages'; import { PAGES } from 'constants/pages';
@ -29,7 +29,7 @@ export default function Home() {
}; };
return ( return (
<Container> <VerticallyCenteredContainer>
{loading ? ( {loading ? (
<EnteSpinner> <EnteSpinner>
<span className="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
@ -41,6 +41,6 @@ export default function Home() {
</Card.Body> </Card.Body>
</Card> </Card>
)} )}
</Container> </VerticallyCenteredContainer>
); );
} }

6
src/pages/recover/index.tsx
View file

@ -14,7 +14,7 @@ import CryptoWorker, {
} from 'utils/crypto'; } from 'utils/crypto';
import SingleInputForm from 'components/SingleInputForm'; import SingleInputForm from 'components/SingleInputForm';
import MessageDialog from 'components/MessageDialog'; import MessageDialog from 'components/MessageDialog';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import { Card, Button } from 'react-bootstrap'; import { Card, Button } from 'react-bootstrap';
import { AppContext } from 'pages/_app'; import { AppContext } from 'pages/_app';
import LogoImg from 'components/LogoImg'; import LogoImg from 'components/LogoImg';
@ -80,7 +80,7 @@ export default function Recover() {
return ( return (
<> <>
<Container> <VerticallyCenteredContainer>
<Card style={{ minWidth: '320px' }} className="text-center"> <Card style={{ minWidth: '320px' }} className="text-center">
<Card.Body style={{ padding: '40px 30px' }}> <Card.Body style={{ padding: '40px 30px' }}>
<Card.Title style={{ marginBottom: '32px' }}> <Card.Title style={{ marginBottom: '32px' }}>
@ -110,7 +110,7 @@ export default function Recover() {
</div> </div>
</Card.Body> </Card.Body>
</Card> </Card>
</Container> </VerticallyCenteredContainer>
<MessageDialog <MessageDialog
size="lg" size="lg"
show={messageDialogView} show={messageDialogView}

22
src/pages/shared-albums/index.tsx
View file

@ -23,7 +23,7 @@ import {
PublicCollectionGalleryContext, PublicCollectionGalleryContext,
} from 'utils/publicCollectionGallery'; } from 'utils/publicCollectionGallery';
import { CustomError, parseSharingErrorCodes } from 'utils/error'; import { CustomError, parseSharingErrorCodes } from 'utils/error';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import EnteSpinner from 'components/EnteSpinner'; import EnteSpinner from 'components/EnteSpinner';
import CryptoWorker from 'utils/crypto'; import CryptoWorker from 'utils/crypto';
@ -34,11 +34,11 @@ import { Card } from 'react-bootstrap';
import { logError } from 'utils/sentry'; import { logError } from 'utils/sentry';
const Loader = () => ( const Loader = () => (
<Container> <VerticallyCenteredContainer>
<EnteSpinner> <EnteSpinner>
<span className="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
</EnteSpinner> </EnteSpinner>
</Container> </VerticallyCenteredContainer>
); );
const bs58 = require('bs58'); const bs58 = require('bs58');
export default function PublicCollectionGallery() { export default function PublicCollectionGallery() {
@ -253,11 +253,15 @@ export default function PublicCollectionGallery() {
} }
} else { } else {
if (errorMessage) { if (errorMessage) {
return <Container>{errorMessage}</Container>; return (
<VerticallyCenteredContainer>
{errorMessage}
</VerticallyCenteredContainer>
);
} }
if (isPasswordProtected && !passwordJWTToken.current) { if (isPasswordProtected && !passwordJWTToken.current) {
return ( return (
<Container> <VerticallyCenteredContainer>
<Card style={{ maxWidth: '332px' }} className="text-center"> <Card style={{ maxWidth: '332px' }} className="text-center">
<Card.Body style={{ padding: '40px 30px' }}> <Card.Body style={{ padding: '40px 30px' }}>
<Card.Subtitle style={{ marginBottom: '2rem' }}> <Card.Subtitle style={{ marginBottom: '2rem' }}>
@ -272,11 +276,15 @@ export default function PublicCollectionGallery() {
/> />
</Card.Body> </Card.Body>
</Card> </Card>
</Container> </VerticallyCenteredContainer>
); );
} }
if (!publicFiles) { if (!publicFiles) {
return <Container>{constants.NOT_FOUND}</Container>; return (
<VerticallyCenteredContainer>
{constants.NOT_FOUND}
</VerticallyCenteredContainer>
);
} }
} }

6
src/pages/signup/index.tsx
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Card from 'react-bootstrap/Card'; import Card from 'react-bootstrap/Card';
import { AppContext } from 'pages/_app'; import { AppContext } from 'pages/_app';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import EnteSpinner from 'components/EnteSpinner'; import EnteSpinner from 'components/EnteSpinner';
import { getData, LS_KEYS } from 'utils/storage/localStorage'; import { getData, LS_KEYS } from 'utils/storage/localStorage';
import SignUp from 'components/SignUp'; import SignUp from 'components/SignUp';
@ -29,7 +29,7 @@ export default function SignUpPage() {
}; };
return ( return (
<Container> <VerticallyCenteredContainer>
{loading ? ( {loading ? (
<EnteSpinner /> <EnteSpinner />
) : ( ) : (
@ -39,6 +39,6 @@ export default function SignUpPage() {
</Card.Body> </Card.Body>
</Card> </Card>
)} )}
</Container> </VerticallyCenteredContainer>
); );
} }

6
src/pages/two-factor/recover/index.tsx
View file

@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
import CryptoWorker, { B64EncryptionResult } from 'utils/crypto'; import CryptoWorker, { B64EncryptionResult } from 'utils/crypto';
import SingleInputForm from 'components/SingleInputForm'; import SingleInputForm from 'components/SingleInputForm';
import MessageDialog from 'components/MessageDialog'; import MessageDialog from 'components/MessageDialog';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import { Card, Button } from 'react-bootstrap'; import { Card, Button } from 'react-bootstrap';
import LogoImg from 'components/LogoImg'; import LogoImg from 'components/LogoImg';
import { logError } from 'utils/sentry'; import { logError } from 'utils/sentry';
@ -82,7 +82,7 @@ export default function Recover() {
return ( return (
<> <>
<Container> <VerticallyCenteredContainer>
<Card style={{ minWidth: '320px' }} className="text-center"> <Card style={{ minWidth: '320px' }} className="text-center">
<Card.Body style={{ padding: '40px 30px' }}> <Card.Body style={{ padding: '40px 30px' }}>
<Card.Title style={{ marginBottom: '32px' }}> <Card.Title style={{ marginBottom: '32px' }}>
@ -112,7 +112,7 @@ export default function Recover() {
</div> </div>
</Card.Body> </Card.Body>
</Card> </Card>
</Container> </VerticallyCenteredContainer>
<MessageDialog <MessageDialog
size="lg" size="lg"
show={messageDialogView} show={messageDialogView}

10
src/pages/two-factor/setup/index.tsx
View file

@ -2,7 +2,7 @@ import LogoImg from 'components/LogoImg';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { enableTwoFactor, setupTwoFactor } from 'services/userService'; import { enableTwoFactor, setupTwoFactor } from 'services/userService';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import VerifyTwoFactor from 'components/TwoFactor/VerifyForm'; import VerifyTwoFactor from 'components/TwoFactor/VerifyForm';
import { encryptWithRecoveryKey } from 'utils/crypto'; import { encryptWithRecoveryKey } from 'utils/crypto';
@ -62,10 +62,10 @@ export default function SetupTwoFactor() {
}; };
return ( return (
<Container> <VerticallyCenteredContainer>
<Card> <Card>
<CardContent> <CardContent>
<Container disableGutters sx={{ p: 3 }}> <VerticallyCenteredContainer disableGutters sx={{ p: 3 }}>
<Box mb={4}> <Box mb={4}>
<LogoImg src="/icon.svg" /> <LogoImg src="/icon.svg" />
{constants.TWO_FACTOR} {constants.TWO_FACTOR}
@ -78,9 +78,9 @@ export default function SetupTwoFactor() {
<LinkButton sx={{ mt: 2 }} onClick={router.back}> <LinkButton sx={{ mt: 2 }} onClick={router.back}>
{constants.GO_BACK} {constants.GO_BACK}
</LinkButton> </LinkButton>
</Container> </VerticallyCenteredContainer>
</CardContent> </CardContent>
</Card> </Card>
</Container> </VerticallyCenteredContainer>
); );
} }

6
src/pages/two-factor/verify/index.tsx
View file

@ -1,4 +1,4 @@
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import LogoImg from 'components/LogoImg'; import LogoImg from 'components/LogoImg';
import VerifyTwoFactor from 'components/TwoFactor/VerifyForm'; import VerifyTwoFactor from 'components/TwoFactor/VerifyForm';
import router from 'next/router'; import router from 'next/router';
@ -53,7 +53,7 @@ export default function Home() {
} }
}; };
return ( return (
<Container> <VerticallyCenteredContainer>
<Card style={{ minWidth: '300px' }} className="text-center"> <Card style={{ minWidth: '300px' }} className="text-center">
<Card.Body style={{ padding: '40px 30px', minHeight: '400px' }}> <Card.Body style={{ padding: '40px 30px', minHeight: '400px' }}>
<Card.Title style={{ marginBottom: '32px' }}> <Card.Title style={{ marginBottom: '32px' }}>
@ -86,6 +86,6 @@ export default function Home() {
</div> </div>
</Card.Body> </Card.Body>
</Card> </Card>
</Container> </VerticallyCenteredContainer>
); );
} }

6
src/pages/verify/index.tsx
View file

@ -1,5 +1,5 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import Container from 'components/Container'; import VerticallyCenteredContainer from 'components/Container';
import Card from 'react-bootstrap/Card'; import Card from 'react-bootstrap/Card';
import Form from 'react-bootstrap/Form'; import Form from 'react-bootstrap/Form';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
@ -129,7 +129,7 @@ export default function Verify() {
} }
return ( return (
<Container> <VerticallyCenteredContainer>
<Card style={{ minWidth: '300px' }} className="text-center"> <Card style={{ minWidth: '300px' }} className="text-center">
<Card.Body style={{ padding: '40px 30px' }}> <Card.Body style={{ padding: '40px 30px' }}>
<Card.Title style={{ marginBottom: '32px' }}> <Card.Title style={{ marginBottom: '32px' }}>
@ -200,6 +200,6 @@ export default function Verify() {
</Formik> </Formik>
</Card.Body> </Card.Body>
</Card> </Card>
</Container> </VerticallyCenteredContainer>
); );
} }