[Fix] Styling and error Dialogs

electron/config.ts

@@ -421,9 +421,15 @@ class GlobalConfigV0 extends GlobalConfig {
 
     try {
       let settings = JSON.parse(readFileSync(heroicConfigPath, 'utf-8'))
+      const defaultSettings = settings.defaultSettings as AppSettings
+
+      // fix relative paths
+      const winePrefix = defaultSettings.winePrefix.replace('~', userHome)
+
       settings = {
         ...(await this.getFactoryDefaults()),
-        ...settings.defaultSettings
+        ...settings.defaultSettings,
+        winePrefix
       } as AppSettings
       return settings
     } catch (error) {

electron/game_config.ts

@@ -5,7 +5,8 @@ import { GlobalConfig } from './config'
 import {
   currentGameConfigVersion,
   heroicConfigPath,
-  heroicGamesConfigPath
+  heroicGamesConfigPath,
+  userHome
 } from './constants'
 import { logError, logInfo, LogPrefix } from './logger/logger'
 import { join } from 'path'
@@ -201,9 +202,14 @@ class GameConfigV0 extends GameConfig {
       const settings = JSON.parse(readFileSync(this.path, 'utf-8'))
       // Take defaults, then overwrite if explicitly set values exist.
       // The settings defined work as overrides.
+
+      // fix relative paths
+      const { winePrefix } = settings[this.appName] as GameSettings
+
       return {
         ...GlobalConfig.get().config,
-        ...settings[this.appName]
+        ...settings[this.appName],
+        winePrefix: winePrefix.replace('~', userHome)
       } as GameSettings
     } catch (error) {
       logError(

electron/gog/games.ts

@@ -23,7 +23,8 @@ import {
   isWindows,
   execOptions,
   isMac,
-  isLinux
+  isLinux,
+  userHome
 } from '../constants'
 import { configStore, installedGamesStore } from '../gog/electronStores'
 import { logError, logInfo, LogPrefix, logWarning } from '../logger/logger'
@@ -364,6 +365,8 @@ class GOGGame extends Game {
       const { wineVersion, winePrefix, launcherArgs, useSteamRuntime } =
         gameSettings
       let wineFlag = ['--wine', wineVersion.bin]
+
+      // avoid breaking on old configs when path is not absolute
       let winePrefixFlag = ['--wine-prefix', winePrefix]
       if (wineVersion.type === 'proton') {
         const runtime = useSteamRuntime ? getSteamRuntime('soldier') : null

electron/launcher.ts

@@ -523,13 +523,6 @@ async function runLegendaryOrGogdlCommand(
         runner: runner.name
       })
 
-      if (
-        stderr.join().includes('ERROR') ||
-        stderr.join().includes('CRITICAL')
-      ) {
-        rej(stderr.join())
-      }
-
       if (signal) {
         rej('Process terminated with signal ' + signal)
       }

electron/legendary/games.ts

@@ -629,6 +629,8 @@ class LegendaryGame extends Game {
           : wineVersion.bin
 
       let wineFlag = ['--wine', wineBin]
+
+      // avoid breaking on old configs when path is not absolute
       let winePrefixFlag = ['--wine-prefix', winePrefix]
       if (wineVersion.type === 'proton') {
         const runtime = useSteamRuntime ? getSteamRuntime('soldier') : null

electron/shortcuts.ts

@@ -74,7 +74,8 @@ Categories=Game;
     default:
       logError(
         "Shortcuts haven't been implemented in the current platform.",
-        LogPrefix.Backend
+        LogPrefix.Backend,
+        false
       )
   }
 }
@@ -120,7 +121,8 @@ function shortcutFiles(gameTitle: string) {
     default:
       logError(
         "Shortcuts haven't been implemented in the current platform.",
-        LogPrefix.Backend
+        LogPrefix.Backend,
+        false
       )
   }
 

src/App.css

@@ -175,9 +175,10 @@ html,
   border: none;
 }
 
-.button.outline:hover {
+.button:hover.outline,
+.button.outline.active {
   background: transparent;
-  color: var(--accent-overlay);
+  color: var(--accent-overlay) !important;
   border: 2px solid;
 }
 

src/components/UI/SelectField/index.css

@@ -102,9 +102,6 @@
 }
 
 .selectFieldWrapper button {
-  min-width: 130px;
-  max-width: 50%;
   align-self: center;
   justify-self: center;
-  margin: 12px;
 }

src/screens/Settings/components/SyncSaves/index.tsx

@@ -133,6 +133,7 @@ export default function SyncSaves({
         onChange={(event) => setSyncType(event.target.value as SyncType)}
         value={syncType}
         disabled={!savesPath.length}
+        extraClass="rightButtons"
         // style={{ marginRight: '12px' }}
         afterSelect={
           <button

src/screens/Settings/components/Tools/index.tsx

@@ -5,6 +5,7 @@ import React, { useState } from 'react'
 import { IpcRenderer } from 'electron'
 import { WineInstallation } from 'src/types'
 import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
 import { getGameInfo } from 'src/helpers'
 
 const { ipcRenderer } = window.require('electron') as {
@@ -86,24 +87,16 @@ export default function Tools({ wineVersion, winePrefix, appName }: Props) {
         <div className="toolsWrapper">
           <button
             data-testid="wineCFG"
-            className="button outline"
-            style={{
-              color: winecfgRunning
-                ? 'var(--download-button)'
-                : 'var(--text-default)'
-            }}
+            className={classNames('button outline', { active: winecfgRunning })}
             onClick={async () => callTools('winecfg')}
           >
             <span className="toolTitle">Winecfg</span>
           </button>
           <button
             data-testid="wineTricks"
-            className="button outline"
-            style={{
-              color: winetricksRunning
-                ? 'var(--download-button)'
-                : 'var(--text-default)'
-            }}
+            className={classNames('button outline', {
+              active: winetricksRunning
+            })}
             onClick={async () => callTools('winetricks')}
           >
             <span className="toolTitle">Winetricks</span>

src/screens/Settings/components/WineSettings/index.tsx

@@ -208,7 +208,7 @@ export default function WineSettings({
           value={selectedPath}
           onChange={(e) => setSelectedPath(e.target.value)}
           afterSelect={
-            <div className="iconsWrapper rightButtons">
+            <div className="iconsWrapper rightButtons addRemoveSvgButtons">
               <SvgButton onClick={() => removeCustomPath()}>
                 <Tooltip
                   title={t('tooltip.removepath', 'Remove Path') as string}

src/screens/Settings/index.css

@@ -201,3 +201,9 @@ a {
   flex-direction: column;
   justify-content: center;
 }
+
+.addRemoveSvgButtons button {
+  min-width: none;
+  max-width: none;
+  margin: 0;
+}