DOCSP-55536: Apply MongoDB branding to mFlix application

[cbullinger]

• Implement comprehensive MongoDB brand color system with CSS custom properties
• Update all component styling to use MongoDB brand colors (Forest, Evergreen, Mint, Slate)
• Enhance hover effects, transitions, and accessibility across all components
• Improve responsive design and focus states for better UX

Files Changed

16 files changed, 1078 insertions(+), 615 deletions(-)

New Components

• ExpandableTable.tsx - Reusable expandable table component
• ExpandableTable.module.css - Modern styling with pill-shaped buttons

Modified Files

• globals.css - MongoDB brand color system and design tokens
• home.module.css - White background
• aggregations.module.css - MongoDB-branded comment boxes
• Pagination.module.css - Text-link style pagination
• SearchMovieModal.module.css - MongoDB Forest green buttons
• movies.module.css - Updated search page pagination
• Plus 9 other component style files

[tmcneil-mdb]

This was a major change! Bringing in the Mongo green really elevated the design and I like a lot of the additions that you made.

Since we're working without explicit acceptance criteria, I focused my review on:

• Does the PR successfully apply the MongoDB brand?
• Does the updated styling improve the underlying UX/visual hierarchy?

On the first point, the rebrand is solid: we’re clearly using the MongoDB palette, focus states are more visible, and interactions feel more polished overall. This PR also reveals some opportunities to refine layouts, styling and hierarchy. A few specific areas:

1. Movie cards (list view)

• The cards now use the MongoDB greens consistently, but the selection model feels a bit overloaded: we have a checkbox, a card hover state, and a selected state (mint background + bright border).
• It’s not immediately clear what’s hover vs. selected vs. just focused, and the checkbox in the top corner doesn’t feel very connected to the card’s selected styling.

Suggestions:

• Simplify selection to a single, clear pattern. For example:
  • Make the whole card the selection target (clicking anywhere toggles selected) and tone down or remove the separate checkbox, or
  • Keep the checkbox as the only selection control and make the card’s selected state more subtle.
• Ensure the selected state is visually distinct from hover (e.g., stronger background or border for selected; lighter treatment for hover) so users can easily tell what’s actually selected.

TLDR: The hover states revealed that the checkbox in the corner perhaps is competing with the overall design. Perhaps we can simplify the card states and enforce consistent card sizing so that all the “Get details” buttons align.

Example:

2. Top menu / toolbar on Movies page

• The toolbar currently has several strong buttons side by side (“Search Movies”, “Update Selected”, “Delete Selected”, “+ Add Movie”), all with bold treatments and either strong green or red.
• Because they’re similar in weight, there’s no clear primary action; everything is shouting at the same level.

Suggestions:

• Establish a clearer hierarchy:
  • Make “+ Add Movie” the primary action (solid Forest green).
  • Treat “Search Movies” and “Update Selected” as secondary (outline or lighter styles).
• Consider reducing the number of “primary-looking” buttons visible at all times so the user’s eye has a clear starting point.

In addition to hierarchy, there’s a broader pattern issue with how bulk actions are surfaced:

The movies page pushes all bulk actions in the top toolbar at all times (“Search Movies”, “Update Selected”, “Delete Selected”, “+ Add Movie”). This makes the header busy and keeps destructive actions prominent, and it’s not very clear which actions are global vs. which apply only to selected cards.

A pattern I’d like to explore here is a contextual selection bar that only appears when one or more cards are selected (e.g., a bottom bar showing “2 selected”, “Deselect all”, and the relevant actions like Edit / Delete). The top area would only keep global actions like + Add Movie, filters, and search.

Benefits of that approach:

• Cleaner header and clearer primary action (+ Add Movie)
• Selection is treated as a distinct mode with an explicit “N selected” indicator
• Bulk/destructive actions only become visually prominent when they’re actually usable

I realize that’s a bigger UX change than just restyling, but I think this PR highlights that the current top‑toolbar pattern doesn’t scale well as we add more options. I’d recommend we plan a follow‑up to move bulk actions into a contextual bar (similar to the attached mock) and keep this PR focused on colors, if we liked that change.

Example:

3. Filters bar

• The filter bar uses mint borders and green controls that visually compete with the main toolbar and movie cards.
• The styling makes filters feel as important as the primary actions, even when users may not always need them.

Suggestions:

• Dial back the visual weight of the filters:
  • Use more neutral borders and backgrounds here, with green reserved for active states or primary actions. I would suggest the gray here.
  • Keep typography size/weight slightly below the main page heading and toolbar to reinforce hierarchy.
• This will help the filters read as tools rather than primary actions.

4. Navbar / app header

The move to a dark header feels very modern. I like it.

My main thought here is that the hover state is doing a lot: pill, neon background, underline, and text color change.

Suggestions:

• Remove the full‑width green rule under the links
• Keep the active hover in a soft pill with green text

Example:

5. Aggregations Page

This page is pretty good, I will say adding the mongo forest green w/ the slate does give a darker/heavier experience.

Right now, when you hover over an item, the background of the comments are lost, as they same color as the hovered background color. The darker styling on the show more draws your eye to the button vs the more important elements.

Suggestions:

• Let the table body be mostly neutral:
  • Keep row backgrounds white or very light, with mint used sparingly

or

• Tone down the comment cells:
  • Lighten the pill background and soften the border so the comments feel integrated

Final Thoughts
Overall, I think you did a great job and like I mentioned earlier, these color and UI changes, showcase some areas in which we could improve the design overall. I'm happy to discuss any of these suggestions with you.

Happy Designing. 💫

It was also mentioned to me that, we could consult the design team to get feedback on the design and suggestions for improvements.

[tmcneil-mdb]

These changes look awesome! Hopefully it wasn't too much extra work. Only one thing left and its not blocking, the aggregations comments and the hover are still the same color, so visually they are kinda disappearing, but not a major deal.

Great work ⭐