Skip to content

Chapter page #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
M-Rb3 wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Chapter page #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ce892ea
finished wallet dashboard
M-Rb3 Mar 4, 2022
d465c8f
update overview broken imgs
M-Rb3 Mar 4, 2022
5ea9b3e
overview imgs fix
M-Rb3 Mar 4, 2022
ba8126a
main chapter page
M-Rb3 Mar 8, 2022
4bc9a84
interests form
M-Rb3 Mar 9, 2022
2e2cabd
chapter view
M-Rb3 Mar 9, 2022
eb2ccab
chapter page
M-Rb3 Mar 11, 2022
01da430
silder buttons
M-Rb3 Mar 13, 2022
c31163e
form update
M-Rb3 Mar 18, 2022
2c3b7c4
mian page mobile view
M-Rb3 Mar 21, 2022
50187af
mobile view
M-Rb3 Mar 22, 2022
a23fe35
bug fix
M-Rb3 Mar 23, 2022
8fb7a44
chapter toolkite page color updates
M-Rb3 Apr 5, 2022
b4166b1
add partners
M-Rb3 Sep 27, 2022
353f41e
Merge branch 'main' into wallet-dashboard
M-Rb3 Sep 27, 2022
c5e8a50
Merge pull request #148 from MinorityProgrammers/wallet-dashboard
M-Rb3 Jan 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions components/ChapterDirectory/ChapterDirectory.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,12 @@ const ChapterDirectory = ({
);
setStartedAChapter(result);
}, [locationDetails]);

