optimize code, update theme and fix bugs

subvisual · Jan 22, 2025 · 7869703 · 7869703
1 parent 410406a
commit 7869703
Show file tree

Hide file tree

Showing 16 changed files with 223 additions and 174 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<!-- <link rel="icon" type="image/svg+xml" href="/" /> -->
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Strenghts</title>
+		<title>Strengths</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/src/assets/icons/learn-icon.tsx b/src/assets/icons/learn-icon.tsx
@@ -17,8 +17,8 @@ export const LearnOutlined = (props: SvgIconProps) => {
           fill="currentColor"
         />
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M11.79 20.59H4.79C2.14294 20.5845 -5.74448e-06 18.4371 0 15.79V4.79C0.00550088 2.14684 2.14684 0.00550088 4.79 0H11.79C14.4371 -5.74448e-06 16.5845 2.14294 16.59 4.79V15.79C16.59 17.063 16.0843 18.2839 15.1841 19.1841C14.2839 20.0843 13.063 20.59 11.79 20.59ZM4.79 1.59C3.02497 1.59549 1.59549 3.02497 1.59 4.79V15.79C1.58999 17.5589 3.02107 18.9945 4.79 19H11.79C13.5628 19 15 17.5628 15 15.79V4.79C14.9945 3.02107 13.5589 1.58999 11.79 1.59H4.79Z"
           fill="currentColor"
         />
@@ -32,8 +32,8 @@ export const LearnFilled = (props: SvgIconProps) => {
     <SvgIcon {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" width="17" height="21" viewBox="0 0 17 21" fill="none">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M4 0H12.28C14.4891 0 16.28 1.79086 16.28 4V16.62C16.28 18.8291 14.4891 20.62 12.28 20.62H4C1.79086 20.62 0 18.8291 0 16.62V4C0 1.79086 1.79086 0 4 0ZM10.53 6.08H3.83C3.42683 6.08 3.1 6.40683 3.1 6.81C3.1 7.21317 3.42683 7.54 3.83 7.54H10.53C10.9332 7.54 11.26 7.21317 11.26 6.81C11.26 6.40683 10.9332 6.08 10.53 6.08ZM8.62 15.54H3.83C3.42683 15.54 3.1 15.2132 3.1 14.81C3.1 14.4068 3.42683 14.08 3.83 14.08H8.62C9.02317 14.08 9.35 14.4068 9.35 14.81C9.35 15.2132 9.02317 15.54 8.62 15.54ZM3.83 11.54H12.45C12.8532 11.54 13.18 11.2132 13.18 10.81C13.18 10.4068 12.8532 10.08 12.45 10.08H3.83C3.42683 10.08 3.1 10.4068 3.1 10.81C3.1 11.2132 3.42683 11.54 3.83 11.54Z"
           fill="currentColor"
         />

diff --git a/src/assets/icons/notifications-icon.tsx b/src/assets/icons/notifications-icon.tsx
@@ -5,8 +5,8 @@ export const NotificationsOutlined = (props: SvgIconProps) => {
     <SvgIcon {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M18.1066 13.48C17.6623 13.1 17.4065 12.5446 17.4066 11.96V7.14C17.4066 3.19 13.8266 0 9.40657 0C4.98657 0 1.40657 3.19 1.40657 7.14V11.96C1.40661 12.5446 1.15084 13.1 0.706568 13.48C-0.803432 14.83 0.266568 17.13 2.40657 17.13H6.20657C6.69141 18.4804 7.97177 19.3811 9.40657 19.3811C10.8414 19.3811 12.1217 18.4804 12.6066 17.13H16.4066C18.5466 17.13 19.6166 14.83 18.1066 13.48ZM9.40657 17.88C8.81136 17.8778 8.25048 17.601 7.88657 17.13H10.8866C10.5342 17.5936 9.98876 17.87 9.40657 17.88ZM16.4166 15.63C16.7801 15.6629 17.1263 15.468 17.2866 15.14C17.3644 14.9424 17.2935 14.7173 17.1166 14.6C16.3631 13.9279 15.9275 12.9696 15.9166 11.96V7.14C15.9166 4.03 12.9966 1.5 9.41657 1.5C5.83657 1.5 2.91657 4.03 2.91657 7.14V11.96C2.9056 12.9696 2.47001 13.9279 1.71657 14.6C1.53589 14.7144 1.46065 14.9401 1.53657 15.14C1.69686 15.468 2.04301 15.6629 2.40657 15.63H16.4166Z"
           fill="currentColor"
         />
@@ -20,8 +20,8 @@ export const NotificationsFilled = (props: SvgIconProps) => {
     <SvgIcon {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M17.4066 11.97C17.4094 12.5511 17.6649 13.1023 18.1066 13.48C19.6166 14.83 18.5466 17.14 16.4066 17.14H12.6066C12.114 18.4844 10.8383 19.3814 9.40657 19.39C7.97017 19.3962 6.68678 18.4938 6.20657 17.14H2.40657C0.266568 17.14 -0.803432 14.83 0.706568 13.48C1.1482 13.1023 1.40369 12.5511 1.40657 11.97V7.14C1.40657 3.2 4.98657 0 9.40657 0C13.8266 0 17.4066 3.2 17.4066 7.14V11.97ZM7.88657 17.14C8.25048 17.611 8.81136 17.8878 9.40657 17.89C9.98767 17.8756 10.5314 17.6001 10.8866 17.14H7.88657Z"
           fill="currentColor"
         />

diff --git a/src/assets/icons/personal-icon.tsx b/src/assets/icons/personal-icon.tsx
@@ -5,14 +5,14 @@ export const PersonalOutlined = (props: SvgIconProps) => {
     <SvgIcon {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M7.88902 10.6188H7.92102C10.849 10.6188 13.23 8.23776 13.23 5.30976C13.23 2.38176 10.849 -0.000244141 7.92102 -0.000244141C4.99202 -0.000244141 2.61002 2.38176 2.61002 5.30676C2.60002 8.22676 4.96702 10.6098 7.88902 10.6188ZM4.03802 5.30976C4.03802 3.16876 5.78002 1.42776 7.92102 1.42776C10.061 1.42776 11.802 3.16876 11.802 5.30976C11.802 7.44976 10.061 9.19176 7.92102 9.19176H7.89202C5.76002 9.18376 4.03102 7.44376 4.03802 5.30976Z"
           fill="currentColor"
         />
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M0 16.1731C0 19.8701 5.962 19.8701 7.921 19.8701C11.32 19.8701 15.84 19.4891 15.84 16.1931C15.84 12.4961 9.88 12.4961 7.921 12.4961C4.521 12.4961 0 12.8771 0 16.1731ZM1.5 16.1731C1.5 14.7281 3.66 13.9961 7.921 13.9961C12.181 13.9961 14.34 14.7351 14.34 16.1931C14.34 17.6381 12.181 18.3701 7.921 18.3701C3.66 18.3701 1.5 17.6311 1.5 16.1731Z"
           fill="currentColor"
         />
@@ -26,8 +26,8 @@ export const PersonalFilled = (props: SvgIconProps) => {
     <SvgIcon {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M13.294 5.29105C13.294 8.22808 10.9391 10.5831 8 10.5831C5.0619 10.5831 2.70601 8.22808 2.70601 5.29105C2.70601 2.35402 5.0619 0 8 0C10.9391 0 13.294 2.35402 13.294 5.29105ZM8 20C3.66237 20 0 19.295 0 16.575C0 13.8539 3.68538 13.1739 8 13.1739C12.3386 13.1739 16 13.8789 16 16.599C16 19.32 12.3146 20 8 20Z"
           fill="currentColor"
         />

diff --git a/src/assets/icons/subvisual-logo.tsx b/src/assets/icons/subvisual-logo.tsx
diff --git a/src/assets/icons/team-icon.tsx b/src/assets/icons/team-icon.tsx
@@ -5,8 +5,8 @@ export const TeamOutlined = (props: SvgIconProps) => {
     <SvgIcon {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" width="22" height="17" viewBox="0 0 22 17" fill="none">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M10.8596 9.138H10.8866C13.4066 9.138 15.4556 7.088 15.4556 4.569C15.4556 2.05 13.4066 0 10.8866 0C8.36764 0 6.31864 2.05 6.31864 4.566C6.31364 5.783 6.78264 6.929 7.64064 7.792C8.49664 8.656 9.63964 9.134 10.8596 9.138ZM7.81864 4.569C7.81864 2.877 9.19464 1.5 10.8866 1.5C12.5786 1.5 13.9556 2.877 13.9556 4.569C13.9556 6.262 12.5786 7.638 10.8866 7.638H10.8616C10.0456 7.635 9.27964 7.314 8.70464 6.735C8.12964 6.156 7.81564 5.389 7.81864 4.569Z"
           fill="currentColor"
         />
@@ -19,8 +19,8 @@ export const TeamOutlined = (props: SvgIconProps) => {
           fill="currentColor"
         />
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M10.8866 16.7909C9.22761 16.7909 4.17761 16.7909 4.17761 13.5959C4.17761 10.4139 9.22761 10.4139 10.8866 10.4139C12.5456 10.4139 17.5946 10.4139 17.5946 13.6129C17.5946 16.7909 12.7216 16.7909 10.8866 16.7909ZM10.8866 11.9139C8.51061 11.9139 5.67761 12.2059 5.67761 13.5959C5.67761 14.9969 8.51061 15.2909 10.8866 15.2909C13.2626 15.2909 16.0946 14.9999 16.0946 13.6129C16.0946 12.2089 13.2626 11.9139 10.8866 11.9139Z"
           fill="currentColor"
         />
@@ -42,8 +42,8 @@ export const TeamFilled = (props: SvgIconProps) => {
     <SvgIcon {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" width="22" height="16" viewBox="0 0 22 16" fill="none">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M15.1583 4.23285C15.1583 6.58254 13.2851 8.4666 10.949 8.4666C8.61292 8.4666 6.73974 6.58254 6.73974 4.23285C6.73974 1.88227 8.61292 0 10.949 0C13.2851 0 15.1583 1.88227 15.1583 4.23285ZM10.949 16C7.51785 16 4.58809 15.456 4.58809 13.2802C4.58809 11.1034 7.49904 10.5396 10.949 10.5396C14.3802 10.5396 17.31 11.0836 17.31 13.2604C17.31 15.4362 14.399 16 10.949 16ZM16.9571 4.30922C16.9571 5.50703 16.5998 6.62288 15.973 7.55051C15.9086 7.64597 15.9659 7.77476 16.0796 7.79457C16.2363 7.82159 16.3984 7.8369 16.5631 7.8414C18.2062 7.88463 19.6809 6.82102 20.0883 5.21974C20.6918 2.84123 18.9198 0.705896 16.6634 0.705896C16.4181 0.705896 16.1835 0.732013 15.9551 0.778845C15.9238 0.78605 15.8907 0.800459 15.8728 0.828378C15.8513 0.862601 15.8674 0.908532 15.8889 0.938252C16.5667 1.8938 16.9571 3.05918 16.9571 4.30922ZM19.6782 9.51257C20.7823 9.72962 21.5084 10.1727 21.8093 10.8166C22.0636 11.3453 22.0636 11.9586 21.8093 12.4864C21.349 13.4851 19.8654 13.8058 19.2887 13.8886C19.1696 13.9066 19.0738 13.8031 19.0864 13.6833C19.3809 10.9157 17.0377 9.60353 16.4315 9.30183C16.4055 9.28832 16.4002 9.2676 16.4028 9.255C16.4046 9.24599 16.4154 9.23158 16.4351 9.22888C17.7468 9.20456 19.1571 9.38468 19.6782 9.51257ZM5.43711 7.84131C5.60186 7.83681 5.76304 7.8224 5.92063 7.79448C6.03434 7.77467 6.09165 7.64588 6.02718 7.55042C5.4004 6.62279 5.04313 5.50694 5.04313 4.30913C5.04313 3.05909 5.43353 1.89371 6.11135 0.938162C6.13284 0.908442 6.14806 0.862511 6.12746 0.828288C6.10956 0.80127 6.07553 0.78596 6.04509 0.778755C5.81586 0.731923 5.58127 0.705806 5.33593 0.705806C3.07951 0.705806 1.30751 2.84114 1.91191 5.21965C2.31932 6.82093 3.79405 7.88454 5.43711 7.84131ZM5.59694 9.25446C5.59962 9.26796 5.59425 9.28778 5.56918 9.30219C4.9621 9.60389 2.61883 10.9161 2.91342 13.6827C2.92595 13.8034 2.83104 13.9061 2.71195 13.889C2.13531 13.8061 0.651629 13.4855 0.191392 12.4867C-0.0637974 11.9581 -0.0637974 11.3457 0.191392 10.817C0.492248 10.1731 1.21752 9.72998 2.32156 9.51203C2.84358 9.38504 4.25294 9.20492 5.5656 9.22924C5.5853 9.23194 5.59515 9.24635 5.59694 9.25446Z"
           fill="currentColor"
         />

diff --git a/src/components/layout/avatar-loading.tsx b/src/components/layout/avatar-loading.tsx
@@ -3,16 +3,23 @@ import { MockAvatar } from "../../api/mock-avatar";
 
 export const AvatarLoading = () => {
   return (
-    <Stack sx={{ alignItems: "center" }}>
+    <Stack
+      sx={{
+        alignItems: "center",
+        py: 10
+      }}
+    >
       <Stack sx={{ bgcolor: "#038DEF", alignItems: "center", gap: 4, py: 12, px: 28, borderRadius: 32 }}>
         <Stack component="section">
-          <Typography sx={{ fontSize: 48, color: "white" }}>Hang on, superhero.</Typography>
+          <Typography sx={{ fontSize: 48, color: "neutral.white" }}>Hang on, superhero.</Typography>
         </Stack>
         <Stack component="section">
           <CircularProgress variant="soft" />
         </Stack>
         <Stack component="section">
-          <Typography sx={{ color: "white" }}>We’re putting the final touches on your Avatar’s powers.</Typography>
+          <Typography sx={{ color: "neutral.white" }}>
+            We’re putting the final touches on your Avatar’s powers.
+          </Typography>
         </Stack>
         <Stack component="section">
           <MockAvatar sx={{ fontSize: 160 }} />

diff --git a/src/components/layout/card-top-strengths.tsx b/src/components/layout/card-top-strengths.tsx
@@ -66,7 +66,7 @@ const AccordionItem = ({
               boxShadow: "0px 4px 4px 0px #0000001A"
             }}
           >
-            <Typography sx={{ fontSize: 18, color: "white" }}>{number}</Typography>
+            <Typography sx={{ fontSize: 18, color: "neutral.white" }}>{number}</Typography>
           </Box>
           <Typography sx={{ fontSize: 18 }}>{label}</Typography>
         </Stack>
@@ -93,15 +93,15 @@ const AccordionItem = ({
 const StrengthItem = ({ color, label, percentage }: { color: string; label: string; percentage: number }) => (
   <Stack sx={{ flexDirection: "row", alignItems: "center", gap: 1 }}>
     <Box sx={{ bgcolor: color, width: 15, height: 15, borderRadius: "50%" }} />
-    <Typography sx={{ fontSize: 12, color: "subvisual.grey" }}>
+    <Typography sx={{ fontSize: 12 }}>
       {label} <strong>{percentage}%</strong>
     </Typography>
   </Stack>
 );
 
 export const CardTopStrengths = () => {
   return (
-    <Stack sx={{ maxWidth: 440, bgcolor: "white", mb: 2, p: 4, gap: 4, borderRadius: 20 }}>
+    <Stack sx={{ maxWidth: 440, bgcolor: "neutral.white", mb: 2, p: 4, gap: 4, borderRadius: 20 }}>
       <Typography sx={{ fontSize: 24 }}>Your Top 10 Strengths</Typography>
 
       <AccordionGroup disableDivider sx={{ gap: 0.75 }}>

diff --git a/src/components/navigation/navbar.tsx b/src/components/navigation/navbar.tsx
@@ -19,7 +19,7 @@ export const Navbar = ({ hasSubvisualIcon }: NavbarProps) => {
         justifyContent: hasSubvisualIcon ? "space-between" : "end",
         alignItems: "center",
         py: 2,
-        px: 4
+        px: 3
       }}
     >
       {hasSubvisualIcon && <SubvisualLogo sx={{ fontSize: 48 }} />}
@@ -28,7 +28,7 @@ export const Navbar = ({ hasSubvisualIcon }: NavbarProps) => {
           <NotificationsOutlined sx={{ fontSize: 18 }} />
         </IconButton>
         <Stack sx={{ flexDirection: "row", alignItems: "center", gap: 1.5 }}>
-          <Avatar sx={{ fontSize: 48 }} />
+          <Avatar sx={{ fontSize: 48, border: "2px solid", borderColor: "subvisual.pink" }} />
           <Stack sx={{ flexDirection: "row", alignItems: "center", gap: 1 }}>
             <Typography>John</Typography>
             <Dropdown open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>

diff --git a/src/components/navigation/sidebar.tsx b/src/components/navigation/sidebar.tsx
@@ -33,11 +33,11 @@ export const Sidebar = () => {
   const { pathname } = useLocation();
 
   return (
-    <Stack sx={{ display: { xs: "none", lg: "flex" }, height: "100vh", flexDirection: "row" }}>
+    <Stack sx={{ display: { xs: "none", lg: "flex" }, minHeight: "100vh", flexDirection: "row" }}>
       <Stack
         sx={{
           justifyContent: "space-between",
-          p: 2
+          p: 3
         }}
       >
         <Stack

diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,11 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+	background: linear-gradient(
+		135deg,
+		var(--joy-palette-neutral-white),
+		var(--joy-palette-neutral-lightest)
+	);
+	min-height: 100vh;
+}
diff --git a/src/pages/avatar-create.page.tsx b/src/pages/avatar-create.page.tsx
@@ -2,46 +2,50 @@ import { Link as JoyLink, Stack, Typography } from "@mui/joy";
 import { Link as ReactLink } from "react-router-dom";
 import { MockAvatar } from "../api/mock-avatar";
 import { ArrowRightOutlined } from "../assets/icons/arrow-right";
-import { Layout } from "../components/shared/containers";
 
 export const AvatarCreatePage = () => {
   return (
-    <Layout>
-      <Stack sx={{ alignItems: "center" }}>
-        <Stack sx={{ maxWidth: 1136, gap: 4 }}>
-          <Stack component="section" sx={{ maxWidth: 784, alignItems: "center", gap: 4 }}>
-            <Typography sx={{ fontSize: 48, textAlign: "center" }}>
-              Your Strength-Based Avatar is Almost Ready!
-            </Typography>
+    <Stack
+      sx={{
+        alignItems: "center"
+      }}
+    >
+      <Stack
+        component="main"
+        sx={{ minHeight: "100vh", maxWidth: 1136, justifyContent: "space-between", py: 10, gap: 4 }}
+      >
+        <Stack component="section" sx={{ maxWidth: 784, alignItems: "center", gap: 4 }}>
+          <Typography sx={{ fontSize: 48, textAlign: "center" }}>
+            Your Strength-Based Avatar is Almost Ready!
+          </Typography>
 
-            <Typography>Now, let's customize the core features to bring your Avatar to life.</Typography>
-          </Stack>
+          <Typography>Now, let's customize the core features to bring your Avatar to life.</Typography>
+        </Stack>
 
-          <Stack component="section" sx={{ alignItems: "center" }}>
-            <MockAvatar sx={{ fontSize: 280 }} />
-          </Stack>
+        <Stack component="section" sx={{ alignItems: "center" }}>
+          <MockAvatar sx={{ fontSize: 280 }} />
+        </Stack>
 
-          <Stack
-            component="section"
-            sx={{ alignItems: "center", height: 128, bgcolor: "white", borderRadius: 8 }}
-          ></Stack>
+        <Stack
+          component="section"
+          sx={{ alignItems: "center", height: 128, bgcolor: "neutral.white", borderRadius: 8 }}
+        ></Stack>
 
-          <Stack component="section" sx={{ alignItems: "end" }}>
-            <JoyLink
-              component={ReactLink}
-              to="/avatar-results"
-              underline="none"
-              endDecorator={<ArrowRightOutlined sx={{ fontSize: 10 }} />}
-              sx={{
-                color: "black",
-                gap: 0.5
-              }}
-            >
-              Next
-            </JoyLink>
-          </Stack>
+        <Stack component="section" sx={{ alignItems: "end" }}>
+          <JoyLink
+            component={ReactLink}
+            to="/avatar-results"
+            underline="none"
+            endDecorator={<ArrowRightOutlined sx={{ fontSize: 10 }} />}
+            sx={{
+              color: "neutral.black",
+              gap: 0.5
+            }}
+          >
+            Next
+          </JoyLink>
         </Stack>
       </Stack>
-    </Layout>
+    </Stack>
   );
 };
diff --git a/src/pages/avatar-results.page.tsx b/src/pages/avatar-results.page.tsx
@@ -11,41 +11,43 @@ export const AvatarResultsPage = () => {
   const loading = mockUser.isAvatarLoading;
 
   return (
-    <Layout>
+    <>
       {loading ? (
         <AvatarLoading />
       ) : (
-        <Stack sx={{ justifyContent: "center", flexDirection: "row", gap: 14 }}>
-          <Stack sx={{ maxWidth: 480 }}>
-            <Stack sx={{ alignItems: " center", gap: 7 }}>
-              <Stack sx={{ alignItems: " center", gap: 3 }}>
-                <Typography sx={{ fontSize: 48, fontFamily: "Acta-Book" }}>
-                  Your <Typography sx={{ color: "subvisual.primary", fontFamily: "inherit" }}>Strengths</Typography>,
-                  brought to life.
-                </Typography>
+        <Layout>
+          <Stack sx={{ justifyContent: "center", flexDirection: "row", gap: 14 }}>
+            <Stack sx={{ maxWidth: 480 }}>
+              <Stack sx={{ alignItems: " center", gap: 7 }}>
+                <Stack sx={{ alignItems: " center", gap: 3 }}>
+                  <Typography sx={{ fontSize: 48, fontFamily: "Acta-Book" }}>
+                    Your <Typography sx={{ color: "subvisual.primary", fontFamily: "inherit" }}>Strengths</Typography>,
+                    brought to life.
+                  </Typography>
 
-                <Typography sx={{ fontSize: 20 }}>
-                  Meet your personalized avatar—a reflection of your unique talents and abilities.
-                </Typography>
-              </Stack>
+                  <Typography sx={{ fontSize: 20 }}>
+                    Meet your personalized avatar—a reflection of your unique talents and abilities.
+                  </Typography>
+                </Stack>
 
-              <Stack sx={{ alignItems: " center", gap: 4 }}>
-                <MockAvatar sx={{ fontSize: 280 }} />
+                <Stack sx={{ alignItems: " center", gap: 4 }}>
+                  <MockAvatar sx={{ fontSize: 280 }} />
 
-                <IconButton>
-                  <ArrowRotateOutlined sx={{ fontSize: 16 }} />
-                </IconButton>
+                  <IconButton>
+                    <ArrowRotateOutlined sx={{ fontSize: 16 }} />
+                  </IconButton>
 
-                <Button component={Link} to="/personal">
-                  Go to dashboard
-                </Button>
+                  <Button component={Link} to="/personal">
+                    Go to dashboard
+                  </Button>
+                </Stack>
               </Stack>
             </Stack>
-          </Stack>
 
-          <CardTopStrengths />
-        </Stack>
+            <CardTopStrengths />
+          </Stack>
+        </Layout>
       )}
-    </Layout>
+    </>
   );
 };