Fixed: As Many UI Issues as I can Handle

[Sewer56]

Summary

This PR fixes as many possible discrepancies between the App UI and the Figma design as possible.

Methodology is as follows:

• Set the App window to 70% opacity.
• Set the Figma project to 100% size. (Ctrl+0)
• Overlay the App Window ontop of the Figma

If the App Window does not match Figma, figure out what's wrong with the App.

In this PR I've basically went over the entire UI of the App, and made almost everything match 1:1 pixel by pixel with Figma.

Commit / Change List

• Fixed: Buttons no longer have excessive padding on left and right.
  • Reduced from 7 to 4, now icon buttons are round, and design is more closely matched.
  • Example: Icon in Pill now Makes Rounded Circle, instead of a thick rectangle.
• Fixed: Icon sizes in buttons being too small.
  • Icons inside buttons were 20px but should have been 24px (Design).
  • Example: AdvancedInstaller, My Games
• Fixed: Help Icon in Top Bar now Matches Sizes of Other Icons
• Fixed: Description Icon was too small in FOMOD Installer
• Fixed: My Games icon now shows filled GamePad, like on Website
• Removed: Legacy Unused Joystick 'My Games' Icon
• LoadoutGrid now shows correct PlaylistRemove instead of Close Button
• Rename: Health check -> Health Check
• Removed: Unused Description Icon
• Improved: Actions Section in Mod Library
  • Part 2
  • The text no longer clips out of the button if the column is resized down.
  • The column is no longer resized down when the window is resized.
• Fixed: Text Casing on Advanced add and View Mod files
• Fixed: Incorrect (missing) scale on Download Button Click
  • Pressing the Download button now shrinks it to the same amount as the loadout and nexus icon on the left spine.
• Fixed: Diagnostic Details Tab showing Wrong (Old) Icon
• Removed Unused Legacy DiagnosticPage Icon and Using SVG Import To Ensure Icon Sizes Match Figma
  • Part 2
• Fixed: The 'State' Column Text in Diff View is now Centered
• Changed: Tree Data Grid Default Column Order to Match Design
• Fixed: Advanced Installer and FileTreeView Icon Sizes Now Match Design
• Changed: File icon in FileTreeView to outline
  • This icon is used in FileTreeView and Nowhere else. So the entry was modified directly to match the current icon in FileTreeView
• Fixed: Incorrect Link on Progress-Download Icon
  • Part 2
• Fixed: Left Menu Icons now Styled via Styles
  • The sizes now also match Figma, and are upscaled to 20px with confirmation from @captainsandypants
• Added: Instructions for Importing SVGs Correctly
  • Note: This is temporary and will need further refinement. Will open a ticket for this.

2024 Jun 20:

• Removed: All button scaling on press as per design request
• Fixed: Tab Header Text is now Vertically Center Aligned
• Fixed: Toolbar Item Text not Vertically Alignment, ComboBox Text Alignment & Disabled Style

Fixes

fixes #1551
fixes #1658 (to some degree)

And a bunch of other non-reported tickets.

[erri120]

Did you rebase already? Some of these fixes might already been in main.

[Sewer56]

Some of these fixes might already been in main.

Only renaming Health check to Health Check.
It happened to be community PR'd as I was working on this branch.

Note: This branch was started around midnight today when I woke up.
And everything was being merged from main as main was being updated.
Aside from the above exception, everything here is new.

[Al12rs]

Tab headers icon sizes are changing when selected, which is likely due to changed default icon size.

[github-actions]

This PR conflicts with main. You need to rebase the PR before it can be merged.

[Sewer56]

Please note, phrasing like

Changing this default has caused a bunch of icons over the app to now not have correct size.

Needs further explanation.
Did UI things change on main?
Which icons are we talking about? etc.

I spent the whole day last Thursday frantically overlaying the App window over the Designs, to ensure each icon lines up.

Design got to see a bunch of this too, in a huddle.

I wound up doing that for just about every view in the App, so if I've missed some cases e.g. 'X is selected', those cases need to be stated exactly on the feedback so I am aware what needs fixing.

---

Misc Note: Design decided to update LeftMenu icons to the size in this PR, but because the decision was done late Thursday, it probably hasn't been reflected in actual design files.

[Al12rs]

The issues we found in review huddle with Design were:

• Selected tab headers have different icon sizes from non selected ones
• GameWidget icons were inconsistent (pushed a commit to fix this)
• Cog and Help icon in TopBar were too big
• All FileTrees had increased sizes now, not sure if this actually matched designs but we might have decided to use smaller size at the time instead since it was more compact.
• Icons in various buttons were now different in size, e.g. advanced installer, GameWidget etc.

Given the various inconsistencies, one would have to go through the entire app again to check each icon.
Changing the default size like that is not advised because it requires going though the entire app, both for the implementer and the reviewer, which takes a lot of time.

[Sewer56]

Changing the default size like that is not advised because it requires going though the entire app,

@Al12rs @captainsandypants So what should I do about this?

When doing this, I did in fact go through every page of the App and overlay them over the design.

If what you say is true, for example, going with smaller icons in file tree(s) being a deliberate choice, then what should I use as the source of truth?

Do I need to take @captainsandypants and go through every screen again? But in huddle

Icons in various buttons were now different in size, e.g. advanced installer, GameWidget etc.

Because these, for example, were in fact matching the designs on Figma. And I even asked specifically about GameWidget since those had a different size.

[github-actions]

This PR doesn't conflict with main anymore. It can be merged after all status checks have passed and it has been reviewed.

[Al12rs]

Reviewing again and marking things that need fixing, not necessarily in this PR:

• GameWidged icon inconsistencies:
  
• Tab headers icon size seems very big. Alignment definitely needs fixing:
  
• some icons don't change color correctly:
  
• Menu bar text and icon don't seem aligned:
  
• TopBar settings and help icons seem too big:
  

[Sewer56]

@Al12rs we'll probably need to do a review of the design in general with @captainsandypants at one point, and write up a list of things that need standardized. I was about to ask them for a huddle.

I noticed that even within the design, there were places where common icons had different sizes between the different designs.

[Sewer56]

some icons don't change color correctly:

This one actually has to do with how the icon is loaded. IIRC I actually need to convert the SVGs into a Sized ViewBox with an internal Geometry (kinda like how Projectanker does). I let Lausandy know about it last week ahead of time.

It'll be a bit more involved, so this is best left for a follow-up PR.

[Sewer56]

I opened

• Bug: SVG Icons in App Cannot be Recoloured #1666

For the icon colouring. Shouldn't be too hard, I already did the research.