diff --git a/components/CreateProfile/CreateProfileForm1.js b/components/CreateProfile/CreateProfileForm1.js index f8c3230f..10d53188 100644 --- a/components/CreateProfile/CreateProfileForm1.js +++ b/components/CreateProfile/CreateProfileForm1.js @@ -182,10 +182,6 @@ const CreateProfileQuestions1 = function ({ )) } -
-

Connect Wallet

- -
diff --git a/components/dashboard/Course.js b/components/dashboard/Course.js new file mode 100644 index 00000000..7d4d903e --- /dev/null +++ b/components/dashboard/Course.js @@ -0,0 +1,116 @@ +import React, { useEffect, useState } from 'react'; +import Link from 'next/link'; +import axios from 'axios'; + +const Course = ({ course, userData, token }) => { + const [userModules, setUserModules] = useState([]); + const [modules, setModules] = useState([]); + useEffect(() => { + if (course) { + axios + .get(`${process.env.BASE_URI}/course/${course.courseId._id}/module`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + setModules(res.data.data); + }); + axios + .get(`${process.env.BASE_URI}/learn/${course.courseId._id}/moduleById/${userData._id}`) + .then((res) => { + const resModules = res.data.data; + setUserModules(resModules); + }); + } + }, []); + const totalUserModules = userModules.filter( + (eModule) => modules.some((module) => eModule.moduleId._id === module._id), + ); + const totalModulesLength = modules.length; + + // user progress + let completionRate = 0; + totalUserModules.forEach((module) => { + completionRate += module.completionRate; + }); + const userPercentages = Math.round(completionRate / totalModulesLength); + return ( +
+ {/* First and Second */} +
+ {/* First Column - logo */} +
+ company's logo +
+ {/* Second Column - Title + Description */} +
+

+ {course?.courseId?.name} +

+

+ {course?.courseId?.description} +

+
+
+ {/* Third Column */} +
+

+ {userPercentages} + % Completed + {' '} +

+
+
+
+
+
+
+ {/* Fourth and Fifth Column */} +
+ {/* Fourth Column */} +
+

$MINORITY Earned

+

+ $ + {parseInt(course.completionRate, 10) !== 100 + ? 0 + : course?.courseId?.earn} +

