[General UI/UX] Replace Native Dialogs with HTML Dialogs

[flavioislima]

Problem description

Right now Heroic uses the native dialogs to show error messages or to prompt the user for uninstalling, repairing the game, warning in general. The problem is that those dialogs don't follow Heroic design and they feel like misplaced elements.

Feature description

Ideally, Heroic should have their own dialogs that work from inside it, just like the Install Dialog. So then it could follow the same design specifications.

Like on this example on Figma:

Link: https://www.figma.com/file/Zv89aBtLJ8yN4BwFS0AwNb/Heroic-Games?node-id=0%3A1

Alternatives

No response

Additional information

No response

[arielj]

I think this requires a fair amount of changes, I think it shouldn't be labeled as good first issue.

I was checking and the current dialog we use comes from electron, not react. So, apart from a design change, this will also require to change how the frontend communicates with the backend when triggering those actions in many places.

[flavioislima]

Yes, you're right, this is a big complex. One idea would be to have a PR only to implement the generic dialog and then we could replace the other dialogs in different PRs.

[Nocccer]

So this should be not complex anymore. We have now the Dialog component and we can create as first step a Error Dialog and Message Dialog. We already have a ProgressDialog aswell which is used for winetricks and save-sync output.

[flavioislima]

@biliesilva would need some examples to replace the one's bellow:

• showMessageBox (Update info)
• showMessageBox but with a checkbox (uninstall windows game on Linux)
• Other example with a bigger message:
• One Button
• Three button (Stop installation)

Some observations:

• I think the dialogs don't need a title like the native ones.
• The latest screenshot could have better UX:
  • This dialog is shown when we click on it to cancel the installation
  • The user has 3 options in this case.
  • Close the dialog and keep installing
  • Pause the installation (it is what keeping the files does)
  • Cancel the installation and remove the downloaded files.

So I believe we would need to support icons on the dialog buttons. Also, those dialogs could have an option to not close unless some of the options are chosen. So if we click on the backdrop it should do nothing. Or we can also use the default option when closing it.

[flavioislima]

@Heroic-Games-Launcher/development I have increased the priority for this one since it really breaks the joystick experience in Heroic. Let me know if I am forgetting other dialogs.

[BrettCleary]

Addressed by #1891

[biliesilva]

I just saw this message now. Do we still need the design? if yes, I can send it tomorrow.

[flavioislima]

I just saw this message now. Do we still need the design? if yes, I can send it tomorrow.

I don't think so. This was already done you can check the designs on the merged PR.