From b527791926b43f6fa8ecc728923c6be411724b46 Mon Sep 17 00:00:00 2001 From: Ayushmaanagarwal1121 Date: Mon, 1 Jul 2024 12:14:21 +0530 Subject: [PATCH 1/6] Enhacned the Signup form --- src/pages/SignIn/index.js | 80 +++++++++++++++++-------------- src/pages/SignIn/style.css | 97 ++++++++++++++++++++++---------------- src/pages/SignUp/index.js | 35 ++++++++++++-- 3 files changed, 131 insertions(+), 81 deletions(-) diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js index eebec38..1d9ebd9 100644 --- a/src/pages/SignIn/index.js +++ b/src/pages/SignIn/index.js @@ -22,6 +22,7 @@ import useLoggedInUserEmail from '../../Hooks/useLoggedInUserEmail'; import { useDispatch } from 'react-redux'; import { logIn } from '../../Redux/auth-slice'; import { toast } from 'react-toastify'; +import { Border } from 'react-bootstrap-icons'; const auth = getAuth(app); const googleProvider = new GoogleAuthProvider(); @@ -169,13 +170,13 @@ const SignIn = () => {
  • Home
    • -
  • Sign In
    • +
  • Sign In
    • -
    -
    +
    +
    theme.zIndex.drawer + 1 }} open={showLoader} @@ -184,8 +185,8 @@ const SignIn = () => { -

    Sign In

    -
    +

    Sign In

    +
    { value={formFields.email} autoComplete="email" error={inputErrors.email} + sx={{ + '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{ + fontSize:"1.5rem " + } + ,}} /> {inputErrors.email && ( { )}
    -
    +
    { value={formFields.password} autoComplete="current-password" error={inputErrors.password} + sx={{ + '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{ + fontSize:"1.5rem " + } + ,}} />
    )} -
    +
    -
    -
    - -
    -
    -

    OR

    - -
    +
    + +
    -

    - Don't have an account?{' '} - - Sign Up - -

    +
    +

    OR

    +
    + +

    + Don't have an account?{' '} + + Sign Up + +

    @@ -299,4 +309,4 @@ const SignIn = () => { ); }; -export default SignIn; +export default SignIn; \ No newline at end of file diff --git a/src/pages/SignIn/style.css b/src/pages/SignIn/style.css index 9a5bfc9..77d6638 100644 --- a/src/pages/SignIn/style.css +++ b/src/pages/SignIn/style.css @@ -1,39 +1,53 @@ + * { box-sizing: border-box; } - .loginWrapper { padding: 75px 0px; background: #f1f1f1; - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; + height: auto; +} +.btn :hover{ + color: white ; } - .loginWrapper .card { - max-width: 650px; - width: 100%; + width: 650px; margin: auto; padding: 40px; border: 0px !important; + height: auto; } - .loginWrapper .card h3 { font-weight: 500; font-size: 35px; } - .loginWrapper .card input { height: 40px !important; font-size: 18px !important; color: #000 !important; } - .loginWrapper .card fieldset { border-radius: 10px !important; } - +form{ + height: auto !important; +} +.form-group span{ + font-size: 1rem !important; +} +.loginWrapper .card button{ + padding-left: 0px !important; +} +#email{ + font-size: xx-large; +} +.h-size{ + font-size: 4rem !important; + color: #3bb77e; +} +.card{ + border-radius: 25px !important; +} .loginWrapper .card .MuiFormLabel-root { line-height: 43px !important; color: #000 !important; @@ -51,7 +65,6 @@ color: #ccc !important; border-radius: 100% !important; } - .loginWrapper .card .icon svg { color: #000 !important; opacity: 0.8; @@ -60,51 +73,53 @@ .loginWrapper .card button { padding: 15px 25px !important; } - -.signInOr { - text-align: center; - margin: 2rem 0; -} - .signInOr button { padding: 15px 25px !important; color: #000 !important; font-size: 18px !important; } - +.signInOr button:hover{ + color: white !important; +} .signInOr button img { width: 40px; margin-right: 15px; + } -.height-fix { - height: auto !important; +.loginWrapper{ + height: 1000px; } .formLoader { position: absolute !important; background: rgba(255, 255, 255, 0.5) !important; } -@media (max-width: 768px) { - .loginWrapper .card { - padding: 20px; - } - - .loginWrapper .card .icon { - top: 10px; - right: 10px; - min-width: 40px !important; - height: 40px !important; - width: 40px !important; +@media (max-width: 586px) { + .loginWrapper { + padding: 75px 0px; + background: #f1f1f1; + height: auto; } - - .loginWrapper .card .icon svg { - width: 24px; - height: 24px; + .loginWrapper .card { + width: 650px; + margin: auto; + height: auto; + padding: 40px; + border: 0px !important; + height: auto; } } - -@media (max-width: 576px) { - .loginWrapper .card { - padding: 20px; +.animator{ + animation: animate forwards 1s !important; + +} +@keyframes animate { + from{ + opacity: 0; + position: relative; + top: 200px; + }to{ + top: 0px; + opacity: 1; } } diff --git a/src/pages/SignUp/index.js b/src/pages/SignUp/index.js index 462f6c0..304eae0 100644 --- a/src/pages/SignUp/index.js +++ b/src/pages/SignUp/index.js @@ -1,3 +1,4 @@ + import React, { useState, useEffect } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { @@ -317,7 +318,7 @@ const SignUp = () => {
    -
    +
    theme.zIndex.drawer + 1 }} open={showLoader} @@ -326,8 +327,8 @@ const SignUp = () => { -

    SignUp

    -
    +

    SignUp

    +
    { placeholder="Email" onChange={onChangeField} value={formFields.email} + sx={{ + '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{ + fontSize:"1.5rem " + } + ,}} autoComplete="email" /> {inputErrors.email && ( @@ -359,6 +365,11 @@ const SignUp = () => { onChange={onChangeField} value={formFields.password} autoComplete="new-password" + sx={{ + '.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input::placeholder':{ + fontSize:"1.5rem " + } + ,}} /> {inputErrors.otp && ( {inputErrors.otp} @@ -478,7 +503,7 @@ const SignUp = () => {
    -

    +

    Already have an account? Sign In From 81c3ee762812db1fa4995d3113ec189408e13eb9 Mon Sep 17 00:00:00 2001 From: Dhairya Gothi Date: Mon, 1 Jul 2024 13:41:41 +0530 Subject: [PATCH 2/6] Fixeed text colour in mobile view --- src/components/header/nav/nav.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/components/header/nav/nav.css b/src/components/header/nav/nav.css index 5ef6d46..930fe4e 100644 --- a/src/components/header/nav/nav.css +++ b/src/components/header/nav/nav.css @@ -284,3 +284,22 @@ nav .all_menu li { font-weight: bold; color: #191717; } + +@media (max-width:768px) { + .dropdown_menu ul li button a { + color: black; + + } + .nav nav .dropdown_menu li button a { + color: black; + + } + .dropdown_menu ul li button a:hover { + color: #3bb77e; + + } + .nav nav .dropdown_menu li button a:hover { + color: #3bb77e !important; + + } +} \ No newline at end of file From 6b9ab5577014a211365bf3f04094dc4d85cee547 Mon Sep 17 00:00:00 2001 From: Dhairya Gothi Date: Mon, 1 Jul 2024 17:05:16 +0530 Subject: [PATCH 3/6] Update nav.css --- src/components/header/nav/nav.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/header/nav/nav.css b/src/components/header/nav/nav.css index 930fe4e..483f9e9 100644 --- a/src/components/header/nav/nav.css +++ b/src/components/header/nav/nav.css @@ -287,19 +287,27 @@ nav .all_menu li { @media (max-width:768px) { .dropdown_menu ul li button a { - color: black; + color: white; } .nav nav .dropdown_menu li button a { - color: black; + color: white; } .dropdown_menu ul li button a:hover { color: #3bb77e; } - .nav nav .dropdown_menu li button a:hover { - color: #3bb77e !important; - + + .part2 ul li button:hover a { + color: white !important; + } + .nav nav .dropdown_menu.open{ + backdrop-filter: blur(14px) saturate(135%); + -webkit-backdrop-filter: blur(14px) saturate(135%); + background-color: rgba(59, 183, 126, 0.49); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.125); + } } \ No newline at end of file From a06b4f70e0f701aa6b0c689a6257258e83bc8fc2 Mon Sep 17 00:00:00 2001 From: Dhairya Gothi Date: Mon, 1 Jul 2024 17:08:41 +0530 Subject: [PATCH 4/6] Update nav.css --- src/components/header/nav/nav.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/header/nav/nav.css b/src/components/header/nav/nav.css index 483f9e9..850639c 100644 --- a/src/components/header/nav/nav.css +++ b/src/components/header/nav/nav.css @@ -298,7 +298,9 @@ nav .all_menu li { color: #3bb77e; } - + .megaMenu .col ul li a { + color: white; + } .part2 ul li button:hover a { color: white !important; } From 67f98f520de367f38e9eaf6bfa2ba49a0d13bb30 Mon Sep 17 00:00:00 2001 From: MuraliDharan7 Date: Mon, 1 Jul 2024 23:38:04 +0530 Subject: [PATCH 5/6] moved email section --- src/components/newsletter/style.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/newsletter/style.css b/src/components/newsletter/style.css index 99995b4..f0bd124 100644 --- a/src/components/newsletter/style.css +++ b/src/components/newsletter/style.css @@ -1,17 +1,18 @@ .newsLetterBanner { - width: 80%; /* Reduced width to avoid overlap */ - max-width: 600px; /* Ensures it doesn't get too wide on large screens */ - height: 80px; /* Relative to viewport height for better responsiveness */ + width: 80%; + max-width: 600px; + height: 80px; position: absolute; - bottom: 35%; /* Adjust as needed based on design */ - left: 8%; /* Adjusted to avoid overlapping with neighboring divs */ + bottom: 25%; + left: 8%; z-index: 10; - display: flex; /* Use flexbox for alignment */ - align-items: center; /* Center items vertically */ + display: flex; + align-items: center; box-sizing: border-box; margin: 20px; } + .newsLetterBanner input { width: 100%; height: 100%; From 2b85db82fb1a709f0d44e745498b18cdb6851c64 Mon Sep 17 00:00:00 2001 From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com> Date: Tue, 2 Jul 2024 00:53:49 +0530 Subject: [PATCH 6/6] updated profile page ui --- src/components/AccountDetails/Account.css | 148 ++++++++------ src/components/AccountDetails/Account.js | 239 +++++++++++----------- 2 files changed, 207 insertions(+), 180 deletions(-) diff --git a/src/components/AccountDetails/Account.css b/src/components/AccountDetails/Account.css index cb8d811..33e2c25 100644 --- a/src/components/AccountDetails/Account.css +++ b/src/components/AccountDetails/Account.css @@ -1,88 +1,114 @@ .cardwidth { - width: 80%; - max-width: 600px; + width: 75%; + height: auto; } -.card-header { - background-color: #f8f9fa; -} - -.card-body { - padding: 20px; -} - -.card-footer { - background-color: #f8f9fa; - padding: 20px; +.negmargin { + top: 0; + bottom: 0; + height: 100%; + width: 100%; } .profileImageP { - width: 100px; - height: 100px; - object-fit: cover; + height: 150px; + width: 150px; + border-radius: 50%; + align-items: center; + top: 18px; + left: -15px; + position: absolute; } - -.header-background { +.back-div { + height: 200px; + position: relative; +} +.card-header { + width: 100%; + background: #d8f1e5; + background: url('../../assets/images/bg.webp'); position: relative; } - .imgbackground { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - opacity: 0.5; + background-size: contain; + width: 100vw; + opacity: 0.5; + display: none; } - .my-profile { - color: #333; + font-size: 44px; + margin-bottom: 30px; +} +.myacc-text-body { + width: 100%; +} +.card-body { + align-items: center; + width: 100%; + height: 1050px !important; } - .myacc-label { + font-size: 24px; font-weight: bold; + color: #000; + margin-bottom: 5px; } - -.myacc-input { - border: 1px solid #ccc; - border-radius: 5px; - padding: 10px; +.form-control { + height: 70px; + font-size: 20px; +} +.myacc-form-group { + margin-bottom: 20px; +} +.myacc-save-div { width: 100%; + padding: 0; + background-color: #d8f1e5; + padding: 0px; } - .myacc-save { - background-color: #007bff; - color: #fff; - border: none; - padding: 10px 20px; + width: 100%; + background-color: #d8f1e5; + color: darkgreen; cursor: pointer; + padding: 0px; } -.myacc-save:hover { - background-color: #0056b3; +.myacc-save h5 { + color: darkgreen; + width: 100%; + background-color: #d8f1e5; + margin-bottom: 0px; + font-size: 20px; + padding: 20px 0px; + transition: ease-in-out 0.5s; +} +.myacc-save h5:hover { + color: white; + background-color: darkgreen; +} +.myacc-input:focus { + border-color: #8ac171; /* Change the border color to red */ + box-shadow: 0 0 5px #69e331; /* Optional: Add a shadow to highlight the focus */ + outline: none; +} +.myacc-back-button { + background-color: #d8f1e5; + color: black; + font-size: 25px; } - .back-but { - cursor: pointer; -} - -.back-div { - position: relative; -} - -.hidden { - display: none; + background-color: #3bb77e; + margin-bottom: 0px; + align-items: center; + border-radius: 5px; + color: white; + gap: 10px; + padding: 10px 20px; } - -@media (max-width: 768px) { - .cardwidth { - width: 100%; - } - - .md:shrink-0 { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } +@media (max-width:1024px) { +.Profile-section{ + margin-top: 150px; } +} \ No newline at end of file diff --git a/src/components/AccountDetails/Account.js b/src/components/AccountDetails/Account.js index 7649d6e..3c0b309 100644 --- a/src/components/AccountDetails/Account.js +++ b/src/components/AccountDetails/Account.js @@ -151,112 +151,112 @@ export function Account() { return ( <> -

    -

    - - BACK -

    - - -
    - - - - {userImage !== '' ? ( +
    +

    + + BACK +

    + + +
    + + + + {userImage !== '' ? ( + + ) : ( +
    - ) : ( -
    - - setFile(e.target.files[0])} - /> -
    - )} - - -
    - - - -

    - MY PROFILE -

    + setFile(e.target.files[0])} + /> +
    + )} + - - - - Name - { - setName(e.target.value); - }} - value={name} - required={true} - isInvalid={!!errors.name} - className="myacc-input" - /> - - {errors.name?.message} - - - - Email - { - setEmail(e.target.value); - }} - isInvalid={!!errors.email} - className="myacc-input" - /> - - {errors.email?.message} - - - - Address - { - setAddress(e.target.value); - }} - isInvalid={!!errors.address} - /> - - {errors.address?.message} - - - +
    + + + +

    + MY PROFILE +

    +     + + + + Name + { + setName(e.target.value); + }} + value={name} + required={true} + isInvalid={!!errors.name} + className="myacc-input" + /> + + {errors.name?.message} + + + + Email + { + setEmail(e.target.value); + }} + isInvalid={!!errors.email} + className="myacc-input" + /> + + {errors.email?.message} + + + + Address + { + setAddress(e.target.value); + }} + isInvalid={!!errors.address} + /> + + {errors.address?.message} + + + Phone Number - - -     - - - - -
    - + + + + + + +     +
    + + ); }