diff --git a/Apply-For-Me-UI/public/index.html b/Apply-For-Me-UI/public/index.html index 86c45008..1ad66b61 100644 --- a/Apply-For-Me-UI/public/index.html +++ b/Apply-For-Me-UI/public/index.html @@ -21,7 +21,6 @@ Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. @@ -42,10 +41,8 @@ diff --git a/Apply-For-Me-UI/src/App.css b/Apply-For-Me-UI/src/App.css index ecdd0c5e..988d761a 100644 --- a/Apply-For-Me-UI/src/App.css +++ b/Apply-For-Me-UI/src/App.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap'); +/* @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap'); */ @import url('./styles/dashboard.css'); @import url('./styles/SideNav.css'); @import url('./styles/header.css'); diff --git a/Apply-For-Me-UI/src/index.css b/Apply-For-Me-UI/src/index.css index dbe57119..177f1f77 100644 --- a/Apply-For-Me-UI/src/index.css +++ b/Apply-For-Me-UI/src/index.css @@ -35,4 +35,4 @@ padding: 0; font-size: calc(16px + 0.0396vw); list-style-type: none; -} +} \ No newline at end of file diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettings.js b/Apply-For-Me-UI/src/pages/account_settings/AccountSettings.js index 3f539393..0e19346a 100644 --- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettings.js +++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettings.js @@ -1,4 +1,5 @@ -import AccountSet from "./AccountSet"; +// import AccountSet from "./AccountSet"; +import AccountSettingsNew from "./AccountSettingsNew"; import { useState, useEffect } from "react"; import Spinner from "components/spinner/Spinner"; @@ -20,11 +21,7 @@ const AccountSettings = () => { return ; } - return ( -
- -
- ); + return ; }; export default AccountSettings; diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx new file mode 100644 index 00000000..dbbf0994 --- /dev/null +++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx @@ -0,0 +1,313 @@ +import React, { useState } from "react"; +import classes from "./AccountSettingsNew.module.css"; +import { Link } from "react-router-dom"; +// import SettingsTopNav from "./SettingsTopNav"; +import LetteredAvatar from "react-lettered-avatar"; +// import { useEffect } from "react"; +import axios from "axios"; +// import TopBar from "pages/dashboard_profile/components/TopBar/TopBar"; +import { useSelector } from "react-redux"; +import { toast, ToastContainer } from "react-toastify"; + +const AccountSettingsNew = ({ details }) => { + //User Info + const { user } = useSelector(state => state.user); + + const fullName = user?.fullName; + // console.log(details); + + // const userEmail = user.sub; + // const [countryDetails, setCountryDetails] = useState([]); + + const [formField, setFormField] = useState({ + avatar: details?.avatar !== null ? details.avatar : "", + first_name: details?.firstName, + last_name: details?.lastName, + email: details?.emailAddress, + phone_number: details?.phoneNumber, + address: details?.address, + city: details?.city !== null ? details.city : "", + state: details?.state !== null ? details.state : "", + country_of_residence: + details?.countryOfResidence !== null + ? details.countryOfResidence + : 15, + nationality: details?.nationality !== null ? details.nationality : 15, + date_of_birth: details?.dateOfBirth, + current_job_title: + details?.currentJobTitle !== null ? details?.currentJobTitle : "", + username: details?.username !== null ? details.username : "", + new_password: "" + }); + + const post = { + "avatar": formField.avatar, + "first_name": formField.first_name, + "last_name": formField.last_name, + "nationality": formField.nationality, + "country_of_residence": formField.country_of_residence, + "date_of_birth": formField.date_of_birth, + "current_job_title": formField.current_job_title, + "email_address": formField.email, + "username": formField.username, + "phone_number": formField.phone_number, + "city": formField.city, + "state": formField.state, + "address": formField.address + }; + + console.log(post); + + const updateInfo = async () => { + const token = localStorage.getItem("tokenHngKey"); + try { + // eslint-disable-next-line no-unused-vars + const res = await axios.put( + `https://api.applyforme.hng.tech/api/v1/member/update`, + post, + { + headers: { + "Authorization": `Bearer ${token}` + }, + params: { "id": details.id } + } + ); + toast.success("Profile successfully updated"); + } catch (err) { + console.log("error for update", err); + toast.error(err?.response.data.message); + } + }; + + return ( +
+ +
+
+
+

