[UI/UX] Pre-release Fixes

README.md

@@ -171,7 +171,7 @@ You can alternatively download the file ending in .rpm from the [latest release]
 
 #### Other Distributions (AppImage and TAR.XZ)
 
-Since these two distribution formats don't have a form of dependency management, make sure the `curl` and `gawk` commands are available. You might run into weird issues if they aren't.
+Since these two distribution formats don't have a form of dependency management, make sure the `curl` commands is available. You might run into weird issues if not.
 
 ##### AppImage
 

package.json

@@ -103,21 +103,18 @@
     "deb": {
       "packageCategory": "games",
       "depends": [
-        "gawk",
         "curl"
       ]
     },
     "pacman": {
       "packageCategory": "games",
       "depends": [
-        "gawk",
         "curl"
       ]
     },
     "rpm": {
       "packageCategory": "games",
       "depends": [
-        "gawk",
         "curl"
       ]
     }

src/frontend/components/UI/ActionIcons/index.tsx

@@ -75,7 +75,7 @@ export default function ActionIcons({
           >
             <FontAwesomeIcon
               className="FormControl__segmentedFaIcon"
-              icon={faBorderAll}
+              icon={faList}
             />
           </button>
         ) : (
@@ -86,7 +86,7 @@ export default function ActionIcons({
           >
             <FontAwesomeIcon
               className="FormControl__segmentedFaIcon"
-              icon={faList}
+              icon={faBorderAll}
             />
           </button>
         )}

src/frontend/components/UI/Header/index.css

@@ -25,6 +25,7 @@
   grid-area: filters;
   display: flex;
   align-self: center;
+  justify-self: flex-end;
 }
 
 .Header__filters .FormControl {

src/frontend/components/UI/PlatformFilter/index.tsx

@@ -14,8 +14,13 @@ export default function PlatformFilter() {
 
   const isMac = platform === 'darwin'
   const isLinux = platform === 'linux'
+  const isWindows = platform === 'win32'
   const disabledIcon = isLinux && category === 'legendary'
 
+  if (isWindows) {
+    return null
+  }
+
   return (
     <div className="platformFilters">
       <FormControl segmented>

src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx

@@ -42,7 +42,8 @@ export default function SidebarLinks() {
   const location = useLocation() as { pathname: string }
   const [, , runner, appName, type] = location.pathname.split('/') as PathSplit
 
-  const { epic, gog, platform, activeController } = useContext(ContextProvider)
+  const { epic, gog, platform, activeController, refreshLibrary } =
+    useContext(ContextProvider)
 
   const isStore = location.pathname.includes('store')
   const isSettings = location.pathname.includes('settings')
@@ -117,6 +118,9 @@ export default function SidebarLinks() {
           classNames('Sidebar__item', { active: isActive })
         }
         to={'/'}
+        onClick={async () =>
+          refreshLibrary({ runInBackground: false, fullRefresh: true })
+        }
       >
         <>
           <div className="Sidebar__itemIcon">

src/frontend/components/UI/StoreFilter/index.tsx

@@ -5,9 +5,12 @@ import FormControl from 'frontend/components/UI/FormControl'
 import ContextProvider from 'frontend/state/ContextProvider'
 
 export default function StoreFilter() {
-  const { category, handleCategory } = useContext(ContextProvider)
+  const { category, handleCategory, gog, epic } = useContext(ContextProvider)
   const { t } = useTranslation()
 
+  const isGOGLoggedin = gog.username
+  const isEpicLoggedin = epic.username
+
   return (
     <div className="storeFilter">
       <FormControl segmented small>
@@ -20,24 +23,28 @@ export default function StoreFilter() {
         >
           {t('All').toUpperCase()}
         </button>
-        <button
-          className={classNames('FormControl__button', {
-            active: category === 'legendary'
-          })}
-          title={`${t('header.store')}: ${t('store')}`}
-          onClick={() => handleCategory('legendary')}
-        >
-          EPIC
-        </button>
-        <button
-          className={classNames('FormControl__button', {
-            active: category === 'gog'
-          })}
-          title={`${t('header.store')}: ${t('GOG')}`}
-          onClick={() => handleCategory('gog')}
-        >
-          GOG
-        </button>
+        {isEpicLoggedin && (
+          <button
+            className={classNames('FormControl__button', {
+              active: category === 'legendary'
+            })}
+            title={`${t('header.store')}: ${t('store')}`}
+            onClick={() => handleCategory('legendary')}
+          >
+            EPIC
+          </button>
+        )}
+        {isGOGLoggedin && (
+          <button
+            className={classNames('FormControl__button', {
+              active: category === 'gog'
+            })}
+            title={`${t('header.store')}: ${t('GOG')}`}
+            onClick={() => handleCategory('gog')}
+          >
+            GOG
+          </button>
+        )}
         <button
           className={classNames('FormControl__button', {
             active: category === 'sideload'

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

@@ -102,6 +102,22 @@ export default function SideloadDialog({
     setWine()
   }, [title])
 
+  useEffect(() => {
+    setTimeout(async () => {
+      try {
+        const res = await fetch(
+          `https://steamgrid.usebottles.com/api/search/${title}`
+        )
+        if (res.status === 200) {
+          const steamGridImage = (await res.json()) as string
+          setImageUrl(steamGridImage)
+        }
+      } catch (error) {
+        console.log('Error when getting image from SteamGridDB')
+      }
+    }, 2000)
+  }, [title])
+
   async function handleInstall(): Promise<void> {
     window.api.addNewApp({
       runner: 'sideload',

src/frontend/screens/Login/index.tsx

@@ -17,7 +17,7 @@ export const epicLoginPath = '/loginweb/legendary'
 export const gogLoginPath = '/loginweb/gog'
 
 export default function NewLogin() {
-  const { epic, gog } = useContext(ContextProvider)
+  const { epic, gog, refreshLibrary } = useContext(ContextProvider)
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [loading, setLoading] = useState(true)
@@ -39,6 +39,11 @@ export default function NewLogin() {
     setIsGogLoggedIn(Boolean(gog.username))
   }, [epic.username, gog.username, t])
 
+  async function handleLibraryClick() {
+    await refreshLibrary({ fullRefresh: true, runInBackground: false })
+    navigate('/')
+  }
+
   return (
     <div className="loginPage">
       {loading && (
@@ -96,12 +101,12 @@ export default function NewLogin() {
             />
           </div>
         </div>
-
-        {(epic.username || gog.username) && (
-          <button onClick={() => navigate('/')} className="goToLibrary">
-            {t('button.go_to_library', 'Go to Library')}
-          </button>
-        )}
+        <button
+          onClick={async () => handleLibraryClick()}
+          className="goToLibrary"
+        >
+          {t('button.go_to_library', 'Go to Library')}
+        </button>
       </div>
     </div>
   )

src/frontend/screens/WebView/index.tsx

@@ -104,7 +104,7 @@ export default function WebView() {
 
             setTimeout(() => {
               webview.findInPage('authorizationCode')
-            }, 500)
+            }, 50)
             webview.addEventListener('found-in-page', async () => {
               webview.focus()
               webview.selectAll()
@@ -125,7 +125,7 @@ export default function WebView() {
                   console.error(error)
                   window.api.logError(String(error))
                 }
-              }, 500)
+              }, 200)
             })
           })
         }

src/frontend/state/GlobalState.tsx

@@ -295,7 +295,7 @@ export class GlobalState extends PureComponent<Props> {
   }
 
   handleSuccessfulLogin = (runner: Runner) => {
-    this.handleCategory(runner)
+    this.handleCategory('all')
     this.refreshLibrary({
       fullRefresh: true,
       runInBackground: false,