update joy ui components styling

subvisual · Jan 23, 2025 · ffe39c1 · ffe39c1
1 parent 7869703
commit ffe39c1
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 207 deletions.
diff --git a/src/components/layout/avatar-loading.tsx b/src/components/layout/avatar-loading.tsx
@@ -1,27 +1,28 @@
 import { CircularProgress, Stack, Typography } from "@mui/joy";
 import { MockAvatar } from "../../api/mock-avatar";
+import { colors } from "../../utils/colors";
 
 export const AvatarLoading = () => {
   return (
-    <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: "neutral.white" }}>Hang on, superhero.</Typography>
+    <Stack alignItems="center" py={10}>
+      <Stack bgcolor={colors.background.avatarLoading} alignItems="center" px={28} py={12} borderRadius={32} gap={4}>
+        <Stack>
+          <Typography level="h1" textColor="neutral.white">
+            Hang on, superhero.
+          </Typography>
         </Stack>
-        <Stack component="section">
+
+        <Stack>
           <CircularProgress variant="soft" />
         </Stack>
-        <Stack component="section">
-          <Typography sx={{ color: "neutral.white" }}>
+
+        <Stack>
+          <Typography level="body-md" textColor="neutral.white">
             We’re putting the final touches on your Avatar’s powers.
           </Typography>
         </Stack>
-        <Stack component="section">
+
+        <Stack>
           <MockAvatar sx={{ fontSize: 160 }} />
         </Stack>
       </Stack>

diff --git a/src/components/layout/card-top-strengths.tsx b/src/components/layout/card-top-strengths.tsx
@@ -11,6 +11,8 @@ import {
 import { useState } from "react";
 import { mockTopStrengths } from "../../api/mock-data";
 import { PlusSignOutlined } from "../../assets/icons/plus-sign";
+import { addHexTransparency } from "../../utils/add-hex-transparency";
+import { colors } from "../../utils/colors";
 
 const AccordionItem = ({
   number,
@@ -40,89 +42,86 @@ const AccordionItem = ({
           button: {
             sx: {
               width: "100%",
-              bgcolor: "#F1F1F1",
-              py: 0.75,
-              pl: 0.75,
+              bgcolor: "neutral.lightest",
+              py: 0.5,
+              pl: 1,
               pr: 2.5,
               borderRadius: 20
             }
           }
         }}
       >
-        <Stack
-          sx={{
-            flexDirection: "row",
-            alignItems: "center",
-            gap: 2
-          }}
-        >
+        <Stack direction="row" alignItems="center" gap={2}>
           <Box
-            sx={{
-              bgcolor: bgColor,
-              textAlign: "center",
-              width: 40,
-              py: 0.25,
-              borderRadius: 20,
-              boxShadow: "0px 4px 4px 0px #0000001A"
-            }}
+            bgcolor={bgColor}
+            width={36}
+            textAlign="center"
+            py={0.5}
+            borderRadius={20}
+            boxShadow={`0px 4px 4px 0px ${addHexTransparency(colors.neutral.black, "10%")}`}
           >
-            <Typography sx={{ fontSize: 18, color: "neutral.white" }}>{number}</Typography>
+            <Typography level="body-md" textColor="neutral.white">
+              {number}
+            </Typography>
           </Box>
-          <Typography sx={{ fontSize: 18 }}>{label}</Typography>
+          <Typography level="body-md">{label}</Typography>
         </Stack>
       </AccordionSummary>
+
       <AccordionDetails
         slotProps={{
           content: {
             sx: {
+              bgcolor: "neutral.lightest",
               width: "100%",
-              bgcolor: "#F1F1F1",
               py: 2,
               px: 3,
               borderRadius: 20
             }
           }
         }}
       >
-        <Typography sx={{ fontSize: 12 }}>{details}</Typography>
+        <Typography level="body-sm">{details}</Typography>
       </AccordionDetails>
     </Accordion>
   );
 };
 
 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 }}>
