feat: implement design system tokens, modal animations, and responsive layouts - #611
Open
Levi-Ojukwu wants to merge 5 commits into
Open
Conversation
- Add AnimatedModal component with framer-motion animations - Create EmployeeProfileModal as reference integration - Update UpgradeConfirmModal to use AnimatedModal - Respect prefers-reduced-motion for accessibility - Add modal animation documentation in index.css References: #1361
- Add portal design tokens for spacing, typography, and breakpoints - Enhance responsive grid layouts for stats and transactions - Improve mobile experience with better touch targets - Add prefers-reduced-motion support for animations - Document token system for other components to reuse References: #1356
- Create Home.module.css with design tokens for dashboard - Implement responsive grid: 1 col mobile → 3 col desktop - Add mobile-first typography scaling - Improve CTA button layout for mobile - Add prefers-reduced-motion support - Document token system for other components References: #1355
- Create exportChart.ts utility with print/export functions - Add design tokens for print styles - Implement printPage() for programmatic printing - Add exportChartToImage() for chart export - Add exportChartToPDF() for PDF export - Add generatePrintHTML() for server-side generation - Add global print styles in index.css - Force light theme for print output - Hide interactive elements in print - Optimize typography for print readability References: #1354
- Remove unnecessary escape characters in CSS selectors - Add proper type annotations for dynamic imports - Add eslint-disable comments for dynamic import patterns - Add jsPDFInstance interface for type safety References: #1354
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
This PR addresses 4 design system and UI issues by implementing standardized design tokens, modal animations, responsive layouts, and print/export functionality. All changes follow existing patterns in @stellar/design-system and ThemeProvider.tsx.
Changes
closes #1361: Standardize modal enter/exit animation
closes #1356: Redesign employee portal layout for responsiveness
closes #1355: Redesign dashboard grid layout for responsiveness
closes #1354: Redesign print/export stylesheet
Commit Messages
Closes #1361
Closes #1356
Closes #1355
Closes #1354