feat: comprehensive design & UX improvements#2
Merged
Conversation
Foundation Components (@specto/ui): - Add Modal component with Radix primitives and motion animations - Add AlertDialog component for destructive action confirmations - Add Skeleton component with pulse animation and variants - Add ErrorBoundary component with fallback UI Design Tokens: - Add animation duration tokens (micro, normal, emphasis) - Add spring easing curve - Add skeleton color tokens - Add focus ring tokens - Add z-index scale (dropdown, sticky, modal, toast) Desktop App Fixes: - Add global ErrorBoundary wrapping entire app - Add auth flow timeout (5min) with 3min warning and cancel button - Add theme persistence with Zustand (dark/light/system) - Add AlertDialog confirmation for license deactivation Web App Fixes: - Add mobile navigation with hamburger menu and slide-out drawer - Add skip link for keyboard navigation - Add aria-labels to header elements
…e (P1) Desktop App: - Add OrganizationSkeleton with AnimatePresence for smooth transitions - Relocate search to sidebar header (always accessible, ⌘K shortcut) - Add search modal with recent orgs for quick access - Integrate ProGate component for consistent Pro feature gating Web App: - Enhance success page with confetti, license placeholder, quick-start guide - Add accessibility fixes to footer (aria-labels, external link indicators) - Add skip link target to main content wrapper - Create QA checklist component for visual testing documentation New Components: - ProGate: Wrapper for Pro feature gating with overlay/disable/hide modes
Animation System: - Add reusable animation variants (fadeIn, scaleIn, slideIn, etc.) - Add transition presets (fast, base, slow, spring) - Add stagger helpers for list animations - Add hover/tap animation utilities New Components (@specto/ui): - Dropdown: Radix-based dropdown menu with keyboard navigation - Switch: Toggle component with spring animation and size variants - Toast: Sonner wrapper with Specto theming and convenience functions Component Micro-interactions: - Card: Optional hover lift effect - Badge: Optional animated entrance - Stat: Animated number morphing, hover scale - Table: Row hover transitions, loading state animations App Integrations: - Dashboard: Staggered card animations on mount - Hero Leaderboard: CSS entrance animations, row transitions
…izations (P3) Offline Support: - Add useNetworkStatus hook for online/offline detection - Add OfflineIndicator component with animated banner - Add localStorage caching for org data in GitHub store - Show "Cached data from X ago" when using offline data Accessibility (WCAG): - Add role="application" to desktop root - Add aria-live="polite" to dynamic content areas - Add aria-labels to all interactive elements - Add scope="col" to table headers - Add focus rings to interactive elements Performance: - Add loading="lazy" to below-fold images - Use lazy state initialization in dashboard - Verify animations use compositor-only properties
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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 delivers a comprehensive design and UX overhaul for both the web marketing site and desktop application, organized into 4 phases of priority-based improvements.
Phase 0: Foundation (Critical)
Phase 1: UX Improvements (High Priority)
Phase 2: Polish
Phase 3: Enhancements
New Components
Modal@specto/uiAlertDialog@specto/uiSkeleton@specto/uiErrorBoundary@specto/uiProGate@specto/uiDropdown@specto/uiSwitch@specto/uiToast@specto/uiFiles Changed
Packages
packages/ui/- 9 new components, animation system, design tokensDesktop App
Web App
Test Plan
bun run build)Screenshots
Run the apps locally to see the changes:
Commits:
feat(ui): add foundation components and critical UX fixes (P0)feat(ux): add coordinated loading, search relocation, and success page (P1)feat(ui): add micro-interactions, new components, and animations (P2)feat(desktop): add offline support, a11y improvements, and perf optimizations (P3)