Skip to content

Commit

Permalink
fix: improved ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@aswanthabam
aswanthabam committed Oct 6, 2024
1 parent 2c7b07a commit 50bd9bb
Show file tree
Hide file tree
Showing 15 changed files with 1,435 additions and 35 deletions.
3 changes: 2 additions & 1 deletion .env.sample
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
VITE_BACKEND_URL=
VITE_FRONTEND_URL=
VITE_DISCORD_INVITE_URL=
VITE_RAZORPAY_KEY_ID=
VITE_RAZORPAY_KEY_ID=
VITE_DISCORD_AUTH_URL=
8 changes: 8 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.rti--container {
width: 250px;
max-height: 100px;
overflow: scroll;
}
.rti--container .rti--input {
width: 100%;
}

.css-13cymwt-control,
.css-t3ipsp-control {
Expand Down
351 changes: 351 additions & 0 deletions src/modules/Common/Authentication/assets/interests/creative.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/modules/Common/Authentication/assets/interests/creative.webp
View file
Binary file not shown.
201 changes: 201 additions & 0 deletions src/modules/Common/Authentication/assets/interests/makers.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/modules/Common/Authentication/assets/interests/makers.webp
View file
Binary file not shown.
342 changes: 342 additions & 0 deletions src/modules/Common/Authentication/assets/interests/management.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/modules/Common/Authentication/assets/interests/management.webp
View file
Binary file not shown.
222 changes: 222 additions & 0 deletions src/modules/Common/Authentication/assets/interests/others.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/modules/Common/Authentication/assets/interests/others.webp
View file
Binary file not shown.
160 changes: 160 additions & 0 deletions src/modules/Common/Authentication/assets/interests/software.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/modules/Common/Authentication/assets/interests/software.webp
View file
Binary file not shown.
101 changes: 83 additions & 18 deletions src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
display: flex;
align-items: center;
flex-direction: column;

h1 {
text-align: center;
}
& img {
height: 30px;
}
Expand Down Expand Up @@ -50,8 +52,8 @@
overflow: show;

.itemsCard {
min-width: 215px;
min-height: 130px;
min-width: 200px;
max-height: 120px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 17.65823px 0px rgba(0, 0, 0, 0.07);
Expand All @@ -63,13 +65,68 @@
padding: 10px;
position: relative;
transition: all 0.3s ease;
position: relative;

.infoButton {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border-radius: 50%;
cursor: pointer;
color: #456ff6;
z-index: 11;
}

.interestInfo {
display: none;
position: absolute;
width: 200px;
height: 100%;
top: 0;
left: 0;
color: #22222290;
font-size: 10px;
background: #ffffff;
border: 1px solid #456ef694;
padding: 10px;
border-radius: 10px;
z-index: 10;
flex-direction: column;
justify-content: start;
gap: 10px;
h4 {
font-weight: 800;
text-align: start;
}
ul {
display: block;
padding: 0;
margin: 0;
li {
margin-left: 20px;
text-align: start;
width: auto;
}
}
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
p {
transform: translateY(-90%);
}
}

&.others {
&.checked {
display: flex;
width: calc(410px + 3rem);
justify-content: center;
flex-direction: column;
width: calc(380px + 3rem);
justify-content: space-around;
flex-direction: column;
overflow: visible;
flex-direction: row;
gap: 1rem;
Expand All @@ -82,9 +139,10 @@
left: 0px;
transform: translate(-30%, -30%);
color: #ffffff;
background-color: #456FF6;
background-color: #456ff6;
border-radius: 50%;
padding: 2px;
z-index: 12;
}

div {
Expand All @@ -94,6 +152,10 @@
&:hover {
outline: 1.177px solid #456ff6;
transition: 1s ease;

.interestInfo {
display: flex;
}
}

&.others {
Expand All @@ -120,6 +182,10 @@
transition: transform 0.3s ease-in-out;
}

.tagInput {
background: red !important;
width: 100%;
}
.otherInterestInput {
width: 90%;
padding: 8px;
Expand All @@ -132,15 +198,14 @@
.active {
outline: 2px solid #456ff6;
}
.itemImage{
.itemImage {
margin-top: 1rem;
object-fit: cover;
height: 100px;
width: 100px;
height: 70px;
width: 70px;
-webkit-user-drag: none;

}
.title{
.title {
margin-top: 0.5rem;
font-weight: bold;
}
Expand All @@ -151,14 +216,14 @@
max-width: 300px;
}
.itemsContainer {
.itemsCard{
max-width: 200px;
&.others {
&.checked {
flex-direction: column;
.itemsCard {
max-width: 200px;
&.others {
&.checked {
flex-direction: column;
}
}
}
}
}
}

Expand Down
81 changes: 65 additions & 16 deletions src/modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React, { useState } from "react";
import { useEffect, useState } from "react";
import OnboardingHeader from "../../../components/OnboardingHeader/OnboardingHeader";
import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
import styles from "./UserInterest.module.css";
import muBrand from "/src/modules/Common/Authentication/assets/µLearn.png";
import { TagsInput } from "react-tag-input-component";
import { privateGateway } from "@/MuLearnServices/apiGateways";
import { privateGateway, publicGateway } 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";
import creative from "/src/modules/Common/Authentication/assets/interests/creative.svg";
import maker from "/src/modules/Common/Authentication/assets/interests/makers.svg";
import management from "/src/modules/Common/Authentication/assets/interests/management.svg";
import software from "/src/modules/Common/Authentication/assets/interests/software.svg";
import others from "/src/modules/Common/Authentication/assets/interests/others.svg";

const CheckMark = () => (
<svg
Expand Down Expand Up @@ -59,8 +59,27 @@ export default function UserInterest() {
const [otherInterest, setOtherInterest] = useState<string[]>([]);
const [otherEndgoal, setOtherEndgoal] = useState<string[]>([]);
const [stepTwo, setStepTwo] = useState(false);
const [interestGroups, setInterestGroups] = useState<{}>({});
const navigate = useNavigate();

useEffect(() => {
publicGateway
.get(onboardingRoutes.interestGroups)
.then(res => {
var data: [] = res.data?.response?.interestGroup ?? [];
var interestGroupsData = {};
for (let interest of interests) {
(interestGroupsData as any)[interest.value] = data.filter(
(group: any) => group?.category == interest.value
);
}
setInterestGroups(interestGroupsData);
})
.catch(err => {
console.log(err);
});
}, []);

const handleInterestChange = (value: any) => {
if (value === "others") {
if (
Expand Down Expand Up @@ -253,15 +272,45 @@ export default function UserInterest() {
}
>
{interest.checked && <CheckMark />}
<img
className={styles.itemImage}
src={interest.img}
alt=""
/>
<p className={styles.title}>
{interest.title}
</p>

<div className={styles.content}>
<img
className={styles.itemImage}
src={interest.img}
alt=""
/>
<p className={styles.title}>
{interest.title}
</p>
</div>
<div
className={styles.infoButton}
onClick={e => {
e.stopPropagation();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
</svg>
</div>
<div className={styles.interestInfo}>
<h4>This category includes:</h4>
<ul>
{(interestGroups as any)[
interest.value
]?.map((group: any) => (
<li key={group.id}>
{group.name}
</li>
))}
</ul>
</div>
{interest.value == "others" ? (
interests.find(
interest =>
Expand Down
1 change: 1 addition & 0 deletions src/services/urls.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const onboardingRoutes = {
communityList: "/api/v1/register/community/list/",
register: "/api/v1/register/",
interests: "/api/v1/register/interests/",
interestGroups: "/api/v1/dashboard/ig/list/",
emailVerification: "/api/v1/register/email-verification/",
// New Onboarding Routes
createAccount: "/api/v1/register/new/",
Expand Down

0 comments on commit 50bd9bb

Please sign in to comment.