rename MuiStyled(MuiContainer) to VerticallyCenteredContainer

src/components/Container.ts

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

src/components/SetPasswordForm.tsx

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

src/components/TwoFactor/Modal/Setup.tsx

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

src/components/TwoFactor/Setup.tsx

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

src/components/TwoFactor/VerifyForm.tsx

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

src/components/TwoFactor/styledComponents.ts

@@ -1,4 +1,4 @@
-import Container from 'components/Container';
+import VerticallyCenteredContainer from 'components/Container';
 import styled from 'styled-components';
 
 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 }) => `
     width:200px;
     aspect-ratio:1;

src/pages/404.tsx

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

src/pages/_app.tsx

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

src/pages/change-email/index.tsx

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

src/pages/credentials/index.tsx

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

src/pages/generate/index.tsx

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

src/pages/login/index.tsx

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

src/pages/recover/index.tsx

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

src/pages/shared-albums/index.tsx

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

src/pages/signup/index.tsx

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

src/pages/two-factor/recover/index.tsx

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

src/pages/two-factor/setup/index.tsx

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

src/pages/two-factor/verify/index.tsx

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

src/pages/verify/index.tsx

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