fix: resolve meeting buttons visibility issue in light mode

[NotYuSheng]

Summary

This PR resolves visibility issues with meeting buttons in light mode by fixing CSS styling conflicts that were preventing proper display of meeting button text and states.

---

Changes Made

• Fix CSS specificity issues affecting meeting button visibility
• Resolve styling conflicts between base button styles and themed styles
• Ensure proper text contrast and visibility in light mode
• Maintain button functionality while improving visual clarity

---

Context / Rationale

Meeting buttons were experiencing visibility issues in light mode due to CSS styling conflicts. This affected user experience by:

1. Making meeting buttons difficult or impossible to read
2. Causing inconsistent visual behavior between light and dark modes
3. Reducing overall usability of the meetings interface

This fix ensures consistent, accessible button styling across all theme modes.

---

Related Docs or References

• UI accessibility fix for theme consistency
• Visual design improvement for better user experience

---

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 addressed the reported visibility issues with meeting buttons in light mode by implementing a significant overhaul of the application's CSS styling, introducing modern gradients, shadows, and new button types for improved clarity and user experience. Beyond the immediate UI fix, I've also enhanced the audio recording and processing capabilities, allowing for more flexible interaction with audio inputs. Crucially, I've undertaken a major architectural change by migrating the frontend deployment to a multi-stage Docker build served by Nginx, which will improve performance and maintainability. These changes collectively aim to deliver a more robust, visually consistent, and user-friendly application.

Highlights

• Enhanced UI Styling and Button Visibility: I've implemented a comprehensive fix for the meeting buttons' visibility in light mode by overhauling the CSS styling. This includes introducing new gradient backgrounds, subtle box shadows, and distinct styles for various button states (e.g., discrete, prominent, disabled). These changes ensure proper text contrast and visual clarity across both light and dark themes, significantly improving the user experience.
• Improved Audio Recording and Processing Workflow: I've refactored the audio recording and processing workflow. This now includes the ability to pause and resume recordings, discard recorded audio, and preview both recorded and uploaded audio files directly within the application. The backend communication for processing audio has also been improved to poll for job status, providing a more robust and responsive user experience during transcription.
• Frontend Deployment Architecture Shift to Nginx/Docker Multi-Stage Build: I've made a significant architectural change to the frontend deployment by migrating from a direct Node.js server to a multi-stage Docker build with Nginx. This involves a new Dockerfile that builds the React app and then serves it using Nginx, along with a new nginx.conf for static file serving, API proxying to the backend, and security configurations. The docker-compose.yml has been updated to reflect these changes, including new port mappings and removal of old volume configurations.
• Dependency Updates and Theme Toggle Enhancement: I've updated the react-router-dom dependency to version 7.7.1 and removed extraneous license fields from various dependencies in package-lock.json. Additionally, I've updated the particles-js background gradients and introduced a new, visually appealing theme toggle switch for dark mode.

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 improvements by containerizing the frontend with a multi-stage Dockerfile and Nginx, enhancing the recording functionality with pause/resume capabilities, and implementing a more robust audio processing flow with job status polling. The UI has also been updated with new styles and a theme toggle. My review focuses on improving the new Nginx configuration for better maintainability and security, refactoring the CSS to avoid !important, and suggesting enhancements to the JavaScript code for better error handling, code reuse, and API interaction.

[gemini-code-assist]

The logic for proxying requests to /jobs/ and /jobs is duplicated. This can be simplified into a single location block using a regular expression to improve maintainability and reduce code duplication.

    location ~ ^/jobs { # Matches both /jobs and /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]

Using Access-Control-Allow-Origin '*' is insecure and should be avoided in production environments. It's better to restrict it to the specific domain of your frontend application to prevent Cross-Site Request Forgery (CSRF) and other potential security vulnerabilities.

            add_header 'Access-Control-Allow-Origin' 'http://your-frontend-domain.com';

[gemini-code-assist]

The use of !important should be avoided as it makes CSS difficult to maintain and debug. The selector .btn.btn-discrete already has higher specificity than the base .btn selector, so !important is likely unnecessary here. The same applies to the :hover state.

Suggested change

	.btn.btn-discrete {
	background: var(--btn-discrete) !important;
	color: #fff;
	padding: 0.5rem;
	width: 2.5rem;
	justify-content: center;
	flex-shrink: 0;
	}
	.btn.btn-discrete:hover {
	background: var(--btn-discrete-hover) !important;
	}
	.btn.btn-discrete {
	background: var(--btn-discrete);
	color: #fff;
	padding: 0.5rem;
	width: 2.5rem;
	justify-content: center;
	flex-shrink: 0;
	}
	.btn.btn-discrete:hover {
	background: var(--btn-discrete-hover);
	}

[gemini-code-assist]

The use of !important should be avoided as it makes CSS difficult to maintain and debug. Given the class structure, these overrides can likely be achieved by increasing selector specificity if needed (e.g., .btn.btn-past-1), though it might not even be necessary due to source order. Also, the background-color property is redundant when the background shorthand property is already being used.

.btn-past-1 {
  background: #2998d5;
  color: #fff;
}

[gemini-code-assist]

The API returns the transcript as a stringified JSON, which requires parsing on the client-side. It would be more idiomatic for the API to return a JSON object directly. This would simplify the frontend code and align with common API design practices.

Suggested change

	const parsed = JSON.parse(transcriptData.full_transcript || "[]");
	const parsed = transcriptData.full_transcript; // No parsing needed if API returns an object

[gemini-code-assist]

The uploadFile and processAudio functions share a lot of common logic for making the API request and handling the response, including the polling mechanism. This duplicated code could be extracted into a single, reusable function that accepts the audio data (either a File or a Blob) as an argument. This would improve maintainability and reduce redundancy.

[gemini-code-assist]

Using alert() for error handling provides a poor user experience as it is a blocking and disruptive dialog. Consider implementing a more user-friendly notification system, such as toast notifications, to display errors without interrupting the user's workflow.