General Details

+

Update your photo and personal details here

+
+ +
+
+

+ Personal Details +

+
e.preventDefault()} + className={classes.settings_form} + > +
+
+ + + setFormField({ + ...formField, + first_name: + event.target.value + }) + } + value={formField?.first_name} + type="text" + name="first_name" + id="first_name" + placeholder={details.firstName} + /> +
+
+ + + setFormField({ + ...formField, + last_name: + event.target.value + }) + } + value={formField.last_name} + type="text" + name="last_name" + id="last_name" + placeholder={details.lastName} + /> +
+
+ +
+
+ + + setFormField({ + ...formField, + email: event.target.value + }) + } + value={formField.email} + type="email" + readOnly + name="email" + id="email" + placeholder={details.email} + /> +
+ +
+ + + setFormField({ + ...formField, + phone_number: + event.target.value + }) + } + value={formField.phone_number} + type="text" + name="number" + id="number" + placeholder={details.phoneNumber} + /> +
+
+ +
+
+ + + + setFormField({ + ...formField, + new_password: + event.target.value + }) + } + value={formField.new_password} + type="password" + /> +
+ +
+
+
+ +
+

+ Your Photo +

+ +
+
+ +
+
+

+ Edit your photo +

+
+ + +
+
+
+ +
+

+ Plan details +

+
+
+ Basic Plan +
+ + change plan + +
+
+
+
+ +
+

+ Membership and Billing +

+
+
+
+
+ +

+ ********67789 +

+
+

+ To remove this card add another card + first +

+
+
+

Next billing Date

+

+ Your next billing date is January 31, + 2023 +

