From a23d5334432c2277982e1b22c3437e922b94f648 Mon Sep 17 00:00:00 2001 From: LEARN Academy Date: Fri, 18 Mar 2022 08:50:17 -0700 Subject: [PATCH 1/3] Defined global background color within the global styles file. --- components/Account.jsx | 116 +-- .../CreateProfile/CreateProfileInput.js | 95 ++- components/donate/DonateAmount.js | 11 +- components/homepage/HomepageDonate.js | 104 +-- components/learn/SkeletonElement.js | 6 +- .../learn/courseDetails/ActivityDetails.js | 174 ++-- .../learn/courseDetails/_1c1d37.code-search | 230 +++++ .../learn/courseDetails/coursesDetails.css | 18 +- components/settings/ProfileFourthStep.js | 797 ++++++++++-------- components/settings/SettingSetup.js | 246 +++--- global-styles.css | 3 + public/assets/css/style.css | 366 ++++---- public/assets/scss/_homepage.scss | 4 +- styles/Careers/index.css | 80 +- styles/DashboardCSS/dashboard.scss | 447 +++++----- styles/ProfileCSS/profile.css | 69 +- styles/global-variables.css | 91 +- ...gBodyNotificationsNotifications.module.css | 38 +- .../settings/settingBodyOverview.module.css | 123 +-- .../settingBodySecurityLogin.module.css | 128 +-- ...tingBodySecurityManagementModal.module.css | 25 +- styles/settings/settingSetup.module.scss | 553 ++++++------ styles/settings/settingsLayout.module.scss | 107 ++- 23 files changed, 2109 insertions(+), 1722 deletions(-) create mode 100644 components/learn/courseDetails/_1c1d37.code-search create mode 100644 global-styles.css diff --git a/components/Account.jsx b/components/Account.jsx index e18c3ec2..ed0e60f5 100644 --- a/components/Account.jsx +++ b/components/Account.jsx @@ -20,7 +20,6 @@ import styles from "../styles/account/account.module.css"; import walletLogin from "../contexts/actions/auth/walletLogin"; import ButtonComponent from "./profile/ButtonComponent"; - const Account = () => { const { authenticate, isAuthenticated, logout } = useMoralis(); const { walletAddress, chainId } = useMoralisDapp(); @@ -116,19 +115,14 @@ const Account = () => { changeAuthModal(!showModal)(setShowModal); }; - const metamaskConnectWallet = async () => { if ( chainId === process.env.NEXT_PUBLIC_NETWORK_ID_MAINNET || chainId === process.env.NEXT_PUBLIC_NETWORK_ID_TESTNET ) { - - authenticate().then(() => { setWalletLoginRequest(true); - }) - - + }); if (isConnected === true) { await window.casperlabsHelper.disconnectFromSite(); @@ -141,17 +135,23 @@ const Account = () => { }; useEffect(() => { - const userToken = window.localStorage.getItem('jwtToken'); - const userInfo = window.localStorage.getItem('userInfo'); + const userToken = window.localStorage.getItem("jwtToken"); + const userInfo = window.localStorage.getItem("userInfo"); - if (isAuthenticated && walletLoginRequest === true && (!userToken || !userInfo)) { + if ( + isAuthenticated && + walletLoginRequest === true && + (!userToken || !userInfo) + ) { walletLogin(walletAddress, authenticate)(authDispatch); - } - },[isAuthenticated, walletLoginRequest, typeof window !== 'undefined' - ? window.localStorage.getItem('jwtToken') - : null]) - - + } + }, [ + isAuthenticated, + walletLoginRequest, + typeof window !== "undefined" + ? window.localStorage.getItem("jwtToken") + : null, + ]); useEffect(async () => { if ( @@ -194,13 +194,13 @@ const Account = () => {
{ footer={false} onCancel={() => setIsModalVisible(false)} style={{ - background: "#1c1d37", + background: " var(--div-background-color);", border: "1px solid #A259FF", borderRadius: "20px", }} bodyStyle={{ marginTop: "30px", - background: "#1c1d37", + background: " var(--div-background-color);", }} closable={false} width="700px" >
-
-
-
- logo -
-

- Connected Account -

-
-

setIsModalVisible(false)} - > - X -

+
+
+
+ logo
- - - - +

+ Connected Account +

+
+

setIsModalVisible(false)} + > + X +

+
+ + + +
{ style={{ fontSize: "20px" }} address={activeKey} /> -
+ - { - logout(); - setWalletLoginRequest(false); - await window.casperlabsHelper.disconnectFromSite(); - [SIGNER_EVENTS.locked, SIGNER_EVENTS.disconnected].forEach( - (event) => - window.addEventListener(event, dispatchDisconnectedSinger) - ); - setIsModalVisible(false); - }} /> - + { + logout(); + setWalletLoginRequest(false); + await window.casperlabsHelper.disconnectFromSite(); + [SIGNER_EVENTS.locked, SIGNER_EVENTS.disconnected].forEach( + (event) => + window.addEventListener(event, dispatchDisconnectedSinger) + ); + setIsModalVisible(false); + }} + /> + ); diff --git a/components/CreateProfile/CreateProfileInput.js b/components/CreateProfile/CreateProfileInput.js index 341a3e5d..14a1d21b 100644 --- a/components/CreateProfile/CreateProfileInput.js +++ b/components/CreateProfile/CreateProfileInput.js @@ -1,16 +1,23 @@ -import React, { useState } from 'react'; -import Select from 'react-select'; -import { CirclePicker, ChromePicker } from 'react-color'; -import DatePicker from 'react-datepicker'; -import 'react-datepicker/dist/react-datepicker.css'; +import React, { useState } from "react"; +import Select from "react-select"; +import { CirclePicker, ChromePicker } from "react-color"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; const CreateProfileInput = function ({ - label, type, name, options, required, value, setValue, className, + label, + type, + name, + options, + required, + value, + setValue, + className, }) { const [colorPickerVisibility, setColorPickerVisibility] = useState(false); const findLabel = (element, num = 0) => { - if (element.parentNode.classList.contains('cp-input')) { + if (element.parentNode.classList.contains("cp-input")) { return element.parentNode; } if (num < 10) { @@ -22,14 +29,14 @@ const CreateProfileInput = function ({ const handleFocus = (e) => { const _label = findLabel(e.target); if (_label) { - _label.classList.add('cp-highlight'); + _label.classList.add("cp-highlight"); } }; const handleBlur = (e) => { const _label = findLabel(e.target); if (_label) { - _label.classList.remove('cp-highlight'); + _label.classList.remove("cp-highlight"); } }; @@ -40,34 +47,40 @@ const CreateProfileInput = function ({ } }; - const handleSwitchChange = () => (setValue ? { - value: options.find((option) => option.label === value), - onChange: (e) => { setValue(e.value); }, - } : {}); + const handleSwitchChange = () => + setValue + ? { + value: options.find((option) => option.label === value), + onChange: (e) => { + setValue(e.value); + }, + } + : {}; const handleColorChange = (color) => { setValue(color.hex); }; const colourStyles = { - control: (styles) => ({ ...styles, backgroundColor: '#1C1D37' }), - option: (styles, { - data, isDisabled, isFocused, isSelected, - }) => ({ + control: (styles) => ({ ...styles, - backgroundColor: '#1C1D37', - color: '#ddd', - cursor: isDisabled ? 'not-allowed' : 'default', + backgroundColor: " var(--div-background-color);", + }), + option: (styles, { data, isDisabled, isFocused, isSelected }) => ({ + ...styles, + backgroundColor: " var(--div-background-color);", + color: "#ddd", + cursor: isDisabled ? "not-allowed" : "default", }), }; switch (type) { - case 'select': + case "select": return (
-
-
+

or donate a cusotm ammount

diff --git a/components/homepage/HomepageDonate.js b/components/homepage/HomepageDonate.js index 744a7cf9..cff8d4d2 100644 --- a/components/homepage/HomepageDonate.js +++ b/components/homepage/HomepageDonate.js @@ -1,9 +1,9 @@ -import React, { useContext, useState } from 'react'; -import { GlobalContext } from '../../contexts/provider'; -import DonateAmount from '../donate/DonateAmount'; -import DonateCompleted from '../donate/DonateCompleted'; -import DonateDetails from '../donate/DonateDetails'; -import DonatePayment from '../donate/DonatePayment'; +import React, { useContext, useState } from "react"; +import { GlobalContext } from "../../contexts/provider"; +import DonateAmount from "../donate/DonateAmount"; +import DonateCompleted from "../donate/DonateCompleted"; +import DonateDetails from "../donate/DonateDetails"; +import DonatePayment from "../donate/DonatePayment"; const HomepageDonate = () => { const { amount, donateDispatch } = useContext(GlobalContext); @@ -18,49 +18,51 @@ const HomepageDonate = () => { const handleValue = (e) => { donateDispatch({ - type: 'UPDATE_DONATE_AMOUNT', + type: "UPDATE_DONATE_AMOUNT", amount: e.target.value, }); }; - const createOrder = (data, actions) => actions.order - .create({ - purchase_units: [ - { - amount: { - value: amount, + const createOrder = (data, actions) => + actions.order + .create({ + purchase_units: [ + { + amount: { + value: amount, + }, }, + ], + application_context: { + shipping_preference: "NO_SHIPPING", }, - ], - application_context: { - shipping_preference: 'NO_SHIPPING', - }, - }) - .then((orderID) => { - setOrderID(orderID); - return orderID; - }); + }) + .then((orderID) => { + setOrderID(orderID); + return orderID; + }); // const createSubscription = (data, action) => {}; - const onApprove = (data, actions) => actions.order.capture().then((details) => { - const { purchase_units } = details; - setBillingDetails(details); - setPayment(purchase_units); - setSucceeded(true); - setIsDone(true); - setCount(count + 1); - }); + const onApprove = (data, actions) => + actions.order.capture().then((details) => { + const { purchase_units } = details; + setBillingDetails(details); + setPayment(purchase_units); + setSucceeded(true); + setIsDone(true); + setCount(count + 1); + }); const scrollTo = () => { const currentLocation = window.location.href; - const hasAnchor = currentLocation.includes('/#'); + const hasAnchor = currentLocation.includes("/#"); if (hasAnchor) { const anchorId = `${currentLocation.substring( - currentLocation.indexOf('#') + 1, + currentLocation.indexOf("#") + 1 )}`; const anchor = document.getElementById(anchorId); if (anchor) { - anchor.scrollIntoView({ behavior: 'smooth' }); + anchor.scrollIntoView({ behavior: "smooth" }); } } }; @@ -71,21 +73,19 @@ const HomepageDonate = () => { ); diff --git a/components/learn/SkeletonElement.js b/components/learn/SkeletonElement.js index 1276d56d..92481475 100644 --- a/components/learn/SkeletonElement.js +++ b/components/learn/SkeletonElement.js @@ -1,15 +1,15 @@ -import React from "react"; -import Skeleton from "react-loading-skeleton"; -import "./learn-css/Skeleton.module.css"; +import React from 'react'; +import Skeleton from 'react-loading-skeleton'; +import './learn-css/Skeleton.module.css'; const SkeletonElement = () => (
@@ -17,7 +17,7 @@ const SkeletonElement = () => (
@@ -27,14 +27,14 @@ const SkeletonElement = () => (
@@ -42,12 +42,12 @@ const SkeletonElement = () => ( className="mr-2" width={25} height={25} - style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }} + style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }} />
@@ -55,12 +55,12 @@ const SkeletonElement = () => ( className="mr-2" width={25} height={25} - style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }} + style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }} />
@@ -70,7 +70,7 @@ const SkeletonElement = () => (
@@ -78,12 +78,12 @@ const SkeletonElement = () => ( className="mr-2" width={25} height={25} - style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }} + style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }} />
@@ -91,12 +91,12 @@ const SkeletonElement = () => ( className="mr-2" width={25} height={25} - style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }} + style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }} />
@@ -106,7 +106,7 @@ const SkeletonElement = () => (
@@ -114,12 +114,12 @@ const SkeletonElement = () => ( className="mr-2" width={25} height={25} - style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }} + style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }} />
@@ -127,12 +127,12 @@ const SkeletonElement = () => ( className="mr-2" width={25} height={25} - style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }} + style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }} />
@@ -150,24 +150,24 @@ const SkeletonElement = () => (
@@ -179,12 +179,12 @@ const SkeletonElement = () => (
@@ -196,8 +196,8 @@ const SkeletonElement = () => ( (
-
+
@@ -230,9 +230,9 @@ const SkeletonElement = () => ( className="mr-5" height={6} style={{ - backgroundColor: "#dcdcdc", - width: "90%", - marginLeft: "4rem", + backgroundColor: '#dcdcdc', + width: '90%', + marginLeft: '4rem', }} />
diff --git a/components/learn/courseDetails/ActivityDetails.js b/components/learn/courseDetails/ActivityDetails.js index da35a41f..1ae6b4b0 100644 --- a/components/learn/courseDetails/ActivityDetails.js +++ b/components/learn/courseDetails/ActivityDetails.js @@ -1,17 +1,17 @@ /* eslint-disable react/jsx-no-constructed-context-values */ -import React, { useEffect, useState, createContext } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"; -import { faClock } from "@fortawesome/free-regular-svg-icons"; -import { useRouter } from "next/router"; -import ReactPlayer from "react-player"; +import React, { useEffect, useState, createContext } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { faClock } from '@fortawesome/free-regular-svg-icons'; +import { useRouter } from 'next/router'; +import ReactPlayer from 'react-player'; import { CircularProgressbarWithChildren, buildStyles, -} from "react-circular-progressbar"; -import QuizModal from "../quizActivity/QuizModal"; -import CourseSidebar from "./CourseSidebar"; -import "react-circular-progressbar/dist/styles.css"; +} from 'react-circular-progressbar'; +import QuizModal from '../quizActivity/QuizModal'; +import CourseSidebar from './CourseSidebar'; +import 'react-circular-progressbar/dist/styles.css'; export const QuizContext = createContext(); @@ -32,12 +32,13 @@ const ActivityDetails = ({ const [disable, setDisable] = useState(false); const router = useRouter(); const { courseId, moduleLevel, moduleId } = router.query; - const { completionStatus, completionRate, completed, _id } = - singleUserModuleInfo; + const { + completionStatus, completionRate, completed, _id, + } = singleUserModuleInfo; useEffect(() => { const singleCourse = enrolledCourses?.filter( - (_course) => _course.courseId._id === courseId + (_course) => _course.courseId._id === courseId, ); singleCourse.forEach((_course) => { setCourse(_course?.courseId); @@ -45,7 +46,7 @@ const ActivityDetails = ({ }, [courseId]); const specificModules = modules.filter( - (module) => module.level === moduleLevel + (module) => module.level === moduleLevel, ); for (let i = 0; i < specificModules.length; i += 1) { specificModules[i].elementKey = i; @@ -56,10 +57,9 @@ const ActivityDetails = ({ return null; } - const specificUserModules = - userModules && - userModules.filter((eModule) => - specificModules.some((module) => eModule.moduleId._id === module._id) + const specificUserModules = userModules + && userModules.filter( + (eModule) => specificModules.some((module) => eModule.moduleId._id === module._id), ); const userModulesId = []; @@ -69,11 +69,11 @@ const ActivityDetails = ({ const onStart = () => { if (completionRate < 50) { - const userToken = JSON.parse(localStorage.getItem("userInfo")).token; + const userToken = JSON.parse(localStorage.getItem('userInfo')).token; fetch(`${process.env.BASE_URI}/learn/${courseId}/${moduleId}/${_id}`, { - method: "PATCH", + method: 'PATCH', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', Authorization: `Bearer ${userToken}`, }, body: JSON.stringify({ @@ -85,7 +85,7 @@ const ActivityDetails = ({ const nextElementKey = moduleInfo.elementKey + 1; const nextModuleDetails = specificModules?.find( - (module) => module.elementKey === nextElementKey + (module) => module.elementKey === nextElementKey, ); const forwardInfo = () => { @@ -95,11 +95,11 @@ const ActivityDetails = ({ if (userModulesId.includes(nextModuleId)) { router.push(nextModuleInfo); } else { - const userToken = JSON.parse(localStorage.getItem("userInfo")).token; + const userToken = JSON.parse(localStorage.getItem('userInfo')).token; fetch(`${process.env.BASE_URI}/learn/${courseId}/module`, { - method: "POST", + method: 'POST', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', Authorization: `Bearer ${userToken}`, }, body: JSON.stringify({ @@ -126,7 +126,7 @@ const ActivityDetails = ({ }; const advancedModules = modules.filter( - (module) => module.level === "advanced" + (module) => module.level === 'advanced', ); const lastAdvancedModules = advancedModules[advancedModules.length - 1]; @@ -134,7 +134,7 @@ const ActivityDetails = ({
{/*

{moduleInfo.name}

@@ -175,18 +175,18 @@ const ActivityDetails = ({ {/* youtube player */}
-
+
@@ -245,7 +245,7 @@ const ActivityDetails = ({
@@ -254,16 +254,16 @@ const ActivityDetails = ({

{completionStatus} @@ -271,7 +271,7 @@ const ActivityDetails = ({

-

+

{moduleInfo.description}

@@ -280,8 +280,11 @@ const ActivityDetails = ({
{/* Buttons */}
- {/* @@ -309,16 +312,20 @@ const ActivityDetails = ({ onClick={forwardInfo} data-dismiss="modal" aria-label="Close" - className="lesson-button d-flex flex-row justify-content-center p-3 ml-5 align-items-center" style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px' }}> + className="lesson-button d-flex flex-row justify-content-center + p-3 ml-5 align-items-center" + style={{ lineHeight: '20px', + border: '1px solid #6938EF', borderRadius: '20px' }}>

Next Lesson

- + */}
-

+

Addtional Resources

@@ -340,7 +347,7 @@ const ActivityDetails = ({
Module Completed!
@@ -349,11 +356,11 @@ const ActivityDetails = ({ value={completionRate} strokeWidth={4} styles={buildStyles({ - pathColor: "#ffc700", - trailColor: "#B9BCC1", - strokeLinecap: "butt", + pathColor: '#ffc700', + trailColor: '#B9BCC1', + strokeLinecap: 'butt', rotation: 0.25, - transition: "stroke-dashoffset 0.5s ease 0s", + transition: 'stroke-dashoffset 0.5s ease 0s', })} > {userInfo != null && userInfo.profilePicture ? ( @@ -372,16 +379,19 @@ const ActivityDetails = ({ ;
-

- {completionRate}% Completed +

+ + {completionRate} + % Completed +

You just completed
-
+
{moduleInfo.name}
@@ -398,7 +408,7 @@ const ActivityDetails = ({ className="pb-4 pt-2" data-dismiss="modal" aria-label="Close" - style={{ cursor: "pointer" }} + style={{ cursor: 'pointer' }} > Cancel

diff --git a/components/learn/courseDetails/_1c1d37.code-search b/components/learn/courseDetails/_1c1d37.code-search deleted file mode 100644 index 96df14d4..00000000 --- a/components/learn/courseDetails/_1c1d37.code-search +++ /dev/null @@ -1,230 +0,0 @@ -# Query: #1c1d37 -# ContextLines: 1 - -51 results - 22 files - -global-styles.css: - 1 :root { - 2: --div-background-color: #1c1d37; - 3 } - -components/Account.jsx: - 196 style={{ - 197: background: "#1c1d37", - 198 border: "1px solid #A259FF", - - 202 marginTop: "30px", - 203: background: "#1c1d37", - 204 }} - - 283 style={{ - 284: background: "#1c1d37", - 285 border: "1px solid #A259FF", - - 289 marginTop: "30px", - 290: background: "#1c1d37", - 291 }} - -components/CreateProfile/CreateProfileInput.js: - 52 const colourStyles = { - 53: control: (styles) => ({ ...styles, backgroundColor: '#1C1D37' }), - 54 option: (styles, { - - 57 ...styles, - 58: backgroundColor: '#1C1D37', - 59 color: '#ddd', - -components/donate/DonateAmount.js: - 56
- 57:
- 58
- -components/homepage/HomepageDonate.js: - 125
- 126:
- 127
- -components/learn/SkeletonElement.js: - 8 className="row tw-pt-10" - 9: style={{ backgroundColor: "#1c1d37", height: "100vh", width: "100vw" }} - 10 > - -components/learn/courseDetails/ActivityDetails.js: - 135 className="activity-styles d-flex flex-column justify-content-start align-items-center w-100" - 136: style={{ backgroundColor: '#1C1D37' }} - 137 > - -components/learn/courseDetails/coursesDetails.css: - 7 .course-sidebar { - 8: background-color: var(--div-background-color); - 9 color: #fff; - - 83 margin-bottom: 2rem; - 84: background: #1c1d37; - 85 } - - 167 .course-weeks { - 168: background: #1C1D37; - 169 box-shadow: inset -7px -7px 24px rgba(255, 255, 255, 0.04), - - 186 .modules-details { - 187: background-color: #1c1d37; - 188 border: 1px solid #a259ff; - -components/settings/ProfileFourthStep.js: - 140 border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent', - 141: background: '#1C1D37', - 142 borderRadius: '8px', - - 147 ...styles[':active'], - 148: background: '#1C1D37', - 149 }, - - 159 // borderBottom: '1px dotted pink', - 160: background: '#1C1D37', - 161 padding: 5, - - 518 components={{ DropdownIndicator }} - 519: menuColor="#1C1D37" - 520 isClearable={false} - -components/settings/SettingSetup.js: - 33 border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent', - 34: background: '#1C1D37', - 35 borderRadius: '8px', - - 42 ...styles[':active'], - 43: background: '#1C1D37', - 44 }, - - 54 // borderBottom: '1px dotted pink', - 55: background: '#1C1D37', - 56 padding: 5, - -public/assets/css/style.css: - 7608 - 7609: background-color: #1c1d37; - 7610 color: #fff; - - 9469 .site-footer { - 9470: background-color: #1c1d37; - 9471 overflow: hidden; - -public/assets/scss/_homepage.scss: - 50 background: #fff; - 51: color: #1C1D37; - 52 } - - 107 .css-1rhbuit-multiValue{ - 108: background: #1C1D37 !important; - 109 } - -styles/global-variables.css: - 32 --secondary-low-contrast: #10111f; - 33: --secondary-high-contrast: #1c1d37; - 34 --secondary-accent: rgba(196, 196, 196, 0.08); - -styles/Careers/index.css: - 813 font-family: 'Red Hat Display'; - 814: background: #1c1d37; - 815 border: 1px solid #8040d2; - - 836 color: white; - 837: background: #1c1d37; - 838 margin-top: 8px; - - 1131 color: white; - 1132: background: #1c1d37; - 1133 } - - 1184 .jobsMain-search { - 1185: background-color: #1c1d37; - 1186 padding-top: 20px; - - 1349 .jobs-main-container-single { - 1350: background: #1c1d37; - 1351 box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25); - - 1637 .job-stub { - 1638: background: #1c1d37; - 1639 box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25); - - 1642 cursor: pointer; - 1643: border: 3px solid #1c1d37; - 1644 margin: 20px 0; - - 2137 .jobs-main-container-single { - 2138: background: #1c1d37; - 2139 } - -styles/DashboardCSS/dashboard.scss: - 100 .component-mobile-button{ - 101: background: #1C1D37 ; - 102 margin-bottom: 2%; - - 146 border-radius: 5px; - 147: background: #1C1D37; - 148 padding: 12px 20px; - - 262 .overview-career-all-image{ - 263: background: #1C1D37; - 264 } - - 552 .dashboard-inner-bg{ - 553: background: #1C1D37; - 554 border-radius: 20px !important; - -styles/ProfileCSS/profile.css: - 517 .profile-two-generate-avatar-popup { - 518: background: #1c1d37; - 519 color: #fff; - - 559 margin: 0; - 560: background-color: #1c1d37; - 561 } - -styles/settings/settingBodyNotificationsNotifications.module.css: - 51 .checkInput div i{ - 52: color: #1C1D37; - 53 display: none; - -styles/settings/settingBodyOverview.module.css: - 53 .fiCompletion .progress svg circle { - 54: fill: #1C1D37; - 55 stroke: #6938EF; - - 564 border-radius: 50%; - 565: background: #1C1D37; - 566 font-size: 20px; - - 595 flex-direction: column; - 596: background: #1C1D37; - 597 border: 1px solid #6938EF; - -styles/settings/settingBodySecurityLogin.module.css: - 183 .checkInput div i{ - 184: color: #1C1D37; - 185 display: none; - -styles/settings/settingBodySecurityManagementModal.module.css: - 15 color: rgb(255, 255, 255); - 16: background-color: #1C1D37; - 17 border-radius: 1vw; - -styles/settings/settingSetup.module.scss: - 163 background: #fff; - 164: color: #1C1D37; - 165 } - -styles/settings/settingsLayout.module.scss: - 40 .settingsNavigation > div{ - 41: background: #1C1D37; - 42 border: 1px solid #6938EF - - 213 /* width: 66%; */ - 214: background: #1C1D37; - 215 border: 1px solid #6938EF - - 352 border-radius: 50%; - 353: background: #1C1D37; - 354 font-size: 20px; diff --git a/components/settings/ProfileFourthStep.js b/components/settings/ProfileFourthStep.js index 9aab9d75..9a0db98f 100644 --- a/components/settings/ProfileFourthStep.js +++ b/components/settings/ProfileFourthStep.js @@ -1,13 +1,13 @@ -import React, { useState, useContext, useEffect } from "react"; -import Select from "react-select"; -import { useRouter } from "next/router"; -import styles from "../../styles/settings/settingSetup.module.scss"; -import { GlobalContext } from "../../contexts/provider"; -import updateProfileJSON from "../../contexts/actions/profile/updateProfileJSON"; +import React, { useState, useContext, useEffect } from 'react'; +import Select from 'react-select'; +import { useRouter } from 'next/router'; +import styles from '../../styles/settings/settingSetup.module.scss'; +import { GlobalContext } from '../../contexts/provider'; +import updateProfileJSON from '../../contexts/actions/profile/updateProfileJSON'; const DropdownIndicator = () => ( link @@ -22,9 +22,9 @@ const ProfileFourthStep = ({ data, step, setData }) => { const [githubLink, setGithubLink] = useState(data?.GithubLink); const [dribbleLink, setDribbleLink] = useState(data?.DribbleLink); // website - const [link, setLink] = useState(""); + const [link, setLink] = useState(''); // new Link - const [newLink, setNewLink] = useState(""); + const [newLink, setNewLink] = useState(''); const [addActive, setAddActive] = useState(false); const [edit, setEdit] = useState({ @@ -38,13 +38,13 @@ const ProfileFourthStep = ({ data, step, setData }) => { }); const [show, setShow] = useState(true); const [missingLinks, setMissingLinks] = useState([ - { label: facebookLink ? "" : "Facebook", value: "facebook" }, - { label: figmaLink ? "" : "Figma", value: "figma" }, - { label: clickupLink ? "" : "Click up", value: "clickup" }, - { label: linkedinLink ? "" : "LinkedIn", value: "linkedin" }, - { label: githubLink ? "" : "Github", value: "github" }, - { label: dribbleLink ? "" : "Dribble", value: "dribble" }, - { label: googleLink ? "" : "Google", value: "google" }, + { label: facebookLink ? '' : 'Facebook', value: 'facebook' }, + { label: figmaLink ? '' : 'Figma', value: 'figma' }, + { label: clickupLink ? '' : 'Click up', value: 'clickup' }, + { label: linkedinLink ? '' : 'LinkedIn', value: 'linkedin' }, + { label: githubLink ? '' : 'Github', value: 'github' }, + { label: dribbleLink ? '' : 'Dribble', value: 'dribble' }, + { label: googleLink ? '' : 'Google', value: 'google' }, ]); // const [update, setUpdate] = useState(false); @@ -78,7 +78,7 @@ const ProfileFourthStep = ({ data, step, setData }) => { // submit data const updatedUser = updateProfileJSON( data._id, - JSON.stringify(inputStates) + JSON.stringify(inputStates), )(profileDispatch); updatedUser.then((res) => setData(res)); const slug = data?.userName; @@ -89,98 +89,98 @@ const ProfileFourthStep = ({ data, step, setData }) => { // Add new Link const addHandler = () => { switch (link.value) { - case "google": + case 'google': setGoogleLink(newLink); break; - case "facebook": + case 'facebook': setFacebookLink(newLink); break; - case "linkedin": + case 'linkedin': setLinkedinLink(newLink); break; - case "github": + case 'github': setGithubLink(newLink); break; - case "figma": + case 'figma': setFigmaLink(newLink); break; - case "dribble": + case 'dribble': setDribbleLink(newLink); break; - case "clickup": + case 'clickup': setClickupLink(newLink); break; default: break; } const updatedLinks = missingLinks.filter( - (item) => item.value !== link.value + (item) => item.value !== link.value, ); setMissingLinks(updatedLinks); if ( - facebookLink && - linkedinLink && - dribbleLink && - figmaLink && - clickupLink && - githubLink && - googleLink + facebookLink + && linkedinLink + && dribbleLink + && figmaLink + && clickupLink + && githubLink + && googleLink ) { setShow(false); } - setLink(""); - setNewLink(""); + setLink(''); + setNewLink(''); }; // // Add link Dropdown options const customStyles = { option: (provided, state) => ({ ...provided, // borderBottom: '1px dotted pink', - color: "white", + color: 'white', border: state.isSelected - ? "2px solid #6938EF" + ? '2px solid #6938EF' : state.isFocused - ? "2px solid #6938EF" - : "2px solid transparent", - background: " var(--div-background-color);", - borderRadius: "8px", + ? '2px solid #6938EF' + : '2px solid transparent', + background: ' var(--div-background-color);', + borderRadius: '8px', padding: 20, - width: "100%", - cursor: "pointer", - ":active": { - ...styles[":active"], - background: " var(--div-background-color);", + width: '100%', + cursor: 'pointer', + ':active': { + ...styles[':active'], + background: ' var(--div-background-color);', }, }), control: () => ({ // none of react-select's styles are passed to // width: , - display: "flex", - height: "100%", + display: 'flex', + height: '100%', }), menu: (provided) => ({ ...provided, // borderBottom: '1px dotted pink', - background: " var(--div-background-color);", + background: ' var(--div-background-color);', padding: 5, - border: "1px solid #6938EF", + border: '1px solid #6938EF', }), container: (provided) => ({ ...provided, - cursor: "pointer", + cursor: 'pointer', }), placeholder: (provided) => ({ ...provided, - color: "#fff", + color: '#fff', }), indicatorSeparator: (provided) => ({ ...provided, - display: "none", + display: 'none', }), singleValue: (provided) => { const opacity = 1; - const color = "#fff"; - const transition = "opacity 300ms"; + const color = '#fff'; + const transition = 'opacity 300ms'; return { ...provided, @@ -192,7 +192,7 @@ const ProfileFourthStep = ({ data, step, setData }) => { }; // update the data upon submitting useEffect(() => { - const userInfo = JSON.parse(localStorage.getItem("userInfo")).user; + const userInfo = JSON.parse(localStorage.getItem('userInfo')).user; setData(userInfo); }, [step]); @@ -205,7 +205,7 @@ const ProfileFourthStep = ({ data, step, setData }) => {
- {" "} + {' '}
{ edit - setEdit({ - googleLink: false, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: false, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )} {!edit.googleLink && ( edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )}
)} - {(facebookLink || facebookLink === "") && ( + {(facebookLink || facebookLink === '') && (
- {" "} + {' '}
{ edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: false, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: false, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )} {!edit.facebookLink && ( edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )}
)} - {(linkedinLink || linkedinLink === "") && ( + {(linkedinLink || linkedinLink === '') && (
@@ -317,40 +309,36 @@ const ProfileFourthStep = ({ data, step, setData }) => { edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: false, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: false, + githubLink: true, + dribbleLink: true, + })} /> )} {!edit.linkedinLink && ( edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )}
)} - {(githubLink || githubLink === "") && ( + {(githubLink || githubLink === '') && (
@@ -366,40 +354,36 @@ const ProfileFourthStep = ({ data, step, setData }) => { edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: false, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: false, + dribbleLink: true, + })} /> )} {!edit.githubLink && ( edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )}
)} - {(figmaLink || figmaLink === "") && ( + {(figmaLink || figmaLink === '') && (
@@ -415,40 +399,36 @@ const ProfileFourthStep = ({ data, step, setData }) => { edit - setEdit({ - googleLink: true, - figmaLink: false, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: false, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )} {!edit.figmaLink && ( edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )}
)} - {(dribbleLink || dribbleLink === "") && ( + {(dribbleLink || dribbleLink === '') && (
@@ -464,46 +444,42 @@ const ProfileFourthStep = ({ data, step, setData }) => { edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: false, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: false, + })} /> )} {!edit.dribbleLink && ( edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )}
)} - {(clickupLink || clickupLink === "") && ( + {(clickupLink || clickupLink === '') && (
clickup-icon
@@ -517,34 +493,30 @@ const ProfileFourthStep = ({ data, step, setData }) => { edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: false, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: false, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )} {!edit.clickupLink && ( edit - setEdit({ - googleLink: true, - figmaLink: true, - clickupLink: true, - facebookLink: true, - linkedinLink: true, - githubLink: true, - dribbleLink: true, - }) - } + onClick={() => setEdit({ + googleLink: true, + figmaLink: true, + clickupLink: true, + facebookLink: true, + linkedinLink: true, + githubLink: true, + dribbleLink: true, + })} /> )}
@@ -572,7 +544,7 @@ const ProfileFourthStep = ({ data, step, setData }) => {
@@ -591,7 +563,7 @@ const ProfileFourthStep = ({ data, step, setData }) => {