From 40573aa54942f985bb245df5f8b86851112bf1c3 Mon Sep 17 00:00:00 2001 From: Hunter Martin <175766562+huntermar3@users.noreply.github.com> Date: Tue, 16 Dec 2025 13:48:11 -0500 Subject: [PATCH 1/3] unify all the styling in popups, just make css in general more consistent with other things in page --- frontend/src/css/NewUserSignUpPage.css | 2 +- frontend/src/css/Popup.css | 12 +++++++----- frontend/src/css/TripDaysPage.css | 24 +++++++++++------------- frontend/src/css/TripPage.css | 22 +++++++++++----------- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/frontend/src/css/NewUserSignUpPage.css b/frontend/src/css/NewUserSignUpPage.css index 95fca1e..116c347 100644 --- a/frontend/src/css/NewUserSignUpPage.css +++ b/frontend/src/css/NewUserSignUpPage.css @@ -104,7 +104,7 @@ body { } .error-message { - color: var(--error); + color: tomato; font-size: 13px; margin-top: 5px; } diff --git a/frontend/src/css/Popup.css b/frontend/src/css/Popup.css index e613fae..81e7833 100644 --- a/frontend/src/css/Popup.css +++ b/frontend/src/css/Popup.css @@ -111,6 +111,7 @@ html[data-theme="dark"] .popup-input :is(input, textarea, select):focus { display: flex; align-items: center; gap: 0.25rem; + font-size: 1em !important; } .overlap-items { @@ -120,7 +121,8 @@ html[data-theme="dark"] .popup-input :is(input, textarea, select):focus { .popup-input input { padding: 10px 12px; border: 1px solid var(--border-light); - border-radius: 10px; + border-radius: var(--radius); + background: var(--bg-white); font-size: 14px; } @@ -210,8 +212,8 @@ html[data-theme="dark"] .popup-input :is(input, textarea, select):focus { .popup-input .react-datepicker__input-container input { width: 100%; padding: 12px; - border: 1px solid var(--border-input); - border-radius: 8px; + border: 1px solid var(--border-light); + border-radius: var(--radius) !important; font-size: 14px; background: var(--bg-white) !important; color: var(--text); @@ -260,14 +262,14 @@ form.was-submitted .react-datepicker-wrapper:has(input[value=""]) .mobile-date-i box-shadow: 0 0 0 3px var(--accent-soft); } -html[data-theme="dark"] .popup-input-field, +/* html[data-theme="dark"] .popup-input-field, html[data-theme="dark"] .popup-input .date-input, html[data-theme="dark"] .popup-input .mobile-date-input, html[data-theme="dark"] .popup-input .react-datepicker__input-container input { background: var(--bg-hover2) !important; color: var(--static-white); border-color: var(--border-input); -} +} */ html[data-theme="dark"] .popup-input .mobile-date-input.placeholder, html[data-theme="dark"] .popup-input-field::placeholder, diff --git a/frontend/src/css/TripDaysPage.css b/frontend/src/css/TripDaysPage.css index 97f0c8d..204933b 100644 --- a/frontend/src/css/TripDaysPage.css +++ b/frontend/src/css/TripDaysPage.css @@ -788,18 +788,14 @@ html[data-theme="dark"] .day-menu .trash-icon { .textarea-notes { padding: 12px; - border: 1px solid var(--border-input); - border-radius: var(--radius); + border: 1px solid var(--border-light); + border-radius: var(--radius) !important; font-size: 14px; - background: var(--bg-input); + background: var(--bg-white); color: var(--text); width: 100%; } -html[data-theme="dark"] .textarea-notes { - background: var(--bg-hover2); -} - .textarea-notes::placeholder { color: var(--text-placeholder); } @@ -1494,10 +1490,6 @@ html[data-theme="dark"] .time-picker { opacity: 0.5; } - .participants-list { - min-height: 100px; - } - .participants-list p{ padding-top: 25px; } @@ -2001,10 +1993,10 @@ html[data-theme="dark"] .time-picker { .trip-name-input, .trip-location-input, .date-input, .clone-popup-input, .popup-input .mobile-date-input { padding: 12px; - border: 1px solid var(--border-input); + border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 14px; - background: var(--bg-input) !important; + background: var(--bg-white) !important; color: var(--text); width: 100%; } @@ -2078,3 +2070,9 @@ body:has(.popup-screen-overlay) { overflow: hidden; touch-action: none; } + +.trip-name-textview , .trip-location-textview , .trip-start-date-textview, .trip-notes-textview{ + font-size: 14px; + margin-bottom: 6px; + color: var(--muted) +} diff --git a/frontend/src/css/TripPage.css b/frontend/src/css/TripPage.css index a0a85e4..2d0171f 100644 --- a/frontend/src/css/TripPage.css +++ b/frontend/src/css/TripPage.css @@ -204,10 +204,10 @@ .trip-page .modal-content .textarea-notes { padding: 12px; - border: 1px solid var(--border-input); + border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 14px; - background: var(--bg-input); + background: var(--bg-white); color: var(--text); width: 100%; } @@ -317,10 +317,10 @@ .modal-content input { padding: 12px; - border: 1px solid var(--border-input); + border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 14px; - background: var(--bg-input); + background: var(--bg-white); color: var(--text); width: 100%; } @@ -346,11 +346,11 @@ box-shadow: 0 0 0 3px var(--accent-soft); } -html[data-theme="dark"] .modal-content input { +/* html[data-theme="dark"] .modal-content input { background: var(--bg-hover2); color: var(--static-white); border-color: var(--border-input); -} +} */ html[data-theme="dark"] .modal-content input::placeholder { color: var(--text-placeholder); @@ -502,9 +502,9 @@ html[data-theme="dark"] .trip-page :is( .react-datepicker__input-container input, .date-input ) { - background: var(--bg-hover2) !important; + background: var(--bg-white) !important; color: var(--static-white) !important; - border: 1px solid var(--border-input) !important; + border: 1px solid var(--border-light) !important; box-shadow: none !important; } @@ -612,10 +612,10 @@ select:focus { .mobile-date-input { width: 100%; padding: 12px; - border: 1px solid var(--border-input); - border-radius: 4px; + border: 1px solid var(--border-light); + border-radius: var(--radius); font-size: 14px; - background: var(--bg-input); + background: var(--bg-white) !important; cursor: pointer; color: var(--text); user-select: none; From effda97048a676201807a6ac721b4a2fc2a5c3c8 Mon Sep 17 00:00:00 2001 From: Hunter Martin <175766562+huntermar3@users.noreply.github.com> Date: Tue, 16 Dec 2025 13:59:40 -0500 Subject: [PATCH 2/3] carousel button fix sometimes it glitches out --- frontend/src/css/ExplorePage.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/css/ExplorePage.css b/frontend/src/css/ExplorePage.css index e25ef7c..9744280 100644 --- a/frontend/src/css/ExplorePage.css +++ b/frontend/src/css/ExplorePage.css @@ -486,4 +486,12 @@ html[data-theme="dark"] .carousel-btn:focus-visible { outline: none; box-shadow: .liked-grid { padding-bottom: 5.5rem; } +} + +@media (max-width: 768px) { + .carousel-btn { + width: 40px; + height: 40px; + will-change: opacity; + } } \ No newline at end of file From 39f5a202f5d8538a21018d37f0b1fef2012d3b3d Mon Sep 17 00:00:00 2001 From: mouzhass Date: Tue, 16 Dec 2025 14:13:21 -0500 Subject: [PATCH 3/3] minor ui fix --- frontend/src/css/ExplorePage.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/css/ExplorePage.css b/frontend/src/css/ExplorePage.css index 9744280..f00c855 100644 --- a/frontend/src/css/ExplorePage.css +++ b/frontend/src/css/ExplorePage.css @@ -190,6 +190,7 @@ html[data-theme="dark"] .pill.active { background: var(--accent); color: var(--b display: grid; place-items: center; cursor: pointer; + will-change: opacity; } .carousel-btn:hover { box-shadow: var(--shadow-2); } .carousel-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } @@ -492,6 +493,5 @@ html[data-theme="dark"] .carousel-btn:focus-visible { outline: none; box-shadow: .carousel-btn { width: 40px; height: 40px; - will-change: opacity; } } \ No newline at end of file