+
+
+ + + + edit billing details + +
+
+
+
+
+ ); +}; + +export default AccountSettingsNew; \ No newline at end of file diff --git a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css new file mode 100644 index 00000000..0c939e1d --- /dev/null +++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css @@ -0,0 +1,277 @@ +.account_settings_container { + width: 100%; + background: #f3f3fb; +} + +.body_container { + width: 85%; + min-width: clamp(50rem, 10vw, 59rem); +} + +.body_container .body_content { + display: flex; + flex-direction: column; + margin-top: 3rem; + padding-left: 12.5rem; +} + +.general_details > h2 { + color: #171b1d; + font-size: clamp(1.25rem, 8vw, 2rem); + margin-bottom: 0.25rem; +} + +.general_details > p { + color: #52515b; + margin-bottom: 1rem; +} + +.details_settings { + display: flex; + column-gap: 3rem; + width: 100%; +} + +.details_setting, +.photo_and_plan_settings, +.membership_plan_container { + background: #ffffff; + border: 1px solid #cccccc; + border-radius: 0.5rem; +} + +.details_setting { + width: 60%; +} + +.photo_and_plan_settings { + width: 40%; +} + +.settings_heading { + border-bottom: 1px solid #cccccc; + color: #171b1d; + font-size: clamp(1rem, 9vw, 1.25rem); + font-weight: 500; + width: 100%; +} + +.settings_form, +.settings_heading, +.edit_photo, +.plan_details_container, +.edit_plan_container { + padding: 1rem; +} + +.settings_form { + display: flex; + flex-direction: column; +} + +.form_row { + display: flex; +} + +.form_control > label { + color: #171b1d; + font-size: 1rem; + font-weight: 500; + margin: 0 0 0.5rem; +} + +.form_control > input { + border: 1px solid #999999; + border-radius: 0.4rem; + color: #999999; + font-size: 0.9rem; + padding: 0.4rem 0.7rem; + margin-bottom: 1rem; +} + +.form_control:nth-child(2n), +.update_personal_details { + margin-left: 2rem; +} + +.form_control { + display: flex; + flex-direction: column; +} + +.account_settings_container button { + background-color: transparent; + border: transparent; +} + +.account_settings_container button:focus, +.form_control > input { + outline: none; +} + +.update_personal_details { + color: #202065; + font-weight: 500; + margin-top: 0.6rem; +} + +.edit_photo { + align-items: center; + border-bottom: 1px solid #cccccc; + display: flex; +} + +.edit_photo_buttons { + display: flex; + flex-direction: column; +} + +.edit_buttons { + padding: 0 1rem; +} + +.edit_buttons > button { + margin-right: 1rem; +} + +.edit_button_red { + color: #8d3434; +} + +.edit_button_blue { + color: #202065; +} + +.plan_details { + color: #737373; + font-size: 0.8rem; +} + +.edit_plan { + display: flex; +} + +.current_plan { + color: #171b1d; + font-size: 1.25rem; + text-transform: uppercase; +} + +.change_plan { + margin-left: 2rem; +} + +.settings_heading_without_border { + border: transparent; + padding-bottom: 0.8rem; +} + +.settings_heading_without_padding { + padding: 0; +} + +.membership_plan_container { + margin: 3rem 0 5rem; +} + +.plan_details_container { + align-items: flex-start; + display: flex; + justify-content: space-between; +} + +.plan_details { + display: flex; + flex-direction: column; +} + +.account_settings_container .preferred_card { + border: 1px solid #000000; + border-radius: 0.25rem; + padding: 0.35rem; + text-transform: uppercase; +} + +.card_details { + align-items: center; + display: flex; + margin-bottom: 0.5rem; +} + +.card_number { + margin-left: 1.5rem; +} + +.card_number, +.card_number > span { + font-size: 1.5rem; + color: #171b1d; +} + +.next_billing_date { + margin-top: 1rem; +} + +@media screen and (max-width: 1238px) { + .body_container { + width: 97%; + } + + .details_settings { + column-gap: 1.5rem; + } + + .details_setting { + width: 70%; + } + + .photo_and_plan_settings { + width: 30%; + } +} + +@media screen and (max-width: 999px) { + .body_container { + width: 95%; + min-width: auto; + } + + .details_settings { + flex-direction: column; + row-gap: 2.5rem; + } + + .details_setting, + .photo_and_plan_settings { + width: 100%; + } + + .plan_details_container { + flex-direction: column; + row-gap: 1rem; + } +} + +@media screen and (max-width: 768px) { + .form_row { + flex-direction: column; + } + + .form_control:nth-child(2n) { + margin: 0; + } +} + +@media screen and (max-width: 480px) { + .body_container .body_content { + padding: 1.5rem; + } + + .body_container { + width: 100%; + } + + .update_personal_details { + margin-left: 0; + } +} \ No newline at end of file diff --git a/Apply-For-Me-UI/src/pages/admin_dashboard/components/application_list/ApplicationList.jsx b/Apply-For-Me-UI/src/pages/admin_dashboard/components/application_list/ApplicationList.jsx index e0926da1..b4388b03 100644 --- a/Apply-For-Me-UI/src/pages/admin_dashboard/components/application_list/ApplicationList.jsx +++ b/Apply-For-Me-UI/src/pages/admin_dashboard/components/application_list/ApplicationList.jsx @@ -91,4 +91,4 @@ const ApplicationList = () => { ); }; -export default ApplicationList; +export default ApplicationList; \ No newline at end of file diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/Footer.css b/Apply-For-Me-UI/src/pages/authentication-pages/Footer.css index c47bca82..12f6a900 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/Footer.css +++ b/Apply-For-Me-UI/src/pages/authentication-pages/Footer.css @@ -40,7 +40,7 @@ background-color: #111416; } .checkl { - height: 2.3rem; + height:fit-content; } @media only screen and (max-width: 1073px) { diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/NewPass.css b/Apply-For-Me-UI/src/pages/authentication-pages/NewPass.css index 20808f96..039921b8 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/NewPass.css +++ b/Apply-For-Me-UI/src/pages/authentication-pages/NewPass.css @@ -11,23 +11,58 @@ display: flex; flex-direction: column; align-items: center; - width: 100%; + width: 60%; + justify-content: center; + margin: 0rem auto; + border-radius: 8px; + padding:0 3rem; } .nbdy .form { - padding: 5rem 0 7rem 0; + padding: 0 0 7rem 0; + width: 100%; + padding: 2rem 0 0 0; + box-sizing: border-box; + height: fit-content; + display: flex; + flex-direction: column; } .NewPass .input { + padding: 19px; + gap: 16px; width: 100%; - height: 100%; - border: 1px solid #bdbdbd; - border-radius: 8px; - padding: 2%; - box-sizing: border-box; - background-color: #e8f0fe; + margin-bottom: 0.4rem; + height: 51px; + background: #FFFFFF; + border: 1px solid #BFD8F9; + border-radius: 4px; } .newpass_form button { margin: 0 auto; - margin-top: 3.5rem; + margin-top: 1.5rem; +} +@media only screen and (max-width: 768px) { + .nbdy { + padding-top: 2rem; + width: 70%; + } +} +@media only screen and (max-width: 668px) { + .nbdy { + width: 100%; + padding:2rem; + } +} + +@media only screen and (max-width: 468px) { + .nbdy { + padding:1rem; + } +} + +@media only screen and (max-width: 376px) { + .nbdy { + padding-top: 1.5rem; + } } diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/Password.css b/Apply-For-Me-UI/src/pages/authentication-pages/Password.css index c935c217..2464b707 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/Password.css +++ b/Apply-For-Me-UI/src/pages/authentication-pages/Password.css @@ -11,10 +11,14 @@ display: flex; flex-direction: column; align-items: center; - width: 100%; + width: 60%; + justify-content: center; + margin: 0rem auto; + border-radius: 8px; + padding:3rem; } .liltxt { - font-size: 0.8rem; + font-size: 1rem; font-weight: 400; color: #111416; width: 100%; @@ -26,16 +30,40 @@ } .Password .input { + padding: 19px; + gap: 16px; width: 100%; - height: 100%; - border: 1px solid #bdbdbd; - border-radius: 8px; - padding: 2%; - box-sizing: border-box; - background-color: #e8f0fe; + height: 51px; + background: #FFFFFF; + border: 1px solid #BFD8F9; + border-radius: 4px; } .pass_form button { margin: 0 auto; - margin-top: 3.5rem; + margin-top: 1.5rem; +} +@media only screen and (max-width: 768px) { + .pbdy { + padding-top: 2rem; + width: 70%; + } } +@media only screen and (max-width: 668px) { + .pbdy { + width: 100%; + padding:2rem; + } +} + +@media only screen and (max-width: 468px) { + .pbdy { + padding:1rem; + } +} + +@media only screen and (max-width: 376px) { + .pbdy { + padding-top: 1.5rem; + } +} \ No newline at end of file diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/Registration.css b/Apply-For-Me-UI/src/pages/authentication-pages/Registration.css index 47833dd7..e88e8bd3 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/Registration.css +++ b/Apply-For-Me-UI/src/pages/authentication-pages/Registration.css @@ -17,8 +17,11 @@ display: flex; flex-direction: column; align-items: center; - width: 100%; - padding-top: 2rem; + width: 60%; + justify-content: center; + margin: 0rem auto; + border-radius: 8px; + padding:0 3rem; } .rbdy .form { padding-bottom: 5rem; @@ -27,7 +30,7 @@ width: 100%; height: 100%; border: 1px solid #bdbdbd; - border-radius: 8px; + border-radius: 4px; padding: 2%; box-sizing: border-box; -webkit-appearance: none; @@ -44,15 +47,17 @@ font-size: 0.8rem; } .select-wrapper { - height: 3rem; + height: 4rem; position: relative; font-size: 0.8rem; + width: 100%; + margin-bottom: 1rem; } - -.form .lg { - margin-top: 3rem; +.label{ + width:100%; } + @media only screen and (max-width: 1073px) { .Ref { width: 70%; @@ -68,6 +73,30 @@ width: 80%; } } +@media only screen and (max-width: 768px) { + .rbdy { + padding-top: 2rem; + width: 70%; + } +} +@media only screen and (max-width: 668px) { + .rbdy { + width: 100%; + padding:2rem; + } +} + +@media only screen and (max-width: 468px) { + .rbdy { + padding:1rem; + } +} + +@media only screen and (max-width: 376px) { + .rbdy { + padding-top: 1.5rem; + } +} @media only screen and (max-width: 568px) { .menu { @@ -100,13 +129,11 @@ } } + @media only screen and (max-width: 468px) { .form { width: 90%; } - .checkl { - align-items: flex-start; - } } @media only screen and (max-width: 376px) { diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/Registration.js b/Apply-For-Me-UI/src/pages/authentication-pages/Registration.js index 0b4717a0..b85f3bc4 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/Registration.js +++ b/Apply-For-Me-UI/src/pages/authentication-pages/Registration.js @@ -53,7 +53,7 @@ const Registration = () => { -