RC-11: update components according to ui kit

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>