From ff68db3cd929033be5c6a7685f3f26f0e4010ba5 Mon Sep 17 00:00:00 2001 From: hamzat Date: Sat, 4 Feb 2023 02:22:24 +0100 Subject: [PATCH 1/3] implemented new registration view --- Apply-For-Me-UI/public/index.html | 3 - Apply-For-Me-UI/src/App.css | 2 +- Apply-For-Me-UI/src/index.css | 2 +- .../application_list/ApplicationList.jsx | 2 +- .../src/pages/authentication-pages/Footer.css | 2 +- .../pages/authentication-pages/NewPass.css | 53 ++++++++++--- .../pages/authentication-pages/Password.css | 46 +++++++++--- .../authentication-pages/Registration.css | 47 +++++++++--- .../authentication-pages/Registration.js | 2 +- .../authentication-pages/Verification.css | 62 +++++++++------- .../authentication-pages/Verification.js | 8 +- .../pages/authentication-pages/Welcome1.css | 74 ++++++++++++++----- .../pages/authentication-pages/Welcome1.js | 48 ++++++++++-- .../pages/authentication-pages/Welcome2.css | 62 ++++++++++++++-- .../pages/authentication-pages/Welcome2.js | 10 ++- .../components/Elements/Button.css | 3 +- .../components/Elements/Inputbox.css | 13 ++-- .../components/Text/Text.css | 1 + .../src/pages/landing_page/Hero.jsx | 7 +- 19 files changed, 333 insertions(+), 114 deletions(-) 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/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 = () => { -