feat:ui update

gtech-mulearn · Oct 6, 2024 · 2c7b07a · 2c7b07a
1 parent ef742e3
commit 2c7b07a
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 17 deletions.
diff --git a/src/modules/Common/Authentication/assets/interests/creative.webp b/src/modules/Common/Authentication/assets/interests/creative.webp
diff --git a/src/modules/Common/Authentication/assets/interests/makers.webp b/src/modules/Common/Authentication/assets/interests/makers.webp
diff --git a/src/modules/Common/Authentication/assets/interests/management.webp b/src/modules/Common/Authentication/assets/interests/management.webp
diff --git a/src/modules/Common/Authentication/assets/interests/others.webp b/src/modules/Common/Authentication/assets/interests/others.webp
diff --git a/src/modules/Common/Authentication/assets/interests/software.webp b/src/modules/Common/Authentication/assets/interests/software.webp
diff --git a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css
@@ -28,12 +28,13 @@
         }
 
         & h1 {
-            font-size: 1.5rem;
+            font-size: 2rem;
             font-weight: 600;
         }
 
         .subText {
-            font-size: 12px;
+            margin-top: 10px;
+            font-size: 1rem;
             font-weight: 500;
             margin-bottom: 10px;
         }
@@ -49,8 +50,8 @@
             overflow: show;
 
             .itemsCard {
-                width: 215px;
-                height: 130px;
+                min-width: 215px;
+                min-height: 130px;
                 border-radius: 10px;
                 background-color: #fff;
                 box-shadow: 0px 0px 17.65823px 0px rgba(0, 0, 0, 0.07);
@@ -59,7 +60,6 @@
                 flex-direction: column;
                 text-align: center;
                 justify-content: center;
-                gap: 1rem;
                 padding: 10px;
                 position: relative;
                 transition: all 0.3s ease;
@@ -69,7 +69,10 @@
                         display: flex;
                         width: calc(410px + 3rem);
                         justify-content: center;
-                        flex-direction: column;
+                        flex-direction: column; 
+                        overflow: visible;
+                        flex-direction: row;
+                        gap: 1rem;
                     }
                 }
 
@@ -79,7 +82,7 @@
                     left: 0px;
                     transform: translate(-30%, -30%);
                     color: #ffffff;
-                    background-color: #3e15d4;
+                    background-color: #456FF6;
                     border-radius: 50%;
                     padding: 2px;
                 }
@@ -129,17 +132,39 @@
             .active {
                 outline: 2px solid #456ff6;
             }
+            .itemImage{
+                margin-top: 1rem;
+                object-fit: cover;
+                height: 100px;
+                width: 100px;
+                -webkit-user-drag: none;
+
+            }
+            .title{
+                margin-top: 0.5rem;
+                font-weight: bold;
+            }
         }
 
         @media (width<500px) {
             .interestSelectCards .interestSelectCard {
-                width: 300px;
+                max-width: 300px;
+            }
+            .itemsContainer {
+                .itemsCard{
+                max-width: 200px;
+                &.others {
+                    &.checked {
+                        flex-direction: column;
+                    }
+                }
+                }
             }
         }
 
         @media (width<300px) {
             .interestSelectCards .interestSelectCard {
-                width: 200px;
+                max-width: 200px;
                 font-size: 0.65rem;
             }
         }

diff --git a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx
@@ -8,6 +8,11 @@ import { privateGateway } from "@/MuLearnServices/apiGateways";
 import { onboardingRoutes } from "@/MuLearnServices/urls";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
+import creative from "/src/modules/Common/Authentication/assets/interests/creative.webp";
+import maker from "/src/modules/Common/Authentication/assets/interests/makers.webp";
+import management from "/src/modules/Common/Authentication/assets/interests/management.webp";
+import software from "/src/modules/Common/Authentication/assets/interests/software.webp";
+import others from "/src/modules/Common/Authentication/assets/interests/others.webp";
 
 const CheckMark = () => (
     <svg
@@ -25,11 +30,16 @@ const CheckMark = () => (
 
 export default function UserInterest() {
     const [interests, setInterests] = useState([
-        { title: "Software", value: "software", checked: false },
-        { title: "Maker", value: "maker", checked: false },
-        { title: "Management", value: "management", checked: false },
-        { title: "Creative", value: "creative", checked: false },
-        { title: "Others", value: "others", checked: false }
+        { title: "Software", value: "software", img: software, checked: false },
+        { title: "Maker", value: "maker", img: maker, checked: false },
+        {
+            title: "Management",
+            value: "management",
+            img: management,
+            checked: false
+        },
+        { title: "Creative", value: "creative", img: creative, checked: false },
+        { title: "Others", value: "others", img: others, checked: false }
     ]);
     const [endgoals, setEndgoals] = useState([
         { title: "Job", value: "job", checked: false },
@@ -217,9 +227,9 @@ export default function UserInterest() {
             <div className={styles.popUp}>
                 <div className={styles.box}>
                     <img src={muBrand} alt="mulearn" />
-                    <h1>What describes you the most!</h1>
+                    <h1>Your dynamic area of interest! </h1>
                     <p className={styles.subText}>
-                        Choose one or more roles that best fit your profile.
+                        Please select your interested area
                     </p>
                     <div className={styles.itemsContainer}>
                         {interests.map(interest => {
@@ -243,7 +253,14 @@ export default function UserInterest() {
                                     }
                                 >
                                     {interest.checked && <CheckMark />}
-                                    <p>{interest.title}</p>
+                                    <img
+                                        className={styles.itemImage}
+                                        src={interest.img}
+                                        alt=""
+                                    />
+                                    <p className={styles.title}>
+                                        {interest.title}
+                                    </p>
 
                                     {interest.value == "others" ? (
                                         interests.find(