fix(human-app): page card component

packages/apps/human-app/frontend/src/components/data-entry/input.tsx

@@ -52,7 +52,6 @@ export function Input({
           }
           label={label}
           name={name}
-          sx={{ maxWidth: '376px' }}
           variant="outlined"
           {...rest}
         />

packages/apps/human-app/frontend/src/components/ui/page-card.tsx

@@ -29,7 +29,7 @@ const IconWrapper = styled('div')(() => ({
 }));
 
 const commonStyles: SxProps<Theme> = {
-  padding: '2rem 2rem 8.75rem 2rem',
+  padding: '2rem',
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
@@ -44,9 +44,10 @@ type ButtonsProps = string | -1 | (() => void);
 
 interface FormCardProps {
   children: React.JSX.Element;
+  maxContentWidth?: string;
+  childrenMaxWidth?: string;
   title?: React.JSX.Element | string;
   alert?: React.JSX.Element;
-  childrenMaxWidth?: string;
   backArrowPath?: ButtonsProps;
   cancelRouterPathOrCallback?: ButtonsProps;
   hiddenCancelButton?: boolean;
@@ -59,6 +60,7 @@ export function PageCard({
   children,
   title,
   alert,
+  maxContentWidth = '376px',
   childrenMaxWidth = '486px',
   backArrowPath = -1,
   cancelRouterPathOrCallback = routerPaths.homePage,
@@ -69,6 +71,13 @@ export function PageCard({
   const { setGrayBackground } = useBackgroundColorStore();
   const navigate = useNavigate();
   const isMobile = useIsMobile('md');
+  const contentStyles = {
+    maxWidth: maxContentWidth,
+    width: '100%',
+    [breakpoints.mobile]: {
+      maxWidth: 'unset',
+    },
+  };
 
   useEffect(() => {
     if (withLayoutBackground) {
@@ -94,7 +103,7 @@ export function PageCard({
       container
       sx={{
         ...commonStyles,
-        padding: isMobile ? '0 1rem 7.25rem 1rem' : '2rem 2rem 8.75rem 2rem',
+        padding: isMobile ? '0 1rem 7.25rem 1rem' : '2rem 2rem 7.7rem 2rem',
       }}
     >
       {!hiddenCancelButton && (
@@ -132,6 +141,9 @@ export function PageCard({
           width: '100%',
           justifyContent: 'center',
           alignItems: 'center',
+          [breakpoints.mobile]: {
+            maxWidth: '100%',
+          },
         }}
       >
         <Grid
@@ -198,7 +210,7 @@ export function PageCard({
             }}
             xs={12}
           >
-            {alert ? <>{alert}</> : null}
+            <Grid sx={contentStyles}>{alert ? <>{alert}</> : null}</Grid>
           </Grid>
           <Grid
             item
@@ -207,6 +219,7 @@ export function PageCard({
             sx={{
               display: 'flex',
               justifyContent: 'flex-end',
+              mt: '5px',
               [breakpoints.mobile]: {
                 display: 'none',
               },
@@ -219,12 +232,20 @@ export function PageCard({
               </IconWrapper>
             ) : null}
           </Grid>
-          <Grid item md={10} order={{ xs: 4, md: 4 }} xs={12}>
-            <Typography variant="h4">{title}</Typography>
+          <Grid
+            item
+            md={10}
+            order={{ xs: 4, md: 4 }}
+            sx={{ marginBottom: '24px' }}
+            xs={12}
+          >
+            <Grid sx={contentStyles}>
+              <Typography variant="h4">{title}</Typography>
+            </Grid>
           </Grid>
           <Grid item md={1} order={{ xs: 5, md: 5 }} xs={1} />
           <Grid item md={10} order={{ xs: 6, md: 6 }} xs={12}>
-            {children}
+            <Grid sx={contentStyles}>{children}</Grid>
           </Grid>
         </Grid>
       </Grid>

packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx

@@ -22,8 +22,9 @@ export function ChooseSignUpAccountType() {
     <PageCard
       backArrowPath={backToWelcomeStage}
       cancelRouterPathOrCallback={backToWelcomeStage}
-      childrenMaxWidth="100%"
+      childrenMaxWidth="876px"
       hiddenCancelButton={!isMobileMd}
+      maxContentWidth="748px"
       title={<Typography variant="h4">{t('homepage.welcome')} 👋</Typography>}
     >
       <Grid container spacing={4}>

packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/add-keys.page.tsx

@@ -69,7 +69,7 @@ export function Form({
   ).length;
 
   return (
-    <Grid container gap="2rem" marginTop="1rem">
+    <Grid container gap="2rem">
       <div
         style={{
           width: '100%',

packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/existing-keys-form.tsx

@@ -43,7 +43,7 @@ export function ExistingKeysForm({
   useResetMutationErrors(existingKeysMethods.watch, existingKeysMutation.reset);
 
   return (
-    <Grid container gap="2rem" marginTop="1rem">
+    <Grid container gap="1.5rem">
       <div
         style={{
           width: '100%',

packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/pending-keys-form.tsx

@@ -50,7 +50,7 @@ export function PendingKeysForm({
         style={{
           display: 'flex',
           flexDirection: 'column',
-          gap: '1rem',
+          gap: '1.5rem',
         }}
       >
         <EditPendingKeysForm existingKeysInitialState={keysData} />

packages/apps/human-app/frontend/src/pages/operator/sign-up/add-stake/add-stake.page.tsx

@@ -78,7 +78,7 @@ export function AddStakeOperatorPage() {
     <PageCard alert={getAlert()} title={t('operator.addStake.title')}>
       <Grid
         container
-        sx={{ flexDirection: 'column', gap: '1rem', marginTop: '2rem' }}
+        sx={{ flexDirection: 'column', gap: '1.5rem', marginTop: '1rem' }}
       >
         <Typography variant="body4">
           {t('operator.addStake.formHeader')}

packages/apps/human-app/frontend/src/pages/operator/sign-up/connect-wallet.page.tsx

@@ -46,7 +46,7 @@ export function ConnectWalletOperatorPage() {
 
   return (
     <PageCard alert={getAlert()} title={t('operator.connectWallet.title')}>
-      <Grid container sx={{ flexDirection: 'column', gap: '2rem' }}>
+      <Grid container sx={{ flexDirection: 'column', gap: '1.5rem' }}>
         <Typography variant="body1">
           {t('operator.connectWallet.description')}
         </Typography>

packages/apps/human-app/frontend/src/pages/operator/sign-up/set-up-operator.tsx

@@ -19,7 +19,7 @@ export function SetUpOperatorPage() {
       }
       title={t('operator.connectWallet.title')}
     >
-      <Grid container sx={{ flexDirection: 'column', gap: '2rem' }}>
+      <Grid container sx={{ flexDirection: 'column', gap: '1.5rem' }}>
         <Typography variant="body1">
           {t('operator.connectWallet.description')}
         </Typography>

packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password-success.page.tsx

@@ -32,7 +32,7 @@ export function ResetPasswordWorkerSuccessPage() {
         </Grid>
       }
     >
-      <Grid container gap="2rem">
+      <Grid container gap="1.5rem">
         <Typography variant="body1">
           {t('worker.resetPasswordSuccess.description')}
         </Typography>

packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password.page.tsx

@@ -20,7 +20,6 @@ import { defaultErrorMessage } from '@/shared/helpers/default-error-message';
 import { routerPaths } from '@/router/router-paths';
 import { FormCaptcha } from '@/components/h-captcha';
 import { useResetMutationErrors } from '@/hooks/use-reset-mutation-errors';
-import { MAX_INPUT_WIDTH } from '@/shared/consts';
 
 export function ResetPasswordWorkerPage() {
   const location = useLocation();
@@ -70,7 +69,7 @@ export function ResetPasswordWorkerPage() {
             void methods.handleSubmit(handleWorkerResetPassword)(event);
           }}
         >
-          <Grid container gap="2rem" maxWidth={`${MAX_INPUT_WIDTH}px`}>
+          <Grid container gap="1.5rem">
             <Typography variant="body1">
               {t('worker.resetPassword.description')}
             </Typography>

packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link-success.page.tsx

@@ -59,7 +59,7 @@ export function SendResetLinkWorkerSuccessPage() {
             void methods.handleSubmit(handleWorkerSendResetLink)(event);
           }}
         >
-          <Grid container gap="2rem">
+          <Grid container gap="1.5rem">
             <Typography>
               <Trans
                 components={{

packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link.page.tsx

@@ -17,7 +17,6 @@ import { useAuth } from '@/auth/use-auth';
 import { FormCaptcha } from '@/components/h-captcha';
 import { routerPaths } from '@/router/router-paths';
 import { useResetMutationErrors } from '@/hooks/use-reset-mutation-errors';
-import { MAX_INPUT_WIDTH } from '@/shared/consts';
 
 export function SendResetLinkWorkerPage() {
   const { t } = useTranslation();
@@ -63,7 +62,7 @@ export function SendResetLinkWorkerPage() {
             void methods.handleSubmit(handleWorkerSendResetLink)(event);
           }}
         >
-          <Grid container gap="2rem" maxWidth={`${MAX_INPUT_WIDTH}px`}>
+          <Grid container gap="1.5rem">
             <Typography variant="body1">
               {t('worker.sendResetLinkForm.description')}
             </Typography>

packages/apps/human-app/frontend/src/pages/worker/sign-in.page.tsx

@@ -1,5 +1,5 @@
 import { FormProvider, useForm } from 'react-hook-form';
-import { Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
 import { t as i18NextT } from 'i18next';
@@ -21,7 +21,6 @@ import { Alert } from '@/components/ui/alert';
 import { FormCaptcha } from '@/components/h-captcha';
 import { useResetMutationErrors } from '@/hooks/use-reset-mutation-errors';
 import { browserAuthProvider } from '@/shared/helpers/browser-auth-provider';
-import { MAX_INPUT_WIDTH } from '@/shared/consts';
 
 function formattedSignInErrorMessage(unknownError: unknown) {
   if (unknownError instanceof FetchError && unknownError.status === 400) {
@@ -80,12 +79,7 @@ export function SignInWorkerPage() {
             void methods.handleSubmit(handleWorkerSignIn)(event)
           }
         >
-          <Grid
-            container
-            gap="2rem"
-            maxWidth={`${MAX_INPUT_WIDTH}px`}
-            sx={{ paddingTop: '1rem' }}
-          >
+          <Grid container gap="1.5rem">
             <Input
               fullWidth
               label={t('worker.signInForm.fields.email')}
@@ -96,14 +90,16 @@ export function SignInWorkerPage() {
               label={t('worker.signInForm.fields.password')}
               name="password"
             />
-            <Typography variant="body1">
-              <Link
-                style={{ textDecoration: 'none', fontWeight: 600 }}
-                to={routerPaths.worker.sendResetLink}
-              >
-                {t('worker.signInForm.forgotPassword')}
-              </Link>
-            </Typography>
+            <Box width="100%">
+              <Typography variant="body1">
+                <Link
+                  style={{ textDecoration: 'none', fontWeight: 600 }}
+                  to={routerPaths.worker.sendResetLink}
+                >
+                  {t('worker.signInForm.forgotPassword')}
+                </Link>
+              </Typography>
+            </Box>
             <FormCaptcha error={signInWorkerError} name="h_captcha_token" />
             <Button
               fullWidth

packages/apps/human-app/frontend/src/pages/worker/sign-up.page.tsx

@@ -23,7 +23,6 @@ import { FetchError } from '@/api/fetcher';
 import { FormCaptcha } from '@/components/h-captcha';
 import { useResetMutationErrors } from '@/hooks/use-reset-mutation-errors';
 import { browserAuthProvider } from '@/shared/helpers/browser-auth-provider';
-import { MAX_INPUT_WIDTH } from '@/shared/consts';
 
 function formattedSignUpErrorMessage(unknownError: unknown) {
   if (unknownError instanceof FetchError && unknownError.status === 409) {
@@ -81,7 +80,7 @@ export function SignUpWorkerPage() {
             void methods.handleSubmit(handleWorkerSignUp)(event);
           }}
         >
-          <Grid container gap="2rem" maxWidth={`${MAX_INPUT_WIDTH}px`}>
+          <Grid container gap="1.5rem">
             <Input label={t('worker.signUpForm.fields.email')} name="email" />
             <Password
               label={t('worker.signUpForm.fields.password')}

packages/apps/human-app/frontend/src/shared/consts.ts

@@ -1,5 +1,3 @@
 import { JobTypes } from '@/smart-contracts/EthKVStore/config';
 
 export const JOB_TYPES = Object.values(JobTypes);
-
-export const MAX_INPUT_WIDTH = 376;