[UX] Improve empty library instructions and denied anticheat copy (#4312)

Improve empty library instructions and denied anticheat copy

Author: arielj

public/locales/en/gamepage.json

@@ -149,7 +149,7 @@
     "install": {
         "anticheat-warning": {
             "cancel": "No",
-            "disabled_installation": "The anticheat support is broken or denied and the multiplayer features will not work. The game cannot be installed. To install this game, disable this check in the advanced settings.",
+            "disabled_installation": "This game uses anticheat software that is not compatible with your operating system or the support was not enabled by the game developers. This means that the multiplayer features will not work, and there is nothing you (or the Heroic team) can do about it.<1></1><2></2>To install this game and try it anyway, go to Settings, Advanced, and check the option to allow the installation of games with broken or denied anticheat.<4></4><5></5>Note that there is no solution for this and you will risk getting banned in the game.",
             "install_anyway": "Yes (I understand the multiplayer features will not work)",
             "multiplayer_message": "The anticheat support is broken or denied. The game may open but the multiplayer features will not work. Do you want to install it anyway?",
             "ok": "Ok",

public/locales/en/translation.json

@@ -244,7 +244,7 @@
         "title": "Downloads"
     },
     "emptyLibrary": {
-        "noGames": "Your library is empty. You can <1>log in</1> using a store or click <3></3> to add one manually.",
+        "noGames": "Your library is empty.<1></1><2></2>Click <4>here</4> to log in with your Epic, GOG.com, or Amazon accounts. Then, your games will show up here in the Library.<6></6><7></7>To use games or apps from other sources, click <9></9> to add them manually.",
         "noResults": "The current filters produced no results."
     },
     "epic": {

src/frontend/components/UI/DialogHandler/components/MessageBoxModal/index.tsx

@@ -1,5 +1,5 @@
 import './index.css'
-import React, { useMemo } from 'react'
+import React, { ReactElement, useMemo } from 'react'
 import {
   Dialog,
   DialogContent,
@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
 import { DialogType, ButtonOptions } from 'common/types'
 interface MessageBoxModalProps {
   title: string
-  message: string
+  message: string | ReactElement
   onClose: () => void
   buttons: Array<ButtonOptions>
   type: DialogType
@@ -34,7 +34,10 @@ function decodeHTML(html: string): Array<JSX.Element> {
 const MessageBoxModal: React.FC<MessageBoxModalProps> = function (props) {
   const { t } = useTranslation()
 
-  const message = useMemo(() => decodeHTML(props.message), [props.message])
+  const message = useMemo(() => {
+    if (typeof props.message === 'string') return decodeHTML(props.message)
+    else return props.message
+  }, [props.message])
 
   const getButtons = function () {
     const allButtons = []

src/frontend/screens/Library/components/EmptyLibrary/index.tsx

@@ -11,8 +11,16 @@ function EmptyLibraryMessage() {
 
   let message = (
     <Trans i18n={i18n} i18nKey="emptyLibrary.noGames">
-      Your library is empty. You can <NavLink to="/login">log in</NavLink> using
-      a store or click <AddGameButton /> to add one manually.
+      Your library is empty.
+      <br />
+      <br />
+      Click <NavLink to="/login">here</NavLink> to log in with your Epic,
+      GOG.com, or Amazon accounts. Then, your games will show up here in the
+      Library.
+      <br />
+      <br />
+      To use games or apps from other sources, click <AddGameButton /> to add
+      them manually.
     </Trans>
   )
 

src/frontend/screens/Library/components/InstallModal/DownloadDialog/index.tsx

@@ -43,7 +43,7 @@ import React, {
   useMemo,
   useState
 } from 'react'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { AvailablePlatforms } from '../index'
 import { configStore } from 'frontend/helpers/electronStores'
 import DLCDownloadListing from './DLCDownloadListing'
@@ -222,9 +222,25 @@ export default function DownloadDialog({
     } else {
       showDialogModal({
         title,
-        message: t(
-          'install.anticheat-warning.disabled_installation',
-          'The anticheat support is broken or denied and the multiplayer features will not work. The game cannot be installed. To install this game, disable this check in the advanced settings.'
+        message: (
+          <Trans
+            key="install.anticheat-warning.disabled_installation"
+            i18n={i18n}
+          >
+            This game uses anticheat software that is not compatible with your
+            operating system or the support was not enabled by the game
+            developers. This means that the multiplayer features will not work,
+            and there is nothing you (or the Heroic team) can do about it.
+            <br />
+            <br />
+            To install this game and try it anyway, go to Settings, Advanced,
+            and check the option to allow the installation of games with broken
+            or denied anticheat.
+            <br />
+            <br />
+            Note that there is no solution for this and you will risk getting
+            banned in the game.
+          </Trans>
         ),
         buttons: [
           {

src/frontend/types.ts

@@ -127,7 +127,7 @@ export interface ContextType {
 export type DialogModalOptions = {
   showDialog?: boolean
   title?: string
-  message?: string
+  message?: string | React.ReactElement
   buttons?: Array<ButtonOptions>
   type?: DialogType
 }