Skip to content

DOCSP-55536: Apply MongoDB branding to mFlix application #75

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

Merged
cbullinger merged 9 commits into from
Feb 9, 2026
Merged

DOCSP-55536: Apply MongoDB branding to mFlix application #75

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2d80839
Apply MongoDB branding and modern UI improvements to mFlix application
cbullinger Jan 26, 2026
2dd639a
Address PR feedback #1-#5: Improve UI consistency and visual hierarchy
cbullinger Jan 31, 2026
25a1f13
Remove checkboxes from movie cards, keep visual selection
cbullinger Jan 31, 2026
b1d6318
Make Show More button pill-shaped on aggregations page
cbullinger Feb 1, 2026
b82139c
Fix floating contextual bar width to prevent button stacking
cbullinger Feb 1, 2026
b3d00a5
Change PageSizeSelector dropdown to use neutral gray border instead o…
cbullinger Feb 1, 2026
fc04979
Change Back to Movies link to use MongoDB brand colors instead of blue
cbullinger Feb 1, 2026
9eeb404
Update Edit Selected button hover state to use dark button pattern
cbullinger Feb 1, 2026
7c38521
Establish button hierarchy: Make Add Movie primary, Search Movies sec…
cbullinger Feb 1, 2026
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
69 changes: 42 additions & 27 deletions mflix/client/app/aggregations/aggregations.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,54 @@
/* Aggregations styles */
/* Aggregations styles - MongoDB Branded */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
padding: 2.5rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.title {
font-size: 2.5rem;
font-size: 2.75rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 0.5rem;
color: var(--mongodb-slate);
margin-bottom: 0.75rem;
text-align: center;
}

.title::after {
content: '';
display: block;
width: 100px;
height: 4px;
background: var(--mongodb-spring);
margin: 1rem auto 0;
border-radius: 2px;
}

.subtitle {
font-size: 1.1rem;
color: #666;
font-size: 1.15rem;
color: var(--color-text-secondary);
text-align: center;
margin-bottom: 3rem;
font-weight: 500;
}

