RC-11: update components according to ui kit

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>