Fix Issue #2466 GamePage image is missing logo when available (#3245)

* Add logo support in GamePage and GamePicture

In GamePage component, add logo variable and pass it to GamePicture component.
In GamePicture component, add logo parameter; add logo element (same as
the CachedImage logo element in GameCard)

There was no need to add CSS, since there was  already CSS for logo in
GamePicture  that positions it at the bottom center.

* Rename 'logo' variables to 'art_logo'

Purpose of this is to maintain naming consistency with other
variables, such as 'art_cover' or other 'art_...'

* Clean up unnecessary code

* Update logo CSS to look like library's logo

Author: hashkar123

src/frontend/screens/Game/GamePage/index.tsx

@@ -238,6 +238,7 @@ export default React.memo(function GamePage(): JSX.Element | null {
       art_square,
       art_cover,
       art_background,
+      art_logo,
       install: { platform: installPlatform },
       is_installed
     } = gameInfo
@@ -332,7 +333,11 @@ export default React.memo(function GamePage(): JSX.Element | null {
             {/* OLD DESIGN */}
             {!experimentalFeatures.enableNewDesign && (
               <>
-                <GamePicture art_square={art_square} store={runner} />
+                <GamePicture
+                  art_square={art_square}
+                  art_logo={art_logo}
+                  store={runner}
+                />
                 <NavLink
                   className="backButton"
                   to={backRoute}
@@ -401,7 +406,11 @@ export default React.memo(function GamePage(): JSX.Element | null {
                   <DotsMenu gameInfo={gameInfo} handleUpdate={handleUpdate} />
                   {!isBrowserGame && <SettingsButton gameInfo={gameInfo} />}
                   <div className="mainInfo">
-                    <GamePicture art_square={art_cover} store={runner} />
+                    <GamePicture
+                      art_square={art_cover}
+                      art_logo={art_logo}
+                      store={runner}
+                    />
                     <div className="store-icon">
                       <StoreLogos runner={runner} />
                     </div>

src/frontend/screens/Game/GamePicture/index.css

@@ -35,7 +35,8 @@
 
 .gamePicture > .gameLogo {
   position: absolute;
-  bottom: 0;
-  width: 70%;
-  min-width: 140px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
 }

src/frontend/screens/Game/GamePicture/index.tsx

@@ -6,10 +6,17 @@ import fallbackImage from 'frontend/assets/heroic_card.jpg'
 
 interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {
   art_square: string
+  art_logo?: string | undefined
   store: string
 }
 
-function GamePicture({ art_square, store, className, ...props }: Props) {
+function GamePicture({
+  art_square,
+  art_logo,
+  store,
+  className,
+  ...props
+}: Props) {
   function getImageFormatting() {
     if (art_square === 'fallback' || !art_square)
       return { src: fallbackImage, fallback: fallbackImage }
@@ -34,6 +41,13 @@ function GamePicture({ art_square, store, className, ...props }: Props) {
         fallback={fallback}
         {...props}
       />
+      {art_logo && (
+        <CachedImage
+          alt="logo"
+          src={`${art_logo}?h=400&resize=1&w=300`}
+          className={`gameLogo`}
+        />
+      )}
     </div>
   )
 }