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/AccountSettingsNew.jsx b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx index 2c1501e8..dbbf0994 100644 --- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx +++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.jsx @@ -310,4 +310,4 @@ const AccountSettingsNew = ({ details }) => { ); }; -export default AccountSettingsNew; +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 index 6a7b616f..0c939e1d 100644 --- a/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css +++ b/Apply-For-Me-UI/src/pages/account_settings/AccountSettingsNew.module.css @@ -274,4 +274,4 @@ .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 = () => { Brazil - + { - handleSubmit(e)}> + handleSubmit(e)} + className="form"> { resendOtp()}> Resend verification code - + {/* { onClick={handletoggle} /> - + */} diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/Welcome1.css b/Apply-For-Me-UI/src/pages/authentication-pages/Welcome1.css index 74a2ca27..2b7802cd 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/Welcome1.css +++ b/Apply-For-Me-UI/src/pages/authentication-pages/Welcome1.css @@ -7,21 +7,32 @@ display: flex; flex-direction: column; align-items: center; - width: 100%; + width: 60%; + justify-content: center; + margin: 2rem auto; + background: #E9EBF8; + border-radius: 8px; + padding:3rem; +} +.form-text{ + font-weight: 500; + font-size: 32px; + color: #2E3192; + line-height: 116%; + text-align: center; } .form { - width: 60%; + width: 100%; padding: 2rem 0 0 0; box-sizing: border-box; height: fit-content; display: flex; flex-direction: column; - gap: 0.8rem; } .form .lg { width: 200px !important; - margin: 1rem auto; + margin: 0 auto; } .special { @@ -81,29 +92,59 @@ a { padding-bottom: 2rem; gap: 0.3rem; } - -@media only screen and (max-width: 1073px) { - .form { - width: 70%; +.passowrd-label { + position: relative; + width:100%; +} +.passowrd-label-input { + padding: 19px; + gap: 16px; + width: 100%; + height: 51px; + background: #FFFFFF; + border: 1px solid #BFD8F9; + border-radius: 4px; +} +.passowrd-toggler { + position: absolute; + top: 16px; + right: 20px; +} +.create-text{ + font-weight: 400; + font-size: 24px; + line-height: 150%; + letter-spacing: 0.03em; + color: #52515B; +} +@media screen and (max-width: 860px) { + .passowrd-label-input { + padding: 4.5%; + } +} +@media only screen and (min-width: 616px) and (max-width: 856px){ + .passowrd-toggler { + position: absolute; + top: 24px; + right: 20px; } } @media only screen and (max-width: 768px) { .w1bdy { padding-top: 2rem; + width: 70%; } } @media only screen and (max-width: 668px) { - .form { - width: 80%; + .w1bdy { + width: 100%; + padding:2rem; } } @media only screen and (max-width: 468px) { - .form { - width: 90%; - } - .checkl { - align-items: flex-start; + .w1bdy { + padding:1rem; } } @@ -111,7 +152,4 @@ a { .w1bdy { padding-top: 1.5rem; } - .form { - width: 100%; - } } diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/Welcome1.js b/Apply-For-Me-UI/src/pages/authentication-pages/Welcome1.js index 2bd980c7..3d0e8e05 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/Welcome1.js +++ b/Apply-For-Me-UI/src/pages/authentication-pages/Welcome1.js @@ -18,6 +18,8 @@ import jwt_decode from "jwt-decode"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import Spinner from "components/spinner/Spinner"; +import { FaEye, FaEyeSlash } from "react-icons/fa"; + const BaseUrl = "https://api.applyforme.hng.tech/api/v1/auth/sign-up"; const Welcome1 = () => { @@ -28,6 +30,10 @@ const Welcome1 = () => { const { user } = useSelector(state => state.user); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); + const [password, setPassword] = useState("password"); + const handletoggle = () => { + password === "password" ? setPassword("text") : setPassword("password"); + }; useEffect(() => { if (user && from === "/pricing") { @@ -104,8 +110,14 @@ const Welcome1 = () => { {loading && } - - + + Welcome to ApplyForMe!! + + + Create your ApplyForMe account here + handleSignup(e)}> { place="Phone Number" id="nmbr" /> - + + + { + password === "password"? + : + + } + + diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/Welcome2.css b/Apply-For-Me-UI/src/pages/authentication-pages/Welcome2.css index 9859d193..7e58234d 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/Welcome2.css +++ b/Apply-For-Me-UI/src/pages/authentication-pages/Welcome2.css @@ -11,28 +11,50 @@ display: flex; flex-direction: column; align-items: center; + width: 60%; + justify-content: center; + margin: 0rem auto; + margin-bottom: 2rem; + background: #E9EBF8; + border-radius: 8px; + padding:3rem; +} +.form-text{ + font-weight: 500; + font-size: 32px; + color: #2E3192; + line-height: 116%; + text-align: center; +} +.form { width: 100%; + padding: 2rem 0 0 0; + box-sizing: border-box; + height: fit-content; + display: flex; + flex-direction: column; } .forgot { - font-size: 0.8rem; + font-size: 1rem; font-weight: 400; color: #111416; width: 100%; display: flex; justify-content: flex-end; - margin-bottom: 4rem; + margin-bottom: 2rem; } .passowrd-label { position: relative; + width:100%; } .passowrd-label-input { - background-color: #e8f0fe; + padding: 19px; + gap: 16px; width: 100%; - height: 100%; - border: 1px solid #bdbdbd; - border-radius: 8px; - padding: 2%; - box-sizing: border-box; + height: 51px; + background: #FFFFFF; + border: 1px solid #BFD8F9; + border-radius: 4px; } .passowrd-toggler { position: absolute; @@ -51,4 +73,28 @@ right: 20px; } } +@media only screen and (max-width: 768px) { + .w2bdy { + padding-top: 2rem; + width: 70%; + } +} +@media only screen and (max-width: 668px) { + .w2bdy { + width: 100%; + padding:2rem; + } +} + +@media only screen and (max-width: 468px) { + .w2bdy { + padding:1rem; + } +} + +@media only screen and (max-width: 376px) { + .w2bdy { + padding-top: 1.5rem; + } +} diff --git a/Apply-For-Me-UI/src/pages/authentication-pages/Welcome2.js b/Apply-For-Me-UI/src/pages/authentication-pages/Welcome2.js index 2f11d0b0..4b7778b0 100644 --- a/Apply-For-Me-UI/src/pages/authentication-pages/Welcome2.js +++ b/Apply-For-Me-UI/src/pages/authentication-pages/Welcome2.js @@ -100,8 +100,14 @@ const Welcome2 = () => { {loading && } - - + + Welcome Back!! + + + Login to ApplyForMe + handleSubmit(e)}> { - - + );
+ Welcome to ApplyForMe!! +
+ Create your ApplyForMe account here +
+ Welcome Back!! +
+ Login to ApplyForMe +