fix(onboard) : Improved UI UX

gtech-mulearn · Oct 7, 2024 · b2b6d55 · b2b6d55
1 parent 50bd9bb
commit b2b6d55
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 21 deletions.
diff --git a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css
@@ -76,12 +76,16 @@
                     cursor: pointer;
                     color: #456ff6;
                     z-index: 11;
+
+                    &:hover + .interestInfo {
+                        display: flex;
+                    }
                 }
 
                 .interestInfo {
                     display: none;
                     position: absolute;
-                    width: 200px;
+                    width: 100%;
                     height: 100%;
                     top: 0;
                     left: 0;
@@ -95,18 +99,31 @@
                     flex-direction: column;
                     justify-content: start;
                     gap: 10px;
+                    overflow-x: hidden;
+                    overflow-y: scroll;
+
+                    &:hover {
+                        display: flex;
+                    }
+
                     h4 {
                         font-weight: 800;
                         text-align: start;
                     }
                     ul {
-                        display: block;
+                        display: flex;
+                        flex-wrap: wrap;
                         padding: 0;
                         margin: 0;
                         li {
-                            margin-left: 20px;
                             text-align: start;
                             width: auto;
+                            display: inline-block;
+                            padding: 3px;
+                            background: #22222210;
+                            margin: 1px;
+                            border-radius: 5px;
+                            color: black;
                         }
                     }
                 }
@@ -152,19 +169,12 @@
                 &:hover {
                     outline: 1.177px solid #456ff6;
                     transition: 1s ease;
-
-                    .interestInfo {
-                        display: flex;
-                    }
                 }
 
                 &.others {
                     position: relative;
                     overflow: hidden;
                 }
-                .interestOther {
-                    background: red;
-                }
 
                 .othersTextBox {
                     position: absolute;
@@ -212,26 +222,20 @@
         }
 
         @media (width<500px) {
-            .interestSelectCards .interestSelectCard {
-                max-width: 300px;
-            }
             .itemsContainer {
                 .itemsCard {
-                    max-width: 200px;
+                    width: 300px;
+                    flex-direction: column;
                     &.others {
                         &.checked {
+                            height: fit-content;
+                            max-height: none;
                             flex-direction: column;
+                            width: 300px;
                         }
                     }
                 }
             }
         }
-
-        @media (width<300px) {
-            .interestSelectCards .interestSelectCard {
-                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
@@ -209,6 +209,18 @@ export default function UserInterest() {
                                             >
                                                 <TagsInput
                                                     value={otherEndgoal}
+                                                    onBlur={(e: any) => {
+                                                        if (
+                                                            e.target.value
+                                                                .length > 0
+                                                        ) {
+                                                            setOtherEndgoal([
+                                                                ...otherEndgoal,
+                                                                e.target.value
+                                                            ]);
+                                                            e.target.value = "";
+                                                        }
+                                                    }}
                                                     onChange={setOtherEndgoal}
                                                     name="other_endgoals"
                                                     placeHolder="Specify your endgoals"
@@ -324,6 +336,23 @@ export default function UserInterest() {
                                                 >
                                                     <TagsInput
                                                         value={otherInterest}
+                                                        onBlur={(e: any) => {
+                                                            if (
+                                                                e.target.value
+                                                                    .length > 0
+                                                            ) {
+                                                                setOtherInterest(
+                                                                    [
+                                                                        ...otherInterest,
+                                                                        e.target
+                                                                            .value
+                                                                    ]
+                                                                );
+                                                                e.target.value =
+                                                                    "";
+                                                            }
+                                                        }}
+                                                        separators={[","]}
                                                         onChange={
                                                             setOtherInterest
                                                         }