.section {
margin-bottom: 3rem;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: var(--mongodb-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 2px solid var(--mongodb-mint);
}

.sectionTitle {
font-size: 1.5rem;
font-weight: 600;
color: #2c3e50;
font-weight: 700;
color: var(--mongodb-white);
margin: 0;
padding: 1.5rem 2rem;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
background: var(--mongodb-forest);
border-bottom: 3px solid var(--mongodb-spring);
}

.tableContainer {
Expand All @@ -47,31 +59,34 @@
.table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
font-size: 0.95rem;
}

.table th {
background: #34495e;
color: white;
background: var(--mongodb-slate);
color: var(--mongodb-white);
font-weight: 600;
padding: 1rem;
padding: 1.125rem 1.25rem;
text-align: left;
white-space: nowrap;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.table td {
padding: 1rem;
border-bottom: 1px solid #e9ecef;
padding: 1.125rem 1.25rem;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}

.table tr:hover {
background: #f8f9fa;
background: var(--mongodb-mint);
}

.movieTitle {
font-weight: 600;
color: #2c3e50;
color: var(--mongodb-slate);
max-width: 200px;
word-wrap: break-word;
}
Expand All @@ -96,9 +111,9 @@
.comment {
margin-bottom: 0.75rem;
padding: 0.5rem;
background: #f8f9fa;
border-radius: 4px;
border-left: 3px solid #3498db;
background: var(--mongodb-mint);
border-radius: var(--radius-md);
border-left: 3px solid var(--mongodb-forest);
}

.comment:last-child {
Expand All @@ -107,14 +122,14 @@

.commentText {
font-size: 0.85rem;
color: #2c3e50;
color: var(--mongodb-slate);
margin-bottom: 0.25rem;
line-height: 1.4;
}

.commentMeta {
font-size: 0.75rem;
color: #7f8c8d;
color: var(--color-text-muted);
font-style: italic;
}

Expand Down
180 changes: 98 additions & 82 deletions mflix/client/app/aggregations/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { fetchMoviesWithComments, fetchMoviesByYear, fetchDirectorStats } from '@/lib/api';
import { MovieWithComments, YearlyStats, DirectorStats } from '@/types/aggregations';
import styles from './aggregations.module.css';
import ExpandableTable from '@/components/ExpandableTable/ExpandableTable';

export default async function AggregationsPage() {
const MOVIES_WITH_COMMENTS_LIMIT = 5;
Expand Down Expand Up @@ -38,43 +39,48 @@ export default async function AggregationsPage() {
<section className={styles.section}>
<h2 className={styles.sectionTitle}>Movies with Recent Comments</h2>
{commentsData.success && commentsData.data ? (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Movie Title</th>
<th>Year</th>
<th>Rating</th>
<th>Total Comments</th>
<th>Recent Comments</th>
</tr>
</thead>
<tbody>
{(commentsData.data as MovieWithComments[]).map((movie) => (
<tr key={movie._id}>
<td className={styles.movieTitle}>{movie.title}</td>
<td>{movie.year}</td>
<td>{movie.imdbRating ? movie.imdbRating.toFixed(1) : 'N/A'}</td>
<td>{movie.totalComments}</td>
<td>
<div className={styles.commentsContainer}>
{movie.recentComments?.slice(0, 2).map((comment, index) => (
<div key={`${movie._id}-${comment.date}-${index}`} className={styles.comment}>
<div className={styles.commentText}>
&ldquo;{(comment.text || 'No text').slice(0, 80)}{comment.text?.length > 80 ? '...' : ''}&rdquo;
</div>
<div className={styles.commentMeta}>
by {comment.userName} on {new Date(comment.date).toLocaleDateString()}
</div>
</div>
)) || <div>No recent comments</div>}
</div>
</td>
<ExpandableTable
initialRowCount={5}
totalRowCount={(commentsData.data as MovieWithComments[]).length}
>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Movie Title</th>
<th>Year</th>
<th>Rating</th>
<th>Total Comments</th>
<th>Recent Comments</th>
</tr>
))}
</tbody>
</table>
</div>
</thead>
<tbody>
{(commentsData.data as MovieWithComments[]).map((movie) => (
<tr key={movie._id}>
<td className={styles.movieTitle}>{movie.title}</td>
<td>{movie.year}</td>
<td>{movie.imdbRating ? movie.imdbRating.toFixed(1) : 'N/A'}</td>
<td>{movie.totalComments}</td>
<td>
<div className={styles.commentsContainer}>
{movie.recentComments?.slice(0, 2).map((comment, index) => (
<div key={`${movie._id}-${comment.date}-${index}`} className={styles.comment}>
<div className={styles.commentText}>
&ldquo;{(comment.text || 'No text').slice(0, 80)}{comment.text?.length > 80 ? '...' : ''}&rdquo;
</div>
<div className={styles.commentMeta}>
by {comment.userName} on {new Date(comment.date).toLocaleDateString()}
</div>
</div>
)) || <div>No recent comments</div>}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</ExpandableTable>
) : (
<div className={styles.error}>
Failed to load movies with comments: {commentsData.error || 'Unknown error'}
Expand All @@ -86,32 +92,37 @@ export default async function AggregationsPage() {
<section className={styles.section}>
<h2 className={styles.sectionTitle}>Movies by Year Statistics</h2>
{yearData.success && yearData.data ? (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Year</th>
<th>Movie Count</th>
<th>Average Rating</th>
<th>Highest Rating</th>
<th>Lowest Rating</th>
<th>Total Votes</th>
</tr>
</thead>
<tbody>
{(yearData.data as YearlyStats[]).slice(0, 20).map((yearStats) => (
<tr key={yearStats.year}>
<td className={styles.year}>{yearStats.year}</td>
<td>{yearStats.movieCount}</td>
<td>{yearStats.averageRating ? yearStats.averageRating.toFixed(2) : 'N/A'}</td>
<td>{yearStats.highestRating ? yearStats.highestRating.toFixed(1) : 'N/A'}</td>
<td>{yearStats.lowestRating ? yearStats.lowestRating.toFixed(1) : 'N/A'}</td>
<td>{yearStats.totalVotes?.toLocaleString() || 'N/A'}</td>
<ExpandableTable
initialRowCount={10}
totalRowCount={(yearData.data as YearlyStats[]).length}
>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Year</th>
<th>Movie Count</th>
<th>Average Rating</th>
<th>Highest Rating</th>
<th>Lowest Rating</th>
<th>Total Votes</th>
</tr>
))}
</tbody>
</table>
</div>
</thead>
<tbody>
{(yearData.data as YearlyStats[]).map((yearStats) => (
<tr key={yearStats.year}>
<td className={styles.year}>{yearStats.year}</td>
<td>{yearStats.movieCount}</td>
<td>{yearStats.averageRating ? yearStats.averageRating.toFixed(2) : 'N/A'}</td>
<td>{yearStats.highestRating ? yearStats.highestRating.toFixed(1) : 'N/A'}</td>
<td>{yearStats.lowestRating ? yearStats.lowestRating.toFixed(1) : 'N/A'}</td>
<td>{yearStats.totalVotes?.toLocaleString() || 'N/A'}</td>
</tr>
))}
</tbody>
</table>
</div>
</ExpandableTable>
) : (
<div className={styles.error}>
Failed to load yearly statistics: {yearData.error || 'Unknown error'}
Expand All @@ -123,28 +134,33 @@ export default async function AggregationsPage() {
<section className={styles.section}>
<h2 className={styles.sectionTitle}>Directors with Most Movies</h2>
{directorsData.success && directorsData.data ? (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Rank</th>
<th>Director</th>
<th>Movie Count</th>
<th>Average Rating</th>
</tr>
</thead>
<tbody>
{(directorsData.data as DirectorStats[]).map((director, index) => (
<tr key={director.director}>
<td className={styles.rank}>#{index + 1}</td>
<td className={styles.directorName}>{director.director}</td>
<td>{director.movieCount}</td>
<td>{director.averageRating ? director.averageRating.toFixed(2) : 'N/A'}</td>
<ExpandableTable
initialRowCount={10}
totalRowCount={(directorsData.data as DirectorStats[]).length}
>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Rank</th>
<th>Director</th>
<th>Movie Count</th>
<th>Average Rating</th>
</tr>
))}
</tbody>
</table>
</div>
</thead>
<tbody>
{(directorsData.data as DirectorStats[]).map((director, index) => (
<tr key={director.director}>
<td className={styles.rank}>#{index + 1}</td>
<td className={styles.directorName}>{director.director}</td>
<td>{director.movieCount}</td>
<td>{director.averageRating ? director.averageRating.toFixed(2) : 'N/A'}</td>
</tr>
))}
</tbody>
</table>
</div>
</ExpandableTable>
) : (
<div className={styles.error}>
Failed to load director statistics: {directorsData.error || 'Unknown error'}
Expand Down
Loading
⚡