[UI] update new game page and theme colors #4424

biliesilva · 2025-03-17T13:29:31Z

UI/UX Improvements for Game Info Tabs

Changes Made:

Enhanced tab navigation visual design in-game info section
Improved background transparency for better readability
Removed unnecessary indicator lines from Material-UI tabs
Applied color variables with proper opacity for consistent theming
Adjusted padding and spacing for better visual hierarchy
Optimized tab container layout and border-radius
Removed Unnistal button as we already have this in the options menu, to keep pattern like Steam, GOG and Epic does.

Technical Details:

Used CSS color-mix for modern browsers with fallback support
Maintained theme consistency by using existing color variables
Improved accessibility by keeping text fully opaque while having semi-transparent backgrounds
Cleaned up redundant styles in tab components

Update

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

Tested the feature and it's working on a current and clean install.
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)

…sses and responsiveness.

Kajot-dev

Generally, looks nice, especially those tabs design!

Kajot-dev · 2025-03-22T14:01:33Z

src/frontend/screens/Game/GamePage/index.tsx

-                  <ReportIssue gameInfo={gameInfo} />
-                </div>
-              </>
-            )}
            {/* NEW DESIGN */}
            {experimentalFeatures.enableNewDesign && (


The old design is removed, but "new" design is still hidden behind a flag, which is disabled by default.. This makes the game page not render by default for everybody:

Thanks for this catch! I will remove it! :)

src/frontend/screens/Game/GamePage/index.scss

Kajot-dev · 2025-03-22T14:05:20Z

src/frontend/screens/Game/GamePage/index.tsx

-                            {t('button.uninstall', 'Uninstall')}
-                          </span>
-                        </button>
-                      )}


Uninstall button is removed entirely and it's not mentioned in the changes made. Is this intentional?

Yeah, I removed it because we already have an uninstall in the options and clicking in the game card. The reason behind that was that before, we didn't have this button there, and Steam, Epic, and GOG keep this in the settings/options menu, which is not so explicit. I will mention this is the PR description, Thanks!

Kajot-dev · 2025-03-22T14:16:32Z

src/frontend/styles/_colors.scss

-  --primary-active: #0db4be;
+  --status-warning: #f8ae79;
+  --status-danger: #f97881;
+  --status-info: #2ceac7;


Because of the changes in colors "pause/cancel install" button has the same bg as the icon and it's grey although it's clickable

I didn't change the icon colors or this button color in particular, nor did I make any drastic color changes, just contrast and brightness, and added new color variables. As I said below, I have to test and fix the theme colors we have now because some have some problems like this.

Kajot-dev · 2025-03-22T14:17:33Z

src/frontend/styles/_colors.scss

+  --brand-secondary: #bfb3ff;
+  --brand-secondary-hover: #dad5ff;
+  --brand-text-01: #caf3fd;
+  --brand-text-02: #a5edfd;


Colors in light mode (Nord Light) are broken:

Kajot-dev · 2025-03-22T14:18:50Z

src/frontend/screens/Game/GamePage/index.scss

@@ -907,8 +529,6 @@
    object-fit: cover;
    filter: blur(15px);
    opacity: 0.3;
-    /* scale is so there will be no ugly edges because of the blur */
-    transform: scale(1.1);


Is the background color leaking on edges when game splash contrasts with background color fixed in some other way?

Kajot-dev · 2025-03-22T14:23:04Z

Are most of the colors changed? I'm not a maintainer, but there is a Figma for this: https://www.figma.com/design/Zv89aBtLJ8yN4BwFS0AwNb/Heroic-Games-Launcher---UI-LIBRARY?node-id=3509-19224&p=f

Kajot-dev · 2025-03-22T14:30:21Z

src/frontend/screens/Game/GamePage/index.scss

    'main extra'
    'report report';

-  padding: var(--space-lg);
-  height: 100vh;


This is removed (height) and now, there is some weird padding on a larger screens:

Because of lack of the min-height page does not become scrollable on smaller, screen it just breaks:

I removed the height, but I've put a max-height. The first example is intentional.

Could you share with me the size you tested? Because I also added a media query for the Steam Deck screen size.

Also, the scrollables live inside each table wrapper, as you can see in this picture you shared for example.

Here how it looks like in an example which the media for Steam Deck:

I've tested on a 16:10 4K screen

Kajot-dev · 2025-03-22T14:33:48Z

Oh and the report link is no longer centered at all, is this intentional?

Kajot-dev · 2025-03-22T14:43:33Z

The background image is now centered to the whole screen instead of just the gamepage content:

Before:

After:

biliesilva · 2025-04-05T18:54:03Z

Are most of the colors changed? I'm not a maintainer, but there is a Figma for this: https://www.figma.com/design/Zv89aBtLJ8yN4BwFS0AwNb/Heroic-Games-Launcher---UI-LIBRARY?node-id=3509-19224&p=f

