Merge pull request #26 from rkheftan/feat/project-review-bugs

Feat/project review bugs

src/components/Layout/Layout.tsx

@@ -44,7 +44,15 @@ export const Layout = () => {
             setSideNavOpen={setSideNavOpen}
             user={userInfo}
           />
-          <Box sx={{ flex: 1, overflowY: 'auto' }}>
+          <Box
+            sx={{
+              flex: 1,
+              overflowY: 'auto',
+              p: 2,
+              maxHeight: 'calc(100% - 85px)',
+              overflowInline: 'auto',
+            }}
+          >
             <Outlet />
           </Box>
         </Box>

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -213,20 +213,28 @@ export function OtpVerifyForm({
         sx={{
           justifyContent: 'center',
           alignItems: 'center',
-          mt: 1.5,
+          mt: 2.5,
         }}
       >
         <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
 
-        <Button
+        <Typography
-          variant="text"
+          variant="body1"
-          loading={smsResendLoading || emailResendLoading}
+          sx={{ color: 'primary.main', marginInlineStart: 1 }}
-          sx={{ width: 'auto' }}
-          onClick={canResend ? handleResendOTPCode : undefined}
         >
-          {canResend && t('verify.resendCode')}
           {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
-        </Button>
+        </Typography>
+
+        {canResend && (
+          <Button
+            variant="text"
+            loading={smsResendLoading || emailResendLoading}
+            sx={{ width: 'auto', p: 0 }}
+            onClick={canResend ? handleResendOTPCode : undefined}
+          >
+            {t('verify.resendCode')}
+          </Button>
+        )}
       </Stack>
     </Stack>
   );

src/features/authentication/components/AuthenticationSteps/VerifyPhoneNumber.tsx

@@ -140,20 +140,28 @@ export function VerifyPhoneNumber({
         sx={{
           justifyContent: 'center',
           alignItems: 'center',
-          mt: 1.5,
+          mt: 2.5,
         }}
       >
         <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
 
-        <Button
+        <Typography
-          variant="text"
+          variant="body1"
-          loading={smsResendLoading}
+          sx={{ color: 'primary.main', marginInlineStart: 1 }}
-          sx={{ width: 'auto' }}
-          onClick={canResend ? handleResendOTPCode : undefined}
         >
-          {canResend && t('verify.resendCode')}
           {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
-        </Button>
+        </Typography>
+
+        {canResend && (
+          <Button
+            variant="text"
+            loading={smsResendLoading}
+            sx={{ width: 'auto', p: 0 }}
+            onClick={canResend ? handleResendOTPCode : undefined}
+          >
+            {t('verify.resendCode')}
+          </Button>
+        )}
       </Stack>
     </Stack>
   );

src/features/authentication/components/ForgetPassword/ForgetPasswordOtp.tsx

@@ -171,20 +171,28 @@ export function ForgetPasswordOtp({
         sx={{
           justifyContent: 'center',
           alignItems: 'center',
-          mt: 1.5,
+          mt: 2.5,
         }}
       >
         <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
 
-        <Button
+        <Typography
-          variant="text"
+          variant="body1"
-          loading={sendForgetPassCodeLoading}
+          sx={{ color: 'primary.main', marginInlineStart: 1 }}
-          sx={{ width: 'auto' }}
-          onClick={canResend ? handleResendOTPCode : undefined}
         >
-          {canResend && t('verify.resendCode')}
           {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
-        </Button>
+        </Typography>
+
+        {canResend && (
+          <Button
+            variant="text"
+            loading={sendForgetPassCodeLoading}
+            sx={{ width: 'auto', p: 0 }}
+            onClick={canResend ? handleResendOTPCode : undefined}
+          >
+            {t('verify.resendCode')}
+          </Button>
+        )}
       </Stack>
     </Stack>
   );

src/features/authentication/index.ts

@@ -1,3 +1,4 @@
 export * from './routes/AuthenticationPage';
 export * from './routes/ForgetPasswordPage';
 export * from './routes/UserCompletionPage';
+export * from './routes/AccountCreatedPage';

src/providers/AuthProvider.tsx

@@ -1,6 +1,6 @@
 // useAuth.tsx
 import { AuthContext, type UserInfo } from '@/contexts/AuthContext';
-import type { GenerateTokenResponse } from '@/features/authorization/api/identityAPI';
+import type { GenerateTokenResponse } from '@/features/authentication/api/identityAPI';
 import axios from 'axios';
 import { useEffect, useState, type ReactNode } from 'react';
 import { jwtDecode } from 'jwt-decode';

src/routes/config.tsx

@@ -1,6 +1,5 @@
 import { Layout } from '@/components';
 import { NavigateWithToast } from '@/components/NavigateWithToast';
-import { AccountCreatedPage } from '@/features/authorization/routes/AccountCreatedPage';
 import {
   Calendar,
   Devices,
@@ -18,17 +17,22 @@ import { lazy, type ReactNode } from 'react';
 import { Navigate } from 'react-router-dom';
 
 const AuthenticationPage = lazy(() =>
-  import('@/features/authorization').then((module) => ({
+  import('@/features/authentication').then((module) => ({
     default: module.AuthenticationPage,
   })),
 );
+const AccountCreatedPage = lazy(() =>
+  import('@/features/authentication').then((module) => ({
+    default: module.AccountCreatedPage,
+  })),
+);
 const UserCompletionPage = lazy(() =>
-  import('@/features/authorization').then((module) => ({
+  import('@/features/authentication').then((module) => ({
     default: module.UserCompletionPage,
   })),
 );
 const ForgetPasswordPage = lazy(() =>
-  import('@/features/authorization').then((module) => ({
+  import('@/features/authentication').then((module) => ({
     default: module.ForgetPasswordPage,
   })),
 );