feat(ui): Modernize translate page with Material Design 3 #241
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implement a futuristic, modern UI with Material Design 3 principles: - Add animated gradient top bar on translation card with color shifting - Enhance action buttons with gradient backgrounds and pulsing glow effects - Implement Material Design 3 elevation system with smooth transitions - Add subtle animations (fade-in, scale-in) for better UX - Redesign disclaimer with gradient background and information icon - Update buttons from clear to solid fill with primary color - Add hover effects with elevation changes and glows - Introduce MD3 design tokens (elevation, radius, easing, durations) - Create reusable animation keyframes and mixins - Improve header with diagonal gradient fade - Remove unused Material Icons font files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
AmitMY
force-pushed
the
feat/modernize-ui-material-design-3
branch
from
1da3109 to
48686d8
Compare
Add required permissions (checks: write, contents: read, pull-requests: write) to both website-deploy and website-deploy-dev jobs to allow the Firebase deployment action to properly interact with GitHub. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
|
Visit the preview URL for this PR (updated for commit 1f7efea): https://translate-sign-mt--pr241-feat-modernize-ui-ma-7esk39mw.web.app (expires Mon, 29 Dec 2025 15:03:00 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 739446cfe7a349700ebd347d2a39e3b90ba24425 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Modernize the translate page UI with Material Design 3 principles, creating a futuristic and engaging user experience with smooth animations, gradients, and enhanced visual hierarchy.
Changes
Visual Enhancements
Material Design 3 Implementation
Technical Improvements
md3-tokens.scss)animations.scss)Test Plan
Screenshots
Add screenshots/video if available
🤖 Generated with Claude Code