diff --git a/frontend/index.html b/frontend/index.html index 072a57e..9def43c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,7 +2,7 @@ - + frontend diff --git a/frontend/public/Designer.png b/frontend/public/Designer.png new file mode 100644 index 0000000..3473af6 Binary files /dev/null and b/frontend/public/Designer.png differ diff --git a/frontend/src/App.css b/frontend/src/App.css index 6d4fad8..fd353f5 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,4 +1,16 @@ /* ---------------- Global Reset ---------------- */ + +:root { + --primary: #C60E30; + --primary-dark: #9e0b26; + --surface-page: #dcdcdc; + --surface-main: #e6e6e6; + --surface-panel: #e0e0e0; + --surface-card: #f2f2f2; + --text-main: #111; + --nav-hover: #c7c7c7; +} + * { box-sizing: border-box; /* include padding/border in width */ } @@ -21,11 +33,11 @@ body { } .logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); + filter: drop-shadow(0 0 2em #c60e30aa); } .logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); + filter: drop-shadow(0 0 2em #9e0b26aa); } @keyframes logo-spin { @@ -39,18 +51,30 @@ body { } } +.logo-container { + margin-top: 20px; +} + +.logo-container img { + height: 220px; + display: block; + margin-left: -20px; /* tweak this */ +} + /* ---------------- Layout ---------------- */ .layout { display: flex; min-height: 100vh; width: 100vw; /* ensures layout spans full viewport */ + background-color: var(--surface-page); } .sidebar { width: 220px; padding: 20px; - background-color: #f4f4f4; + background-color: var(--surface-panel); border-right: 1px solid #ddd; + color: var(--text-main); } .main { @@ -58,6 +82,8 @@ body { padding: 12px 12px 0 12px; /* tighter top/bottom padding */ display: flex; /* allow cards to grow */ flex-direction: column; + background-color: var(--surface-main); + color: var(--text-main); } /* ---------------- Cards ---------------- */ @@ -67,7 +93,7 @@ body { max-width: none; margin: 0 0 12px 0; padding: 1.5rem; - background-color: #fff; + background-color: var(--surface-card); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); text-align: center; @@ -76,6 +102,15 @@ body { gap: 1rem; } +.sidebar h3, +.sidebar h4, +.sidebar h5, +.main h1, +.results-card h3, +.course-text { + color: var(--text-main); +} + .search-card { flex: 0; /* stop stretching */ padding: 1rem; /* reduce vertical size */ @@ -126,8 +161,8 @@ body { .card input:focus, .card select:focus { outline: none; - border-color: #4a90e2; - box-shadow: 0 0 6px rgba(74, 144, 226, 0.3); + border-color: var(--primary); + box-shadow: 0 0 6px rgba(198, 14, 48, 0.3); } .card select { @@ -148,7 +183,7 @@ body { padding: 12px 0; border-radius: 8px; border: none; - background-color: #4a90e2; + background-color: var(--primary); color: white; font-size: 16px; cursor: pointer; @@ -156,7 +191,7 @@ body { } .card button:hover { - background-color: #357ab7; + background-color: var(--primary-dark); } /* ---------------- Lists ---------------- */ @@ -212,12 +247,12 @@ body { /* Hover effect */ .top-bar .nav-link:hover { text-decoration: underline; - color: #ffcc00; /* optional highlight color */ + color: var(--nav-hover); } /* Optional: highlight the active page */ .top-bar .nav-link.active { - border-bottom: 2px solid #ffcc00; + border-bottom: 2px solid var(--primary-dark); } /* Top bar container */ @@ -238,12 +273,12 @@ body { /* Highlight active link */ .nav-link.active { - border-bottom: 2px solid #ffcc00; + border-bottom: 2px solid var(--primary-dark); } /* Hover effect */ .nav-link:hover { - color: #ffcc00; + color: var(--nav-hover); text-decoration: underline; } @@ -267,15 +302,29 @@ body { } .day-btn.selected { - background: #007bff; + background: var(--primary); color: white; - border-color: #007bff; + border-color: var(--primary); } .fc-day-today { background-color: transparent !important; } +/* FullCalendar red theme overrides */ +.Schedule .fc { + --fc-event-bg-color: var(--primary); + --fc-event-border-color: var(--primary); + --fc-event-text-color: #fff; + --fc-button-bg-color: var(--primary); + --fc-button-border-color: var(--primary); + --fc-button-hover-bg-color: var(--primary-dark); + --fc-button-hover-border-color: var(--primary-dark); + --fc-button-active-bg-color: var(--primary-dark); + --fc-button-active-border-color: var(--primary-dark); + --fc-today-bg-color: rgba(198, 14, 48, 0.08); +} + .results-card ul { list-style: none; padding: 0; diff --git a/frontend/src/SearchPage.tsx b/frontend/src/SearchPage.tsx index da3394e..8f3ea45 100644 --- a/frontend/src/SearchPage.tsx +++ b/frontend/src/SearchPage.tsx @@ -1,5 +1,6 @@ import { Toaster, toast } from "react-hot-toast"; import { useEffect, useState, useRef } from 'react'; +import pandaLogo from './assets/Designer.png'; interface CourseTime { @@ -380,6 +381,10 @@ export default function SearchPage() { Clear All Filters +
+ Red Panda Logo +
+ {/* MAIN CONTENT */} @@ -456,7 +461,7 @@ export default function SearchPage() { style={{ border: 'none', background: 'none', - color: currentPage === 1 ? '#0a58ca' : 'inherit', + color: currentPage === 1 ? '#c60e30' : 'inherit', textDecoration: 'underline', cursor: 'pointer', fontWeight: currentPage === 1 ? 700 : 400, @@ -477,7 +482,7 @@ export default function SearchPage() { style={{ border: 'none', background: 'none', - color: page === currentPage ? '#0a58ca' : 'inherit', + color: page === currentPage ? '#c60e30' : 'inherit', textDecoration: 'underline', cursor: 'pointer', fontWeight: page === currentPage ? 700 : 400, @@ -497,7 +502,7 @@ export default function SearchPage() { style={{ border: 'none', background: 'none', - color: currentPage === totalPages ? '#0a58ca' : 'inherit', + color: currentPage === totalPages ? '#c60e30' : 'inherit', textDecoration: 'underline', cursor: 'pointer', fontWeight: currentPage === totalPages ? 700 : 400, diff --git a/frontend/src/assets/Designer.png b/frontend/src/assets/Designer.png new file mode 100644 index 0000000..a0ed359 Binary files /dev/null and b/frontend/src/assets/Designer.png differ diff --git a/frontend/src/index.css b/frontend/src/index.css index 08a3ac9..76582ce 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -15,11 +15,11 @@ a { font-weight: 500; - color: #646cff; + color: #c60e30; text-decoration: inherit; } a:hover { - color: #535bf2; + color: #9e0b26; } body { @@ -47,7 +47,7 @@ button { transition: border-color 0.25s; } button:hover { - border-color: #646cff; + border-color: #9e0b26; } button:focus, button:focus-visible { @@ -60,7 +60,7 @@ button:focus-visible { background-color: #ffffff; } a:hover { - color: #747bff; + color: #9e0b26; } button { background-color: #f9f9f9;