Build/frontend design improvements

[NotYuSheng]

Summary

This PR implements comprehensive frontend design improvements for the MeetMemo
application, focusing on modern UI/UX enhancements, improved user workflows, and
professional audio recording capabilities.

---

Changes Made

• Redesigned action buttons: Implemented discrete red button design (#F4393B) with
  icon-only interface and prominent states
• Enhanced dark/light mode toggle: Created beautiful UX designer-style toggle
  switch with sun/moon icons
• Improved particles background: Enhanced visibility, removed ugly red color, added
  organizational color palette
• Added audio recording workflow: Implemented pause/resume functionality with
  professional HTML5 audio preview
• Enhanced visual design: Added gradient borders, improved shadows, better
  typography and spacing
• Improved user experience: Manual processing control, audio playback preview,
  better button state management
• Added interactive elements: Tab hover effects, improved model dropdown styling,
  better form controls

---

Context / Rationale

This is a major UI/UX enhancement focused on:

1. Professional appearance: Moving from basic buttons to a polished, modern
   interface
2. Better user control: Users can now preview recordings before processing,
   reducing wasted API calls
3. Improved workflows: Clear visual states guide users through recording → preview
   → processing
4. Brand consistency: Uses organizational colors throughout while maintaining
   accessibility
5. Modern design patterns: Implements current web design standards with smooth
   animations and interactions

The changes maintain all existing functionality while significantly improving the user
experience and visual appeal of the application.

---

Related Docs or References

• Branch: build/frontend-design-improvements
• Organizational Colors: #272B2D, #FFFFFF, #75797C, #2998D5, #265289, #c42030,
  #bba88e
• Key Technologies: React, HTML5 MediaRecorder API, CSS gradients and animations
• UI Libraries: Lucide React icons, particles.js for background effects

---

FastAPI Application Checklist (Delete if PR is not relevant)

This PR is frontend-only and does not affect the FastAPI backend.

---

General Checklist

• I have tested these changes locally
• I have updated relevant documentation or added comments where needed
• I have linked relevant issues and tagged reviewers
• I have followed coding conventions and naming standards

[gemini-code-assist]

Summary of Changes

Hello @NotYuSheng, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

I've focused on a major frontend design overhaul for the MeetMemo application. This includes a comprehensive refresh of the user interface, introducing modern UI/UX patterns, and significantly improving the visual appeal. A key functional enhancement is the new audio recording workflow, which now supports pause/resume and provides an audio preview before processing. The goal is to deliver a more professional, intuitive, and visually consistent experience for users, while maintaining all existing functionality.

Highlights

• Redesigned Action Buttons: I've completely redesigned the action buttons across the application, moving to a discrete red button design (#F4393B) that is primarily icon-only, with prominent states for key actions. This provides a cleaner, more modern aesthetic.
• Enhanced Dark/Light Mode Toggle: The dark/light mode toggle has been upgraded to a beautiful UX designer-style switch, featuring sun and moon icons for intuitive visual feedback. This enhances the overall user experience and visual appeal.
• Improved Particles Background: I've improved the particles background by enhancing its visibility, removing the previous red color, and integrating the organizational color palette. This creates a more cohesive and visually pleasing backdrop.
• New Audio Recording Workflow: A new audio recording workflow has been implemented, allowing users to pause and resume recordings. This includes a professional HTML5 audio preview, giving users the ability to review their recordings before processing.
• Enhanced Visual Design: Overall visual design has been significantly enhanced with the addition of gradient borders, improved shadows, and better typography and spacing throughout the application. This contributes to a more polished and professional appearance.
• Improved User Experience: User experience has been refined by providing manual processing control for recorded audio, allowing playback preview, and implementing better button state management. This gives users more control and reduces wasted API calls.
• Added Interactive Elements: I've added interactive elements such as tab hover effects and improved the styling of model dropdowns and other form controls. These small touches contribute to a more dynamic and responsive interface.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces significant and impressive design improvements to the frontend, moving to a more modern and professional UI. The changes include redesigned buttons, an enhanced dark/light mode toggle, gradient borders, and a complete audio recording workflow with pause/resume and preview functionality. The code is well-structured, and the new features are implemented effectively. I've left a few comments on the CSS, mainly concerning maintainability, cross-browser compatibility, and a bug with gradient borders that needs to be addressed.

[gemini-code-assist]

The border-color property does not accept linear-gradient values. As a result, the :focus and :hover states of the model select dropdown will not have the intended gradient border and will likely fall back to the default color. To apply a gradient border, you should use a different technique, such as using the border-image property or the pseudo-element overlay method that was used for .card elements in this same file.

[gemini-code-assist]

The use of !important should generally be avoided as it breaks the natural CSS cascade and can make styles difficult to debug and maintain. Consider increasing selector specificity to override styles instead. For example, .btn.btn-discrete is already more specific than a generic .btn-primary class, so !important may not be necessary here depending on the cascade.

[gemini-code-assist]

This selector contains redundant properties. The min-width, width, and padding properties are already defined in the .btn.btn-discrete rule and will be inherited. Removing them will make the styles cleaner. Additionally, the cursor: not-allowed; style from the generic .btn:disabled rule is not applied here due to higher specificity, so it should be added for consistency.

.btn.btn-discrete.btn-disabled,
.btn.btn-discrete:disabled {
  background: var(--btn-discrete) !important;
  opacity: 0.5;
  cursor: not-allowed;
}

[gemini-code-assist]

These styles for the audio player controls use the ::-webkit- vendor prefix, which means they will only apply to WebKit-based browsers like Chrome and Safari. For better cross-browser consistency, consider adding styles for other browser engines, such as ::-moz- for Firefox, if they are supported targets.