fix(human-app): footer and navbar width and padding adjustments

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

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

packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx

@@ -9,7 +9,8 @@ import { HelpIcon, UserOutlinedIcon, WorkIcon } from '@/components/ui/icons';
 import { routerPaths } from '@/router/router-paths';
 
 export const workerDrawerTopMenuItems = (
-  addressRegistered: boolean
+  addressRegistered: boolean,
+  labelingEnabled: boolean
 ): TopMenuItem[] => {
   return [
     <Grid
@@ -28,7 +29,9 @@ export const workerDrawerTopMenuItems = (
     </Grid>,
     {
       label: t('components.DrawerNavigation.captchaLabelling'),
-      link: routerPaths.worker.enableLabeler,
+      link: labelingEnabled
+        ? routerPaths.worker.HcaptchaLabeling
+        : routerPaths.worker.enableLabeler,
       disabled: !addressRegistered,
     },
     // {

packages/apps/human-app/frontend/src/components/layout/footer.tsx

@@ -21,15 +21,15 @@ export function Footer({ isProtected, displayChatIcon = true }: FooterProps) {
     if (isProtected) {
       return '200px';
     }
-    return '44px';
+    return '0';
   };
 
   return (
     <Grid
       component="footer"
       container
       sx={{
-        pr: isMobile ? 0 : '44px',
+        pr: 0,
         pl: parseLeftPadding(),
         pb: isMobile ? 0 : '44px',
         pt: '32px',

packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx

@@ -6,13 +6,14 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import { Stack, Typography } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { t } from 'i18next';
 import type { Dispatch, SetStateAction } from 'react';
 import { HumanLogoNavbarIcon } from '@/components/ui/icons';
 import { Button } from '@/components/ui/button';
 import { useIsMobile } from '@/hooks/use-is-mobile';
 import { NAVBAR_PADDING } from '@/components/layout/protected/navbar';
+import { colorPalette } from '@/styles/color-palette';
 
 const drawerWidth = 240;
 
@@ -44,6 +45,7 @@ export function DrawerNavigation({
 }: DrawerNavigationProps) {
   const navigate = useNavigate();
   const isMobile = useIsMobile();
+  const location = useLocation();
 
   return (
     <Box
@@ -99,6 +101,8 @@ export function DrawerNavigation({
               }
 
               const { link, label, disabled, href, onClick } = item;
+              const isActive = Boolean(link && location.pathname === link);
+
               return (
                 <ListItem disablePadding key={link}>
                   <ListItemButton
@@ -122,6 +126,12 @@ export function DrawerNavigation({
                         navigate(link);
                       }
                     }}
+                    selected={isActive}
+                    sx={{
+                      '&.Mui-selected': {
+                        backgroundColor: colorPalette.primary.shades,
+                      },
+                    }}
                   >
                     <Stack
                       direction="row"
@@ -151,54 +161,63 @@ export function DrawerNavigation({
             })}
           </List>
           <List>
-            {bottomMenuItems?.map(({ label, link, icon, href, onClick }) => (
-              <ListItem alignItems="center" disablePadding key={link}>
-                <ListItemButton
-                  alignItems="center"
-                  onClick={() => {
-                    if (onClick) {
-                      onClick();
-                      return;
-                    }
-                    if (isMobile) setDrawerOpen(false);
-                    if (href) {
-                      const element = document.createElement('a');
-                      element.href = href;
-                      element.target = '_blank';
-                      document.body.appendChild(element);
-                      element.click();
-                      return;
-                    }
-                    if (link && !href) {
-                      navigate(link);
-                    }
-                  }}
-                >
-                  <Stack
+            {bottomMenuItems?.map(({ label, link, icon, href, onClick }) => {
+              const isActive = location.pathname === link;
+              return (
+                <ListItem alignItems="center" disablePadding key={link}>
+                  <ListItemButton
                     alignItems="center"
-                    direction="row"
-                    justifyContent="center"
+                    onClick={() => {
+                      if (onClick) {
+                        onClick();
+                        return;
+                      }
+                      if (isMobile) setDrawerOpen(false);
+                      if (href) {
+                        const element = document.createElement('a');
+                        element.href = href;
+                        element.target = '_blank';
+                        document.body.appendChild(element);
+                        element.click();
+                        return;
+                      }
+                      if (link && !href) {
+                        navigate(link);
+                      }
+                    }}
+                    selected={isActive}
                     sx={{
-                      ml: isMobile ? '28px' : NAVBAR_PADDING,
+                      '&.Mui-selected': {
+                        backgroundColor: colorPalette.primary.shades,
+                      },
                     }}
                   >
-                    {icon}
-                    <ListItemText
-                      disableTypography
-                      primary={
-                        <Typography component="span" variant="body1">
-                          {label}
-                        </Typography>
-                      }
+                    <Stack
+                      alignItems="center"
+                      direction="row"
+                      justifyContent="center"
                       sx={{
-                        textAlign: 'center',
-                        marginLeft: '10px',
+                        ml: isMobile ? '28px' : NAVBAR_PADDING,
                       }}
-                    />
-                  </Stack>
-                </ListItemButton>
-              </ListItem>
-            ))}
+                    >
+                      {icon}
+                      <ListItemText
+                        disableTypography
+                        primary={
+                          <Typography component="span" variant="body1">
+                            {label}
+                          </Typography>
+                        }
+                        sx={{
+                          textAlign: 'center',
+                          marginLeft: '10px',
+                        }}
+                      />
+                    </Stack>
+                  </ListItemButton>
+                </ListItem>
+              );
+            })}
           </List>
         </Stack>
         <Button

packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx

@@ -2,24 +2,24 @@ import { useState } from 'react';
 import { Box, Drawer, IconButton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import MenuIcon from '@mui/icons-material/Menu';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { HumanLogoIcon, HumanLogoNavbarIcon } from '@/components/ui/icons';
 import { useIsMobile } from '@/hooks/use-is-mobile';
 import { Button } from '@/components/ui/button';
 import { breakpoints } from '@/styles/theme';
-import { routerPaths } from '@/router/router-paths';
 import { env } from '@/shared/env';
+import { useHomePageState } from '@/contexts/homepage-state';
 
 interface NavbarProps {
   withNavigation: boolean;
 }
 
 export function Navbar({ withNavigation }: NavbarProps) {
+  const { isMainPage } = useHomePageState();
   const { t } = useTranslation();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const isMobile = useIsMobile();
-  const location = useLocation();
-  const isMainPage = location.pathname === routerPaths.homePage;
+
   return (
     <Box
       position="static"
@@ -31,7 +31,8 @@ export function Navbar({ withNavigation }: NavbarProps) {
         justifyContent: 'space-between',
         flexDirection: 'row',
         alignItems: 'center',
-        px: isMobile ? '44px' : 0,
+        pr: isMobile ? '44px' : 0,
+        pl: isMobile ? '44px' : '8px',
         [breakpoints.mobile]: {
           height: '104px',
           margin: '0',

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

@@ -11,6 +11,7 @@ import { colorPalette } from '@/styles/color-palette';
 import { useBackgroundColorStore } from '@/hooks/use-background-store';
 import { Loader } from '@/components/ui/loader';
 import { Alert } from '@/components/ui/alert';
+import { useIsMobile } from '@/hooks/use-is-mobile';
 
 const IconWrapper = styled('div')(() => ({
   width: '40px',
@@ -28,13 +29,13 @@ const IconWrapper = styled('div')(() => ({
 }));
 
 const commonStyles: SxProps<Theme> = {
-  padding: '2rem 2rem 6rem 2rem',
+  padding: '2rem 2rem 8.75rem 2rem',
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '20px',
   minHeight: '70vh',
-  maxWidth: '1200px',
+  maxWidth: '1600px',
   width: '100%',
   background: colorPalette.white,
 };
@@ -67,6 +68,7 @@ export function PageCard({
 }: FormCardProps) {
   const { setGrayBackground } = useBackgroundColorStore();
   const navigate = useNavigate();
+  const isMobile = useIsMobile('md');
 
   useEffect(() => {
     if (withLayoutBackground) {
@@ -88,7 +90,13 @@ export function PageCard({
   };
 
   return (
-    <Grid container sx={commonStyles}>
+    <Grid
+      container
+      sx={{
+        ...commonStyles,
+        padding: isMobile ? '0 1rem 7.25rem 1rem' : '2rem 2rem 8.75rem 2rem',
+      }}
+    >
       {!hiddenCancelButton && (
         <Grid
           sx={{

packages/apps/human-app/frontend/src/contexts/homepage-state.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useState, useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { routerPaths } from '@/router/router-paths';
+
+export type HomePageStateType = 'welcome' | 'chooseSignUpAccountType';
+
+interface HomePageStageContextProps {
+  pageView: HomePageStateType;
+  setPageView: (step: HomePageStateType) => void;
+  isMainPage: boolean;
+}
+
+export const HomePageStateContext =
+  createContext<HomePageStageContextProps | null>(null);
+
+export function HomePageStateProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [pageView, setPageView] = useState<HomePageStateType>('welcome');
+
+  const location = useLocation();
+  const isMainPage =
+    location.pathname === routerPaths.homePage && pageView === 'welcome';
+
+  return (
+    <HomePageStateContext.Provider
+      value={{ pageView, setPageView, isMainPage }}
+    >
+      {children}
+    </HomePageStateContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useHomePageState = () => {
+  const context = useContext(HomePageStateContext);
+  if (!context) {
+    throw new Error(
+      'useHomePageState must be used within a HomePageStageProvider'
+    );
+  }
+  return context;
+};

packages/apps/human-app/frontend/src/main.tsx

@@ -18,6 +18,7 @@ import '@fontsource/inter/800.css';
 import { WalletConnectProvider } from '@/contexts/wallet-connect';
 import { Web3AuthProvider } from '@/auth-web3/web3-auth-context';
 import { JWTExpirationCheck } from '@/contexts/jwt-expiration-check';
+import { HomePageStateProvider } from '@/contexts/homepage-state';
 
 const root = document.getElementById('root');
 if (!root) throw Error('root element is undefined');
@@ -38,13 +39,15 @@ createRoot(root).render(
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
           <WalletConnectProvider>
-            <Web3AuthProvider>
-              <AuthProvider>
-                <JWTExpirationCheck>
-                  <Router />
-                </JWTExpirationCheck>
-              </AuthProvider>
-            </Web3AuthProvider>
+            <HomePageStateProvider>
+              <Web3AuthProvider>
+                <AuthProvider>
+                  <JWTExpirationCheck>
+                    <Router />
+                  </JWTExpirationCheck>
+                </AuthProvider>
+              </Web3AuthProvider>
+            </HomePageStateProvider>
             <ReactQueryDevtools client={queryClient} initialIsOpen={false} />
             <DisplayModal />
           </WalletConnectProvider>

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

@@ -6,19 +6,16 @@ import { Button } from '@/components/ui/button';
 import { useIsMobile } from '@/hooks/use-is-mobile';
 import { routerPaths } from '@/router/router-paths';
 import { PageCard } from '@/components/ui/page-card';
-import type { HomePageStageType } from '@/pages/homepage/home.page';
+import { useHomePageState } from '@/contexts/homepage-state';
 
-interface ChooseSignUpAccountType {
-  setStage: (step: HomePageStageType) => void;
-}
-
-export function ChooseSignUpAccountType({ setStage }: ChooseSignUpAccountType) {
+export function ChooseSignUpAccountType() {
+  const { setPageView } = useHomePageState();
   const { t } = useTranslation();
   const isMobile = useIsMobile('lg');
   const isMobileMd = useIsMobile('md');
 
   const backToWelcomeStage = () => {
-    setStage('welcome');
+    setPageView('welcome');
   };
 
   return (