Updated profile elements

Melissa-Gibney · Melissa-Gibney · commit baadf844d12c · 2026-01-13T16:14:47.000-05:00
Changed the colors and spacing of a few elements on the profile to assist with readability.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Please note that this repository contains future designs and ideas, so they will
     - Add in the next and prev buttons on the bottom left of the learning path detail page for navigating between modules. (In Progress)
     - ~~Add in a placeholder flag that allows us to test the challenge and learning path completion.~~
     - ~~Add in the challenge completion and learning path completion pages/modals.~~
-- Fix the BadgeSVG component—it does not show the symbols that should appear inside of the badge at the moment.
+- Fix the BadgeSVG component—it does not show the symbols that should appear inside of the badge at the moment. (In Progress - need feedback on inner text convention)
 - Fix the sorting in the EventCard modal—it does not show and hide events in the modal according to the selected tags.
 - Add the D3 library for graphs and update the Activity, Challenge Completion, and Skill Distribution widgets on the profile page.
 - Add Skeletons across the website for each page and subcomponent. Refer to the BadgesProfileDiv on the profile page and the assignment and classroom areas in the homepage.
diff --git a/frontend/react_app/src/api_interfaces/middleware/EventInfo.tsx b/frontend/react_app/src/api_interfaces/middleware/EventInfo.tsx
@@ -3,7 +3,9 @@ import type { PublicTeam } from "../2023_generated_interfaces/team/publicTeam";
 import type { EventRegistrationResponse } from "../event/eventRegistrationResponse";
 
 export interface EventInfoMiddleware {
+    completedChallenges: number;
     scoreData: Score["score"]; //The participant's score during the event, get this from the ScoreProgression request
     registrationData: EventRegistrationResponse; //Info about participant registration
     teamData: PublicTeam; //Data for the team given the participant and event
+    totalChallenges: number;
 }
