Skip to content

#416: Table View Styling Updates #429

Open
ethanluc7 wants to merge 31 commits intomainfrom
416-table-view-styling-updates
Open

#416: Table View Styling Updates #429
ethanluc7 wants to merge 31 commits intomainfrom
416-table-view-styling-updates

Conversation

@ethanluc7
Copy link
Contributor

@ethanluc7 ethanluc7 commented Mar 11, 2026

Related to issue: #416

Summary

Updates table view styling including toolbar updates, icon updates, and table bug fixes.

Description of Changes

  • Reduced button padding from 6px 12px to 2px 12px on Button, Dropdown, and DictionaryVersionSwitcher for shorter toolbar buttons
  • Reduced icon stroke widths from 2 to 1.5 across icons (Eye, FileDownload, History, ListFilter) for a lighter look
  • Updated ChevronDown from a filled arrow to a stroked outline path
  • Updated List icon with a new compact SVG (viewBox 16x16, strokeWidth 1)
  • Changed Dropdown default size from 20 to 16
  • Added size prop to Button component for configurable font size
  • Changed button text font-weight from 700 to 500 (lighter)
  • Renamed "Filter By" to "Filters" in the attribute filter dropdown
  • Reordered toolbar items: Diagram View button moved to left section, download button stays on the right
  • Removed min-height: 80px and adjusted toolbar padding from 8px 16px to 16px 0
  • Removed outer table border; table cells now use border-block + border-right instead of full borders
  • Sticky first column gets z-index: 2 and uses box-shadow instead of a border on its right edge to avoid sticky-border issues
  • Table header padding increased from 6px 12px to 20px 16px; header font size bumped from 18px to 20px
  • Table cell padding increased from 12px to 16px
  • Highlight animation now fades to inherit instead of transparent
  • Removed border-radius: 8px from accordion items
  • Removed left border + padding from content inner container
  • Removed gap, bottom padding, and underline styling from title/hash elements
  • Chevron icon bumped from 16x16 to 20x20
  • Hash icon buttons simplified (removed underline on SVG, added flexbox centering)
  • Removed horizontal padding (2.5rem → 2.5rem 0) so header aligns flush with content
  • Added History icon to the version switcher dropdown
  • Reversed schema chain display order (parent → child) with toReversed() function

Readiness Checklist

  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Automated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  • Documentation
    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation

@ethanluc7 ethanluc7 requested a review from JamesTLopez March 11, 2026 13:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant