fix progress bar on install btn

JMBeresford · Nov 17, 2024 · 9e449f0 · 9e449f0
1 parent 52d9f52
commit 9e449f0
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 8 deletions.
diff --git a/packages/client/web/src/components/action-button/install-game-button.tsx b/packages/client/web/src/components/action-button/install-game-button.tsx
@@ -57,11 +57,7 @@ export const InstallGameButton = forwardRef(
       }
 
       if (installState === InstallationStatus.INSTALLING) {
-        return (
-          <div className="absolute inset-0 grid place-items-center px-2">
-            <Progress value={installProgress} className="h-2" />
-          </div>
-        );
+        return <Progress value={installProgress} className="h-2" />;
       }
 
       return (

diff --git a/packages/client/web/src/components/game-list.tsx b/packages/client/web/src/components/game-list.tsx
@@ -63,7 +63,7 @@ export function GameList(props: { games: GameWithMetadata[] }) {
                     <div className="rounded-md overflow-hidden w-fit pointer-events-auto touch-auto z-50">
                       <ActionButton
                         size="sm"
-                        className="text-md min-w-[100px]"
+                        className='text-md min-w-[100px] [&_div[role="progressbar"]_>_*]:bg-primary-foreground'
                         game={game}
                       />
                     </div>

diff --git a/packages/client/web/src/routes/_fullscreenLayout/fullscreen/games/$gameId.lazy.tsx b/packages/client/web/src/routes/_fullscreenLayout/fullscreen/games/$gameId.lazy.tsx
@@ -88,8 +88,9 @@ function Inner() {
                       }}
                       game={game}
                       className={cn(
-                        "w-auto text-5xl h-[unset] *:first:hidden uppercase px-8 py-4",
-                        "opacity-80 focus-hover:opacity-100 transition-all",
+                        "w-auto text-5xl h-[unset] [&_svg]:hidden uppercase px-8 py-4",
+                        "opacity-80 focus-hover:opacity-100 transition-all h-full",
+                        '[&_div[role="progressbar"]]:w-[6ch] [&_div[role="progressbar"]_>_*]:bg-primary-foreground',
                       )}
                     />
                   </HotkeyLayer>