fix: improve meeting button visibility in light mode for non-selected items

[NotYuSheng]

Summary

This PR fixes visibility issues with meeting buttons in light mode, specifically improving the appearance and contrast of non-selected meeting buttons to enhance usability and readability.

---

Changes Made

• Enhanced meeting button styling for better visibility in light mode
• Improved contrast and visual clarity for non-selected meeting buttons
• Better color scheme for light mode user interface
• Maintained dark mode functionality while fixing light mode issues

---

Context / Rationale

Meeting buttons in light mode had poor visibility and contrast issues that made it difficult for users to:

1. Clearly distinguish between different meetings
2. Read meeting names effectively
3. Navigate the meetings list comfortably
4. Have consistent visual experience across themes

This fix ensures meeting buttons are clearly visible and accessible in both light and dark modes.

---

Related Docs or References

• UI fix for accessibility and usability improvements
• Theme consistency enhancement

---

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!

This pull request significantly enhances the application's frontend by overhauling its deployment infrastructure and introducing a comprehensive UI/UX redesign. While the initial intent was to improve meeting button visibility in light mode, the changes extend far beyond, encompassing a transition to a multi-stage Docker build with Nginx for serving the React app, a complete visual refresh with modern gradients and shadows, and substantial improvements to audio recording controls and processing. These updates collectively aim to provide a more robust, visually appealing, and user-friendly experience.

Highlights

• Infrastructure and Deployment Overhaul: I've refactored the frontend deployment strategy by transitioning from a direct Node.js server to a multi-stage Docker build that leverages Nginx to serve the React application. This includes a new nginx.conf file for efficient static file serving, routing, and API proxying.
• Extensive UI/UX Redesign: I've implemented a comprehensive visual refresh for the application's light mode, introducing modern linear gradients for backgrounds and buttons, and adding subtle box shadows. This significantly improves the overall aesthetic and contrast, addressing the original visibility concerns and enhancing the user experience across the board.
• Improved Audio Handling and User Controls: I've enhanced the audio recording and processing workflow by adding pause/resume functionality, allowing users more control over their recordings. Additionally, I've introduced audio preview sections for both recorded and uploaded files, and refactored the backend communication to poll for job status, ensuring a more robust handling of transcription processes.
• Dependency Updates and Code Refinements: I've updated the react-router-dom dependency to the latest version and made several minor adjustments to package metadata and CSS variables for consistency and maintainability.

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 significantly refactors the frontend to use a production-ready multi-stage Docker build with Nginx, which is a great improvement. It also overhauls the UI/UX with new themes, button styles, and a more robust audio processing flow that includes polling and audio previews. My review focuses on improving the new Nginx configuration for maintainability and security, refactoring the CSS to avoid !important, and cleaning up the JavaScript logic in MeetingTranscriptionApp.js to reduce duplication and improve readability. Overall, these are excellent changes that enhance both the user experience and the production-readiness of the application.

[gemini-code-assist]

The location blocks for /jobs/ and /jobs are duplicative and can be consolidated into a single block. This will improve maintainability.

    # Proxy API requests to backend
    location /jobs {
        proxy_pass http://backend:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Handle preflight requests for CORS
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, PATCH';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }

[gemini-code-assist]

The use of !important should be avoided as it makes CSS difficult to maintain and override. It's better to increase selector specificity to achieve the desired styles. This applies to all .btn-past-* and .btn-discrete* rules in this file.

[gemini-code-assist]

The functions uploadFile and processAudio contain a lot of duplicated logic for handling file processing, API calls, and polling. This can be refactored into a single function that accepts the audio data (either a File or a Blob) as an argument. This will make the code more maintainable and reduce redundancy.

For example, you could create a helper function like this:

const processAndPollAudio = async (audioData) => {
  // ... common logic from uploadFile and processAudio
};

[gemini-code-assist]

Using a wildcard * for Access-Control-Allow-Origin is overly permissive and can pose a security risk. It's recommended to restrict this to the specific domain of your frontend application. You could use an Nginx variable or an environment variable to make this configurable for different environments (e.g., development vs. production).

[gemini-code-assist]

The conditional logic for rendering the audio control buttons is quite complex and nested within the JSX. This makes it difficult to read and understand the different states of the UI. Consider extracting this logic into a separate helper function or a dedicated component that returns the correct set of buttons based on the component's state (isRecording, isPaused, recordedAudio, selectedFile). This will improve readability and maintainability.

[gemini-code-assist]

The state variables isPlayingRecording and isPlayingUpload and their setters are defined and updated, but their values are never used. This suggests they might be leftover from a previous implementation. If they are not needed, they should be removed to clean up the code.

[gemini-code-assist]

Using alert() for error handling provides a poor user experience. Consider implementing a more integrated notification system, such as toast messages or inline error displays, to inform the user about failures in a less disruptive way. This also applies to the error handling in processAudio.