From fcbb56062d2bb178b2a026ee72886ec4c4ae238e Mon Sep 17 00:00:00 2001 From: naheyansheikh Date: Sat, 30 Nov 2024 22:59:51 -0800 Subject: [PATCH] Login page cleanup --- frontend/src/pages/home/Home.css | 624 +++++++++++------------ frontend/src/pages/logbooks/Logbooks.css | 212 ++++---- frontend/src/pages/login/Login.css | 469 +++++++++-------- frontend/src/pages/login/Login.jsx | 274 ++++++---- 4 files changed, 847 insertions(+), 732 deletions(-) diff --git a/frontend/src/pages/home/Home.css b/frontend/src/pages/home/Home.css index 08a3e7f3..a8471381 100644 --- a/frontend/src/pages/home/Home.css +++ b/frontend/src/pages/home/Home.css @@ -1,312 +1,312 @@ - .dashboard-container { - padding: 16px; - margin-left: 65px; - max-width: 1400px; - } - - .welcome-section { - position: absolute; - left: 230px; - top: 12%; - display: flex; - align-items: center; - } - - .welcome-text { - font-weight: 300; - font-size: 25px; - color: #1E1E1E; - } - - .user-name { - font-weight: bold; - font-size: 25px; - color: #1E1E1E; - } - - .content-grid { - display: grid; - grid-template-columns: 1fr 1.2fr; - gap: 24px; - margin-top: 5%; - height: auto; - } - - .logbooks-card { - background: white; - border-radius: 30px; - padding: 24px; - height: 93%; - width: 85%; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); - } - - .get-started-card { - background: white; - border-radius: 30px; - padding: 20px 30px; - height: 50%; - width: 85%; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); - } - - .get-started-card p { - color: #3c4049; - font-weight: 400; - text-align: left; - font-size: 14px; - margin-bottom: 16px; - } - - .get-started-card h2 { - font-size: 20px; - font-weight: 600; - color:#2F3C50; - } - - .card-header { - display: flex; - justify-content: space-between; - align-items: center; - } - - .card-header h2 { - font-size: 20px; - margin-bottom: 8px; - margin-left: 30px; - color:#2F3C50; - } - - /* Button stack container */ - .button-stack { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - height: 55%; - } - - .view-more-btn { - padding: 6px 12px; - border-radius: 20px; - border: 1px solid #9AB0E1; - background: #F7FAFF; - color: #4F607E; - font-size: 15px; - font-weight: bold; - cursor: pointer; - margin-right: 30px; - } - - .progress-list { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-left: auto; - margin-right: auto; - gap: 20px; - width: 80%; - } - - .progress-item { - width: 100%; - padding: 12px; - border-radius: 8px; - cursor: pointer; - transition: background-color 0.2s ease; - background-color: transparent; /* Default transparent background */ - } - - .progress-item:hover { - background-color: #E7EDF8; - } - - .progress-info { - display: flex; - justify-content: space-between; - margin-bottom: 6px; - font-size: 15px; - } - - .progress-bar { - height: 8px; - background: #E7EDF8; - border-radius: 4px; - overflow: hidden; - } - - .progress-fill { - height: 100%; - background: #244B94; - border-radius: 4px; - } - - .progress-item:hover .progress-bar { - background: #FBFCFE; - } - - .progress-item:hover .progress-info { - color: #244B94; - } - - .logbooks-image { - width: 100%; - max-width: 280px; - margin: 30px auto; - display: block; - } - - /* Bottom section container */ - .bottom-section { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 30px; - margin-top: 30px; - width: 95%; - height: calc(500px - 280px - 24px); - } - - /* Shop Log Books card */ - .shop-books-card { - background: linear-gradient(232.43deg, #6C8BD3 9.4%, #244B94 90.17%); - border-radius: 30px; - padding: 20px 20px; - color: white; - display: flex; - justify-content: space-between; - cursor: pointer; - height: 87%; - position: relative; - overflow: hidden; /* Important for containing the gradient and images */ - transition: transform 0.2s ease; - } - - .shop-books-card h3{ - font-weight: 600; - font-size: 20px; - margin-top: 0px; - } - - .shop-books-card:hover { - transform: translateY(-2px); /* Slight lift effect on hover */ - } - - .shop-books-card::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: radial-gradient( - circle at bottom, - rgba(255, 255, 255, 0) 30%, - rgba(255, 255, 255, 0.2) 100% - ); - pointer-events: none; - } - - .shop-books-card .chevron-icon { - width: 20px; /* Reduced from 20px */ - height: 20px; - color: white; /* Adjust color as needed */ - margin-top: 4px; - } - - .shop-books-image { - position: absolute; - top: 43%; - right: 1px; - left: 1px; - width: 250px; /* Adjust size as needed */ - height: auto; - object-fit: contain; - z-index: 1; - } - - /* Recent Activity card */ - .recent-activity-card { - background: white; - border-radius: 30px; - padding: 20px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); - height: 87%; - max-height: 300px; - overflow-y: auto; - transition: transform 0.2s ease; - } - - .recent-activity-card:hover { - transform: translateY(-2px); - } - - .activity-header { - display: flex; - justify-content: space-between; - align-items: center; - } - - .activity-header .chevron-icon { - width: 20px; /* Reduced from 20px */ - height: 20px; - color: black; /* Adjust color as needed */ - margin-top: -20px; - } - - .activity-header h3 { - font-weight: 600; - font-size: 20px; - color:#2F3C50; - margin-top: 0px; - } - - .activity-list { - display: flex; - flex-direction: column; - margin-top: -10px; - } - - .activity-item { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid #e0e0e0; - } - - .activity-info { - display: flex; - gap: 5px; - color: #666; - font-size: 12px; - } - - .activity-info h2 { - font-weight: 500; - font-size: 12px; - color: #2F3C50; - opacity: 0.8; - } - - .activity-info h3 { - font-weight: 700; - font-size: 12px; - color: #2E4A8F; - margin-top: 10px; - } - - .activity-time { - margin-left: 20px; - } - - .activity-time h3 { - font-weight: 400; - font-size: 12px; - color: #A1B4DE; - } - - .time-icon { - color: #92a4cb; - width: 14px; - height: 14px; - } \ No newline at end of file +.dashboard-container { + padding: 16px; + margin-left: 65px; + max-width: 1400px; +} + +.welcome-section { + position: absolute; + left: 230px; + top: 12%; + display: flex; + align-items: center; +} + +.welcome-text { + font-weight: 300; + font-size: 25px; + color: #1E1E1E; +} + +.user-name { + font-weight: bold; + font-size: 25px; + color: #1E1E1E; +} + +.content-grid { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 24px; + margin-top: 5%; + height: auto; +} + +.logbooks-card { + background: white; + border-radius: 30px; + padding: 24px; + height: 93%; + width: 85%; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.get-started-card { + background: white; + border-radius: 30px; + padding: 20px 30px; + height: 50%; + width: 85%; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.get-started-card p { + color: #3c4049; + font-weight: 400; + text-align: left; + font-size: 14px; + margin-bottom: 16px; +} + +.get-started-card h2 { + font-size: 20px; + font-weight: 600; + color:#2F3C50; +} + +.card-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.card-header h2 { + font-size: 20px; + margin-bottom: 8px; + margin-left: 30px; + color:#2F3C50; +} + +/* Button stack container */ +.button-stack { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + height: 55%; +} + +.view-more-btn { + padding: 6px 12px; + border-radius: 20px; + border: 1px solid #9AB0E1; + background: #F7FAFF; + color: #4F607E; + font-size: 15px; + font-weight: bold; + cursor: pointer; + margin-right: 30px; +} + +.progress-list { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: auto; + margin-right: auto; + gap: 20px; + width: 80%; +} + +.progress-item { + width: 100%; + padding: 12px; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.2s ease; + background-color: transparent; /* Default transparent background */ +} + +.progress-item:hover { + background-color: #E7EDF8; +} + +.progress-info { + display: flex; + justify-content: space-between; + margin-bottom: 6px; + font-size: 15px; +} + +.progress-bar { + height: 8px; + background: #E7EDF8; + border-radius: 4px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + background: #244B94; + border-radius: 4px; +} + +.progress-item:hover .progress-bar { + background: #FBFCFE; +} + +.progress-item:hover .progress-info { + color: #244B94; +} + +.logbooks-image { + width: 100%; + max-width: 280px; + margin: 30px auto; + display: block; +} + +/* Bottom section container */ +.bottom-section { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin-top: 30px; + width: 95%; + height: calc(500px - 280px - 24px); +} + +/* Shop Log Books card */ +.shop-books-card { + background: linear-gradient(232.43deg, #6C8BD3 9.4%, #244B94 90.17%); + border-radius: 30px; + padding: 20px 20px; + color: white; + display: flex; + justify-content: space-between; + cursor: pointer; + height: 87%; + position: relative; + overflow: hidden; /* Important for containing the gradient and images */ + transition: transform 0.2s ease; +} + +.shop-books-card h3{ + font-weight: 600; + font-size: 20px; + margin-top: 0px; +} + +.shop-books-card:hover { + transform: translateY(-2px); /* Slight lift effect on hover */ +} + +.shop-books-card::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient( + circle at bottom, + rgba(255, 255, 255, 0) 30%, + rgba(255, 255, 255, 0.2) 100% + ); + pointer-events: none; +} + +.shop-books-card .chevron-icon { + width: 20px; /* Reduced from 20px */ + height: 20px; + color: white; /* Adjust color as needed */ + margin-top: 4px; +} + +.shop-books-image { + position: absolute; + top: 43%; + right: 1px; + left: 1px; + width: 250px; /* Adjust size as needed */ + height: auto; + object-fit: contain; + z-index: 1; +} + +/* Recent Activity card */ +.recent-activity-card { + background: white; + border-radius: 30px; + padding: 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + height: 87%; + max-height: 300px; + overflow-y: auto; + transition: transform 0.2s ease; +} + +.recent-activity-card:hover { + transform: translateY(-2px); +} + +.activity-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.activity-header .chevron-icon { + width: 20px; /* Reduced from 20px */ + height: 20px; + color: black; /* Adjust color as needed */ + margin-top: -20px; +} + +.activity-header h3 { + font-weight: 600; + font-size: 20px; + color:#2F3C50; + margin-top: 0px; +} + +.activity-list { + display: flex; + flex-direction: column; + margin-top: -10px; +} + +.activity-item { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #e0e0e0; +} + +.activity-info { + display: flex; + gap: 5px; + color: #666; + font-size: 12px; +} + +.activity-info h2 { + font-weight: 500; + font-size: 12px; + color: #2F3C50; + opacity: 0.8; +} + +.activity-info h3 { + font-weight: 700; + font-size: 12px; + color: #2E4A8F; + margin-top: 10px; +} + +.activity-time { + margin-left: 20px; +} + +.activity-time h3 { + font-weight: 400; + font-size: 12px; + color: #A1B4DE; +} + +.time-icon { + color: #92a4cb; + width: 14px; + height: 14px; +} \ No newline at end of file diff --git a/frontend/src/pages/logbooks/Logbooks.css b/frontend/src/pages/logbooks/Logbooks.css index d3969f2f..3bdcf37a 100644 --- a/frontend/src/pages/logbooks/Logbooks.css +++ b/frontend/src/pages/logbooks/Logbooks.css @@ -1,177 +1,177 @@ .logbooks-container { - padding: 16px; - margin-left: 65px; - width: 90%; + padding: 16px; + margin-left: 65px; + width: 90%; } .logbooks-grid { - margin-top: 10%; - height: auto; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 100px 100px; + margin-top: 10%; + height: auto; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 100px 100px; } .logbook-card { - background: #EBF2FD; /* CDD8F0 with full opacity */ - backdrop-filter: blur(20px); - box-shadow: 0px 16px 60px 0px #CDD8F040, /* Outer shadow */ - 0px 0px 60px 0px #FFFFFF80 inset; - transition: transform 0.2s; - cursor: pointer; - border-radius: 30px; - max-width: 300px; - padding: 20px; - height: 300px; /* Increased overall height */ - position: relative; - } - - .logbook-card.congenital { - background: #FBF4FF; + background: #EBF2FD; /* CDD8F0 with full opacity */ + backdrop-filter: blur(20px); + box-shadow: 0px 16px 60px 0px #CDD8F040, /* Outer shadow */ + 0px 0px 60px 0px #FFFFFF80 inset; + transition: transform 0.2s; + cursor: pointer; + border-radius: 30px; + max-width: 300px; + padding: 20px; + height: 300px; /* Increased overall height */ + position: relative; + } + + .logbook-card.congenital { + background: #FBF4FF; } .logbook-card.ophthalmology { - background: #EBFBFE; + background: #EBFBFE; } .logbook-card.obstetrics { - background: #F0EDF3; + background: #F0EDF3; } .logbook-card.general-surgery { - background: #E8FDFF; + background: #E8FDFF; } .logbook-card:hover .book-cover{ - transform: translateY(-12px); + transform: translateY(-12px); } .book-cover { - position: relative; - height: 100%; - overflow: hidden; - transition: transform 0.2s; + position: relative; + height: 100%; + overflow: hidden; + transition: transform 0.2s; } .log-rectangle { - width: 170%; - height: 240%; - padding: 13px; - object-fit: cover; - position: absolute; - bottom: 0; - right: -57%; + width: 170%; + height: 240%; + padding: 13px; + object-fit: cover; + position: absolute; + bottom: 0; + right: -57%; } .book-cover-image { - width: 60%; - margin-top: 10%; - margin-left: 20%; - object-fit: cover; - clip-path: inset(0 0 30% 0); + width: 60%; + margin-top: 10%; + margin-left: 20%; + object-fit: cover; + clip-path: inset(0 0 30% 0); } .book-cover-image.obstetrics { - width: 30%; - margin-top: 90%; - object-fit: cover; - clip-path: inset(0 0 30% 0); + width: 30%; + margin-top: 90%; + object-fit: cover; + clip-path: inset(0 0 30% 0); } .details-container { - position: relative; - height: 140px; + position: relative; + height: 140px; } .book-details { - position: relative; - align-items: start; - padding: 10px; - bottom: 100%; - z-index: 2; + position: relative; + align-items: start; + padding: 10px; + bottom: 100%; + z-index: 2; } .book-title { - font-size: 22px; - font-weight: bold; - color: #1E1E1E; - margin-bottom: 12px; - text-align: left; + font-size: 22px; + font-weight: bold; + color: #1E1E1E; + margin-bottom: 12px; + text-align: left; } .type-label { - font-size: 14px; - color: #333333; - font-weight: 500; - text-align: left; - display: flex; - align-items: center; - gap: 4px; + font-size: 14px; + color: #333333; + font-weight: 500; + text-align: left; + display: flex; + align-items: center; + gap: 4px; } .type-value { - color: #244B94; - font-weight: 500; - font-size: 14px; + color: #244B94; + font-weight: 500; + font-size: 14px; } .storage-info { - margin: 8px 0; - font-size: 14px; - font-weight: 500; - text-align: left; - display: flex; - align-items: center; - gap: 4px; + margin: 8px 0; + font-size: 14px; + font-weight: 500; + text-align: left; + display: flex; + align-items: center; + gap: 4px; } .storage-count { - color: #5D9EFF; - font-weight: 500; - font-size: 14px; + color: #5D9EFF; + font-weight: 500; + font-size: 14px; } .created-date { - font-size: 10px; - color: #656B6F; - margin-top: 8px; - text-align: left; + font-size: 10px; + color: #656B6F; + margin-top: 8px; + text-align: left; } .created-date strong { - font-weight: 600; + font-weight: 600; } .add-logbook-card { - border-radius: 30px; - max-width: 300px; - padding: 20px; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 8px; - cursor: pointer; - transition: transform 0.2s; + border-radius: 30px; + max-width: 300px; + padding: 20px; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + cursor: pointer; + transition: transform 0.2s; } .add-logbook-card:hover { - transform: translateY(-4px); + transform: translateY(-4px); } .plus-circle-icon { - width: 40px; - height: 40px; - color: #244B94; - padding: 8px; - border: 4px solid #244B94; - border-radius: 50%; - stroke-width: 3px; + width: 40px; + height: 40px; + color: #244B94; + padding: 8px; + border: 4px solid #244B94; + border-radius: 50%; + stroke-width: 3px; } .add-logbook-card span { - color: #1F2937; - font-size: 14px; - font-weight: 400; + color: #1F2937; + font-size: 14px; + font-weight: 400; } \ No newline at end of file diff --git a/frontend/src/pages/login/Login.css b/frontend/src/pages/login/Login.css index 54c32bfa..1f528c89 100644 --- a/frontend/src/pages/login/Login.css +++ b/frontend/src/pages/login/Login.css @@ -1,152 +1,145 @@ +/* General Styles */ .signup-link span { - color: black; - font-size: 1rem; + color: black; + font-size: 1rem; } form button[type="submit"] { - border-radius: 20px; - border: 1px solid #BAC1D0; - background: #16448f; - color: #F2F4F8; - font-size: 15px; - font-weight: bold; - padding: 12px 45px; - letter-spacing: 1px; - text-transform: uppercase; - transition: transform 80ms ease-in; - width: 400px; - height: 55px; + border-radius: 20px; + border: 1px solid #BAC1D0; + background: #16448f; + color: #F2F4F8; + font-size: 15px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; + width: 400px; + height: 55px; } form button[type="submit"]:active { - transform: scale(0.95); + transform: scale(0.95); } form button[type="submit"]:focus { - outline: none; + outline: none; } form button[type="submit"].ghost { - background-color: transparent; - border-color: #FFFFFF; + background-color: transparent; + border-color: #FFFFFF; } form { - background-color: #F2F4F8; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 50px; - height: 100%; - text-align: center; + background-color: #F7FAFF; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; } -.username-group .email-group .password-group .confirm-password-group .form-container .sign-in-container input { - background-color: #F2F4F8; - border: none; - padding: 12px 15px; - margin: 8px 0; - width: 100%; +/* Input Styling */ +.sign-in-container input, +.sign-up-container input, +.name-group input { + background-color: #F7FAFF; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; } .container { - background-color: #F2F4F8; - overflow: hidden; - margin: 0; - width: 1280px; - height: 931px; + background-color: #F7FAFF; + overflow: hidden; + margin: 0; + width: 1280px; + height: 931px; } .form-container { - position: absolute; - top: 0; - height: 100%; - transition: all 0.7s ease-in-out; + position: absolute; + top: 0; + height: 100%; + transition: all 0.7s ease-in-out; } -.form-container h2 { - font-size: 1.2rem; - text-align: center; - color: #3f51b5; +.form-container h1 { + font-size: 2.5rem; + font-weight: bold; + margin: 0; + color: black; } -.form-container h1 { - font-weight: bold; - margin: 0; - color: black; +.form-container h2 { + font-size: 1.2rem; + text-align: center; + color: #3f51b5; } -.sign-in-container { - left: 50%; - width: 50%; - z-index: 2; +.sign-in-container, +.sign-up-container { + left: 50%; + width: 50%; + z-index: 2; } -.sign-in-container h2 { - font-size: 1rem; - color: #244B94; - margin-top: 0; +.sign-in-container h2, +.sign-up-container h2 { + font-size: 1rem; + color: #244B94; + margin-top: 0; } .container.right-panel-active .sign-in-container { - transform: translateX(-100%); + transform: translateX(-100%); } .sign-up-container { - left: 50%; - width: 50%; - opacity: 0; - z-index: 1; -} - -.sign-up-container h1 { - font-size: 2rem; -} - -.sign-up-container h2 { - font-size: 1rem; - color: #244B94; - margin-top: 0; + opacity: 0; + z-index: 1; } .container.right-panel-active .sign-up-container { - transform: translateX(-100%); - opacity: 1; - z-index: 5; - animation: show 0.7s; + transform: translateX(-100%); + opacity: 1; + z-index: 5; + animation: show 0.7s; } @keyframes show { - 0%, 49.99% { - opacity: 0; - z-index: 1; - } - - 50%, 100% { - opacity: 1; - z-index: 5; - } + 0%, 49.99% { + opacity: 0; + z-index: 1; + } + 50%, 100% { + opacity: 1; + z-index: 5; + } } .overlay-container { - position: absolute; - top: 0; - left: 0; - width: 50%; - height: 100%; - overflow: hidden; - transition: transform 0.6s ease-in-out; - z-index: 100; + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; } .container.right-panel-active .overlay-container { - transform: translateX(100%); + transform: translateX(100%); } .overlay { - background: -webkit-linear-gradient(180deg, #0B234A 0%, #162A5B 100%); /* For Chrome and Safari */ - background: linear-gradient(35deg, #1d57b6 0%, #070e1e 100%); /* Standard syntax */ + background: linear-gradient(35deg, #1d57b6 0%, #070e1e 100%); background-repeat: no-repeat; background-size: cover; background-position: 0 0; @@ -159,129 +152,100 @@ form { transition: transform 0.6s ease-in-out; } - .container.right-panel-active .overlay { - transform: translateX(50%); + transform: translateX(50%); } .overlay-panel { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 40px; - text-align: center; - top: 0; - height: 100%; - width: 50%; - transform: translateX(0); - transition: transform 0.6s ease-in-out; - padding-top: 50px; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 50px 40px 0; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; } .overlay-left { - transform: translateX(-20%); + transform: translateX(-20%); } .container.right-panel-active .overlay-left { - transform: translateX(0); + transform: translateX(0); } .overlay-right { - right: 0; - transform: translateX(0); + right: 0; + transform: translateX(0); } .container.right-panel-active .overlay-right { - transform: translateX(20%); + transform: translateX(20%); } .social-container { - margin: 20px 0; + margin: 20px 0; } -.username-group { - margin-top: 1rem; - display: flex; - flex-direction: column; - } +.username-group, +.password-group, +.confirm-password-group { + margin-top: 0.7rem; + display: flex; + flex-direction: column; + width: 400px; +} -.username-group .MuiTextField-root { - width: 400px !important; +.email-group { + display: flex; + flex-direction: column; + width: 400px; } - - .password-group .MuiTextField-root { - width: 400px !important; +.confirm-password-group { + margin-bottom: 3rem; } - - .forgot-password { - display: flex; - justify-content: flex-end; - margin-bottom: 1.5rem; - margin-top: 1rem; - width: 400px; + +.forgot-password { + display: flex; + justify-content: flex-end; + margin: 1rem 0 1.5rem; + width: 400px; } .forgot-password a { - color: #666; - text-decoration: none; - font-size: 0.9rem; + color: #666; + text-decoration: none; + font-size: 0.9rem; } .forgot-password a:hover { - color: #000; -} - - .signup-link { - margin-top: 1rem; - text-align: center; - font-size: 0.9rem; - } - - .signup-link a { - font-size: 1rem; - color: #3f51b5; - text-decoration: none; - font-weight: bold; - } - - .signup-link a:hover { - text-decoration: underline; - } - - .overlay-panel img { - width: 450px !important; - margin-bottom: 2rem; + color: #000; } -.sign-up-container .username-group { - display: flex; - flex-direction: column; +.signup-link { + margin-top: 1rem; + text-align: center; } -.sign-up-container .password-group { - margin-top: 1.2rem; - display: flex; - flex-direction: column; +.signup-link a { + font-size: 1rem; + color: #5D9EFF; + text-decoration: none; } -.password-group { - margin-top: 1.2rem; - display: flex; - flex-direction: column; +.signup-link a:hover { + text-decoration: underline; } -.sign-up-container .email-group { - margin-top: 1.2rem; - display: flex; - flex-direction: column; - width: 400px; -} - -.email-group .MuiTextField-root { - width: 400px !important; +.overlay-panel img { + width: 450px !important; + margin-bottom: 2rem; } .logo-container { @@ -295,66 +259,56 @@ form { .logo-container img { width: 250px; } - + /* TextField Container Styling */ -.MuiTextField-root { +.form-container .MuiTextField-root { width: 400px !important; } +.institution-training-container .MuiTextField-root { + width: 100% !important; + height: 100% !important; +} + /* Main TextField Styling */ .MuiTextField-root .MuiOutlinedInput-root { border-radius: 50px; - background-color: #F2F4F8; + background-color: #F7FAFF; } -/* Input Field Styling */ .MuiTextField-root .MuiOutlinedInput-input { color: #6B7280; - padding: 15px 5px; + padding: 10px 5px; text-align: left; } -/* Placeholder Text */ .MuiTextField-root .MuiOutlinedInput-input::placeholder { - color: #9CA3AF; + color: #C4C5C6; opacity: 0.8; } -/* Border Styling */ .MuiTextField-root .MuiOutlinedInput-notchedOutline { border-radius: 20px; border: 1px solid #BAC1D0; } -/* Focus State */ .MuiTextField-root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #BAC1D0; border-width: 1px; } -/* Icon Styling */ .MuiTextField-root .MuiInputAdornment-root .MuiSvgIcon-root { color: #C4C5C6; - font-size: 1.4rem;; -} - -.confirm-password-group { - margin-top: 1.2rem; - margin-bottom: 3rem; - display: flex; - flex-direction: column; -} - -.confirm-password-group .MuiTextField-root { - width: 400px !important; + font-size: 1.4rem; } +/* Name Group Styling */ .name-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - width: 400px; - margin-top: 1rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + width: 400px; + margin-top: 1rem; } .name-group > div { @@ -364,9 +318,9 @@ form { .name-group input { border-radius: 20px; - background-color: #F2F4F8; + background-color: #F7FAFF; color: #6B7280; - padding: 15px 20px; + padding: 17px 20px; border: 1px solid #BAC1D0; width: 100%; box-sizing: border-box; @@ -374,23 +328,108 @@ form { text-align: left; } -/* Placeholder Text for name-group inputs */ .name-group input::placeholder { - color: #9CA3AF; + color: #C4C5C6; opacity: 0.8; } +.name-group input:hover { + border-color: #000; +} /* Label Styling */ -label { - color: #6B7280; +.form-container label { + color: #4F607E; font-size: 0.9rem; margin-bottom: 0.3rem; align-self: flex-start; - text-align: left; + text-align: left; } -.name-group input:hover { +.institution-training-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + width: 400px; + margin: 1rem 0 2rem; +} + +.institution-training-container > div { + display: flex; + flex-direction: column; +} + +.institution-training-container .MuiOutlinedInput-input { + color: #6B7280; + padding: 7px 20px; + text-align: left; +} + +/* Custom Select Styling */ +.institution-training-container .custom-select-container { + position: relative; + height: 100%; +} + +.custom-select { + height: 70%; + padding-left: 20px; + padding-top: 14px; + border-radius: 20px; + background-color: #F7FAFF; + border: 1px solid #BAC1D0; + color: #C4C5C6; + cursor: pointer; + appearance: none; + text-align: left; +} + +.custom-select:hover { border-color: #000; } +.custom-select-arrow { + position: absolute; + left: 85%; + top: 57%; + transform: translateY(-50%); + pointer-events: none; +} + +.custom-select-options { + position: absolute; + left: 0; + right: 0; + background: white; + border: 1px solid #BAC1D0; + border-radius: 20px; + max-height: 200px; + width: 100%; + overflow-y: auto; + z-index: 1000; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: none; +} + +.custom-select-options.open { + display: block; +} + +.custom-select-option { + padding: 12px 20px; + cursor: pointer; + color: #6B7280; +} + +.custom-select-option:hover { + background-color: #F2F4F8; +} + +.custom-select-arrow svg { + width: 17px; + height: 17px; +} + +.custom-select[data-empty="false"] { + color: #6B7280; +} diff --git a/frontend/src/pages/login/Login.jsx b/frontend/src/pages/login/Login.jsx index 96a5b92c..46a09f56 100644 --- a/frontend/src/pages/login/Login.jsx +++ b/frontend/src/pages/login/Login.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import { Link, useNavigate } from "react-router-dom"; import { useAuth } from "../../contexts/AuthContext"; import { TextField, InputAdornment, IconButton } from "@mui/material"; @@ -12,40 +12,111 @@ import { import Logo from "../../assets/images/logo.png"; import "./Login.css"; import { CLButtonPrimary } from "../../components/Buttons/CLButtons"; +import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline"; + +/** Reusable Password Field Component */ +const PasswordField = ({ + id, + placeholder, + value, + onChange, + showPassword, + toggleShowPassword, +}) => ( + + + + ), + endAdornment: ( + + + {showPassword ? : } + + + ), + }} + required + /> +); const Login = () => { - const [isRightPanelActive, setIsRightPanelActive] = useState(false); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [loading, setLoading] = useState(false); - const [showPassword, setShowPassword] = useState(false); - const [confirmPassword, setConfirmPassword] = useState(""); + /** State variables for sign-in form */ + const [loginEmail, setLoginEmail] = useState(""); + const [loginPassword, setLoginPassword] = useState(""); + const [loginShowPassword, setLoginShowPassword] = useState(false); + + /** State variables for sign-up form */ + const [signupEmail, setSignupEmail] = useState(""); + const [signupPassword, setSignupPassword] = useState(""); + const [signupShowPassword, setSignupShowPassword] = useState(false); const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); + const [institution, setInstitution] = useState(""); + const [stage, setStage] = useState(""); + + /** General state variables */ + const [isRightPanelActive, setIsRightPanelActive] = useState(false); + const [loading, setLoading] = useState(false); + const [isSelectOpen, setIsSelectOpen] = useState(false); + const navigate = useNavigate(); const { session, login, register } = useAuth(); + const selectRef = useRef(null); + /** Navigate to home if session exists */ useEffect(() => { if (session) { navigate("/home"); } }, [session, navigate]); + /** Handle click outside of custom select to close it */ + useEffect(() => { + const handleClickOutside = (event) => { + if (selectRef.current && !selectRef.current.contains(event.target)) { + setIsSelectOpen(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + /** Sign-up form submission handler */ const handleSignUp = async (e) => { e.preventDefault(); - if (!checkValidEmail(email)) { + if (!checkValidEmail(signupEmail)) { return alert("Please enter a valid email"); } - if (password !== confirmPassword) { - return alert("Passwords do not match"); - } - try { setLoading(true); - await register(firstName, lastName, email, password); - setIsRightPanelActive(false); + await register( + firstName, + lastName, + signupEmail, + signupPassword, + institution, + stage + ); + navigate("/logcode"); } catch (error) { if (error.code === "weak_password") { alert( @@ -64,11 +135,12 @@ const Login = () => { } }; + /** Sign-in form submission handler */ const handleSignIn = async (e) => { e.preventDefault(); try { setLoading(true); - await login(email, password); + await login(loginEmail, loginPassword); navigate("/home"); } catch { alert("Failed to login: Email or Password Incorrect"); @@ -77,8 +149,9 @@ const Login = () => { } }; + /** Email validation function */ function checkValidEmail(email) { - const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/; + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } @@ -90,6 +163,7 @@ const Login = () => { }`} id="container" > + {/* Sign Up Form */}

Welcome to Flow Leaflets!

@@ -102,6 +176,7 @@ const Login = () => { id="first-name" type="text" placeholder="First name" + value={firstName} onChange={(e) => setFirstName(e.target.value)} required /> @@ -112,6 +187,7 @@ const Login = () => { id="last-name" type="text" placeholder="Last name" + value={lastName} onChange={(e) => setLastName(e.target.value)} required /> @@ -126,7 +202,8 @@ const Login = () => { variant="outlined" fullWidth placeholder="Enter your email" - onChange={(e) => setEmail(e.target.value)} + value={signupEmail} + onChange={(e) => setSignupEmail(e.target.value)} InputProps={{ startAdornment: ( @@ -140,64 +217,75 @@ const Login = () => {
- setPassword(e.target.value)} - InputProps={{ - startAdornment: ( - - - - ), - endAdornment: ( - - setShowPassword(!showPassword)} - edge="end" - > - {showPassword ? : } - - - ), - }} - required + value={signupPassword} + onChange={(e) => setSignupPassword(e.target.value)} + showPassword={signupShowPassword} + toggleShowPassword={() => + setSignupShowPassword(!signupShowPassword) + } />
-
- - setConfirmPassword(e.target.value)} - InputProps={{ - startAdornment: ( - - - - ), - endAdornment: ( - - setShowPassword(!showPassword)} - edge="end" +
+
+ + setInstitution(e.target.value)} + required + /> +
+
+ +
+
setIsSelectOpen(!isSelectOpen)} + > + {stage || "Select"} + + {isSelectOpen ? ( + + ) : ( + + )} + +
+
+ {[ + "Medical student", + "Resident", + "Fellow", + "Attending", + "Other", + ].map((option) => ( +
{ + setStage(option); + setIsSelectOpen(false); + }} > - {showPassword ? : } - - - ), - }} - required - /> + {option} +
+ ))} +
+
+
@@ -207,24 +295,27 @@ const Login = () => {
Already have an account? setIsRightPanelActive(false)}> - Sign in + Login
+ + {/* Sign In Form */}

Welcome Back

Login to your account

- + setEmail(e.target.value)} + value={loginEmail} + onChange={(e) => setLoginEmail(e.target.value)} InputProps={{ startAdornment: ( @@ -236,33 +327,16 @@ const Login = () => { />
- - Password + setPassword(e.target.value)} - InputProps={{ - startAdornment: ( - - - - ), - endAdornment: ( - - setShowPassword(!showPassword)} - edge="end" - > - {showPassword ? : } - - - ), - }} - required + value={loginPassword} + onChange={(e) => setLoginPassword(e.target.value)} + showPassword={loginShowPassword} + toggleShowPassword={() => + setLoginShowPassword(!loginShowPassword) + } />
@@ -279,6 +353,8 @@ const Login = () => {
+ + {/* Overlay Panels */}