Repository navigation
feat(ui): Material Design 3 Expressive System Overhaul & Comprehensive UI Modernization - #45
Merged
Merged
Conversation
…rence showcase and tokens
…t fields, tables, snackbar, and full navigation
…components, and documentation from custom generated package
… global styling - Update Material Design 3 tokens and theme palette definitions in material-theme.css and tokens.css - Consolidate legacy css files (dark-mode.css, globals.css, responsive.css, typography.css) into unified M3 theme - Update index.css, main.tsx root imports, and responsive layout hook - Add standalone M3 expressive demo showcase pages Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…ntainment surfaces - Add M3 Button, ButtonGroup, SplitButton, SegmentedButton, Fab, ExtendedFab, and FabMenu - Implement Badge, Carousel, Divider, IconButton, List, Card, and Chip components - Update MetricCard and AuthShell layout primitives to align with M3 Expressive guidelines - Add comprehensive Tier 1 and Tier 3 unit and accessibility test suites Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…nd search components - Implement TextField, PasswordField, TextArea, and M3SelectField form controls - Add Checkbox, RadioButton, Switch, and Slider selection controls - Introduce DatePicker, TimePicker, and SearchBar components - Add Tier 2 and Tier 5 test suites for selection controls, pickers, and search Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…ck components - Implement NavigationRail, NavigationBar, NavigationDrawer, TopAppBar, and Tabs - Add Dialog, SideSheet, BottomSheet, Menu, Modal, and Tooltip overlay components - Add Snackbar, LoadingIndicator, ProgressIndicator, and Toast feedback mechanisms - Include Tier 4, Tier 6, and Tier 7 test suites for feedback, overlays, and framing Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…nPrimitives - Refactor SkeletonPrimitives to support standard M3 Expressive loading states - Remove redundant per-feature skeleton wrappers and tests in favor of reusable primitives - Add unit tests for SkeletonPrimitives component variants Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…ding page - Integrate M3 Expressive layout structure in AdminLayout and StudentLayout - Update AdminSidebar and StudentSidebar navigation drawer/rail styling - Adapt route guards and application route configuration for M3 layouts - Refactor HomePage and gateway styling with M3 Expressive tokens - Update layout and routing unit tests Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…essive - Modernize Student login, sign-up, OTP verification, and password reset forms and pages - Update Admin login, forgot password, OTP verification, and create password flows - Adopt M3 form controls and styling across authentication views - Remove deprecated generic auth form components in favor of modular feature forms Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…sive components - Refactor StudentDashboardPage to use shared M3 MetricCard and typography - Update Profile editors (Activity, Award, Certificate, ContactLink, Education, Experience) - Standardize ProfileForm, ProfileIdentityCard, and ProfileCollectionSection - Remove redundant feature-level StudentMetricCard in favor of shared component - Update unit and integration tests for dashboard and profile editors Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…d architecture - Replace legacy project modal and table with ProjectCard, ProjectDetailsPanel, and ProjectRepositoryGrid - Introduce AddSkillFlow, DeclaredSkillsPanel, and competency utility logic - Retire deprecated skill forms, level select, and table components - Update StudentProjectsPage, StudentSkillsPage, and accompanying test suites Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…cademic Records - Add RegisteredStudentsCardList and StudentExportDialog to student management - Align RegisteredStudentsTable, Toolbar, Deep Dive, and ReadOnlyStudentProfile with M3 components - Refactor Eligible Students table, import panel, and form views - Update AcademicRecordsPage and GpaSummaryCards with modern card surfaces Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…iews, and card lists - Introduce LedgerUploadsCardList and LedgerAcademicInspectionCardList for responsive layouts - Update LedgerCommitDialog, LedgerRecordDetailsModal, and LedgerReviewSection with M3 dialogs - Modernize upload panel, upload status, validation table, and AcademicLedgerPage Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…alogs and card lists - Introduce CandidateResultsCardList for responsive candidate results display - Refactor filter panels (DeclaredSkillFilterPanel, RuntimeGpaFilterPanel, CandidateSelectionPanel) - Update candidate modals and selection review dialogs with M3 modal dialogs - Modernize ShortlistDirectory, ShortlistDetailWorkspace, and ShortlistsPage - Remove legacy CandidateResultsSkeleton in favor of shared skeleton primitives Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
… M3 Expressive - Modernize Company and Internship Request forms, tables, delete dialogs, and detail modals - Refactor RequiredSkillPicker and InternshipRequestWorkspace with M3 tokens - Update AdminDashboardPage layout and metrics display - Remove deprecated internship skeletons in favor of shared primitives - Update company and request management test suites Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…view - Update CvActionBar and CvRecordSelectionGroup with M3 Expressive buttons and selection - Enhance CvConfigurationPanel, CvOutputPanel, and CvPreviewPanel styling and layout - Adapt CvBuilderPage to use updated design system tokens Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
- Update student auth and profile E2E tests for M3 components and flows - Update skeleton visuals E2E spec to validate consolidated SkeletonPrimitives Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
…onfiguration - Add student dashboard and profile audit implementation plan and foundation styles - Add Claude IDE dev launch configuration Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
…iltering - Rebuild Candidate Filtering's custom skill selector on the RequiredSkillPicker pattern: server-paginated search, instant add/remove, Dialog size to match Create Internship Request - Add Core cluster / Skill category M3SelectField dropdowns to RequiredSkillPicker (Internship) and ProjectForm (Student Projects), wired into the existing useIndividualSkills query - Convert AddSkillFlow's (Student Skills) chip-based cluster/category filters to the same dropdown pattern for consistency across all four pickers Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Run prettier --write across the repo to satisfy format:check (branch had never been formatted with the current Prettier config) - Remove unused useCallback/Button/Chip imports in RegisteredStudentsToolbar flagged by code-quality review - Fix M3SelectField's dropdown label having no accessible association (missing htmlFor/aria-label on the underlying select) — a real a11y bug affecting every dropdown consumer in the app - Fix RegisteredStudentsPage rendering both table and card views simultaneously (hidden via CSS) instead of conditionally, causing duplicate-element test failures - Add type="search" to CandidateResultsWorkspace's search field so it exposes the expected searchbox role - Normalize hex-color casing in themePalette.test.ts's comparisons - Update RegisteredStudentsPage/ShortlistsPage/candidate-filtering tests to match already-shipped UI text/markup that the tests had drifted from Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The 503 taxonomy-fetch response is retried once by react-query (503 isn't in the non-retryable status set), which pushes the error state past vitest's default 1000ms findBy timeout on slower CI runners even though it resolves quickly locally. Give it the same generous timeout already used elsewhere in this suite for similarly retry-sensitive assertions. Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…eliminate CLS and mobile visibility issues
…tlists pagination - Registered Students table: fix uneven header padding — non-sortable columns (Degree Program, Level) had padding:0 with no compensating inner element, while sortable columns got 12px/16px via their sort button; give all header cells consistent padding + vertical-align, letting sortable headers continue to delegate to their button - Add a line-height to the table so wrapped body text (e.g. long degree program names) doesn't look cramped - Rename the "Student Roster" section heading to "Student List" - Replace Shortlists' bespoke numbered pager (unstyled after the M3 rebuild superseded its CSS) with the shared PaginationBar component, matching Registered Students/Academic Records; remove the now-dead .shortlist-pagination CSS and update the one test asserting on its old text format Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ts roster header - Add padding to .registered-students-toolbar-heading — it had none, so "Student List" and its subtitle sat flush against the card border - Eligible Students: rename "Roster" heading to "Student list" and move the student count into its own Chip; .es-roster-heading was already built as a space-between flex row expecting two children, it just had the count baked into the single title string instead Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…nents - Profile collection sections (Education, Certificates, Awards, etc.): the mobile media query re-asserted flex-wrap:nowrap on .profile-section-actions (a no-op that undid the intended fix), squeezing the search field instead of wrapping to a second line - Remove a dead, conflicting .page-header block in index.css that fought material-theme.css's own !important-based rule (which explicitly declares itself the single source of truth); the real mobile stacking rule at @media (max-width:900px) already applies globally and needed no change - Modal (the non-M3 overlay, still used by several features) had no mobile treatment at all unlike Dialog's adaptiveFullscreen; give it a bottom-sheet-style full-width mobile layout at <=599px - Remove an unscoped global `table { min-width: 640px }` rule that could force page-level horizontal scroll on any table lacking its own overflow-x wrapper; verified every table in the app already has a properly scoped wrapper with its own explicit min-width, so this was pure accidental risk with no upside Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…label overlap - Academic Ledger: both view-mode toggles now respect useIsCompactLayout, defaulting to card view on mobile and hiding the toggle, matching the pattern already used on Registered Students and Candidate Filtering. - Internship Management company rows and Shortlists matrix rows: headline and supporting text were forced to nowrap/ellipsis and lacked min-width:0, so flex children never shrank below their intrinsic content width and overflowed their row containers on narrow viewports. Now they wrap and shrink correctly. - M3SelectField: the floating label only lifted when the selected value was a non-empty string, so any field defaulting to an empty-value "All ..." option rendered its label directly on top of the displayed value. The label now floats whenever an option is selected, regardless of its value. Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ojects gap - SearchBar: .m3-search-input had flex:1 with no min-width:0, so on narrow viewports the input refused to shrink below its intrinsic width and overflowed into adjacent controls. Most visible as the "Search professional links" label overlapping the Add button on the Profile page, but this was a bug in the shared component affecting every SearchBar. - Skills page "Edit competency" dialog: the Beginner/Intermediate/Advanced SegmentedButton is display:inline-flex with no width constraint, so its natural width overflowed the dialog on mobile. Added a --fluid modifier (full width, items flex:1 with ellipsis) and applied it to this dialog. - Projects page: .s4-projects-toolbar .m3-search-bar-wrapper sets flex: 1 1 360px for the desktop (row) layout, but the mobile media query switches the toolbar to flex-direction: column without resetting that flex-basis — so the 360px basis applied to height instead of width, stretching the search bar to ~360px tall and leaving a large empty gap before the project list. Reset to flex: none on mobile. Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The "CV Management" / "CV Management – Admin" title took up header space next to the menu button and theme toggle on narrow viewports where it added no information the bottom navigation doesn't already convey. Hidden on mobile only (isMobile); tablet and desktop keep the title. Co-authored-by: Sahan Basnayake <sahanbasnayake888@gmail.com> Co-authored-by: Neelaka Wijesooriya <neelakanadeeshan171@gmail.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This branch was successfully deployed
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
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 pull request introduces a comprehensive architectural and visual overhaul of the frontend, transitioning the entire application to Material Design 3 (M3) Expressive. The initiative unifies the design language, modernizes interactive primitives and layout systems, consolidates legacy CSS stylesheets, refactors skeleton loading mechanisms, and updates all major student and admin workflows for enhanced usability and responsiveness.
Key Highlights & Architectural Changes
1. Design System Tokens & Global Styling
tokens.cssandmaterial-theme.csscovering primary, secondary, tertiary palettes, surface containers, states, elevation levels, and typography scales.globals.css,dark-mode.css,responsive.css,typography.css) in favor of centralized CSS custom properties and token-driven utilities.m3-expressive-demo.html,m3-expressive-dropdown-demo.html).2. M3 Expressive Shared Primitives (Tiers 1–7)
3. Skeleton Loading System Refactoring
SkeletonPrimitives(cards, text rows, avatars, badges, and list items) across all features.4. Layout & Navigation Architecture
AdminLayoutandStudentLayoutusing M3 Expressive navigation rails/drawers and responsive drawer state management.HomePageand gateway styling using M3 expressive surface containers, hero layouts, and animations.5. Feature-Level Modernization
StudentDashboardPagewith sharedMetricCards, and overhauled profile section editors (Education, Experience, Awards, Certificates, Activities, Contacts) with card-based lists.ProjectRepositoryGrid,ProjectCard, andProjectDetailsPanel. IntroducedAddSkillFlow,DeclaredSkillsPanel, and competency evaluation utilities.RegisteredStudentsCardListandStudentExportDialog, updated Deep Dive views, and refreshed GPA summary cards.LedgerAcademicInspectionCardList,LedgerUploadsCardList) and updated commit dialogs, inspection views, and tables.CandidateResultsCardList, updated filtering panels (GPA, skills), and enhanced candidate review modal workflows.CvActionBar, preview panels, and configuration sections with M3 tokens and button layouts.Verification & Quality Assurance
tsc -bpasses with 0 errors across all feature modules and shared components.auth.student.spec.ts,skeleton-visuals.spec.ts,student-profile.spec.ts) to align with updated DOM structures and component roles.Co-Authors
Co-authored-by: Sahan Basnayake sahanbasnayake888@gmail.com
Co-authored-by: Neelaka Wijesooriya neelakanadeeshan171@gmail.com