UX improvements and design refresh - #34
Merged
Merged
Conversation
Merges the dot-pattern hero card with logo, sparkles badge, and tagline from design-1 with the four-phase timeline workflow (Prepare, Start, Engage, Review) from design-2. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add dot-pattern textures and SparklesIcon branding to header and footer. Color-code sidebar nav items with phase-specific accent borders. Apply consistent left accent borders, rounded-xl cards, and font-bold tracking-tight titles to all feature components and skeleton loaders. Phase color mapping: - Students: chart-1 (blue) - Generator: chart-2 (green) - Quizzes: chart-3 (yellow) - Breakout/Play: chart-4 (peach) - Projects: chart-5 (mauve) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Modified the background color and text color for active sidebar navigation items to improve contrast and readability. The background now uses a variable for the sidebar background, ensuring consistency with the overall theme.
- Students/Quizzes: replace tables with stacked card lists on mobile - Projects: use bottom Sheet for student selection on mobile instead of nested scroll - Breakout rooms: full-width group cards on mobile - Quiz play: tighter display area spacing on mobile - Fix project grouping Select values to match GroupMode type - Add toast notifications for project list creation and validation errors - Select items and sidebar hover now use subtle accent/10 tint with text-primary
- Introduced a volume slider for the timer with custom styles for both webkit and moz browsers. - Implemented functionality to load and save user-defined timer presets as favorites, allowing up to three favorites. - Added helper functions to convert seconds to a human-readable format and to apply presets easily. - Enhanced the QuizTimerCard component to support editable time fields and volume adjustments, improving user experience.
- Replaced the modal dialog with a slide-in bottom sheet for mobile/tablet views, improving accessibility and user experience. - Updated help content structure in the PageInfoDialog to include visual markers and clearer section headings. - Enhanced the PageInfo data with a warmer, more practical tone tailored for classroom teachers. - Adjusted test cases to reflect changes in component behavior and selector usage based on screen size.
- Replaced the "font-medium text-primary hover:text-primary/70" class with "touch-hitbox font-medium text-primary hover:text-primary/70" in the Footer, StudentNameGenerator, DashboardCards, QuizTimerCard, and Tabs components. - This change enhances the touch target area for links, improving usability on touch devices.
- Replaced the generateMetadata function with a static metadata object in layout.tsx for better performance and clarity. - Updated metadata for various pages (breakout rooms, generator, play, projects, quizzes, students) to enhance SEO, including clearer titles and descriptions. - Introduced a new site URL resolution method in site-url.ts, replacing the deprecated metadata.ts. - Removed unused metadata-related code and tests to streamline the codebase. - Improved alt text for images in components for better accessibility and SEO.
- Added responsive sizes attribute to images in the Footer and DashboardCards components to improve layout on various screen sizes. - Simplified the PrivacyNotice component by removing unnecessary mounted state management, streamlining the logic for displaying the notice based on user acknowledgment.
…acyNotice and Toaster components - Bumped version to 1.1.4 in package.json and updated AppShell. - Documented PrivacyNotice and Toaster components in layout and routes docs. - Added details on metadata handling, skeleton prop usage in feature components, and updated folder structure in documentation. - Improved route metadata documentation for better SEO and clarity.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
- Updated the PrivacyNotice component to use queueMicrotask for setting state, ensuring it runs after the current call stack, improving performance. - Modified the QuizTimerCard component to load favorites from localStorage using queueMicrotask, preventing hydration mismatches during initial render.
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 branch delivers a UX overhaul and design refresh: updated command center and timeline flow, design-6 styling across shell and routes, mobile-first improvements, timer and favorites controls, bottom-sheet help, touch-friendly links, refactored metadata/SEO, and documentation updates through v1.1.4.
Base:
mainHead:
redesign/ux-improvementsCommits (oldest to newest)
Changes
App shell and layout
app/layout.tsx— Metadata export, structure and layout updates.app/globals.css— New/updated global styles for design refresh.app/manifest.json— Manifest updates.app/robots.ts— Robots configuration changes.app/sitemap.ts— Sitemap updates.components/app-shell.tsx— Shell layout and behavior.components/header.tsx— Header design and structure.components/footer.tsx— Footer redesign and content.components/navigation/sidebar-nav.tsx— Sidebar styles and active state.components/ui/sidebar.tsx— Sidebar UI tweaks.Route pages
app/page.tsx— Dashboard: hero, timeline, and layout.app/breakout-rooms/page.tsx— Layout and metadata.app/generator/page.tsx— Layout and metadata.app/play/page.tsx— Layout and metadata.app/projects/page.tsx— Layout and metadata.app/quizzes/page.tsx— Layout and metadata.app/students/page.tsx— Layout and metadata.Dashboard and feature components
components/dashboard/dashboard-cards.tsx— Command center hero, timeline flow, card layout.components/breakout/breakout-groups-card.tsx— Styling and behavior.components/generator/generator-card.tsx— Styling and behavior.components/play/quiz-play-card.tsx— Styling and behavior.components/play/quiz-timer-card.tsx— Timer volume control, favorites, UX improvements.components/projects/project-list-builder.tsx— Builder UX and layout.components/projects/project-list-view.tsx— List view layout and behavior.components/quizzes/quiz-editor-form.tsx— Form and link styles.components/quizzes/quiz-import-card.tsx— Styling.components/students/student-form.tsx— Styling.components/students/student-table.tsx— Table layout and mobile behavior.components/student-name-generator.tsx— Styling.Help and utility
components/utility/page-info-dialog.tsx— Refactored to bottom sheet; enhanced help content.components/utility/__tests__/page-info-dialog.test.tsx— Tests updated for new behavior.components/privacy-notice.tsx— Logic simplified; image responsiveness.Loading skeletons
components/loading/generator-card-skeleton.tsxcomponents/loading/quiz-editor-skeleton.tsxcomponents/loading/quiz-play-card-skeleton.tsxcomponents/loading/student-form-skeleton.tsxcomponents/loading/student-table-skeleton.tsxUI primitives
components/ui/select.tsxcomponents/ui/tabs.tsxMetadata, SEO, and lib
lib/metadata.ts— Removed (replaced by route-level metadata export).lib/__tests__/metadata.test.ts— Removed.lib/page-info.tsx— Refactored for new metadata and page info.lib/site-url.ts— New site URL helpers.lib/storage.ts— New storage helpers.Docs and project config
CHANGELOG.md— Entries for UX and design changes; version 1.1.4.documentation/project-docs/components.md— PrivacyNotice, Toaster, metadata.documentation/project-docs/dependencies.md— Dependency updates.documentation/project-docs/routes.md— Route and metadata docs.documentation/project-docs/structure.md— Structure and key files.package.json— Version bump to 1.1.4.Diff summary
Checklist