diff --git a/frontend/react_app/src/components/general/EventCard.tsx b/frontend/react_app/src/components/general/EventCard.tsx
@@ -28,9 +28,13 @@ const EventCard: React.FC<EventCard> = ({ event }) => {
                             </div>
                             <div className="flex flex-row gap-8">
                                 {event.has_opened && !event.has_ended ? 
-                                    <Chip color="success">Registration Open</Chip> : (null)
+                                    <Chip className="flex w-fit h-fit h-fit bg-success-50 text-success-700 p-1">Registration Open</Chip> : (null)
+                                }
+                                {event.has_opened && !event.has_ended && event.registered ?
+                                    <Button size="md" radius="sm" className="bg-primary-500 text-default-50">Resume</Button> :
+                                    event.has_opened && !event.has_ended ?
+                                    <Button size="md" radius="sm" className="bg-primary-500 text-default-50">Register</Button> : (null)
                                 }
-                                <Button size="md" radius="sm" color="primary">Resume</Button>
                             </div>
                         </div>
                     </CardHeader>
@@ -64,9 +68,9 @@ const EventCard: React.FC<EventCard> = ({ event }) => {
                             </div>
                             <div className="flex flex-row gap-8">
                                 {event.has_opened && !event.has_ended ? 
-                                    <Chip color="success" className="">Registration Open</Chip> : (null)
+                                    <Chip className="flex w-fit h-fit bg-success-50 text-success-700 p-1">Registration Open</Chip> : (null)
                                 }
-                                <Button size="md" radius="sm" color="primary">Resume</Button>
+                                <Button size="md" radius="sm" className="bg-primary-500 text-default-50">Resume</Button>
                             </div>
                         </div>
                     </CardHeader>
@@ -108,11 +112,11 @@ const EventCard: React.FC<EventCard> = ({ event }) => {
                                 <p className="text-default-500">Individual Score</p>
                             </div>
                             <div className="flex flex-col">
-                                <h3 className="font-semibold font-sans">NumChallenges/totalChallenges</h3>
+                                <h3 className="font-semibold font-sans">{info.completedChallenges + "/" + info.totalChallenges}</h3>
                                 <p className="text-default-500">Challenges</p>
                             </div>
                         </div>
-                        <Button size="md" radius="sm" color="primary">Resume</Button>
+                        <Button size="md" radius="sm" className="bg-primary-500 text-default-50">Resume</Button>
                     </CardHeader>
                     <CardBody className="flex flex-row flex-wrap w-full max-w-full h-fit p-0 m-0 gap-6">
                         {info.teamData.members.map( 
diff --git a/frontend/react_app/src/components/general/LearningPathCard.tsx b/frontend/react_app/src/components/general/LearningPathCard.tsx
@@ -44,11 +44,7 @@ function getBottomContent(hasProgress: boolean, numCompletedChallenges: number,
 }
 
 const LearningPathCard: React.FC<LearningPathCardProps> = ({ completed, description, difficulty, hasProgress, id, name, numCompletedChallenges, numSolves, numTotalChallenges, variant }) => {
-
-    if(id !== null) {
-        
-    }
-
+    
     const navigate = useNavigate();
     
     //Return a variant if that was specified
diff --git a/frontend/react_app/src/components/profile/BadgesProfileCard.tsx b/frontend/react_app/src/components/profile/BadgesProfileCard.tsx
@@ -52,7 +52,7 @@ const BadgeModal: React.FC<BadgeModalProps> = ({badges, selectedBadges, numUnloc
 
     return (
         <>
-            <Button variant="bordered" color="primary" onPress={onOpen}>See more...</Button>
+            <Button variant="bordered" className="border-primary-500 text-primary-500" onPress={onOpen}>See more...</Button>
             <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="5xl">
                 <ModalContent>
                     {() => (
diff --git a/frontend/react_app/src/components/profile/EventProfileCard.tsx b/frontend/react_app/src/components/profile/EventProfileCard.tsx
@@ -94,7 +94,7 @@ const EventModal: React.FC<EventModalProps> = ({ list }) => {
 
     return (
         <>
-            <Button variant="bordered" color="primary" onPress={onOpen}>See more...</Button>
+            <Button variant="bordered" className="border-primary-500 text-primary-500" onPress={onOpen}>See more...</Button>
             <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="5xl" className="flex flex-col h-fit">
                 <ModalContent>
                     {() => (
diff --git a/frontend/react_app/src/components/profile/LearningPathsProfileCard.tsx b/frontend/react_app/src/components/profile/LearningPathsProfileCard.tsx
@@ -10,8 +10,8 @@ const LearningPathsProfileCard: React.FC<{}> = () => {
         <Card className="flex w-full min-w-fit h-fit min-h-fit max-h-fit bg-content1-base border-small border-default-300" radius="md" shadow="none">
             <CardBody className="flex flex-col w-full h-fit gap-6 p-6">
                 <h2>Learning Paths</h2>
-                <LearningPathCard description={"Test"} difficulty={{difficultyLvl: "Easy"}} hasProgress={true} id={0} link={""} name={"Learning Path 1"} numCompletedChallenges={2} numSolves={143} numTotalChallenges={8} variant={"compact"}/>
-                <LearningPathCard description={"Test"} difficulty={{difficultyLvl: "Easy"}} hasProgress={true} id={1} link={""} name={"Learning Path 2"} numCompletedChallenges={4} numSolves={143} numTotalChallenges={8} variant={"compact"}/>
+                <LearningPathCard description={"Test"} difficulty={{ difficultyLvl: "Easy" }} hasProgress={true} id={0} link={""} name={"Learning Path 1"} numCompletedChallenges={2} numSolves={143} numTotalChallenges={8} variant={"compact"} completed={false}/>
+                <LearningPathCard description={"Test"} difficulty={{ difficultyLvl: "Easy" }} hasProgress={true} id={1} link={""} name={"Learning Path 2"} numCompletedChallenges={4} numSolves={143} numTotalChallenges={8} variant={"compact"} completed={false}/>
                 <Link href="/practice/learning-paths" style={{textAlign: "right"}}>See more</Link>
             </CardBody>
         </Card>
diff --git a/frontend/react_app/src/components/profile/SkillDistributionProfileCard.tsx b/frontend/react_app/src/components/profile/SkillDistributionProfileCard.tsx
@@ -78,20 +78,20 @@ const SkillDistributionProfileCard: React.FC<SkillDistributionProfileCardProps>
             <CardBody className="flex flex-col w-full min-w-fit h-full min-h-fit p-0 m-0 gap-8">
                 <h2>Skill Distribution</h2>
                 <div className="flex flex-col w-full h-full min-w-fit min-h-fit justify-center items-center overflow-auto">
-                    <div className="flex flex-col w-full h-fit">
+                    <div className="flex flex-col w-full h-fit justify-center">
                         <div className="flex flex-row w-full min-w-fit h-fit gap-1 justify-center items-center">
                             <p>Web Exploitation</p>
-                            <Icon icon={"material-symbols:language"} width={16} height={16} className={"text-primary"}/>
+                            <Icon icon={"material-symbols:language"} width={16} height={16} className={"text-primary-500"}/>
                         </div>
-                        <div className="flex flex-row w-fit h-fit min-h-fit max-w-full">
+                        <div className="flex flex-row w-full h-fit min-h-fit max-w-full justify-center">
                             <div style={{paddingTop: columnPadding, paddingBottom: columnPadding}} className={"flex flex-col w-fit min-w-fit justify-between items-end"}>
                                 <div className="flex flex-row w-fit h-fit gap-1 items-center">
                                     <p>General Skills</p>
-                                    <Icon icon={"material-symbols:code"} width={16} height={16} className={"text-primary"}/>
+                                    <Icon icon={"material-symbols:code"} width={16} height={16} className={"text-primary-500"}/>
                                 </div>
                                 <div className="flex flex-row w-fit h-fit gap-1 items-center">
                                     <p>Reverse Engineering</p>
-                                    <Icon icon={"material-symbols:build-outline"} width={16} height={16} className={"text-primary"}/>
+                                    <Icon icon={"material-symbols:build-outline"} width={16} height={16} className={"text-primary-500"}/>
                                 </div>
                             </div>
                             <svg className="flex inset-0" xmlns="http://www.w3.org/2000/svg" width={svgSize} height={svgSize} viewBox={"0 0 " + (svgSize+2) + " " + (svgSize+2)} fill="none">
@@ -110,17 +110,17 @@ const SkillDistributionProfileCard: React.FC<SkillDistributionProfileCardProps>
                             <div style={{paddingTop: columnPadding, paddingBottom: columnPadding}} className={"flex flex-col w-fit min-w-fit h-fill justify-between items-start"}>
                                 <div className="flex flex-row w-fit h-fit gap-1 items-center">
                                     <p>Cryptography</p>
-                                    <Icon icon={"material-symbols:key-outline"} width={16} height={16} className={"text-primary"}/>
+                                    <Icon icon={"material-symbols:key-outline"} width={16} height={16} className={"text-primary-500"}/>
                                 </div>
                                 <div className="flex flex-row w-fit h-fit gap-1 items-center">
                                     <p>Binary Exploitation</p>
-                                    <Icon icon={"material-symbols:memory-outline"} width={16} height={16} className={"text-primary"}/>
+                                    <Icon icon={"material-symbols:memory-outline"} width={16} height={16} className={"text-primary-500"}/>
                                 </div>
                             </div>
                         </div>
                         <div className="flex flex-row w-full min-w-fit h-fit gap-1 justify-center items-center">
                             <p>Forensics</p>
-                            <Icon icon={"material-symbols:search"} width={16} height={16} className={"text-primary"}/>
+                            <Icon icon={"material-symbols:search"} width={16} height={16} className={"text-primary-500"}/>
                         </div>
                     </div>
                 </div>
diff --git a/frontend/react_app/src/components/profile/UserProfileCard.tsx b/frontend/react_app/src/components/profile/UserProfileCard.tsx
@@ -31,7 +31,7 @@ const UserProfileCard: React.FC<UserProfileCardProps> = ({ avatar, country, mont
                     </div>
                     <p>{"Joined " + monthJoined + ", " + yearJoined}</p>
                 </div>
-                <Button variant="flat" color="primary">
+                <Button variant="flat" className="bg-primary-50">
                     <p>Account settings</p>
                     <Icon icon={"material-symbols:settings-outline"} width={24} height={24} className="text-primary-500"/>
                 </Button>
diff --git a/frontend/react_app/src/components/profile/UserStudiesCard.tsx b/frontend/react_app/src/components/profile/UserStudiesCard.tsx
@@ -39,8 +39,8 @@ const UserStudiesCard: React.FC<{}> = () => {
                 </Accordion>
             </CardBody>
             <CardFooter className="flex gap-8 p-0 m-0">
-                <Button color="primary" size="lg" radius="sm">Provide Consent</Button>
-                <Link className="flex px-6 h-full" href="/practice/learning-paths">Full Terms</Link>
+                <Button className="bg-primary-500 text-default-50" size="lg" radius="sm">Provide Consent</Button>
+                <Link className="flex px-6 h-full text-primary-500" href="/practice/learning-paths">Full Terms</Link>
             </CardFooter>
         </Card>
     );
diff --git a/frontend/react_app/src/pages/profile/Profile.tsx b/frontend/react_app/src/pages/profile/Profile.tsx
@@ -22,15 +22,15 @@ const Profile: React.FC<ProfileProps> = ({ activity, challengeCompletion, skillD
     return (
         <div className="Page">
             <Header/>
-            <div className="flex flex-col w-full gap-10 py-16 px-32">
-                <div className="flex flex-row w-full gap-10">
-                    <div className="flex flex-col w-[50%] gap-10">
+            <div className="flex flex-col w-full gap-10 py-16 px-32 justify-center">
+                <div className="flex flex-row w-full gap-10 justify-center">
+                    <div className="flex flex-col w-[600px] gap-10">
                         {/* API_NEEDED - Get the info for the user's profile card: avatar, country, month joined, username, and year joined */}
                         <UserProfileCard avatar={userInfo.avatar} country={userInfo.country} monthJoined={userInfo.monthJoined} 
                             username={userInfo.username} yearJoined={userInfo.yearJoined}/>
                         <LearningPathsProfileCard/>
                     </div>
-                    <div className="flex flex-col w-fit gap-10">
+                    <div className="flex flex-col w-full gap-10">
                         {/* API_NEEDED - Get the number of challenges the user has solved and the length of their current streak */}
                         <ActivityProfileCard numSolves={activity.numSolves} streakLength={activity.streakLength}/>
                         {/* API_NEEDED - Get the number of easy, medium, and hard challenges the user has completed and 

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,9 @@ import type { PublicTeam } from "../2023_generated_interfaces/team/publicTeam";`
`3`	`3`	`import type { EventRegistrationResponse } from "../event/eventRegistrationResponse";`
`4`	`4`
`5`	`5`	`export interface EventInfoMiddleware {`
	`6`	`+ completedChallenges: number;`
`6`	`7`	`scoreData: Score["score"]; //The participant's score during the event, get this from the ScoreProgression request`
`7`	`8`	`registrationData: EventRegistrationResponse; //Info about participant registration`
`8`	`9`	`teamData: PublicTeam; //Data for the team given the participant and event`
	`10`	`+ totalChallenges: number;`
`9`	`11`	`}`