fix: center download infos with grey background

Ludea · Oct 16, 2024 · 1b535f9 · 1b535f9
1 parent 97115a8
commit 1b535f9
Showing 1 changed file with 21 additions and 14 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -12,6 +12,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { Command } from "@tauri-apps/plugin-shell";
 import { platform } from "@tauri-apps/plugin-os";
+import { Typography } from "@mui/material";
 
 interface UpdateEvent {
   download: number;
@@ -174,14 +175,15 @@ function Footer() {
       }}
     >
       <Grid size={8}>
-        {gameState === "not_installed" ? (
+        {downloadedBytesStart ? (
           <LinearProgress
             variant="buffer"
             value={buffer}
             valueBuffer={progress}
             sx={{
               height: 20,
               borderRadius: 5,
+              backgroundColor: (theme) => theme.palette.grey[300],
             }}
           />
         ) : null}
@@ -215,20 +217,25 @@ function Footer() {
           {gameState !== "installed" ? "Install" : "Play"}
         </LoadingButton>
       </Grid>
-      <Grid
-        size={11}
-        sx={{ border: "3px red solid" }}
-        alignItems="center"
-        justifyContent="center"
-      >
-        {gameState === "not_installed" ? (
-          <Paper sx={{ position: "fixed", bottom: "10%" }} elevation={3}>
-            Download: {downloadedBytesStart} / {downloadedBytesEnd} @
-            {downloadedBytesPerSec}/s <br /> Write : {appliedOutputBytesStart} /
-            {appliedOutputBytesEnd} @ {appliedOutputBytesPerSec}/s
+      {downloadedBytesStart ? (
+        <Grid
+          size={11}
+          sx={{ display: "flex" }}
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Paper
+            sx={{ position: "fixed", bottom: "8%", backgroundColor: "#393e46" }}
+            elevation={3}
+          >
+            <Typography sx={{ color: "white" }}>
+              Download: {downloadedBytesStart} / {downloadedBytesEnd} @
+              {downloadedBytesPerSec}/s <br /> Write : {appliedOutputBytesStart}{" "}
+              /{appliedOutputBytesEnd} @ {appliedOutputBytesPerSec}/s
+            </Typography>
           </Paper>
-        ) : null}
-      </Grid>
+        </Grid>
+      ) : null}
     </Grid>
   );
 }