RC-11: update components according to ui kit

src/app/main/authPages/forgot-password/ForgotPasswordPage.js

@@ -43,7 +43,7 @@ function ForgotPasswordPage({ t }) {
 
       <Paper
         className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
-        sx={{ background: (theme) => theme.palette.background?.authPaper }}
+        sx={{ background: (theme) => theme.palette.background?.default }}
       >
         <div className="w-full mx-auto sm:mx-0">
           <Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -81,7 +81,7 @@ function ForgotPasswordPage({ t }) {
               )}
             />
 
-            <div className="flex justify-center w-full">
+            <div className="flex flex-col items-center justify-center gap-10 w-full">
               <Button
                 variant="contained"
                 color="secondary"
@@ -93,11 +93,14 @@ function ForgotPasswordPage({ t }) {
               >
                 {t('forgot_password_btn')}
               </Button>
+              {errors.root?.message && (
+                <p className="text-l text-error-main">{errors.root?.message}</p>
+              )}
             </div>
 
             <Typography className="mt-32 font-medium" color="text.secondary">
               <span>{t('return')}</span>
-              <Link className="ml-4 text-indigo-400 underline" to="/sign-in">
+              <Link className="ml-4 text-secondary-main underline" to="/sign-in">
                 {t('sign_in')}
               </Link>
             </Typography>

src/app/main/authPages/shared-components/LeftSideCanvas.js

@@ -6,7 +6,7 @@ function LeftSideCanvas({ title, subtitle, text }) {
   return (
     <Box
       className="h-full min-h-screen relative hidden md:flex flex-auto items-center justify-center p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
-      sx={{ backgroundColor: 'primary.main' }}
+      sx={{ backgroundColor: 'common.layout' }}
     >
       <svg
         className="absolute inset-0 pointer-events-none"
@@ -30,15 +30,17 @@ function LeftSideCanvas({ title, subtitle, text }) {
       </svg>
 
       <div className="z-10 relative w-full max-w-2xl">
-        {title && <div className="text-7xl font-bold leading-none text-gray-100">{title}</div>}
+        {title && <div className="text-7xl font-bold leading-none text-primary-light">{title}</div>}
         {subtitle && (
-          <div className="mt-24 text-lg tracking-tight leading-6 text-gray-400">{subtitle}</div>
+          <div className="mt-24 text-lg tracking-tight leading-6 text-common-disabled">
+            {subtitle}
+          </div>
         )}
         <div className="flex items-center mt-32">
           <AvatarGroup
             sx={{
               '& .MuiAvatar-root': {
-                borderColor: 'primary.main',
+                borderColor: 'common.layout',
               },
             }}
           >
@@ -48,7 +50,9 @@ function LeftSideCanvas({ title, subtitle, text }) {
             <Avatar src="assets/images/avatars/male-16.jpg" />
           </AvatarGroup>
 
-          {text && <div className="ml-16 font-medium tracking-tight text-gray-400">{text}</div>}
+          {text && (
+            <div className="ml-16 font-medium tracking-tight text-common-disabled">{text}</div>
+          )}
         </div>
       </div>
     </Box>

src/app/main/authPages/sign-in/SignInPage.js

@@ -49,7 +49,7 @@ function SignInPage({ t }) {
 
       <Paper
         className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
-        sx={{ background: (theme) => theme.palette.background?.authPaper }}
+        sx={{ background: (theme) => theme.palette.background?.default }}
       >
         <div className="w-full mx-auto sm:mx-0">
           <Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -57,7 +57,7 @@ function SignInPage({ t }) {
           </Typography>
           <div className="flex items-baseline mt-10 font-medium">
             <Typography>{t('have_account')}</Typography>
-            <Link className="ml-4 text-indigo-400 underline" to="/sign-up">
+            <Link className="ml-4 text-secondary-main underline" to="/sign-up">
               {t('sign_up')}
             </Link>
           </div>
@@ -126,7 +126,9 @@ function SignInPage({ t }) {
                       control={
                         <Checkbox
                           {...field}
-                          sx={{ color: (theme) => theme.palette.border.light }}
+                          sx={{
+                            color: (theme) => theme.palette.common.disabled,
+                          }}
                         />
                       }
                     />
@@ -134,12 +136,12 @@ function SignInPage({ t }) {
                 )}
               />
 
-              <Link className="text-indigo-400 underline font-medium" to="/forgot-password">
+              <Link className="text-secondary-main underline font-medium" to="/forgot-password">
                 {t('forgot_password')}
               </Link>
             </div>
 
-            <div className="flex justify-center w-full">
+            <div className="flex flex-col items-center justify-center gap-10 w-full">
               <Button
                 variant="contained"
                 color="secondary"
@@ -151,7 +153,9 @@ function SignInPage({ t }) {
               >
                 {t('sign_in_btn')}
               </Button>
-              {errors.root && <p>{errors.root.message}</p>}
+              {errors.root?.message && (
+                <p className="text-l text-error-main">{errors.root?.message}</p>
+              )}
             </div>
           </form>
         </div>

src/app/main/authPages/sign-up/SignUpPage.js

@@ -61,7 +61,7 @@ function SignUpPage({ t }) {
 
       <Paper
         className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
-        sx={{ background: (theme) => theme.palette.background?.authPaper }}
+        sx={{ background: (theme) => theme.palette.background?.default }}
       >
         <div className="w-full mx-auto sm:mx-0">
           <Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -69,7 +69,7 @@ function SignUpPage({ t }) {
           </Typography>
           <div className="flex items-baseline mt-10 font-medium">
             <Typography>{t('have_account')}</Typography>
-            <Link className="ml-4 text-indigo-400 underline" to="/sign-in">
+            <Link className="ml-4 text-secondary-main underline" to="/sign-in">
               {t('sign_in')}
             </Link>
           </div>
@@ -181,7 +181,10 @@ function SignUpPage({ t }) {
                   <FormControlLabel
                     label={t('accept_terms')}
                     control={
-                      <Checkbox {...field} sx={{ color: (theme) => theme.palette.border.light }} />
+                      <Checkbox
+                        {...field}
+                        sx={{ color: (theme) => theme.palette.common.disabled }}
+                      />
                     }
                   />
                   <FormHelperText>{errors?.acceptTermsConditions?.message}</FormHelperText>
@@ -189,7 +192,7 @@ function SignUpPage({ t }) {
               )}
             />
 
-            <div className="flex justify-center w-full">
+            <div className="flex flex-col items-center justify-center gap-10 w-full">
               <Button
                 variant="contained"
                 color="secondary"
@@ -201,6 +204,9 @@ function SignUpPage({ t }) {
               >
                 {t('sign_up_btn')}
               </Button>
+              {errors.root?.message && (
+                <p className="text-l text-error-main">{errors.root?.message}</p>
+              )}
             </div>
           </form>
         </div>

src/app/main/navigationPages/dashboard/Dashboard.js

@@ -21,11 +21,11 @@ function DashboardPage(props) {
 
   return (
     <Root
-      header={
+      // header={
-        <div className="p-24">
+      //   <div className="p-24">
-          <h4>{t('TITLE')}</h4>
+      //     <h4>{t('TITLE')}</h4>
-        </div>
+      //   </div>
-      }
+      // }
       content={
         <div className="p-24">
           <h4>Content</h4>

src/app/main/navigationPages/favorites/Favorites.js

@@ -21,11 +21,11 @@ function FavoritesPage(props) {
 
   return (
     <Root
-      header={
+      // header={
-        <div className="p-24">
+      //   <div className="p-24">
-          <h4>{t('TITLE')}</h4>
+      //     <h4>{t('TITLE')}</h4>
-        </div>
+      //   </div>
-      }
+      // }
       content={
         <div className="p-24">
           <h4>Content</h4>

src/app/main/navigationPages/history/History.js

@@ -21,11 +21,11 @@ function HistoryPage(props) {
 
   return (
     <Root
-      header={
+      // header={
-        <div className="p-24">
+      //   <div className="p-24">
-          <h4>{t('TITLE')}</h4>
+      //     <h4>{t('TITLE')}</h4>
-        </div>
+      //   </div>
-      }
+      // }
       content={
         <div className="p-24">
           <h4>Content</h4>

src/app/main/navigationPages/profile/Profile.js

@@ -21,11 +21,11 @@ function ProfilePage(props) {
 
   return (
     <Root
-      header={
+      // header={
-        <div className="p-24">
+      //   <div className="p-24">
-          <h4>{t('TITLE')}</h4>
+      //     <h4>{t('TITLE')}</h4>
-        </div>
+      //   </div>
-      }
+      // }
       content={
         <div className="p-24">
           <h4>Content</h4>

src/app/services/authService.js

@@ -112,7 +112,7 @@ export default class AuthService extends FuseUtils.EventEmitter {
 
   sendPasswordResetEmail = (email) => {
     return new Promise((resolve, reject) => {
-      if (email) {
+      if (!email) {
         reject(Error('Email is empty'));
       }
 

src/app/theme-layouts/layout1/Layout1Config.js

@@ -5,7 +5,6 @@ const config = {
     containerWidth: 1570,
     navbar: {
       display: true,
-      style: 'style-1',
       folded: true,
       position: 'left',
     },
@@ -55,32 +54,6 @@ const config = {
             },
           ],
         },
-        style: {
-          title: 'Style',
-          type: 'radio',
-          options: [
-            {
-              name: 'Slide (style-1)',
-              value: 'style-1',
-            },
-            {
-              name: 'Folded (style-2)',
-              value: 'style-2',
-            },
-            {
-              name: 'Tabbed (style-3)',
-              value: 'style-3',
-            },
-            {
-              name: 'Tabbed Dense (style-3-dense)',
-              value: 'style-3-dense',
-            },
-          ],
-        },
-        folded: {
-          title: 'Folded (style-2, style-3)',
-          type: 'switch',
-        },
       },
     },
   },

src/app/theme-layouts/layout1/components/NavbarWrapperLayout1.js

@@ -3,9 +3,7 @@ import { memo } from 'react';
 import { useSelector } from 'react-redux';
 import { selectFuseCurrentLayoutConfig, selectNavbarTheme } from 'app/store/fuse/settingsSlice';
 import { selectFuseNavbar } from 'app/store/fuse/navbarSlice';
-import NavbarStyle1 from './navbar/style-1/NavbarStyle1';
+import NavbarLayout1 from './navbar/NavbarLayout1';
-import NavbarStyle2 from './navbar/style-2/NavbarStyle2';
-import NavbarStyle3 from './navbar/style-3/NavbarStyle3';
 import NavbarToggleFab from '../../shared-components/NavbarToggleFab';
 
 function NavbarWrapperLayout1(props) {
@@ -17,12 +15,7 @@ function NavbarWrapperLayout1(props) {
   return (
     <>
       <ThemeProvider theme={navbarTheme}>
-        <>
+        <NavbarLayout1 />
-          {config.navbar.style === 'style-1' && <NavbarStyle1 />}
-          {config.navbar.style === 'style-2' && <NavbarStyle2 />}
-          {config.navbar.style === 'style-3' && <NavbarStyle3 />}
-          {config.navbar.style === 'style-3-dense' && <NavbarStyle3 dense />}
-        </>
       </ThemeProvider>
 
       {config.navbar.display && !navbar.open && <NavbarToggleFab />}

src/app/theme-layouts/layout1/components/navbar/NavbarLayout1.js

@@ -4,7 +4,7 @@ import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import { useDispatch, useSelector } from 'react-redux';
 import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
 import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
-import NavbarStyle1Content from './NavbarStyle1Content';
+import NavbarLayout1Content from './NavbarLayout1Content';
 
 const navbarWidth = 280;
 
@@ -40,7 +40,7 @@ const StyledNavBarMobile = styled(SwipeableDrawer)(({ theme }) => ({
   },
 }));
 
-function NavbarStyle1(props) {
+function NavbarLayout1(props) {
   const dispatch = useDispatch();
   const config = useSelector(selectFuseCurrentLayoutConfig);
   const navbar = useSelector(selectFuseNavbar);
@@ -53,7 +53,7 @@ function NavbarStyle1(props) {
           open={navbar.open}
           position={config.navbar.position}
         >
-          <NavbarStyle1Content />
+          <NavbarLayout1Content />
         </StyledNavBar>
       </Hidden>
 
@@ -72,11 +72,11 @@ function NavbarStyle1(props) {
             keepMounted: true, // Better open performance on mobile.
           }}
         >
-          <NavbarStyle1Content />
+          <NavbarLayout1Content />
         </StyledNavBarMobile>
       </Hidden>
     </>
   );
 }
 
-export default NavbarStyle1;
+export default NavbarLayout1;

src/app/theme-layouts/layout1/components/navbar/NavbarLayout1Content.js

@@ -2,10 +2,10 @@ import FuseScrollbars from '@fuse/core/FuseScrollbars';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { memo } from 'react';
-import Logo from '../../../../shared-components/Logo';
+import Logo from '../../../shared-components/Logo';
-import NavbarToggleButton from '../../../../shared-components/NavbarToggleButton';
+import NavbarToggleButton from '../../../shared-components/NavbarToggleButton';
-import UserNavbarHeader from '../../../../shared-components/UserNavbarHeader';
+import UserNavbarHeader from '../../../shared-components/UserNavbarHeader';
-import Navigation from '../../../../shared-components/Navigation';
+import Navigation from '../../../shared-components/Navigation';
 
 const Root = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
@@ -32,7 +32,7 @@ const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
   backgroundAttachment: 'local, scroll',
 }));
 
-function NavbarStyle1Content(props) {
+function NavbarLayout1Content(props) {
   return (
     <Root className={clsx('flex flex-auto flex-col overflow-hidden h-full', props.className)}>
       <div className="flex flex-row items-center shrink-0 h-48 md:h-72 px-20">
@@ -50,13 +50,9 @@ function NavbarStyle1Content(props) {
         <UserNavbarHeader />
 
         <Navigation layout="vertical" />
-
-        <div className="flex flex-0 items-center justify-center py-48 opacity-10">
-          <img className="w-full max-w-64" src="assets/images/logo/logo.svg" alt="footer logo" />
-        </div>
       </StyledContent>
     </Root>
   );
 }
 
-export default memo(NavbarStyle1Content);
+export default memo(NavbarLayout1Content);

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

@@ -7,7 +7,7 @@ function FooterLayout2() {
   const { t } = useTranslation('layout2');
 
   return (
-    <footer className="flex items-center justify-center w-full bg-gray-900">
+    <footer className="flex items-center justify-center w-full bg-common-layout">
       <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>

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

@@ -8,7 +8,7 @@ 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">
+    <header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-primary-light">
       <div className="flex justify-between max-w-screen-xl w-full">
         <Link to="/">
           <img
@@ -17,10 +17,11 @@ function HeaderLayout2(props) {
             alt={t('logo_alt')}
           />
         </Link>
+
         <nav className="flex grow justify-center gap-72 items-center">
           {linksConfigLayout2.map((path) => (
             <Link
-              className="text-lg leading-5 text-slate-800 no-underline"
+              className="text-lg leading-5 text-common-layout no-underline"
               to={`/${path}`}
               key={path}
             >
@@ -28,13 +29,14 @@ function HeaderLayout2(props) {
             </Link>
           ))}
         </nav>
+
         {props.isAuthenticated || (
           <div className="flex gap-32 items-center">
-            <Link className="text-indigo-400" to="/sign-in">
+            <Link className="text-secondary-main" 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"
+              className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-primary-light bg-secondary-main rounded-2xl shadow hover:shadow-hover hover:shadow-secondary-main ease-in-out duration-300"
               to="/sign-up"
             >
               <span>{t('sign_up')}</span>