[UX] Improve gamepage

[Kajot-dev]

trafficstars

This PR aims to improve UI/UX of the redesigned gamepage view

Main fixes:

• Moved "report issues" link a bit so both panels will always be the same height
• Moved TabPanel into separate component as it was duplicated and gamepage used the same logic for the 3rd time
• Instead of buttons, used tabs with icons
  • Two new translations will be needed for tab headers
• Dots menu and game settings are on the right side back again
• Fixed HowLongToBeat not displaying properly
  • It will scale better with translations which have longer text (no more ellipses, but still not perfect)
  • It now uses MUI's Accordion
• Added initial styles for uninstall button (logic not implemented yet)
• Centered play button (see rationale)

A little rationale for centered button

• Button was not resizable which caused visual glitches on some translations
• However I didn't want to go back to the old design where the button was stretched

Some screenshots with comparison:

Main info tab

Before: After:

Extra info tab

Before: After:

Sys requirements tab

Before: After:

TODO:

• [x] Use more --space-* CSS variables for more consistency
• [x] Implement uninstall button
• [x] Make header (icons, back button) and footer (report issues) constant height so scrolling can be done by each panel independently

---

Use the following Checklist if you have changed something on the Backend or Frontend:

• [x] Tested the feature and it's working on a current and clean install.
• [x] Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
• [ ] Created / Updated Tests (If necessary)
• [ ] Created / Updated documentation (If necessary)

[flavioislima]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[Kajot-dev]

I have read the CLA Document and I hereby sign the CLA

[Kajot-dev]

• Top buttons have gained a shadow and are now sticky
• Anticheat warning does not have unnecessary margin and is scaled correctly now
• Removed min-height and increased padding to compensate in installinfo/extrainfo rows. Since height is now bounded by the padding, opening HLTB does not have this "jumping" effect
• Implemented Uninstall button

Redesigned gamepage should now be feature complete!

[Kajot-dev]

@arielj All issues should be addressed now. I see that one check has failed, but it was during installation of node-gyp so it's not related to this PR

EDIT: Merged changes from main and it passed

[Kajot-dev]

I was testing this, I found these 2 issues:

now that the 3 dots button is back on the side of the screen, the menu open in the wrong direction for RTL languages:

The old design handles the direction this opens for reference (if I remember right it's some css based on the RTL class).

then there's one more issue related to RTL languages, the tabs MUI component seems to not support it properly and the arrows are not the right icons and one of the icons never shows up, but I don't know if this is fixable if it's an issue with MUI itself

other than those 2 issues it looks great!

O I didn't even know, that Heroic supports RTL! As of MUI tabs this issue affects all MUI tabs in heroic so I would guess that it's a global MUI issue (I found this: https://github.com/mui/material-ui/issues/30207 ; it's closed but not resolved really :)). I will think of some wrapper for the Tabs component which would correct this

[Kajot-dev]

I was testing this, I found these 2 issues:

now that the 3 dots button is back on the side of the screen, the menu open in the wrong direction for RTL languages:

The old design handles the direction this opens for reference (if I remember right it's some css based on the RTL class).

then there's one more issue related to RTL languages, the tabs MUI component seems to not support it properly and the arrows are not the right icons and one of the icons never shows up, but I don't know if this is fixable if it's an issue with MUI itself

other than those 2 issues it looks great!

Fixed dots menu with a simple CSS tweak. Fixed all MUI tabs across Heroic (We need to use mui Theme with specified direction as mui has internal logic which depends on that). So what happened was that CSS was RTL but the MUI logic was expecting LTR.

[Kajot-dev]

Build on macos-12 failed while detaching a drive, not related to the PR

[Kajot-dev]

Fixed some more issues (and ofc all of these that you mentioned):

• Nav buttons now respect color scheme
• Background is scaled up by 10% to mitigate ugly edges on blurred image (this was not visible at first, since image was scaled to 100vw and now is scaled to 100%)
• Instead of image filter brightness(30%) it now uses opacity to blend with the background. This makes background darker on dark themes (text is light) and brighter on light themes (text is dark usually)
• Also styled progressbar using LinearProgress (since both sidebar and downloads tab are using it) - this also affects old design slightly
• Icons on the main button are now larger and icon is always on the left side (this affects old design slightly)

Now I think everything is working as it should

[Kajot-dev]

@arielj Pulled changes from main. Failed e2e, I think its unrelated (fails on testing a webview and I cannot reproduce the error), but you can rerun a Github job just in case

[arielj]

thanks!