diff --git a/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css b/src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css index 2a54f83b2..0e9d678cc 100644 --- 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 index ffdd1c08a..df1807b75 100644 --- 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() { > { + 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() { > { + if ( + e.target.value + .length > 0 + ) { + setOtherInterest( + [ + ...otherInterest, + e.target + .value + ] + ); + e.target.value = + ""; + } + }} + separators={[","]} onChange={ setOtherInterest }