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>