[UX] Add some copy in the Wine manager explaining what are the differ…

…ent Wines in linux (#3456)

* Add Wine variants basic explanation

* Memoize infoBox in wine manager

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:",

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;
+    }
+  }
+}

src/frontend/screens/WineManager/index.tsx

@@ -1,17 +1,21 @@
-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 {
   TypeCheckedStoreFrontend,
   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 (
+          <div className="infoBox">
+            <FontAwesomeIcon icon={faCheck} color={'green'} />
+            {t(
+              'wineExplanation.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.'
+            )}
+          </div>
+        )
+      case 'Wine-GE-LoL':
+        return (
+          <div className="infoBox">
+            <FontAwesomeIcon icon={faWarning} color={'red'} />
+            {t(
+              'wineExplanation.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.'
+            )}
+          </div>
+        )
+      case 'Proton-GE':
+        return (
+          <div className="infoBox">
+            <FontAwesomeIcon icon={faWarning} color={'orange'} />
+            {t(
+              '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.'
+            )}
+          </div>
+        )
+      default:
+        return <></>
+    }
+  }, [repository])
+
   return (
     <>
       <h4 style={{ paddingTop: 'var(--space-md)' }}>
@@ -148,6 +189,7 @@ export default function WineManager(): JSX.Element | null {
             />
           </button>
         </span>
+        {wineVersionExplanation}
         {wineVersions.length ? (
           <div
             style={