return (
<div className={styles.chapterDirectory}>
{startedAChapter ? (
<ChapterMenu userData={userData} active={active} />
) : (
<InterestForm setOpen={setOpen} token={token} />
<InterestForm setOpen={setOpen} userData={userData} token={token} />
)}
<div className={styles.joinWrapper}>
<div className={styles.joinOuterContainer}>
Expand Down
30 changes: 15 additions & 15 deletions components/ChapterDirectory/ChapterDirectory.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
align-items: center;
justify-content: center;
flex-direction: column;
padding: 4em 0.5em 3em 0.5em;
background: linear-gradient(90deg, #ff00b8 0%, #ff655b 50.8%, #ffc700 100%);
padding: 10em 0.5em 3em 0.5em;
font-family: 'Poppins', sans-serif;
}

.joinWrapper {
Expand All @@ -18,13 +18,12 @@

.joinOuterContainer {
width: 100%;
border: 2px solid rgb(255, 255, 255, 0.5);
padding: 1em;
}

.joinContainer {
width: 100%;
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
background-color: #1C1D37;
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -42,23 +41,24 @@
margin-bottom: 1em;
font-size: 1.2rem;
font-weight: 500;
color: black;
color: rgb(255, 255, 255);
}

.joinButton {
background: #151371;
padding: 8px 24px;
border-radius: 8px;
cursor: pointer;
color: white;
color: #ffffff;
padding: 0.3em 0.8em;
text-transform: capitalize;
transition: all 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
background: #6938EF;
border-radius: 100px;
font-size: 18px;
font-weight: 500;
padding: 12px 30px;
}

.joinButton:hover {
background: white;
border: 2px solid #151371;
color: #151371;
/* background: white;
border: 2px solid #151371; */
color: #fff;
}

@media screen and (max-width: 1024px) {
Expand Down
28 changes: 21 additions & 7 deletions components/ChapterMenu/ChapterMenu.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ const ChapterMenu = () => (
/>
<div className={styles.text}>Find Advisor</div>
</div>
<meter className={styles.meter} value="5" min="0" max="10" />
<div className={styles.meter}>
<div />
</div>
</section>

<section className={styles.item3}>
Expand All @@ -30,7 +32,9 @@ const ChapterMenu = () => (
/>
<div className={styles.text}>Hold An Interest Meeting</div>
</div>
<meter className={styles.meter} value="5" min="0" max="10" />
<div className={styles.meter}>
<div />
</div>
</section>

<section className={styles.item4}>
Expand All @@ -42,7 +46,9 @@ const ChapterMenu = () => (
/>
<div className={styles.text}>Sign Chapter Agreement Form</div>
</div>
<meter className={styles.meter} value="5" min="0" max="10" />
<div className={styles.meter}>
<div />
</div>
</section>

<section className={styles.item5}>
Expand All @@ -54,7 +60,9 @@ const ChapterMenu = () => (
/>
<div className={styles.text}>Find Your Team</div>
</div>
<meter className={styles.meter} value="5" min="0" max="10" />
<div className={styles.meter}>
<div />
</div>
</section>

<section className={styles.item6}>
Expand All @@ -66,7 +74,9 @@ const ChapterMenu = () => (
/>
<div className={styles.text}>Get On Technologes</div>
</div>
<meter className={styles.meter} value="5" min="0" max="10" />
<div className={styles.meter}>
<div />
</div>
</section>

<section className={styles.item7}>
Expand All @@ -78,7 +88,9 @@ const ChapterMenu = () => (
/>
<div className={styles.text}>Develop Socially Impactful Project</div>
</div>
<meter className={styles.meter} value="5" min="0" max="10" />
<div className={styles.meter}>
<div />
</div>
</section>

<section className={styles.item8}>
Expand All @@ -92,7 +104,9 @@ const ChapterMenu = () => (
Host Meetings Workshops Carreer Development
</div>
</div>
<meter className={styles.meter} value="5" min="0" max="10" />
<div className={styles.meter}>
<div />
</div>
</section>
</div>
</div>
Expand Down
21 changes: 13 additions & 8 deletions components/ChapterMenu/ChapterMenu.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@

.meter {
width: 100%;
height: 8px;
background: rgba(82, 85, 141, 0.61);
border-radius: 17px;
display: flex;
}
.meter div{
border-radius: 17px;
height: 100%;
background: linear-gradient(270deg, #FD05B3 1.84%, rgba(253, 5, 179, 0.15) 100%);
}

.menuContainer {
width: 100%;
max-width: 64em;
Expand All @@ -26,11 +34,11 @@
flex-direction: column;
text-align: center;
border-radius: 0.5em;
background: #282828;
background: #1C1D37;
}

.menuContainer > section:first-child {
background: #ffc700;
background: #6938EF;
}

.iconAndTextContainer {
Expand All @@ -52,8 +60,9 @@
.item1 {
padding: 1em 0;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
color: #151371;
color: #fff;
}

.item4,
Expand Down Expand Up @@ -106,10 +115,6 @@
grid-row: 5/8;
}

.meter::-webkit-meter-optimum-value {
background: #ff655b;
height: 50px;
}

@media screen and (max-width: 1024px) {
.menuContainer {
Expand Down
40 changes: 29 additions & 11 deletions components/InterestForm/FormValidations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,38 @@
const validateSection_1 = (values) => {
if (values.profession !== 'student' && values.profession.length !== 0) return {};
if (values.profession.length === 0 && values.profession !== 'student') return { profession: 'Please select a profession' };
if (values.level.length === 0) return { level: 'Please select your level of education' };
if (values.school.length === 0) return { school: 'Please tell us the name of your school' };
return {};
};

const validateSection_2 = (values) => {
if (values.interest.length === 0) return { interest: 'Please pick atleast one of your interests' };
if (values.level.length === 0) return { level: 'Please select your level of education' };
return {};
};

const validateSection_3 = (values) => {
if (values.passion.length === 0) return { passion: 'Please pick atleast one of your passions' };
if (values.location.length === 0 || values.country.length === 0 || values.city.length === 0) return { school: 'Please fill in the missing fields' };
return {};
};

const validateSection_4 = (values) => {
if (values.reasons.length === 0) return { reasons: 'Please tell us your reasons' };
if (values.interest.length === 0) return { interest: 'Please pick atleast one of your interests' };
return {};
};

const validateSection_5 = (values) => {
if (values.support.length === 0) return { support: 'Please tells us how we may support you' };
if (values.passion.length === 0) return { passion: 'Please pick atleast one of your passions' };
return {};
};
const validateSection_6 = (values) => {
if (values.description.length === 0) return { reasons: 'Please fill in the missing fields' };
return {};
};

const validateSection_7 = (values) => {
if (values.mission.length === 0) return { support: 'Please fill in the missing fields' };
return {};
};

const validateSection_9 = (values) => {
if (values.contact.length === 0) return { contact: 'Please select how we may contact you' };
if (values.email) {
if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
Expand All @@ -37,7 +43,7 @@ const validateSection_7 = (values) => {
};

export const validateField = ({
section_1, section_2, section_3, section_4, section_5, section_7,
section_1, section_2, section_3, section_4, section_5, section_7, section_6,
}, values) => {
if (section_1) {
return validateSection_1(values);
Expand All @@ -49,9 +55,16 @@ export const validateField = ({
return validateSection_4(values);
} if (section_5) {
return validateSection_5(values);
} if (section_7) {
}
if (section_6) {
return validateSection_6(values);
}
if (section_7) {
return validateSection_7(values);
}
// if (section_8) {
// return validateSection_8(values);
// }
return {};
};

Expand All @@ -69,7 +82,11 @@ export const validateStepper = (sections, values, nextStep) => {
return { reasons: 'Field 4 is required' };
} if (sectionsToArray[i] === 'section_5' && Object.keys(validateSection_5(values)).length !== 0) {
return { support: 'Field 5 is required' };
} if (sectionsToArray[i] === 'section_7' && Object.keys(validateSection_7(values)).length !== 0) {
}
if (sectionsToArray[i] === 'section_7' && Object.keys(validateSection_7(values)).length !== 0) {
return { contact: 'Field 7 is required' };
}
if (sectionsToArray[i] === 'section_9' && Object.keys(validateSection_9(values)).length !== 0) {
return { contact: 'Field 7 is required' };
}
}
Expand All @@ -78,10 +95,11 @@ export const validateStepper = (sections, values, nextStep) => {

export const validateForm = (values) => {
if (Object.entries(validateSection_1(values)).length !== 0) return validateSection_1(values);
if (Object.entries(validateSection_2(values)).length !== 0) return validateSection_2(values);
if (Object.entries(validateSection_3(values)).length !== 0) return validateSection_3(values);
if (Object.entries(validateSection_4(values)).length !== 0) return validateSection_4(values);
if (Object.entries(validateSection_5(values)).length !== 0) return validateSection_5(values);
if (Object.entries(validateSection_6(values)).length !== 0) return validateSection_6(values);
if (Object.entries(validateSection_7(values)).length !== 0) return validateSection_7(values);
if (Object.entries(validateSection_9(values)).length !== 0) return validateSection_9(values);
return {};
};
Loading