Skip to content

Design - Mod List#2033

Merged
ebkr merged 5 commits intodevelopfrom
design/mod-list
Jan 20, 2026
Merged

Design - Mod List#2033
ebkr merged 5 commits intodevelopfrom
design/mod-list

Conversation

@ebkr
Copy link
Copy Markdown
Owner

@ebkr ebkr commented Jan 8, 2026 •
edited
Loading

Mod List Design Changes

Consistency, legibility, and UX improvements to make the application feel more cohesive

Changes

  • Hover effect on mod cards
  • Mod card expansion is no longer a lighter colour
    • Darker is used for better contrast
  • Mod card buttons are actually buttons
    • They no longer take up the entire width of the card
    • Links are now visibly links (within the buttons)
      • This is consistent with the preview panel's implementation of links
      • Link button text colour no longer changes on hover
  • Preview panel has a background to distinguish content from the ordinary mod list
  • Preview panel sizing has been modified to provide better clarity
  • Native scrollbars are no longer used
    • App styled scrollbars provide a nicer feel and are less jarring
  • Package information summary on the preview panel now changes the cursor to a pointer
  • Resizing the preview panel properly handles text wrapping
  • Dependencies are ordered alphabetically
  • Inputs have had a border size increase to improve clarity
  • Inputs have been slightly darkened to increase visibility
  • Drag handle changes the cursor to a hand

Screenshots

Dark

image image image image

Light

image image image

@ebkr ebkr mentioned this pull request Jan 19, 2026
Merged
ebkr added 5 commits January 20, 2026 10:27
@ebkr
Improved visuals for mod lists
59ab8cb 
- Reduced default panel width as new styling gives slightly more space
- Added background colour variable to preview panel for both themes
- ExternalLink with a `button` class keeps the link text colour on hover
- DonateButton tooltip has been moved to the top and has some distance added to improve readability
- Panel now has a distinct background
- Scrollbar has unique styling
- App update banner styling is fixed
  - Additionally moved to its own component
- Word wrapping is improved
- Several locations of card buttons have been fixed
- Mod dependencies are now listed alphabetically
- Added cursor hover highlighting
- Buttons no longer span the entire card
- Input fields have more contrast
@ebkr
Added grab cursor to .handle
4c0817f
@ebkr
Converted OnlineModList.vue download action to button
8932e43
@ebkr
Reduced input darkening in light theme
3dc51bc
@ebkr
Removed redundant scrollbar width and removed colour variables
7a340a3
@ebkr ebkr merged commit bebcb9f into develop Jan 20, 2026
5 checks passed
@ebkr ebkr deleted the design/mod-list branch January 20, 2026 10:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ebkr