Yeah, I made these designs, and these color themes was made some years ago in the first designs before I came up with this new design, I'm planning to fix/improve each color theme but in another PR.

biliesilva · 2025-04-05T18:58:21Z

Oh and the report link is no longer centered at all, is this intentional?

Yes, because we have a modal that appears when we have an alert card for the game with anti-cheat on the other side, so for better visualisation is better not to leave this in the middle.

…cGamesLauncher into UI]-update-new-Game-Page,-and-some-the-me-colors

flavioislima · 2025-04-06T14:09:25Z

@biliesilva
Testing here, everything is looking promising and its working fine. Found only some issues with the Install button on some themes:

Midnight mirage:

Old School Heroic:

Dracula:

Marine and Marine Classic:

Zombie and zombie classic:

GRUVBOX:

Sweet:

flavioislima · 2025-04-06T14:10:44Z

Those also apply to the Install button on the install modal and the pause button:

Kajot-dev · 2025-04-12T10:33:53Z

Now, scroll is always enabled and I'm able to scroll through the sidebar:

TLDR scroll is triggered when it should not be and wrong element is scrollable

biliesilva added 5 commits March 17, 2025 13:17

Refactor: adjusts in the layout structure, game info and CSS classes.

ca9269c

Simplified and improved layout structure, including adjust of css cla…

165703f

…sses and responsiveness.

Update some scss variables

9d1668b

Updated some style variables

f936c9a

Updated SCSS variables colors, adding also new colors.

78aad14

biliesilva self-assigned this Mar 17, 2025

biliesilva requested review from arielj, imLinguin, flavioislima and CommandMC and removed request for arielj and imLinguin March 17, 2025 13:34

biliesilva changed the title ~~UI] update new game page, and some the me colors~~ [UI] update new game page, and some theme colors Mar 17, 2025

biliesilva requested a review from Nocccer March 17, 2025 16:33

flavioislima added the pr:ready-for-review Feature-complete, ready for the grind! :P label Mar 17, 2025

Kajot-dev reviewed Mar 22, 2025

View reviewed changes

biliesilva added 6 commits April 5, 2025 22:47

update translations

c2802b3

remove unused types

ae3c62a

remove unused props and context provider for enabling new design

ae9cbd5

adjust some color themes for the nord theme light and dark

e27616b

Remove unused variables nad import of the "enableNewDesign"

82ce118

Removed unused variables and props

0ebc66b

biliesilva added 6 commits April 5, 2025 22:51

fix some styles

bbc0e4b

Merge branch 'main' of https://github.com/Heroic-Games-Launcher/Heroi…

20f90df

…cGamesLauncher into UI]-update-new-Game-Page,-and-some-the-me-colors

removed unused props

cfb4aa7

removed unused enabledNewDesign prop

59d4a6c

remove verificação of the new design in the config tests

b4de434

add the import of React that was missing and causing lint error

8da4f2f

biliesilva changed the title ~~[UI] update new game page, and some theme colors~~ [UI] update new game page and theme colors Apr 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI] update new game page and theme colors #4424

[UI] update new game page and theme colors #4424

biliesilva commented Mar 17, 2025 •

edited

Loading

Kajot-dev left a comment

Kajot-dev Mar 22, 2025

biliesilva Apr 5, 2025

Kajot-dev Mar 22, 2025

biliesilva Apr 5, 2025

Kajot-dev Mar 22, 2025

biliesilva Apr 5, 2025

Kajot-dev Mar 22, 2025

Kajot-dev Mar 22, 2025

Kajot-dev commented Mar 22, 2025

Kajot-dev Mar 22, 2025

biliesilva Apr 5, 2025 •

edited

Loading

Kajot-dev Apr 12, 2025

Kajot-dev commented Mar 22, 2025

Kajot-dev commented Mar 22, 2025

biliesilva commented Apr 5, 2025

biliesilva commented Apr 5, 2025

flavioislima commented Apr 6, 2025

flavioislima commented Apr 6, 2025

Kajot-dev commented Apr 12, 2025

[UI] update new game page and theme colors #4424

Are you sure you want to change the base?

[UI] update new game page and theme colors #4424

Conversation

biliesilva commented Mar 17, 2025 • edited Loading

UI/UX Improvements for Game Info Tabs

Changes Made:

Technical Details:

Update

Kajot-dev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kajot-dev commented Mar 22, 2025

Choose a reason for hiding this comment

biliesilva Apr 5, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kajot-dev commented Mar 22, 2025

Kajot-dev commented Mar 22, 2025

biliesilva commented Apr 5, 2025

biliesilva commented Apr 5, 2025

flavioislima commented Apr 6, 2025

flavioislima commented Apr 6, 2025

Kajot-dev commented Apr 12, 2025

biliesilva commented Mar 17, 2025 •

edited

Loading

biliesilva Apr 5, 2025 •

edited

Loading