Skip to content

Move inline CSS from ChatPage.tsx to ChatPage.css for consistency#37

Merged
mahata merged 3 commits intomainfrom
copilot/fix-36
Jul 10, 2025
Merged

Move inline CSS from ChatPage.tsx to ChatPage.css for consistency#37
mahata merged 3 commits intomainfrom
copilot/fix-36

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jul 10, 2025

This PR migrates all CSS-in-JS styles from ChatPage.tsx to the dedicated ChatPage.css file for better maintainability and consistency.

Changes Made

  • Removed CSS-in-JS implementation: Eliminated createCssContext and all inline CSS definitions from ChatPage.tsx
  • Added CSS classes to ChatPage.css:
    • .chat-container - Main container with white background, border-radius, padding, and box-shadow
    • .message - Message styling with light blue background and blue left border
    • .input-container - Flex layout for input and send button
    • .status - Centered, bold status text
    • .connected / .disconnected - Green/red color classes for connection status
  • Updated component to use className: Replaced dynamically generated CSS classes with static CSS class names
  • Maintained JavaScript compatibility: Kept all data-* attributes for client-side functionality
  • Updated tests: Modified tests to verify CSS classes instead of CSS-in-JS functionality

Before and After

Before: Used createCssContext from hono/css to generate dynamic CSS classes
After: Uses traditional CSS classes defined in the stylesheet

The visual appearance remains exactly the same, but all styling is now consolidated in one place for easier maintenance.

![Chat page after migration](https://github.com/user-attachments/assets/c4d4b540-843d-4148-8d2c-fe23e7036b6e)

Testing

  • ✅ All unit tests pass
  • ✅ Build succeeds without errors
  • ✅ Manual verification shows identical visual appearance
  • ✅ WebSocket functionality remains intact

Fixes #36.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: mahata <23497+mahata@users.noreply.github.com>
Copilot AI changed the title [WIP] Move inline CSS from ChatPage.tsx to ChatPage.css for consistency Move inline CSS from ChatPage.tsx to ChatPage.css for consistency Jul 10, 2025
Copilot AI requested a review from mahata July 10, 2025 05:06
@mahata mahata marked this pull request as ready for review July 10, 2025 05:39
@mahata
Copy link
Copy Markdown
Owner

mahata commented Jul 10, 2025

@copilot Fix CI in GitHub Actions.

Co-authored-by: mahata <23497+mahata@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jul 10, 2025

@copilot Fix CI in GitHub Actions.

Fixed the CI failure by correcting CSS formatting in the rgba() function to meet Biome linter requirements. The issue was missing spaces after commas in rgba(0,0,0,0.1) which should be rgba(0, 0, 0, 0.1). CI now passes all checks including linting, building, and testing. (e623516)

@mahata mahata merged commit 156249f into main Jul 10, 2025
2 checks passed
@mahata mahata deleted the copilot/fix-36 branch July 10, 2025 06:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Move inline CSS from ChatPage.tsx to ChatPage.css for consistency

2 participants