Remove redundant container

apps/photos/src/components/Form/FormContainer.tsx

@@ -1,5 +0,0 @@
-import { VerticallyCentered } from 'components/Container';
-
-const FormContainer = VerticallyCentered;
-
-export default FormContainer;

apps/photos/src/pages/credentials/index.tsx

@@ -16,7 +16,6 @@ import { isFirstLogin } from 'utils/storage';
 import { AppContext } from 'pages/_app';
 import { logError } from 'utils/sentry';
 import { KeyAttributes, User } from 'types/user';
-import FormContainer from 'components/Form/FormContainer';
 import FormPaper from 'components/Form/FormPaper';
 import FormPaperTitle from 'components/Form/FormPaper/Title';
 import FormPaperFooter from 'components/Form/FormPaper/Footer';
@@ -109,7 +108,7 @@ export default function Credentials() {
     }
 
     return (
-        <FormContainer>
+        <VerticallyCentered>
             <FormPaper style={{ minWidth: '320px' }}>
                 <FormPaperTitle>{t('PASSWORD')}</FormPaperTitle>
 
@@ -128,6 +127,6 @@ export default function Credentials() {
                     </LinkButton>
                 </FormPaperFooter>
             </FormPaper>
-        </FormContainer>
+        </VerticallyCentered>
     );
 }

apps/photos/src/pages/generate/index.tsx

@@ -19,7 +19,6 @@ import EnteSpinner from 'components/EnteSpinner';
 import { AppContext } from 'pages/_app';
 import { logError } from 'utils/sentry';
 import { KeyAttributes, User } from 'types/user';
-import FormContainer from 'components/Form/FormContainer';
 import FormPaper from 'components/Form/FormPaper';
 import FormTitle from 'components/Form/FormPaper/Title';
 import { APPS, getAppName } from 'constants/apps';
@@ -112,7 +111,7 @@ export default function Generate() {
                     somethingWentWrong={() => null}
                 />
             ) : (
-                <FormContainer>
+                <VerticallyCentered>
                     <FormPaper>
                         <FormTitle>{t('SET_PASSPHRASE')}</FormTitle>
                         <SetPasswordForm
@@ -126,7 +125,7 @@ export default function Generate() {
                             </LinkButton>
                         </FormPaperFooter>
                     </FormPaper>
-                </FormContainer>
+                </VerticallyCentered>
             )}
         </>
     );

apps/photos/src/pages/login/index.tsx

@@ -6,7 +6,6 @@ import Login from 'components/Login';
 import { VerticallyCentered } from 'components/Container';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import { PAGES } from 'constants/pages';
-import FormContainer from 'components/Form/FormContainer';
 import FormPaper from 'components/Form/FormPaper';
 
 export default function Home() {
@@ -36,10 +35,10 @@ export default function Home() {
             </EnteSpinner>
         </VerticallyCentered>
     ) : (
-        <FormContainer>
+        <VerticallyCentered>
             <FormPaper>
                 <Login signUp={register} />
             </FormPaper>
-        </FormContainer>
+        </VerticallyCentered>
     );
 }

apps/photos/src/pages/shared-albums/index.tsx

@@ -33,7 +33,6 @@ import SharedAlbumNavbar from 'components/pages/sharedAlbum/Navbar';
 import { CollectionInfo } from 'components/Collections/CollectionInfo';
 import { CollectionInfoBarWrapper } from 'components/Collections/styledComponents';
 import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
-import FormContainer from 'components/Form/FormContainer';
 import FormPaper from 'components/Form/FormPaper';
 import FormPaperTitle from 'components/Form/FormPaper/Title';
 import Typography from '@mui/material/Typography';
@@ -355,7 +354,7 @@ export default function PublicCollectionGallery() {
         }
         if (isPasswordProtected && !passwordJWTToken.current) {
             return (
-                <FormContainer>
+                <VerticallyCentered>
                     <FormPaper>
                         <FormPaperTitle>{t('PASSWORD')}</FormPaperTitle>
                         <Typography color={'text.muted'} mb={2} variant="small">
@@ -368,7 +367,7 @@ export default function PublicCollectionGallery() {
                             fieldType="password"
                         />
                     </FormPaper>
-                </FormContainer>
+                </VerticallyCentered>
             );
         }
         if (!publicFiles) {

apps/photos/src/pages/signup/index.tsx

@@ -6,7 +6,7 @@ import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import SignUp from 'components/SignUp';
 import { PAGES } from 'constants/pages';
 import FormPaper from 'components/Form/FormPaper';
-import FormContainer from 'components/Form/FormContainer';
+import { VerticallyCentered } from 'components/Container';
 
 export default function SignUpPage() {
     const router = useRouter();
@@ -29,7 +29,7 @@ export default function SignUpPage() {
     };
 
     return (
-        <FormContainer>
+        <VerticallyCentered>
             {loading ? (
                 <EnteSpinner />
             ) : (
@@ -37,6 +37,6 @@ export default function SignUpPage() {
                     <SignUp login={login} />
                 </FormPaper>
             )}
-        </FormContainer>
+        </VerticallyCentered>
     );
 }

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

@@ -10,10 +10,10 @@ import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
 import { t } from 'i18next';
 
 import LinkButton from 'components/pages/gallery/LinkButton';
-import FormContainer from 'components/Form/FormContainer';
 import FormPaper from 'components/Form/FormPaper';
 import FormTitle from 'components/Form/FormPaper/Title';
 import FormPaperFooter from 'components/Form/FormPaper/Footer';
+import { VerticallyCentered } from 'components/Container';
 
 export default function Home() {
     const [sessionID, setSessionID] = useState('');
@@ -57,7 +57,7 @@ export default function Home() {
         }
     };
     return (
-        <FormContainer>
+        <VerticallyCentered>
             <FormPaper sx={{ maxWidth: '410px' }}>
                 <FormTitle>{t('TWO_FACTOR')}</FormTitle>
                 <VerifyTwoFactor onSubmit={onSubmit} buttonText={t('VERIFY')} />
@@ -72,6 +72,6 @@ export default function Home() {
                     </LinkButton>
                 </FormPaperFooter>
             </FormPaper>
-        </FormContainer>
+        </VerticallyCentered>
     );
 }

apps/photos/src/pages/verify/index.tsx

@@ -21,7 +21,6 @@ import FormPaperTitle from 'components/Form/FormPaper/Title';
 import FormPaper from 'components/Form/FormPaper';
 import FormPaperFooter from 'components/Form/FormPaper/Footer';
 import LinkButton from 'components/pages/gallery/LinkButton';
-import FormContainer from 'components/Form/FormContainer';
 import SingleInputForm, {
     SingleInputFormProps,
 } from 'components/SingleInputForm';
@@ -132,7 +131,7 @@ export default function Verify() {
     }
 
     return (
-        <FormContainer>
+        <VerticallyCentered>
             <FormPaper>
                 <FormPaperTitle sx={{ mb: 14, wordBreak: 'break-word' }}>
                     <Trans
@@ -167,6 +166,6 @@ export default function Verify() {
                     </LinkButton>
                 </FormPaperFooter>
             </FormPaper>
-        </FormContainer>
+        </VerticallyCentered>
     );
 }