Skip to content

UI Improvements: Dark Mode Fixes, Extended Semesters, and Content Card Styling #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anjali1521 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

UI Improvements: Dark Mode Fixes, Extended Semesters, and Content Card Styling #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .env.example
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const App = () => {
<ThemeProvider>
<Router>
<Navbar />
<div style={{ padding: "2rem" }}>
<div style={{padding: "2rem" }}>
<ScrollToTop />
<Routes>
<Route path="/" element={<Home />} />
Expand Down
16 changes: 16 additions & 0 deletions client/src/pages/About.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,22 @@
transform: translateY(-3px);
}

/* Dark mode: keep About section headings / top titles visible */
html[data-theme="dark"] .about h2 {
color: #0b1220 !important;
}

html[data-theme="dark"] .about .team h2,
html[data-theme="dark"] .about .about-cta .cta-content h2 {
color: #facc15 !important;
}

html[data-theme="dark"] .about .story-card p,
html[data-theme="dark"] .about .feature-deep p,
html[data-theme="dark"] .about .value-item p {
color: #d4d9e6;
}

/* Enhanced Responsive Design */

/* Large tablets and small desktops */
Expand Down
30 changes: 30 additions & 0 deletions client/src/pages/Analytics.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,3 +330,33 @@ button:hover {
padding: 0.8rem 1rem;
}
}

/* Dark-mode overrides for Analytics page: make section background darker and cards white
so headings inside cards remain visible and readable. */
html[data-theme="dark"] .analytics-section {
background-color: #333333;
}

html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .insights-section,
html[data-theme="dark"] .filter-section,
html[data-theme="dark"] .download-section {
background: #ffffff;
color: #0b1220;
border: 1px solid #e6ebf0;
box-shadow: 0 8px 24px rgba(2,6,23,0.06);
}

html[data-theme="dark"] .chart-container h2,
html[data-theme="dark"] .insights-section h2,
html[data-theme="dark"] .filter-section h2 {
color: #0b1220;
}

html[data-theme="dark"] .filter-section select,
html[data-theme="dark"] select {
background-color: #ffffff;
color: #0b1220;
border-color: #e6ebf0;
}

20 changes: 20 additions & 0 deletions client/src/pages/Faq.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,3 +338,23 @@
justify-content: center; /* Center social icons */
}
}
/* Default (light theme) */
.contact-section .section-title {
color: #0b1220;
}

.faq-section .section-title,
.features-section .section-title {
color: #0b1220;
}

/* Dark theme: be explicit to avoid white-on-white or faded headings */
html[data-theme="dark"] .contact-section .section-title {
color: #ffffff !important;
}

html[data-theme="dark"] .faq-section .section-title,
html[data-theme="dark"] .features-section .section-title {
/* FAQ/Features use white cards in your desired layout, so keep titles dark */
color: #0b1220 !important;
}
20 changes: 20 additions & 0 deletions client/src/pages/Feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,26 @@
margin-bottom: 1.5rem;
}

/* Dark-mode heading visibility fixes for Feedback page */
html[data-theme="dark"] .feedback h1,
html[data-theme="dark"] .feedback h2,
html[data-theme="dark"] .feedback h3,
html[data-theme="dark"] .feedback h4,
html[data-theme="dark"] .feedback h5,
html[data-theme="dark"] .student-name,
html[data-theme="dark"] .subject-name,
html[data-theme="dark"] .detail-section h5,
html[data-theme="dark"] .stat-number,
html[data-theme="dark"] .stat-label {
color: #ffffff !important;
}

/* For headings inside white cards in dark mode, switch them to dark for contrast */
html[data-theme="dark"] .feedback-card .student-name,
html[data-theme="dark"] .feedback-card .subject-name {
color: #0b1220 !important;
}

.cta-content p {
font-size: 1.2rem;
max-width: 600px;
Expand Down
71 changes: 53 additions & 18 deletions client/src/pages/Notes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,10 @@

/* Search and Filters */
.search-filters {
background: #f8fafc;
background: rgba(248, 250, 252, 0.85);
padding: 2rem 0;
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid rgba(102, 126, 234, 0.18);
backdrop-filter: blur(12px);
}

.search-bar {
Expand All @@ -108,16 +109,16 @@
width: 100%;
padding: 1rem 1rem 1rem 3rem;
font-size: 1.1rem;
border: 2px solid #e2e8f0;
border: 2px solid rgba(226, 232, 240, 0.8);
border-radius: 50px;
background: white;
background: rgba(255, 255, 255, 0.95);
transition: all 0.3s ease;
outline: none;
}

.search-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}

