RC-4: corrected layout2 components

src/app/theme-layouts/layout2/Layout2.js

@@ -5,6 +5,7 @@ import i18next from 'i18next';
 import { memo, useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { useRoutes } from 'react-router-dom';
+import { useAuth } from 'src/app/auth/AuthContext';
 import FooterLayout2 from './components/FooterLayout2';
 import HeaderLayout2 from './components/HeaderLayout2';
 
@@ -14,12 +15,13 @@ i18next.addResourceBundle('en', 'layout2', en);
 
 function Layout2(props) {
   const config = useSelector(selectFuseCurrentLayoutConfig);
+  const authContext = useAuth();
   const appContext = useContext(AppContext);
   const { routes } = appContext;
 
   return (
     <>
-      {config.header.display && <HeaderLayout2 />}
+      {config.header.display && <HeaderLayout2 isAuthenticated={authContext.isAuthenticated} />}
       <main id="fuse-main" className="flex flex-col min-h-full min-w-full mt-72">
         <FuseSuspense>{useRoutes(routes)}</FuseSuspense>
         {props.children}

src/app/theme-layouts/layout2/components/FooterLayout2.js

@@ -7,8 +7,8 @@ function FooterLayout2() {
   const { t } = useTranslation('layout2');
 
   return (
-    <footer className="w-full bg-gray-900">
-      <div className="flex gap-96 max-w-screen-2xl px-10 py-52">
+    <footer className="flex items-center justify-center w-full bg-gray-900">
+      <div className="flex gap-96 w-full max-w-screen-xl px-10 py-52">
         <ul className="flex flex-col gap-16 mr-96">
           <li>
             <Link to="/">

src/app/theme-layouts/layout2/components/HeaderLayout2.js

@@ -4,12 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import linksConfigLayout2 from './linksLayout2Config';
 
-function HeaderLayout2() {
+function HeaderLayout2(props) {
   const { t } = useTranslation('layout2');
 
   return (
     <header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-white">
-      <div className="flex justify-between max-w-screen-2xl w-full">
+      <div className="flex justify-between max-w-screen-xl w-full">
         <Link to="/">
           <img
             className="max-w-[88px] max-h-[45px]"
@@ -17,7 +17,7 @@ function HeaderLayout2() {
             alt={t('logo_alt')}
           />
         </Link>
-        <nav className="flex gap-72 items-center">
+        <nav className="flex grow justify-center gap-72 items-center">
           {linksConfigLayout2.map((path) => (
             <Link
               className="text-lg leading-5 text-slate-800 no-underline"
@@ -28,18 +28,20 @@ function HeaderLayout2() {
             </Link>
           ))}
         </nav>
-        <div className="flex gap-32 items-center">
-          <Link className="text-indigo-400" to="/sign-up">
-            {t('sign_up')}
-          </Link>
-          <Link
-            className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
-            to="/sign-in"
-          >
-            <span>{t('sign_in')}</span>
-            <FuseSvgIcon>heroicons-outline:login</FuseSvgIcon>
-          </Link>
-        </div>
+        {props.isAuthenticated || (
+          <div className="flex gap-32 items-center">
+            <Link className="text-indigo-400" to="/sign-in">
+              {t('sign_in')}
+            </Link>
+            <Link
+              className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
+              to="/sign-up"
+            >
+              <span>{t('sign_up')}</span>
+              <FuseSvgIcon>heroicons-outline:login</FuseSvgIcon>
+            </Link>
+          </div>
+        )}
       </div>
     </header>
   );