+  <Stack direction="row" alignItems="center" gap={1}>
+    <Box bgcolor={color} height={16} width={16} borderRadius="50%" />
+    <Typography level="body-sm">
       {label} <strong>{percentage}%</strong>
     </Typography>
   </Stack>
 );
 
 export const CardTopStrengths = () => {
   return (
-    <Stack sx={{ maxWidth: 440, bgcolor: "neutral.white", mb: 2, p: 4, gap: 4, borderRadius: 20 }}>
-      <Typography sx={{ fontSize: 24 }}>Your Top 10 Strengths</Typography>
+    <Stack bgcolor="neutral.white" maxWidth={440} mb={2} p={4} gap={4} borderRadius={20}>
+      <Typography level="h4">Your Top 10 Strengths</Typography>
 
-      <AccordionGroup disableDivider sx={{ gap: 0.75 }}>
-        {mockTopStrengths.map((item, index) => (
-          <AccordionItem
-            key={index}
-            number={item.number}
-            label={item.label}
-            bgColor={item.bgColor}
-            details={item.details}
-          />
-        ))}
+      <AccordionGroup disableDivider>
+        <Stack gap={0.75}>
+          {mockTopStrengths.map((item, index) => (
+            <AccordionItem
+              key={index}
+              number={item.number}
+              label={item.label}
+              bgColor={item.bgColor}
+              details={item.details}
+            />
+          ))}
+        </Stack>
       </AccordionGroup>
 
-      <Stack sx={{ width: "100%", flexDirection: "row", gap: 2.5 }}>
-        <Stack sx={{ width: "50%", gap: 1.5 }}>
+      <Stack width="100%" direction="row" gap={2.5}>
+        <Stack width="50%" gap={1.5}>
           <StrengthItem color="strengths.blue" label="Relationship Building" percentage={39} />
           <StrengthItem color="strengths.purple" label="Executing" percentage={23} />
         </Stack>
 
-        <Stack sx={{ width: "50%", gap: 1.5 }}>
+        <Stack width="50%" gap={1.5}>
           <StrengthItem color="strengths.orange" label="Influencing" percentage={27} />
           <StrengthItem color="strengths.green" label="Strategic Thinking" percentage={11} />
         </Stack>

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

diff --git a/src/components/shared/containers.tsx b/src/components/shared/containers.tsx
@@ -11,16 +11,16 @@ type LayoutProps = {
 
 export const Layout = ({ children, hasSideBar = false, alignCenter = false }: LayoutProps) => {
   const LayoutChildren = () => (
-    <Stack sx={{ flex: 1 }}>
+    <Stack flex={1}>
       <Navbar hasSubvisualIcon={hasSideBar ? false : true} />
-      <Stack sx={{ ...(alignCenter && { alignItems: "center" }) }}>{children}</Stack>
+      <Stack alignItems={alignCenter ? "center" : "baseline"}>{children}</Stack>
     </Stack>
   );
 
   return (
     <>
       {hasSideBar ? (
-        <Stack sx={{ flexDirection: "row" }}>
+        <Stack direction="row">
           <Sidebar />
           <LayoutChildren />
         </Stack>

diff --git a/src/pages/avatar-create.page.tsx b/src/pages/avatar-create.page.tsx
@@ -5,42 +5,32 @@ import { ArrowRightOutlined } from "../assets/icons/arrow-right";
 
 export const AvatarCreatePage = () => {
   return (
-    <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" }}>
+    <Stack alignItems="center">
+      <Stack minHeight="100vh" width={1120} justifyContent="space-between" py={10} gap={4}>
+        <Stack maxWidth={720} alignItems="center" alignSelf="center" gap={4}>
+          <Typography level="h1" textAlign="center" textColor="neutral.dark">
             Your Strength-Based Avatar is Almost Ready!
           </Typography>
 
-          <Typography>Now, let's customize the core features to bring your Avatar to life.</Typography>
+          <Typography level="body-md" textColor="neutral.dark">
+            Now, let's customize the core features to bring your Avatar to life.
+          </Typography>
         </Stack>
 
-        <Stack component="section" sx={{ alignItems: "center" }}>
+        <Stack alignItems="center">
           <MockAvatar sx={{ fontSize: 280 }} />
         </Stack>
 
-        <Stack
-          component="section"
-          sx={{ alignItems: "center", height: 128, bgcolor: "neutral.white", borderRadius: 8 }}
-        ></Stack>
+        <Stack bgcolor="neutral.white" height={128} alignItems="center" borderRadius={8}></Stack>
 
-        <Stack component="section" sx={{ alignItems: "end" }}>
+        <Stack alignItems="end">
           <JoyLink
             component={ReactLink}
             to="/avatar-results"
             underline="none"
             endDecorator={<ArrowRightOutlined sx={{ fontSize: 10 }} />}
-            sx={{
-              color: "neutral.black",
-              gap: 0.5
-            }}
+            textColor="neutral.black"
+            gap={0.5}
           >
             Next
           </JoyLink>

diff --git a/src/pages/avatar-results.page.tsx b/src/pages/avatar-results.page.tsx
@@ -15,28 +15,25 @@ export const AvatarResultsPage = () => {
       {loading ? (
         <AvatarLoading />
       ) : (
-        <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.
+        <Layout alignCenter>
+          <Stack direction="row" justifyContent="center" gap={14}>
+            <Stack maxWidth={480}>
+              <Stack alignItems="center" gap={7}>
+                <Stack alignItems="center" gap={3}>
+                  <Typography level="h1" fontFamily="Acta-Book">
+                    Your <Typography textColor="subvisual.primary">Strengths</Typography>, brought to life.
                   </Typography>
 
-                  <Typography sx={{ fontSize: 20 }}>
+                  <Typography level="body-lg">
                     Meet your personalized avatar—a reflection of your unique talents and abilities.
                   </Typography>
                 </Stack>
 
-                <Stack sx={{ alignItems: " center", gap: 4 }}>
+                <Stack alignItems="center" gap={4}>
                   <MockAvatar sx={{ fontSize: 280 }} />
-
                   <IconButton>
                     <ArrowRotateOutlined sx={{ fontSize: 16 }} />
                   </IconButton>
-
                   <Button component={Link} to="/personal">
                     Go to dashboard
                   </Button>

diff --git a/src/pages/home.page.tsx b/src/pages/home.page.tsx