+
+ + + + View Course + + + +
+
+ ); +}; + +export default Course; diff --git a/components/dashboard/CourseCard.js b/components/dashboard/CourseCard.js new file mode 100644 index 00000000..e9df2ae4 --- /dev/null +++ b/components/dashboard/CourseCard.js @@ -0,0 +1,35 @@ +import React from 'react'; +import EmptyOverviewComponent from './EmptyOverviewComponent'; +import Course from './Course'; + +const CourseCard = ({ + userCourses, currentView, userData, token, +}) => { +// const precentage = (id) => { +// const arr = userModules.filter((e) => ( +// e.id === id +// )); +// console.log(arr.length > 0 ? arr[0].prg : 0); +// return arr.length > 0 ? arr[0].prg : 0; +// }; + const courses = userCourses.filter((course) => course.categories.includes(currentView)); + return ( + <> + {courses.length > 0 ? ( +
+ {userCourses.map((course) => ( + + ))} +
+ ) : ( + + )} + + ); +}; + +export default CourseCard; diff --git a/components/dashboard/DonutChartComponent.js b/components/dashboard/DonutChartComponent.js new file mode 100644 index 00000000..bf47f4fb --- /dev/null +++ b/components/dashboard/DonutChartComponent.js @@ -0,0 +1,67 @@ +import React from 'react'; +import 'chart.js/auto'; +import { Doughnut } from 'react-chartjs-2'; + +const DonutChartComponent = ({ data, winSize }) => { + const options = { + responsive: true, + maintainAspectRatio: true, + cutout: winSize >= 1100 ? 35 : 50, + layout: { + // padding: 5, + }, + stroke: { + width: 5, + }, + legend: { + labels: { + fontColor: 'white', + }, + }, + + plugins: { + datalabels: { color: '#ffffff' }, + legend: { + display: false, + position: 'right', + align: 'center', + labels: { + color: 'white', + }, + }, + }, + }; + return ( +
+
+ +
+

+ + {data.centerText.value} + + {data.centerText.text} + +

+ +
+
+
+

+ {data.title} +

+
+ {data.labels.map((t, i) => ( +
+
+

{t}

+ +
+ ))} +
+
+
+ ); +}; + +export default DonutChartComponent; diff --git a/components/dashboard/EmptyOverviewComponent.js b/components/dashboard/EmptyOverviewComponent.js index 1fe413de..020fe8b4 100644 --- a/components/dashboard/EmptyOverviewComponent.js +++ b/components/dashboard/EmptyOverviewComponent.js @@ -1,7 +1,7 @@ import React from 'react'; +import Link from 'next/link'; const EmptyOverviewComponent = ({ - btnFunction, btnText, imgURL, description, @@ -21,14 +21,14 @@ const EmptyOverviewComponent = ({ > {description}

- + + + {btnText} + +
); export default EmptyOverviewComponent; diff --git a/components/dashboard/Overview.js b/components/dashboard/Overview.js index 80b14660..c72e7759 100644 --- a/components/dashboard/Overview.js +++ b/components/dashboard/Overview.js @@ -75,130 +75,133 @@ const Components = [ }, ]; -const DesktopView2 = ({ userData, token }) => ( -
+const DesktopView2 = ({ userData, token, winSize }) => ( +
-

- Dashboard Overview (Desktop) +

+ Dashboard Overview

-
-
- + {/* first row */} +
+
-
- + +
+
-
- +
+
-
+
-
- + + {/* second row */} +
+
-
- +
+
-
- + {/* Third Row */} +
+
-
- +
+
-
- +
+
-
- +
+
-
+ {/* fourth Row */} +
-
- +
+
+ {/* */}
); -const TabletView2 = ({ userData, token }) => ( -
+const TabletView2 = ({ userData, token, winSize }) => ( +
-

- Dashboard Overview (Tablet) +

+ Dashboard Overview

-
-
- + {/* first row */} +
+
-
- + +
+
-
- +
+
-
- + {/* second row */} + +
+
-
- + +
+
-
- + {/* Third Row */} + +
+
-
- +
+
-
- + {/* fourth Row */} + +
+
-
- +
+ +
+ {/* 5th row */} +
+
-
+ {/* 6th row */} +
-
+
-
- -
+ {/* */}
); -const MobileView = ({ userData, token }) => { +const MobileView = ({ userData, token, winSize }) => { const [currentView, setCurrentView] = useState('Profile'); const handleClick = (compName) => { if (currentView === compName) { @@ -210,28 +213,20 @@ const MobileView = ({ userData, token }) => { return (
-

- Dashboard Overview (Mobile) +

+ Dashboard Overview

-
{Components.map((component) => { const CompName = component.component; @@ -265,9 +260,9 @@ const MobileView = ({ userData, token }) => { onClick={() => { setCurrentView(component.componentName); }} - style={{ height: component.height }} + style={{ minHeight: component.height }} > - +
); @@ -294,14 +289,14 @@ const Overview = ({ userData, token }) => { <> {winSize >= 1440 ? ( window.innerHeight >= 768 ? ( - + ) : ( - + ) - ) : winSize >= 768 ? ( - + ) : winSize >= 1100 ? ( + ) : ( - + )} ); diff --git a/components/dashboard/OverviewCareer.js b/components/dashboard/OverviewCareer.js index d7d283e3..c8be63d7 100644 --- a/components/dashboard/OverviewCareer.js +++ b/components/dashboard/OverviewCareer.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Skeleton from 'react-loading-skeleton'; +import Link from 'next/link'; const OverviewCareer = ({ token }) => { const [loading, setLoading] = useState(true); @@ -40,7 +41,7 @@ const OverviewCareer = ({ token }) => { }); } }, []); - + console.log(allJobs); return (
{ style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, }} > @@ -119,35 +120,33 @@ const OverviewCareer = ({ token }) => { >
- company's logo + company's logo +

{job?.companyId?.company_name}

-

{job.job_title}

+

+ {job.job_title} + +

-
+ {/*

{job.job_type}

-
+
*/}
- - - + + +
@@ -176,9 +175,9 @@ const OverviewCareer = ({ token }) => {
- company's logo + company's logo

@@ -223,17 +222,13 @@ const OverviewCareer = ({ token }) => { className="d-flex justify-content-center align-items-center" style={{ width: '100%' }} > - + + + Apply For Your First Job + +

)} diff --git a/components/dashboard/OverviewCourses.js b/components/dashboard/OverviewCourses.js index 37d16532..3b2096cc 100644 --- a/components/dashboard/OverviewCourses.js +++ b/components/dashboard/OverviewCourses.js @@ -1,7 +1,7 @@ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Skeleton from 'react-loading-skeleton'; -import EmptyOverviewComponent from './EmptyOverviewComponent'; +import CourseCard from './CourseCard'; const categories = [ { @@ -36,7 +36,7 @@ const categories = [ }, ]; -const OverviewCourses = ({ token }) => { +const OverviewCourses = ({ token, userData }) => { const [loading, setLoading] = useState(true); const [currentView, setCurrentView] = useState('webdev'); const [, setAllCourses] = useState([]); @@ -77,6 +77,7 @@ const OverviewCourses = ({ token }) => { }); setUserCourses(tempUserCoursesData); setLoading(false); + console.log(tempUserCoursesData); }) .catch((error) => { if (error.response) { @@ -93,121 +94,6 @@ const OverviewCourses = ({ token }) => { } }, []); - const ProgressBar = useCallback((props) => { - let value = props.completionRate; - if (typeof value === 'number' || typeof value === 'string') { - value = props.completionRate; - } else { - value = 0; - } - return ( -
-
-
-
-
- ); - }, []); - - const CourseCard = useCallback(() => { - const courses = userCourses.filter((course) => course.categories.includes(currentView)); - - return ( - <> - {courses.length > 0 ? ( -
- {courses.map((course) => ( -
- {/* First and Second */} -
- {/* First Column - logo */} -
- company's logo -
- {/* Second Column - Title + Description */} -
-

- {course?.courseId?.name} -

-

- {course?.courseId?.description} -

-
-
- {/* Third Column */} -
-

- {course.completionRate} - % Completed - {' '} -

- -
- {/* Fourth and Fifth Column */} -
- {/* Fourth Column */} -
-

$MINORITY Earned

-

- $ - {parseInt(course.completionRate, 10) !== 100 - ? 0 - : course?.courseId?.earn} -

-
- {/* Fifth Column */} - -
-
- ))} -
- ) : ( - { - setLoading(!loading); - }} - /> - )} - - ); - }, []); - return (
{ > {/* First row */}
@@ -223,7 +109,7 @@ const OverviewCourses = ({ token }) => { style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, }} > @@ -232,10 +118,10 @@ const OverviewCourses = ({ token }) => {
{
{ setCurrentView('all'); @@ -341,7 +227,14 @@ const OverviewCourses = ({ token }) => {
) : ( - + )}
); diff --git a/components/dashboard/OverviewEvents.js b/components/dashboard/OverviewEvents.js index 043b405a..67567763 100644 --- a/components/dashboard/OverviewEvents.js +++ b/components/dashboard/OverviewEvents.js @@ -44,13 +44,27 @@ const OverviewEvents = ({ token }) => { }); } }, []); - + // date + function formatAMPM(time) { + const date = new Date(time); + const day = date.toString().split(' ')[0]; + const month = date.toString().split(' ')[1]; + const monthDay = date.toString().split(' ')[2]; + let hours = date.getHours(); + let minutes = date.getMinutes(); + const ampm = hours >= 12 ? 'pm' : 'am'; + hours %= 12; + hours = hours || 12; // the hour '0' should be '12' + minutes = minutes < 10 ? `0${minutes}` : minutes; + const strTime = `${hours}:${minutes} ${ampm} - ${day}, ${month} ${monthDay}th`; + return strTime; + } return loading ? (
-

+

Events

{ >
-

+

Upcoming

{
) : userEvents.length !== 0 ? (
-

+

Events

-

+

Upcoming

@@ -109,34 +123,48 @@ const OverviewEvents = ({ token }) => {

{event.eventName}

-

- {event.time.toString()} +

+ {formatAMPM(event.time)} + {/* {event.time.toString()} */}

-
+ {/*
{event?.eventStatus} -
+
*/}
- - - +

+ {event?.eventStatus} +

+
+ {/* Fourth Column */} +
))} @@ -145,24 +173,17 @@ const OverviewEvents = ({ token }) => { className="d-flex justify-content-center align-items-center" style={{ width: '100%' }} > - - + + More Events
) : (
-

+

Events

{ +const OverviewMentor = ({ token, userData }) => { const [loading, setLoading] = useState(true); const [currentView, setCurrentView] = useState('overview'); const [mentorInfo, setMentorInfo] = useState(); const [, setMentors] = useState([]); useEffect(() => { - if (token != null) { + if (token != null && (userData.is_mentor || userData.is_mentee)) { axios - .get(`${process.env.BASE_URI}/mentor/`, { + .get(`${process.env.BASE_URI}/${userData.is_mentor ? 'mentor' : 'mentee'}/`, { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET', @@ -51,7 +51,7 @@ const OverviewMentor = ({ token }) => { return (
{/* First row */} @@ -63,7 +63,7 @@ const OverviewMentor = ({ token }) => { style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, }} > @@ -106,7 +106,7 @@ const OverviewMentor = ({ token }) => {
-
+
{loading ? (
( } alt="avatar" /> -
-

- {mentorInfo?.user_id?.firstName} - {' '} - {mentorInfo?.user_id?.lastName} -

-

- Position +

+
+

+ {mentorInfo?.user_id?.firstName} + {' '} + {mentorInfo?.user_id?.lastName} +

+

+ {mentorInfo.occupation} +

+
+ +
+
+

+ Mentees

+
+

4

+
{/* second row */} -
+

@@ -218,37 +229,28 @@ const OverviewComponent = ({ mentorInfo }) => ( style={{ fontSize: '12px', fontWeight: 400, - color: 'black', + color: '#DEDEDE', marginBottom: '2%', }} > Mentorship Start Date: 3rd March, 2021

-

- Number of Mentees: - 4 -

+
+
{/* third row */}
diff --git a/components/dashboard/OverviewMyChapter.js b/components/dashboard/OverviewMyChapter.js index 58cd11b6..a65b4454 100644 --- a/components/dashboard/OverviewMyChapter.js +++ b/components/dashboard/OverviewMyChapter.js @@ -42,7 +42,7 @@ const OverviewMyChatper = () => { style={{ fontSize: '18px', marginBottom: '5px', - color: 'black', + color: 'white', fontWeight: '700', }} > @@ -113,69 +113,64 @@ const OverviewMyChatper = () => { style={{ height: '100%', width: '100%' }} > {/* first row */} -
+

Washington, DC

{/* second row */}

Washington DC

- Chapter President: + Chapter President: Jason Cole

- Next Meeting: + Next Meeting: {' '} 24th Oct, 2021 @ 5:00pm EST

- Member Since: + Member Since: {' '} June 2021

+ + Chapter Settings +
{/* third row */} -
- -
+ {/*
+ +
*/}
), [], @@ -196,7 +191,7 @@ const OverviewMyChatper = () => { style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, marginRight: '5px', }} diff --git a/components/dashboard/OverviewMyProposals.js b/components/dashboard/OverviewMyProposals.js index b05e957b..bf825c99 100644 --- a/components/dashboard/OverviewMyProposals.js +++ b/components/dashboard/OverviewMyProposals.js @@ -19,8 +19,7 @@ const OverviewMyProposals = () => { () => ( @@ -31,8 +30,8 @@ const OverviewMyProposals = () => { const ProposalCard = useCallback( () => (

Dog Walkr @@ -52,12 +51,12 @@ const OverviewMyProposals = () => { >

Scott Davis

@@ -82,7 +81,7 @@ const OverviewMyProposals = () => { style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, marginRight: '5px', }} @@ -150,17 +149,19 @@ const OverviewMyProposals = () => { width: '100%', fontSize: '12px', margin: '0', + marginBottom: '10px', fontWeight: '700', - color: 'black', + color: 'white', padding: '0 10px', - height: '15%', + // height: '15%', }} > {/* 25% each */} -

Name

-

Status

-

Created On

+

Name

+

Status

+

Created On

{ const [loading, setLoading] = useState(true); const [currentView, setCurrentView] = useState('active'); - const [projectInfo, setProjectInfo] = useState(); - const [projectView, setProjectView] = useState('tasks'); + const [, setProjects] = useState([]); useEffect(() => { @@ -22,17 +20,6 @@ const OverviewProjects = ({ token }) => { }; }, []); - const params = { - slidesPerView: 3, - spaceBetween: 10, - freeMode: true, - - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - }, - }; - useEffect(() => { if (token !== null) { axios @@ -58,225 +45,6 @@ const OverviewProjects = ({ token }) => { } }, []); - const dummyProjectData = [ - { - projectId: 0, - projectName: 'Project 1', - tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], - description: - "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", - thumbnail: - 'https://s3-alpha-sig.figma.com/img/2951/2f25/2b8152ce226e7158420ad0a7b66997d4?Expires=1639353600&Signature=NiizBF7u5Vtyxcfg5btRtH4C-ePB4viFrZKIybvsu3pX0XLxRUcrjsWZ3MRqxoWx-Fog3WBDDVu3YEpWFBoW94-qRPO1bw-p3HtsvQxzABiiV-xCzykUw1nGfYgnrPXe8y74KKC48RXpEDCjcsSeH8A5N-hpxiDOJRlDuDVUn40ntcr08waIZkzkSOJmPvB~83avTh6WvaqP~5EqdzX6NTdozn5mLycvIckur-svzdogNWrP7z3jyDHO-TnvlvOCEjhr5V7k2ABClP~wn2uUIQ91gS7ns8gbjfmBGdD6RCay75S2YXLHMZILNrpDWhkadsip9doD6ierKoC5rre-Lg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA', - }, - { - projectId: 1, - projectName: 'Project 2', - tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], - description: - "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", - thumbnail: - 'https://s3-alpha-sig.figma.com/img/95eb/9b0c/a4581433c385cef18426f59f409d4c42?Expires=1639353600&Signature=WVRXJhwJf8kXF3mj175FXXCoP5uk34jvKvcNfb-QT45lR--AKyHoz8SMj2Z-coi7Z0ZY6JYor3gFh3yVdPxudv-4ABwOHpQaNawol2ZWkFbtAyyAvzqI7oCRUK19DgnddOZchW8PECc8vnJg-Dm~e0nZ~dBwYSZd6RkKrdBBdyI66YRojG7A6hwAU4IkUofDTcxotSX56UG8-r5q0FAIV4GBywFW2eyZt24cKGD7t7SaeFq6vTm2sXOT2zjbgIbo1kXHCN98BAITS7mgGIBklo79xZZG7dUJLvfGu0r81u2CmcwQBi2F~03MbG1ZuN9dcd3BU~1bAyfwpCOWVbvPXg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA', - }, - { - projectId: 2, - projectName: 'Project 3', - tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], - description: - "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", - thumbnail: - 'https://s3-alpha-sig.figma.com/img/534b/7f4e/d21bc3c0761a4d2cb72de7952521a8b6?Expires=1639353600&Signature=JL7FL9ra9p173rG~xW9ginqFax4tmcKHeZ8o-RB9o5paUh4gB3kV0alTlOkLvsEr~7O9YVtSCwIIfRiUCNBhHmGJU5Io1D5wLh~XlHSrcZjSTZo1SH2Y5fxpI7Nc0DILHUkmn3bQ8ymlU7wHV28mt~x6Js8Ejlij4hXcCGqQo1lf1hCct47h4OlkJxMZnSS4rcdv-2drcASfCxKxfi2llzjD7B-NpAgoPPr0LrQS~DA-9faBA3q0IwTI-OsvBtzQXVH1rOpO4DgJ6Wz8GmdGjgglZaTvV5XtMiRUAC5-ncDXL4-9rlTTjWWcCYjQDhnlsjdiPaKyVXB~lwUkarefvg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA', - }, - { - projectId: 3, - projectName: 'Project 4', - tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], - description: - "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", - thumbnail: - 'https://s3-alpha-sig.figma.com/img/2951/2f25/2b8152ce226e7158420ad0a7b66997d4?Expires=1639353600&Signature=NiizBF7u5Vtyxcfg5btRtH4C-ePB4viFrZKIybvsu3pX0XLxRUcrjsWZ3MRqxoWx-Fog3WBDDVu3YEpWFBoW94-qRPO1bw-p3HtsvQxzABiiV-xCzykUw1nGfYgnrPXe8y74KKC48RXpEDCjcsSeH8A5N-hpxiDOJRlDuDVUn40ntcr08waIZkzkSOJmPvB~83avTh6WvaqP~5EqdzX6NTdozn5mLycvIckur-svzdogNWrP7z3jyDHO-TnvlvOCEjhr5V7k2ABClP~wn2uUIQ91gS7ns8gbjfmBGdD6RCay75S2YXLHMZILNrpDWhkadsip9doD6ierKoC5rre-Lg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA', - }, - { - projectId: 4, - projectName: 'Project 5', - tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], - description: - "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", - thumbnail: - 'https://s3-alpha-sig.figma.com/img/95eb/9b0c/a4581433c385cef18426f59f409d4c42?Expires=1639353600&Signature=WVRXJhwJf8kXF3mj175FXXCoP5uk34jvKvcNfb-QT45lR--AKyHoz8SMj2Z-coi7Z0ZY6JYor3gFh3yVdPxudv-4ABwOHpQaNawol2ZWkFbtAyyAvzqI7oCRUK19DgnddOZchW8PECc8vnJg-Dm~e0nZ~dBwYSZd6RkKrdBBdyI66YRojG7A6hwAU4IkUofDTcxotSX56UG8-r5q0FAIV4GBywFW2eyZt24cKGD7t7SaeFq6vTm2sXOT2zjbgIbo1kXHCN98BAITS7mgGIBklo79xZZG7dUJLvfGu0r81u2CmcwQBi2F~03MbG1ZuN9dcd3BU~1bAyfwpCOWVbvPXg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA', - }, - { - projectId: 5, - projectName: 'Project 6', - tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], - description: - "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", - thumbnail: - 'https://s3-alpha-sig.figma.com/img/534b/7f4e/d21bc3c0761a4d2cb72de7952521a8b6?Expires=1639353600&Signature=JL7FL9ra9p173rG~xW9ginqFax4tmcKHeZ8o-RB9o5paUh4gB3kV0alTlOkLvsEr~7O9YVtSCwIIfRiUCNBhHmGJU5Io1D5wLh~XlHSrcZjSTZo1SH2Y5fxpI7Nc0DILHUkmn3bQ8ymlU7wHV28mt~x6Js8Ejlij4hXcCGqQo1lf1hCct47h4OlkJxMZnSS4rcdv-2drcASfCxKxfi2llzjD7B-NpAgoPPr0LrQS~DA-9faBA3q0IwTI-OsvBtzQXVH1rOpO4DgJ6Wz8GmdGjgglZaTvV5XtMiRUAC5-ncDXL4-9rlTTjWWcCYjQDhnlsjdiPaKyVXB~lwUkarefvg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA', - }, - ]; - const ProjectTaskCard = ({ data }) => { - const taskName = data; - return ( -

- {/* First and Second */} -
- {/* First Column - logo */} -
-
- -
-
- {/* Second Column - Task Name + Description */} -
-

{taskName}

-
-
- {/* Third and Fourth Column */} -
- -
-
- ); - }; - - const ProjectsComponent = () => ( -
-
- - {dummyProjectData.map((project) => ( -
{ - setProjectInfo(project); - }} - style={{ height: '6rem' }} - > -
- project's thumbnail -
-

- {project.projectName} - {' '} -

-
- ))} -
-
- {/* 2nd row */} -
-
-
{ - setProjectView('tasks'); - }} - style={{ marginRight: '5%' }} - > -

Project Tasks

-
-
{ - setProjectView('details'); - }} - > -

Project Details

-
-
- {projectView === 'tasks' ? ( -
- {projectInfo !== undefined ? ( - projectInfo.tasks.map((task) => ( - - )) - ) : ( -

- Select a Project to View Tasks -

- )} -
- ) : ( -
- {projectInfo !== undefined ? ( -

- {projectInfo.description} -

- ) : ( -

- Select a Project to View Tasks -

- )} -
- )} -
-
- ); - return (
{ > {/* First row */}
@@ -292,7 +60,7 @@ const OverviewProjects = ({ token }) => { style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, }} > @@ -301,7 +69,7 @@ const OverviewProjects = ({ token }) => {
{
{ setCurrentView('all'); diff --git a/components/dashboard/OverviewProfile.js b/components/dashboard/OverviewProfile.js index 58a39ac7..ee6ca518 100644 --- a/components/dashboard/OverviewProfile.js +++ b/components/dashboard/OverviewProfile.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import Link from 'next/link'; import EmptyOverviewComponent from './EmptyOverviewComponent'; const OverviewProfile = ({ userData }) => { @@ -26,7 +27,7 @@ const OverviewProfile = ({ userData }) => { style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, }} > @@ -45,7 +46,7 @@ const OverviewProfile = ({ userData }) => { /> ) : (
{ src={userData?.profilePicture || '/assets/images/profile.png'} alt="avatar" /> -

- {userData.firstName} - {' '} - {userData.lastName} -

-

- Current Position -

- -
+ + View Profile - - + +
)}
diff --git a/components/dashboard/OverviewProgress.js b/components/dashboard/OverviewProgress.js index 826769ab..7415fb9a 100644 --- a/components/dashboard/OverviewProgress.js +++ b/components/dashboard/OverviewProgress.js @@ -1,7 +1,9 @@ import React, { useCallback, useState, useEffect } from 'react'; import Skeleton from 'react-loading-skeleton'; import { Spinner } from 'react-bootstrap'; -import { Chart } from 'react-google-charts'; +// import { Chart } from 'react-google-charts'; +import 'chart.js/auto'; +import { Doughnut } from 'react-chartjs-2'; import TasksList from './TasksList'; const OverviewProgress = ({ userData, renderMobile }) => { @@ -15,217 +17,191 @@ const OverviewProgress = ({ userData, renderMobile }) => { clearTimeout(timeoutID); }; }, []); + // Chart Config + const data = { + legend: { + display: false, // This will do the task + }, + labels: ['Completed', 'Remaining'], + datasets: [ + { + data: [28, 12], + backgroundColor: ['#783EFD', '#FE8F66'], + color: ['#783EFD', '#FE8F66'], + borderColor: ['#783EFD', '#FE8F66'], + borderWidth: 1, + }, - const ProgressMobileComponent = useCallback( - () => ( -
- {/* there are 2 columns: text - images */} -
- {/* text area */} -
-

- Welcome back, - {userData.firstName} -

-

- You’ve completed - - 30% - - of the tasks available on Minority Programmers Association. -
- Complete task, earn crypto! -

-
- {/* list of todo */} -
- -
-
-
-
-

- 12 -

-

- of 40 Completed Tasks -

-
-
- {/* edit data variable in here when api ready */} - Loading Chart
} - data={[ - ['Tasks', 'Hours per Day'], - ['Completed', 12], - ['Remaining', 28], - ]} - options={{ - pieHole: 0.8, - backgroundColor: 'transparent', - slices: [{ color: '#151371' }, { color: '#6A0C8B' }], - pieSliceText: 'none', - chartArea: { width: '100%', height: '90%' }, - legend: 'none', - }} - /> -
-
-
- ), - [], - ); + ], + }; + const options = { + responsive: true, + maintainAspectRatio: true, + cutout: 40, + legend: { + display: false, + }, + plugins: { + legend: { + display: false, + }, + }, + // elements: { + // center: { + // text: 'Red is 2/3 of the total numbers', + // color: '#FF6384', // Default is #000000 + // fontStyle: 'Arial', // Default is Arial + // sidePadding: 20, // Default is 20 (as a percentage) + // minFontSize: 25, // Default is 20 (in px), set to false and text will not wrap. + // lineHeight: 25, // Default is 25 (in px), used for when text wraps + // }, + // }, + }; + // const plugins = [{ + // beforeDraw(chart) { + // const { width } = chart; + // const { height } = chart; + // const { ctx } = chart; + // ctx.restore(); + // const fontSize = (height / 160).toFixed(2); + // ctx.font = `${fontSize} sans-serif`; + // ctx.textBaseline = 'top'; + // ctx.fillStyle = 'white'; + // const text = '12 of 40 task completed'; + // const textX = Math.round((width - ctx.measureText(text).width) / 2); + // const textY = height / 2; + // ctx.fillText(text, textX, textY); + // ctx.save(); + // }, + // }]; + // const ProgressMobileComponent = useCallback( + // () => ( + //
+ // {/* there are 2 columns: text - images */} + //
+ // {/* text area */} + //
+ //

+ // Welcome back, + // {userData.firstName} + //

+ //

+ // You’ve completed + // + // 30% + // + // of the tasks available on Minority Programmers Association. + //
+ // Complete task, earn crypto! + //

+ //
+ // {/* list of todo */} + //
+ // + //
+ //
+ + //
+ // + //
+ //

+ // 12 + // of 40 task completed + + //

+ + //
+ //
+ //
+ // ), + // [], + // ); const ProgressComponent = useCallback( () => (
{/* there are 2 columns: text - images */} {/* first column */}
{/* text area */}
-

- Welcome back, - {userData.firstName} -

-

- You’ve completed - - 30% - - {' '} - of the tasks available on Minority Programmers Association. -
- Complete task, earn crypto! -

+
+
+

+ Welcome back, + {userData.firstName} +

+

+ You’ve completed + + {' '} + 30% + {' '} + + of the tasks available on Minority Programmers Association. +
+ Complete task, earn + {' '} + + crypto! + +

+
+
+ +
+

+ 12 + of 40 task completed + +

+ +
+
+
+
{/* list of todo */} - -
- {/* second column */} -
-
-

- 12 -

-

- of 40 Completed Tasks -

-
-
- {/* edit data variable in here when api ready */} - Loading Chart
} - data={[ - ['Tasks', 'Hours per Day'], - ['Completed', 12], - ['Remaining', 28], - ]} - options={{ - pieHole: 0.8, - backgroundColor: 'transparent', - slices: [{ color: '#151371' }, { color: '#6A0C8B' }], - pieSliceText: 'none', - chartArea: { width: '90%', height: '90%' }, - legend: 'none', - }} - /> +
+
@@ -235,7 +211,7 @@ const OverviewProgress = ({ userData, renderMobile }) => { return (
{loading ? ( @@ -280,7 +256,7 @@ const OverviewProgress = ({ userData, renderMobile }) => {
) : renderMobile ? ( - + ) : ( )} diff --git a/components/dashboard/OverviewStartups.js b/components/dashboard/OverviewStartups.js index d600d2fa..bfbe2716 100644 --- a/components/dashboard/OverviewStartups.js +++ b/components/dashboard/OverviewStartups.js @@ -139,7 +139,7 @@ const OverviewStartups = ({ userData, token }) => {

{

{startup.percentRaised} @@ -182,12 +183,13 @@ const OverviewStartups = ({ userData, token }) => {

- > + +

@@ -215,7 +217,7 @@ const OverviewStartups = ({ userData, token }) => { style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, marginRight: '5px', }} @@ -272,7 +274,7 @@ const OverviewStartups = ({ userData, token }) => {
{loading ? ( diff --git a/components/dashboard/OverviewStatistic.js b/components/dashboard/OverviewStatistic.js index ba81838c..9ab4b8e9 100644 --- a/components/dashboard/OverviewStatistic.js +++ b/components/dashboard/OverviewStatistic.js @@ -2,8 +2,9 @@ import React, { useState, useEffect } from 'react'; import { Chart } from 'react-google-charts'; import Skeleton from 'react-loading-skeleton'; +import DonutChartComponent from './DonutChartComponent'; -const OverviewStatistic = () => { +const OverviewStatistic = ({ winSize }) => { const [loading, setLoading] = useState(true); useEffect(() => { @@ -13,104 +14,16 @@ const OverviewStatistic = () => { }; }, []); - const DonutChartComponent = (props) => { - const { data } = props; - - return ( -
-
-
-

- 12 -

-

- {props.centerText} -

-
-
- Loading Chart
} - data={data} - options={{ - pieHole: 0.7, - backgroundColor: 'transparent', - slices: [ - { color: '#151371' }, - { color: '#6A0C8B' }, - { color: '#2D761B' }, - { color: '#FFC700' }, - ], - pieSliceText: 'none', - chartArea: { width: '100%', height: '80%', right: '0%' }, - legend: 'right', - legend: { alignment: 'center' }, - }} - /> -
-

- {props.title} -

-
- {/* Legend area */} -
- ); - }; - const LineChart = (props) => { const { data } = props; const current = props.data.pop(); return (
{ width: '100%', textAlign: 'center', fontSize: '14px', - color: 'black', + color: 'white', fontWeight: 700, }} > @@ -139,16 +52,33 @@ const OverviewStatistic = () => { marginBottom: '5%', }} > -
-

- Total Amount -

-

- $ - {current[1]} -

+
+ +
+

+ Total Amount +

+

+ $ + {current[1]} +

+
+
+

+ + {' '} + 1.2m +

+

+ + {' '} + 0.1m +

+
{ loader={
Loading Chart
} data={data} options={{ + colors: ['#FE8F66'], backgroundColor: 'transparent', hAxis: { baselineColor: 'transparent', @@ -183,27 +114,60 @@ const OverviewStatistic = () => {
); }; + const dummyData1 = { + title: 'Courses Completed', + centerText: { + text: 'Completed', + value: 18, + }, + labels: ['Web Dev', 'UI/UX', 'Entrepreneurship', 'Blockchain'], + datasets: [ + { + data: [7, 5, 2, 4], + backgroundColor: ['#783EFD', '#FFCC40', '#FD05B3', '#FE8F66'], + color: ['#783EFD', '#FFCC40', '#FD05B3', '#FE8F66'], + borderColor: ['#24253D', '#24253D', '#24253D', '#24253D'], + borderWidth: 1, + }, - const dummyData1 = [ - ['Course Type', 'Courses Completed'], - ['Web Dev', 7], - ['UI/UX', 5], - ['Entrepreneurship', 2], - ['Blockchain', 4], - ]; + ], + }; + const dummyData2 = { + title: 'Proposals', + labels: ['Submitted', 'Under Review', 'Approved'], + centerText: { + text: 'Approved', + value: 3, + }, + datasets: [ + { + data: [5, 4, 3], + backgroundColor: ['#783EFD', '#FD05B3', '#FE8F66'], + color: ['#783EFD', '#FD05B3', '#FE8F66'], + borderColor: ['#24253D', '#24253D', '#24253D'], + borderWidth: 1, + }, - const dummyData2 = [ - ['Proposals', 'Amount of Each'], - ['Submitted', 5], - ['Under Review', 4], - ['Approved', 3], - ]; + ], + }; + const dummyData3 = { + title: 'Tasks (40)', + centerText: { + text: 'Completed', + value: 12, + }, + labels: ['Completed', 'Ongoing'], + datasets: [ + { + data: [12, 4], + backgroundColor: ['#783EFD', '#FD05B3'], + color: ['#783EFD', '#FD05B3'], + borderColor: ['#24253D', '#24253D'], + borderWidth: 1, + }, - const dummyData3 = [ - ['Tasks Status', 'Amount of Each'], - ['Completed', 12], - ['Ongoing', 4], - ]; + ], + }; const dummyLineData = [ ['Month', 'Earning'], @@ -230,7 +194,7 @@ const OverviewStatistic = () => { style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', margin: 0, }} > @@ -261,22 +225,27 @@ const OverviewStatistic = () => {
) : (
{ style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', height: '13%', marginBottom: '2%', }} @@ -31,7 +31,7 @@ const OverviewWallet = () => { style={{ height: '85%' }} > {/* balance 2 columns Balance and Monthly Earned */} -
+
{/* Balance column */}
{ fontSize: '12px', margin: '0', fontWeight: '700', - color: 'black', + color: 'white', }} > Balance @@ -64,7 +64,7 @@ const OverviewWallet = () => {

Monthly $MINORITY Earned @@ -93,20 +93,20 @@ const OverviewWallet = () => {

{/* Minority tracking row */}
{/* Logo and Name/Description */}
- mpicon

{ fontSize: '10px', margin: '0', fontWeight: '700', - color: 'black', + color: 'white', }} > MINORITY ($MINORITY) @@ -142,7 +142,7 @@ const OverviewWallet = () => { fontSize: '15px', margin: '0', fontWeight: '700', - color: 'black', + color: 'white', }} > $0 @@ -187,11 +187,11 @@ const OverviewWallet = () => { return (

-

{ Wallet

+ /> */} {loading ? (
{ style={{ fontSize: '18px', fontWeight: '700', - color: 'black', + color: 'white', height: '13%', marginBottom: '2%', }} @@ -245,7 +246,7 @@ const OverviewWallet = () => { style={{ height: '85%' }} > {/* balance 2 columns Balance and Monthly Earned */} -
+
{/* Balance column */}
{ fontSize: '12px', margin: '0', fontWeight: '700', - color: 'black', + color: '#DEDEDE', }} > Balance @@ -270,7 +271,7 @@ const OverviewWallet = () => { fontSize: '25px', margin: '0', fontWeight: '700', - color: '#151371', + color: '#ffffff', }} > $350 @@ -278,7 +279,7 @@ const OverviewWallet = () => {

Monthly $MINORITY Earned @@ -306,18 +307,18 @@ const OverviewWallet = () => {

{/* Minority tracking row */} -
+
{/* Logo and Name/Description */}
- mpicon
{ fontSize: '10px', margin: '0', fontWeight: '700', - color: 'black', + color: 'white', }} > MINORITY ($MINORITY) @@ -356,7 +357,7 @@ const OverviewWallet = () => { fontSize: '15px', margin: '0', fontWeight: '700', - color: 'black', + color: 'white', }} > $0.04 @@ -380,23 +381,14 @@ const OverviewWallet = () => { > diff --git a/components/dashboard/ProjectsComponent.js b/components/dashboard/ProjectsComponent.js new file mode 100644 index 00000000..33e82763 --- /dev/null +++ b/components/dashboard/ProjectsComponent.js @@ -0,0 +1,206 @@ +import React, { useState } from 'react'; +import Swiper from 'react-id-swiper'; +import { AiOutlineSolution } from 'react-icons/ai'; + +const ProjectTaskCard = ({ data }) => { + const taskName = data; + return ( +
+ {/* First and Second */} +
+ {/* First Column - logo */} +
+
+ +
+
+ {/* Second Column - Task Name + Description */} +
+

{taskName}

+
+
+ {/* Third and Fourth Column */} +
+
+ task-view +
+
+
+ ); +}; + +const ProjectsComponent = () => { + const [projectInfo, setProjectInfo] = useState(); + const [projectView, setProjectView] = useState('tasks'); + + const params = { + slidesPerView: 3, + spaceBetween: 10, + freeMode: true, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + }; + const dummyProjectData = [ + { + projectId: 0, + projectName: 'GenaDrop', + tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], + description: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", + thumbnail: + '/assets/images/dashboard/genadrop.png', + }, + { + projectId: 1, + projectName: 'MusiSwap', + tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], + description: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", + thumbnail: + '/assets/images/dashboard/musiswap.png', + }, + { + projectId: 2, + projectName: 'MPA dApp', + tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'], + description: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", + thumbnail: + '/assets/images/dashboard/dApp.png', + }, + ]; + return ( +
+
+ + {dummyProjectData.map((project) => ( +
{ + setProjectInfo(project); + }} + style={{ height: '6rem' }} + > +
+ project's thumbnail +
+

+ {project.projectName} + {' '} +

+
+ ))} +
+
+ {/* 2nd row */} +
+
+
{ + setProjectView('tasks'); + }} + style={{ marginRight: '5%' }} + > +

Project Tasks

+
+
{ + setProjectView('details'); + }} + > +

Project Details

+
+
+ {projectView === 'tasks' ? ( +
+ {projectInfo !== undefined ? ( + projectInfo.tasks.map((task) => ( + + )) + ) : ( +

+ Select a Project to View Tasks +

+ )} +
+ ) : ( +
+ {projectInfo !== undefined ? ( +

+ {projectInfo.description} +

+ ) : ( +

+ Select a Project to View Tasks +

+ )} +
+ )} +
+
+ ); +}; + +export default ProjectsComponent; diff --git a/components/dashboard/TasksList.js b/components/dashboard/TasksList.js index 7c6e3a72..310a5f6f 100644 --- a/components/dashboard/TasksList.js +++ b/components/dashboard/TasksList.js @@ -4,12 +4,10 @@ import React from 'react'; const TasksList = () => (
- -
); @@ -39,7 +37,7 @@ const TaskCard = () => ( {/* Second Column - Task Name + Description */}

Host an Event

@@ -51,25 +49,22 @@ const TaskCard = () => ( {/* Third and Fourth Column */}

{/* Third Column */}
-

- EARN 15 -
- $MINORITY +

+ EARN 15 $MINORITY

{/* Fourth Column */}
diff --git a/components/dashboard/wallet/Balance.js b/components/dashboard/wallet/Balance.js index 62c0c5ad..6c18d44a 100644 --- a/components/dashboard/wallet/Balance.js +++ b/components/dashboard/wallet/Balance.js @@ -29,7 +29,7 @@ const CurrencyBalances = (props) => { className="d-flex flex-row justify-content-between align-items-start" style={{ height: '15%', width: '100%', marginBottom: '15px' }} > -

+

Currency Balances

@@ -78,7 +78,7 @@ const CoinsLegend = ({ walletInfo }) => ( > {/* first column name and symbol */}
-

{ownedCoin.name}

+

{ownedCoin.name}

{ownedCoin.symbol}

{/* amount owned */} diff --git a/components/dashboard/wallet/CoinCard.js b/components/dashboard/wallet/CoinCard.js index 5f4a676e..807b5f82 100644 --- a/components/dashboard/wallet/CoinCard.js +++ b/components/dashboard/wallet/CoinCard.js @@ -30,7 +30,7 @@ const CoinCard = ({ info, view }) => { /> {/* Name */}
-

{coinInfo.name}

+

{coinInfo.name}

{coinInfo.symbol}

diff --git a/components/dashboard/wallet/MarketChart.js b/components/dashboard/wallet/MarketChart.js index 6d73e54b..03262a32 100644 --- a/components/dashboard/wallet/MarketChart.js +++ b/components/dashboard/wallet/MarketChart.js @@ -9,7 +9,7 @@ const MarketChart = () => {

Market Chart diff --git a/components/dashboard/wallet/TransactionCard.js b/components/dashboard/wallet/TransactionCard.js index e73374a3..7cddb6e9 100644 --- a/components/dashboard/wallet/TransactionCard.js +++ b/components/dashboard/wallet/TransactionCard.js @@ -41,7 +41,7 @@ const TransactionCard = ({ info }) => { {/* Transaction basic info */}

-

{transactionInfo.type.charAt(0).toUpperCase() + transactionInfo.type.slice(1)}

+

{transactionInfo.type.charAt(0).toUpperCase() + transactionInfo.type.slice(1)}

Metamask Wallet

diff --git a/components/dashboard/wallet/Trends.js b/components/dashboard/wallet/Trends.js index 91aa3057..8b35231c 100644 --- a/components/dashboard/wallet/Trends.js +++ b/components/dashboard/wallet/Trends.js @@ -10,7 +10,7 @@ const Trends = ({ data }) => {
{/* first row */}
-

Trends

+

Trends

-
*/} +
  • diff --git a/components/learn/courseDetails/Course.js b/components/learn/courseDetails/Course.js index fea2d5a6..011e7dc8 100644 --- a/components/learn/courseDetails/Course.js +++ b/components/learn/courseDetails/Course.js @@ -1,8 +1,8 @@ -import React, { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import axios from "axios"; -import CourseSidebar from "./CourseSidebar"; -import MainCourseInfo from "./MainCourseInfo"; +import React, { useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; +import axios from 'axios'; +import CourseSidebar from './CourseSidebar'; +import MainCourseInfo from './MainCourseInfo'; const Course = ({ userInfo, course, modules }) => { const [userModules, setUserModules] = useState([]); @@ -14,7 +14,7 @@ const Course = ({ userInfo, course, modules }) => { } useEffect(() => { - const userToken = JSON.parse(localStorage.getItem("userInfo")).token; + const userToken = JSON.parse(localStorage.getItem('userInfo')).token; axios .get(`${process.env.BASE_URI}/learn/${courseId}/userModules`, { headers: { @@ -25,7 +25,6 @@ const Course = ({ userInfo, course, modules }) => { setUserModules(res.data.data); }); }, [courseId]); - return (
    diff --git a/components/learn/courseDetails/MainCourseInfo.js b/components/learn/courseDetails/MainCourseInfo.js index 6267040e..1ee0fef7 100644 --- a/components/learn/courseDetails/MainCourseInfo.js +++ b/components/learn/courseDetails/MainCourseInfo.js @@ -1,30 +1,32 @@ -import React from "react"; -import CourseWeeksList from "./CourseWeeksList"; -import UserBanner from "./UserBanner"; +import React from 'react'; +import CourseWeeksList from './CourseWeeksList'; +import UserBanner from './UserBanner'; -const MainCourseInfo = ({ courseId, userInfo, modules, userModules }) => { +const MainCourseInfo = ({ + courseId, userInfo, modules, userModules, +}) => { const beginnerModules = modules.filter( - (module) => module.level === "beginner" + (module) => module.level === 'beginner', ); const intermediateModules = modules.filter( - (module) => module.level === "intermediate" + (module) => module.level === 'intermediate', ); const advancedModules = modules.filter( - (module) => module.level === "advanced" + (module) => module.level === 'advanced', ); const totalBeginnerLength = beginnerModules.length; const totalIntermediateLength = intermediateModules.length; const totalAdvancedLength = advancedModules.length; - const specificUBeginnerModules = userModules.filter((eModule) => - beginnerModules.some((module) => eModule.moduleId._id === module._id) + const specificUBeginnerModules = userModules.filter( + (eModule) => beginnerModules.some((module) => eModule.moduleId._id === module._id), ); - const specificUIntermediateModules = userModules.filter((eModule) => - intermediateModules.some((module) => eModule.moduleId._id === module._id) + const specificUIntermediateModules = userModules.filter( + (eModule) => intermediateModules.some((module) => eModule.moduleId._id === module._id), ); - const specificUAdvancedModules = userModules.filter((eModule) => - advancedModules.some((module) => eModule.moduleId._id === module._id) + const specificUAdvancedModules = userModules.filter( + (eModule) => advancedModules.some((module) => eModule.moduleId._id === module._id), ); // Beginner level progress @@ -33,7 +35,7 @@ const MainCourseInfo = ({ courseId, userInfo, modules, userModules }) => { beginnerCompletionRate += module.completionRate; }); const totalBeginnerPercentage = Math.round( - beginnerCompletionRate / totalBeginnerLength + beginnerCompletionRate / totalBeginnerLength, ); // Intermediate level progress @@ -42,7 +44,7 @@ const MainCourseInfo = ({ courseId, userInfo, modules, userModules }) => { intermediateCompletionRate += module.completionRate; }); const totalIntermediatePercentage = Math.round( - intermediateCompletionRate / totalIntermediateLength + intermediateCompletionRate / totalIntermediateLength, ); // Advanced level progress @@ -51,16 +53,14 @@ const MainCourseInfo = ({ courseId, userInfo, modules, userModules }) => { advancedCompletionRate += module.completionRate; }); const totalAdvancedPercentage = Math.round( - advancedCompletionRate / totalAdvancedLength + advancedCompletionRate / totalAdvancedLength, ); // User progress - const totalCompletionRate = - beginnerCompletionRate + - intermediateCompletionRate + - advancedCompletionRate; - const totalModulesLength = - totalBeginnerLength + totalIntermediateLength + totalAdvancedLength; + const totalCompletionRate = beginnerCompletionRate + + intermediateCompletionRate + + advancedCompletionRate; + const totalModulesLength = totalBeginnerLength + totalIntermediateLength + totalAdvancedLength; const userPercentages = Math.round(totalCompletionRate / totalModulesLength); return ( @@ -72,7 +72,7 @@ const MainCourseInfo = ({ courseId, userInfo, modules, userModules }) => {
    • - + Modules
    • diff --git a/package.json b/package.json index b729bc5b..15f931e4 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "bootstrap": "5.0.2", "casper-erc20-js-client": "^0.0.4", "casper-js-sdk": "^2.7.4", + "chart.js": "^3.7.1", "cipher-base": "^1.0.4", "cookie": "^0.4.1", "copy-webpack-plugin": "^9.0.1", @@ -86,6 +87,7 @@ "react-bootstrap": "^1.6.1", "react-calendar": "^3.5.0", "react-calendly": "^2.0.4", + "react-chartjs-2": "^4.0.1", "react-circular-progressbar": "^2.0.4", "react-cloudinary-lazy-image": "^1.3.4", "react-color": "^2.19.3", diff --git a/pages/_app.js b/pages/_app.js index 106edeba..59a2e2a2 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -34,7 +34,7 @@ import '../styles/Careers/index.css'; import '../styles/ChapterCSS/chapter.css'; import '../styles/Chat/chat.css'; import '../styles/coreteam/coreteam.css'; -import '../styles/DashboardCSS/dashboard.css'; +import '../styles/DashboardCSS/dashboard.scss'; import '../styles/Events/Event.css'; import '../styles/iframes/swap.css'; import '../styles/incubator-css/incubator.css'; diff --git a/pages/courses/[courseId]/index.js b/pages/courses/[courseId]/index.js index e29fc97f..105e995e 100644 --- a/pages/courses/[courseId]/index.js +++ b/pages/courses/[courseId]/index.js @@ -1,10 +1,10 @@ -import React, { useState, useEffect } from "react"; -import axios from "axios"; -import Course from "../../../components/learn/courseDetails/Course"; -import Layout from "../../../components/Layout"; -import HomepageNav from "../../../components/homepage/HomepageNav"; -import Footer from "../../../components/Footer"; -import SkeletonElement from "../../../components/learn/SkeletonElement"; +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; +import Course from '../../../components/learn/courseDetails/Course'; +import Layout from '../../../components/Layout'; +import HomepageNav from '../../../components/homepage/HomepageNav'; +import Footer from '../../../components/Footer'; +import SkeletonElement from '../../../components/learn/SkeletonElement'; export async function getServerSideProps(context) { return { @@ -23,12 +23,12 @@ const CoursePage = ({ params }) => { const [loading, setLoading] = useState(true); const redirect = () => { - window.location.href = "/learn"; + window.location.href = '/learn'; }; useEffect(() => { - const token = localStorage.getItem("jwtToken"); - const userInfo = localStorage.getItem("userInfo"); + const token = localStorage.getItem('jwtToken'); + const userInfo = localStorage.getItem('userInfo'); if (token === null || userInfo === {}) { redirect(); @@ -41,7 +41,7 @@ const CoursePage = ({ params }) => { }, []); useEffect(() => { - const userToken = JSON.parse(localStorage.getItem("userInfo")); + const userToken = JSON.parse(localStorage.getItem('userInfo')); if (userToken !== null) { axios .get(`${process.env.BASE_URI}/learn/userCourses`, { @@ -60,7 +60,7 @@ const CoursePage = ({ params }) => { }, []); const singleCourse = enrolledCourses?.filter( - (courseItem) => courseItem.courseId._id === courseId + (courseItem) => courseItem.courseId._id === courseId, ); useEffect(() => { singleCourse.forEach((courseItem) => { @@ -69,7 +69,7 @@ const CoursePage = ({ params }) => { }, [singleCourse]); useEffect(() => { - const userToken = JSON.parse(localStorage.getItem("userInfo")); + const userToken = JSON.parse(localStorage.getItem('userInfo')); if (userToken !== null) { axios .get(`${process.env.BASE_URI}/course/${courseId}/module`, { diff --git a/pages/dashboard.js b/pages/dashboard.js index f8044102..fd43a1ee 100644 --- a/pages/dashboard.js +++ b/pages/dashboard.js @@ -1,4 +1,6 @@ -import React, { useEffect, useState, useContext } from 'react'; +import React, { + useEffect, useState, useContext, useRef, +} from 'react'; import HomepageNav from '../components/homepage/HomepageNav'; import { GlobalContext } from '../contexts/provider'; import Layout from '../components/Layout'; @@ -6,6 +8,8 @@ import Overview from '../components/dashboard/Overview'; import SidebarTwo from '../components/sidebar/SidebarTwo'; import links from '../contexts/utils/links'; import Footer from '../components/Footer'; +import ComingSoon from '../components/ComingSoon'; +import useDetectOutsideClick from '../components/UseDetectOutsideClick'; const index = () => { const [userData, setUserData] = useState({}); @@ -13,6 +17,12 @@ const index = () => { const [loading, setLoading] = useState(true); const [open, setOpen] = useState(false); const [, setData] = useState([]); + const dropdownRef = useRef(null); + const [hide, setHide] = useDetectOutsideClick(dropdownRef, false); + + const handleClick = () => { + setHide(!hide); + }; const { authState: { @@ -43,6 +53,7 @@ const index = () => { return ( {/* */} + {hide === false && } { const [startups, setStartups] = useState([]); @@ -84,6 +85,7 @@ const IncubatorPage = () => { active="Home" handleClick={handleClick} /> + {hide === false && } {loading ? (
      diff --git a/pages/wallet.js b/pages/wallet.js index 24976855..c93dbf62 100644 --- a/pages/wallet.js +++ b/pages/wallet.js @@ -1,4 +1,6 @@ -import React, { useEffect, useState, useContext } from 'react'; +import React, { + useEffect, useState, useContext, useRef, +} from 'react'; import HomepageNav from '../components/homepage/HomepageNav'; import { GlobalContext } from '../contexts/provider'; import Layout from '../components/Layout'; @@ -6,6 +8,9 @@ import WalletComponent from '../components/dashboard/wallet/WalletPage'; import SidebarTwo from '../components/sidebar/SidebarTwo'; import links from '../contexts/utils/links'; import Footer from '../components/Footer'; +import ComingSoon from '../components/ComingSoon'; +import useDetectOutsideClick from '../components/UseDetectOutsideClick'; + const index = () => { const [userData, setUserData] = useState({}); @@ -13,6 +18,12 @@ const index = () => { const [loading, setLoading] = useState(true); const [open, setOpen] = useState(false); const [, setData] = useState([]); + const dropdownRef = useRef(null); + const [hide, setHide] = useDetectOutsideClick(dropdownRef, false); + + const handleClick = () => { + setHide(!hide); + }; const { authState: { @@ -49,6 +60,7 @@ const index = () => { page="CreateProfile" /> + {hide === false && }
      div> p{ font-size: 16px; - color: black; } .open-component-button{ font-size: 24px; line-height: 32px; - color: #151371; + color: #ffffff; } /* .open-component-button:active, .open-component-button:focus{ animation: rotate90 0.2s 1 forwards; @@ -139,8 +144,10 @@ .dashboard-card{ border-radius: 5px; - background: white; + background: #1C1D37; padding: 12px 20px; + box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25); + // border-radius: 20px; } .missing-api-dashboard-card{ @@ -157,19 +164,21 @@ } .overview-event-card{ - background: #EFEFEF; - border-radius: 5px; + box-shadow: 0px 32px 41px rgb(0 0 0 / 25%); + border-radius: 8px; + background: #24253D; + border: 1px solid #6938EF; padding: 8px; margin-bottom: 10px; line-height: 15px; } .overview-event-card:hover{ - background: #F3F3F3; + background: #6938EF; } .overview-event-thumbnail { - width: 60px; - height: 60px; + width: 30px; + height: 30px; border-radius: 50%; } @@ -200,38 +209,39 @@ line-height: 16px; vertical-align: top; font-size: 14px; + padding: 0 10px; } /* OVERVIEW CAREER COMPONENT */ .overview-career-button { white-space: nowrap; - border-radius: 5px; + border-radius: 4px; + border: 1px solid #6938EF; display: flex; justify-content: center; align-items: center; padding: 0px 10px; cursor: pointer; + margin: 0px 5px; +} +.overview-career-button:hover { + background:#6938EF !important; } - .selected{ -border: 1px solid #565656; -background: #E0E0E0; + border-radius: 4px; + border: 1px solid #6938EF; + background: #6938EF; } .overview-career-button p{ font-size: 12px ; - font-weight: 700; - color:#565656; + font-weight: 500; + color:#ffffff; text-align: center; margin: 0; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; } -.overview-career-button p:hover{ - border-bottom: 1px solid black; -} .overview-career-cards-list{ padding: 7px 0 ; @@ -240,14 +250,18 @@ background: #E0E0E0; .overview-career-card { padding: 5px 10px; - background: #EFEFEF; - border-radius: 10px; + background: transparent; + border-radius: 8px; + border: 1px solid #6938EF; width: 100%; height: 30%; } .overview-career-card:hover{ - background: #F3F3F3; + background: #6938EF; + .overview-career-all-image{ + background: #1C1D37; + } } .overview-career-card-image img{ @@ -260,17 +274,24 @@ background: #E0E0E0; justify-content: center; align-items: flex-start; } +.overview-career-card-info-title{ + font-size:12px; + font-weight: 600; + color: rgb(255, 255, 255); + margin: 0; +} .overview-career-card-info p{ font-size: 12px; margin: 0; white-space: normal; } - -.overview-career-card-info-title{ - font-size:14px; - font-weight: 700; - color: black; +.overview-career-card-jobtype> p{ + padding: 2px 7px; + font-size: 10px; + background: #565656; + color: white; + border-radius: 4px; margin: 0; } @@ -282,14 +303,7 @@ background: #E0E0E0; align-items: center; } -.overview-career-card-jobtype p{ - padding: 2px 7px; - font-size: 10px; - background: #565656; - color: white; - border-radius: 4px; - margin: 0; -} + /* COURSES */ .overview-courses-list::-webkit-scrollbar { @@ -310,7 +324,7 @@ background: #E0E0E0; .overview-barContainer { flex: 1; height: 8px; - background: #dfdfe7; + background: rgba(82, 85, 141, 0.61); border-radius: 12px; } @@ -322,8 +336,11 @@ background: #E0E0E0; .overview-course-card{ padding: 5px 10px; - background: #EFEFEF; - border-radius: 10px; + background: #24253D; + border: 1px solid #6938EF; + color: white; + box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25); + border-radius: 8px; width: 100%; margin-bottom: 2%; } @@ -338,7 +355,7 @@ background: #E0E0E0; } */ .overview-course-card:hover{ - background: #F3F3F3; + background: #6938EF; } .overview-course-card-info p{ @@ -348,15 +365,15 @@ background: #E0E0E0; .overview-course-card-info-title{ - font-size:14px; + font-size:12px; font-weight: 700; - color: black; + color: rgb(255, 255, 255); margin: 0; } .overview-course-card-description{ - font-size: 8px; - color: black; + font-size: 10px; + color: #DEDEDE; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; @@ -367,7 +384,7 @@ background: #E0E0E0; .overview-course-currency p{ line-height: 20px; - color: black; + color: #33D2FF; margin: 0; text-align: center; } @@ -386,9 +403,9 @@ background: #E0E0E0; /* Proposals */ .proposal-card-info{ - font-size: 10px; + font-size: 12px; font-weight: 500; - color: black; + color: rgb(255, 255, 255); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -396,7 +413,7 @@ background: #E0E0E0; .overview-proposal-card{ background: #EFEFEF; - border-radius: 10px; + border-radius: 12px; width: 100%; margin-bottom: 2%; padding: 10px 10px; @@ -423,7 +440,7 @@ background: #E0E0E0; .overview-chapter-card-description{ font-size: 10px; - color: black; + color: rgb(255, 255, 255); line-height: 16px; overflow: hidden; text-overflow: ellipsis; @@ -431,6 +448,7 @@ background: #E0E0E0; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; + margin: 5px 0; } /* Project component */ @@ -529,4 +547,333 @@ background: #E0E0E0; position: absolute; background: rgba(196, 196, 196, 0.3); backdrop-filter: blur(2px); -} \ No newline at end of file +} + +.dashboard-inner-bg{ + background: #1C1D37; + border-radius: 20px !important; +} +.row-custom-span-3{ + grid-row: span 3 / span 3 !important; +} +.row-custom-span-6{ + grid-row: span 6 / span 6 !important; +} +.overview-course-card-border-none{ + border: none; + box-shadow: none; +} +.button-setting-transparent{ + background: transparent; + font-size: 10px; + width: 45%; + border-radius: 100px; + border: 1px solid #6938EF; +} +.button-setting-transparent:hover{ + background: #6938EF; +} +.button-setting-bg { + background: #6938EF; + font-size: 10px; + border-radius: 100px; + width: 45%; + border: none; +} +.button-setting-bg:hover{ + background-color: #6938EF; +} +.chart-inner-text{ + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 10px; +} +.chart-static-text{ + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 10px; + color: #DEDEDE; +} +.chart-static-text span{ + color: #FFFFFF; + font-weight: 600; + font-size: 16px; + display: block; +} +.chart-static-title{ + position: absolute; + font-weight: 600; + color: white; + left: 40%; + top: 20%; + white-space: nowrap; +} +.chart-inner-text span{ + display: block; + font-size: 14px; + font-weight: 500; +} +.button-more{ + color: white; + background: #6938EF; + border-radius: 100px; + padding: 10px 30px; +} +.button-more:hover{ + color: white; +} +.view-course{ + font-size: 12px; + padding: 0px 20px; + display: flex; + align-items: center; + height: 80%; + margin: auto 0 auto auto; +} +.overview-course-card:hover{ + .view-course{ + background: white; + color: #6938EF; + } +} +.mentorship-mentee-count{ + font-weight: bold; + font-size: 24px; + background: #FE8F66; + border-radius: 50%; + height: 50px; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} +.mentorship-mentee-title{ + margin: 20px 0; + font-size: 16px; + font-weight: bold; +} +.dashboard-projects-thumbnail:hover{ + border:4px solid #78129E; +} +.dashboard-projects-thumbnail-active{ + border:4px solid #78129E; +} +.overview-career-all-image{ + width: 40px; + height: 35px; + background: rgb(105, 56, 239); + margin: auto 10px auto 0; + border-radius: 50%; + padding: 4px; +} +.overview-career-all-image img{ + object-fit: contain; +} +.statistics-card{ + background: #24253D; + border: 1px solid #6938EF; + box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25); + border-radius: 8px; + width: 100%; + height: 20%; + margin-bottom: 4%; +} +.statistics-charts{ + width: 100%; + height: 20%; + margin-bottom: 20px; +} +.static-card{ + background: #24253D; + border: 1px solid #6938EF; + box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25); + border-radius: 8px; +} +.dashboard-static-chart{ + display: flex; + align-items: center; + margin: 0px 10px; +} +.static-chart-detail{ + margin-top: 5%; +} +.static-chart-detail h2{ + font-size: 12px; + font-weight: 600; +} +.static-chart-detail .labels{ + color: #DEDEDE; + font-weight: 500; + font-size: 10px; + display: flex; + flex-direction: column; + margin-top: 10px; +} +.static-chart-detail .labels .tag div{ + width: 15px; + height: 15px; + margin-right: 3px; + border-radius: 2px; +} +.static-chart-detail .labels .tag{ + display: flex; + margin-bottom: 3px; +} +.overview-proposal-button{ + background: rgba(21, 147, 57, 0.65); + border-radius: 6px; + padding: 8px; + color: white; + font-weight: 500; + letter-spacing: 0.5px; + font-size: 12px; +} +.dashboard-proposal-table-title{ + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 15px; + color: #D8D8D8; +} +.row-custom-6{ + grid-row: span 6 / span 6 ; +} +@media only screen and (max-width: 1440px) { + .static-chart-detail .labels{ + display: grid; + grid-template-columns: repeat(2,1fr); + grid-gap: 10%; + } + .static-chart-detail{ + margin-top: 5px; + } + .dashboard-chapter-details{ + margin-bottom: 10px !important; + height: 70%; + } + .dashboard-chapter-details .img-container{ + height: 100%; + } + .dashboard-chapter-location{ + margin-bottom: 10px !important; + } + .dashboard-progress-tasklist{ + height: 45px; + margin-top: auto; + } + .dashboard-progress-tasklist >div{ + height: 100%; + } + .dashboard-pofile-card{ + flex-direction: row !important; + flex-wrap: wrap; + justify-content: space-evenly !important; + } + .mentorship-mentee-title{ + padding:5px 0; + margin: 0; + } +} +@media only screen and (max-width: 1100px) { + .dashboard-pofile-card{ + flex-direction: column !important; + // min-width: 350px; + // max-width: 450px; + flex-wrap: initial; + text-align: center; + } + .inner-dashboard-container{ + width: 450px; + } + .dashboard-progress-tasklist{ + height: auto; + } + .dashboard-progress-chart .chart-inner-text{ + top: 37%; + } + .dashboard-progress-chart .chart-inner-text p{ + font-size: 12px; + line-height: 16px; + } + .button-more{ + margin: 10px 0; + } + .dashboard-card{ + color: white; + } + .dashboard-cards-tab{ + flex-direction: column !important; + align-items: flex-start !important; + } + .dashboard-cards-tab >div{ + margin: 10px 0; + } + .dashboard-static-chart{ + width: 45%; + } + .static-chart-detail .labels{ + display: flex; + } + .static-card{ + justify-content: space-evenly; + } + .dashboard-chapter-location p{ + color: white; + } + .overview-startups-card{ + height: 200px !important; + } + .overview-course-tabs{ + flex-wrap: wrap; + height: fit-content !important; + } + .overview-course-tabs div{ + margin: 5px 0; + } + .button-more{ + padding: 5px 0; + width: 100%; + text-align: center; + font-size: 12px; + } + .overview-course-card-description{ + display: none; + } + .overview-course-card-info{ + justify-content: center; + } + .overview-course-currency{ + display: none !important; + } + .overview-course-detail{ + width: 100%; + } + .view-course{ + width: 100px; + padding: 2px 0; + height: fit-content; + text-align: center; + justify-content: center; + margin: auto; + } + .dashboard-projects-thumbnail{ + height: 200px; + } + .overview-projects-swiper{ + height: fit-content !important; + } +} +@media only screen and (max-width: 460px) { + .inner-dashboard-container{ + width: 100%; + } + .overview-course-detail{ + width: 30% !important; + } +}