diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 01a05d5b0f..0e4d313c4d 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -832,6 +832,11 @@ "release": "Release Date", "size": "Size" }, + "wineExplanation": { + "proton-ge": "Proton-GE-Proton is a Proton variant created by Glorious Eggroll. It is meant to be used in Steam, but some games outside Steam may work better with this variant. It provides mostly useless logs for troubleshooting.", + "wine-ge": "Wine-GE-Proton is a Wine variant created by Glorious Eggroll. It is the recommended Wine to be used outside Steam. This provides useful logs when troubleshooting.", + "wine-ge-lol": "Wine-GE-Proton...-LoL builds are meant to be used ONLY for League of Legends. These buils should NOT be used for any other game since they can cause problems." + }, "winetricks": { "install": "Install", "installed": "Installed components:", diff --git a/src/frontend/screens/WineManager/index.css b/src/frontend/screens/WineManager/index.css new file mode 100644 index 0000000000..f6ef5148c6 --- /dev/null +++ b/src/frontend/screens/WineManager/index.css @@ -0,0 +1,55 @@ +.wineManager { + .tabsWrapper { + display: flex; + justify-content: center; + width: 100%; + align-items: center; + + .FormControl__button { + width: fit-content; + cursor: pointer; + + &:hover { + color: var(--accent); + } + } + + .MuiTabs-root { + .MuiTabs-scroller { + .MuiTabs-indicator { + background-color: var(--accent); + } + + .MuiTabs-flexContainer { + .MuiTab-root { + color: var(--text-default); + } + + .Mui-selected { + color: var(--accent); + } + } + } + } + } + + .wineList { + margin-top: 48px; + + .gameListHeader { + grid-template-columns: 3fr 2fr 1fr 10%; + margin: 0 var(--space-xl-fixed); + & span:last-child { + justify-self: center; + } + } + } + + .infoBox { + width: 80%; + margin: 0 auto; + & svg { + margin-inline-end: 0.5rem; + } + } +} diff --git a/src/frontend/screens/WineManager/index.scss b/src/frontend/screens/WineManager/index.scss deleted file mode 100644 index 6907dea715..0000000000 --- a/src/frontend/screens/WineManager/index.scss +++ /dev/null @@ -1,45 +0,0 @@ -.tabsWrapper { - display: flex; - justify-content: center; - width: 100%; - align-items: center; - - .FormControl__button { - width: fit-content; - cursor: pointer; - - &:hover { - color: var(--accent); - } - } - - .MuiTabs-root { - .MuiTabs-scroller { - .MuiTabs-indicator { - background-color: var(--accent); - } - - .MuiTabs-flexContainer { - .MuiTab-root { - color: var(--text-default); - } - - .Mui-selected { - color: var(--accent); - } - } - } - } -} - -.wineList { - margin-top: 48px; - - .gameListHeader { - grid-template-columns: 3fr 2fr 1fr 10%; - margin: 0 var(--space-xl-fixed); - span:last-child { - justify-self: center; - } - } -} diff --git a/src/frontend/screens/WineManager/index.tsx b/src/frontend/screens/WineManager/index.tsx index a66dac77e1..6f87c5eb22 100644 --- a/src/frontend/screens/WineManager/index.tsx +++ b/src/frontend/screens/WineManager/index.tsx @@ -1,9 +1,9 @@ -import './index.scss' +import './index.css' import ContextProvider from 'frontend/state/ContextProvider' import { UpdateComponent } from 'frontend/components/UI' -import React, { lazy, useContext, useEffect, useState } from 'react' +import React, { lazy, useContext, useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { Tab, Tabs } from '@mui/material' import { @@ -11,7 +11,11 @@ import { wineDownloaderInfoStore } from 'frontend/helpers/electronStores' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faSyncAlt } from '@fortawesome/free-solid-svg-icons' +import { + faCheck, + faSyncAlt, + faWarning +} from '@fortawesome/free-solid-svg-icons' import { WineVersionInfo, Type, WineManagerUISettings } from 'common/types' import { hasHelp } from 'frontend/hooks/hasHelp' @@ -110,6 +114,43 @@ export default function WineManager(): JSX.Element | null { } }, [repository]) + const wineVersionExplanation = useMemo(() => { + switch (repository.type) { + case 'Wine-GE': + return ( +