.search-icon {
Expand Down Expand Up @@ -151,9 +152,9 @@

.filter-group select {
padding: 0.8rem;
border: 2px solid #e2e8f0;
border: 2px solid rgba(226, 232, 240, 0.9);
border-radius: 8px;
background: white;
background: rgba(255, 255, 255, 0.95);
font-size: 1rem;
color: #374151;
cursor: pointer;
Expand All @@ -168,7 +169,7 @@
/* Results Section */
.results {
padding: 3rem 0;
background: white;
background: rgba(255, 255, 255, 0.92);
}

.results-header {
Expand All @@ -192,9 +193,10 @@
.no-results {
text-align: center;
padding: 4rem 2rem;
background: #f8fafc;
background: rgba(248, 250, 252, 0.90);
border-radius: 15px;
margin: 2rem 0;
border: 1px solid rgba(102, 126, 234, 0.18);
}

.no-results-icon {
Expand Down Expand Up @@ -223,11 +225,11 @@

/* Note Card */
.note-card {
background: white;
background: rgba(255, 255, 255, 0.92);
border-radius: 15px;
padding: 2rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(102, 126, 234, 0.2);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
Expand All @@ -236,21 +238,24 @@

.note-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
border-color: #667eea;
box-shadow: 0 20px 75px rgba(15, 23, 42, 0.2), 0 8px 24px rgba(102, 126, 234, 0.16);
border-color: rgba(102, 126, 234, 0.45);
}


/* Card Header and Content reuse same styles as syllabus */
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
gap: 1rem;
flex-wrap: wrap;
}

.card-title-section {
flex: 1;
min-width: 0;
}

.card-title {
Expand All @@ -259,14 +264,18 @@
color: #333;
margin-bottom: 0.5rem;
line-height: 1.4;
word-break: break-word;
overflow-wrap: anywhere;
}

.card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.9rem;
color: #666;
min-width: 0;
}

.university {
Expand All @@ -291,11 +300,20 @@
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
flex-shrink: 0;
}

.card-content {
flex: 1;
margin-bottom: 1.5rem;
min-width: 0;
}

.subject {
margin: 0;
color: #4b5563;
word-break: break-word;
overflow-wrap: anywhere;
}

.tags-section {
Expand All @@ -321,9 +339,11 @@
.card-stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 1.5rem;
padding: 1rem;
background: #f8fafc;
background: rgba(248, 250, 252, 0.88);
border: 1px solid rgba(102, 126, 234, 0.14);
border-radius: 10px;
gap: 1rem;
}
Expand All @@ -334,7 +354,8 @@
gap: 0.4rem;
font-size: 0.85rem;
color: #6b7280;
flex: 1;
flex: 1 1 140px;
min-width: 140px;
justify-content: center;
}

Expand All @@ -345,6 +366,7 @@
.card-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

.btn {
Expand Down Expand Up @@ -388,10 +410,10 @@

/* Upload Section */
.upload-section {
background: #f8fafc;
background: rgba(248, 250, 252, 0.88);
padding: 3rem 1rem;
text-align: center;
border-top: 1px solid #e2e8f0;
border-top: 1px solid rgba(102, 126, 234, 0.16);
}

.upload-section h3 {
Expand All @@ -407,6 +429,18 @@
margin-bottom: 2rem;
}

html[data-theme="dark"] .notes .results-header h2,
html[data-theme="dark"] .notes .no-results h3,
html[data-theme="dark"] .notes .card-title,
html[data-theme="dark"] .notes .upload-section h3 {
color: #0b1220 !important;
}

html[data-theme="dark"] .notes .card-meta,
html[data-theme="dark"] .notes .card-stats {
color: #94a3b8;
}

/* Responsive Design */
@media (max-width: 768px) {
.notes-hero h1 {
Expand Down Expand Up @@ -574,3 +608,4 @@
gap: 1rem;
}
}

16 changes: 10 additions & 6 deletions client/src/pages/Notes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@ const Notes = () => {

// Dynamic state initialized with mock data as fallback
const [notesData, setNotesData] = useState([
{ id: 1, title: "Python - Notes", university: "Mumbai University", department: "Electronics Engineering", semester: 1, subject: "Python", fileType: "PDF", downloadCount: 1400, uploadDate: "2024-02-01", fileSize: "3.5 MB", tags: ["CSE", "Python", "First Year"], difficulty: "Beginner", link: "/pdf/python.pdf" },
{ id: 2, title: "Operating Systems - Detailed Notes", university: "NIT Trichy", department: "Computer Science", semester: 2, subject: "Operating Systems", fileType: "PDF", downloadCount: 870, uploadDate: "2024-04-02", fileSize: "5.8 MB", tags: ["CSE", "OS", "Semester 4"], difficulty: "Intermediate", link: "/pdf/OS.pdf" },
{ id: 3, title: "Data Structures - Notes", university: "Anna University", department: "Computer Science", semester: 3, subject: "Data Structures", fileType: "PDF", downloadCount: 980, uploadDate: "2024-03-15", fileSize: "4.2 MB", tags: ["CSE", "DSA"], difficulty: "Intermediate", link: "/pdf/DSA.pdf" },
{ id: 4, title: "Database Management Systems (DBMS) - Notes", university: "IIT Delhi", department: "Computer Science", semester: 4, subject: "Database Systems", fileType: "PDF", downloadCount: 1100, uploadDate: "2024-03-18", fileSize: "6.0 MB", tags: ["CSE", "DBMS", "SQL"], difficulty: "Intermediate", link: "/pdf/DBMS.pdf" },
{ id: 5, title: "Java - Notes", university: "Delhi University", department: "Computer Science", semester: 5, subject: "Java", fileType: "PDF", downloadCount: 1400, uploadDate: "2024-02-01", fileSize: "3.5 MB", tags: ["CSE", "Java", "First Year"], difficulty: "Beginner", link: "/pdf/Java.pdf" },
{ id: 6, title: "Advance Web Development", university: "VIT Vellore", department: "Computer Science", semester: 6, subject: "Web Development", fileType: "PDF", downloadCount: 640, uploadDate: "2024-07-01", fileSize: "6.5 MB", tags: ["CSE", "Web", "Semester 6"], difficulty: "Advanced", link: "/pdf/WebDevelopment.pdf" },
{ id: 1, title: "Python - Notes", university: "Mumbai University", department: "Electronics Engineering", semester: 1, subject: "Python", fileType: "PDF", downloadCount: 1400, uploadDate: "2024-02-01", fileSize: "3.5 MB", tags: ["CSE", "Python", "First Year"], difficulty: "Beginner", link: "/pdf/python.pdf" },
{ id: 2, title: "Operating Systems - Detailed Notes", university: "NIT Trichy", department: "Computer Science", semester: 2, subject: "Operating Systems", fileType: "PDF", downloadCount: 870, uploadDate: "2024-04-02", fileSize: "5.8 MB", tags: ["CSE", "OS", "Semester 4"], difficulty: "Intermediate", link: "/pdf/OS.pdf" },
{ id: 3, title: "Data Structures - Notes", university: "Anna University", department: "Computer Science", semester: 3, subject: "Data Structures", fileType: "PDF", downloadCount: 980, uploadDate: "2024-03-15", fileSize: "4.2 MB", tags: ["CSE", "DSA"], difficulty: "Intermediate", link: "/pdf/DSA.pdf" },
{ id: 4, title: "Database Management Systems (DBMS) - Notes", university: "IIT Delhi", department: "Computer Science", semester: 4, subject: "Database Systems", fileType: "PDF", downloadCount: 1100, uploadDate: "2024-03-18", fileSize: "6.0 MB", tags: ["CSE", "DBMS", "SQL"], difficulty: "Intermediate", link: "/pdf/DBMS.pdf" },
{ id: 5, title: "Java - Notes", university: "Delhi University", department: "Computer Science", semester: 5, subject: "Java", fileType: "PDF", downloadCount: 1400, uploadDate: "2024-02-01", fileSize: "3.5 MB", tags: ["CSE", "Java", "First Year"], difficulty: "Beginner", link: "/pdf/Java.pdf" },
{ id: 6, title: "Advance Web Development", university: "VIT Vellore", department: "Computer Science", semester: 6, subject: "Web Development", fileType: "PDF", downloadCount: 640, uploadDate: "2024-07-01", fileSize: "6.5 MB", tags: ["CSE", "Web", "Semester 6"], difficulty: "Advanced", link: "/pdf/WebDevelopment.pdf" },

// ➡️ New entries for semester 7 and 8
{ id: 7, title: "Machine Learning - Notes", university: "IIT Bombay", department: "Computer Science", semester: 7, subject: "Machine Learning", fileType: "PDF", downloadCount: 520, uploadDate: "2024-08-10", fileSize: "7.2 MB", tags: ["CSE", "ML", "Semester 7"], difficulty: "Advanced", link: "/pdf/ML.pdf" },
{ id: 8, title: "Cyber Security - Notes", university: "Delhi University", department: "Computer Science", semester: 8, subject: "Cyber Security", fileType: "PDF", downloadCount: 430, uploadDate: "2024-09-05", fileSize: "6.8 MB", tags: ["CSE", "Security", "Semester 8"], difficulty: "Expert", link: "/pdf/CyberSecurity.pdf" }
]);

// States
Expand Down
12 changes: 12 additions & 0 deletions client/src/pages/Syllabus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,18 @@
}


html[data-theme="dark"] .syllabus .results-header h2,
html[data-theme="dark"] .syllabus .no-results h3,
html[data-theme="dark"] .syllabus .card-title,
html[data-theme="dark"] .syllabus .subjects-section h4 {
color: #0b1220 !important;
}

html[data-theme="dark"] .syllabus .card-meta,
html[data-theme="dark"] .syllabus .card-stats {
color: #94a3b8;
}

/* Responsive Design */
@media (max-width: 768px) {
.syllabus-hero h1 {
Expand Down
Loading