Heroic-Games-Launcher · BrettCleary · Sep 27, 2022 · Sep 27, 2022 · Sep 27, 2022
diff --git a/src/frontend/components/UI/ProgressDialog/index.css b/src/frontend/components/UI/ProgressDialog/index.css
@@ -34,15 +34,15 @@
 }
 
 .progressDialog.log-error {
-  color: #c18672;
+  color: var(--text-danger);
 }
 
 .progressDialog.log-warning {
-  color: #f5cf69;
+  color: var(--text-warning);
 }
 
 .progressDialog.log-info {
-  color: rgb(175, 172, 172);
+  color: var(--text-default);
 }
 
 .progressDialog.header {
@@ -57,7 +57,3 @@
 .progressDialog.linearProgress > .MuiLinearProgress-bar {
   background-color: var(--accent);
 }
-
-.progressHeaderETA {
-  color: var(--accent);
-}
diff --git a/src/frontend/index.css b/src/frontend/index.css
@@ -40,7 +40,7 @@ html {
   --danger-hover: #e43f3f;
   --icon-disabled: #625e69;
   --icons-background: #17131c;
-  --divider: #ffbb3384;
+  --divider: gray;
   --osk-background: var(--body-background);
   --osk-button-background: var(--input-background);
   --osk-button-border: var(--navbar-background);
@@ -74,10 +74,11 @@ html {
   --text-default: #eae8e5;
   --text-secondary: #b1b1b1;
   --text-pause-cancel: #97f4e9;
-  --text-title: #97f4e9;
+  --text-title: white;
   --text-tertiary: #101111; /* This is not defined in figma */
   --text-quartenary: #5a5e5f; /* this is meant to be a background colour */
   --text-danger: #d22121;
+  --text-warning: #f5cf69;
   /* Fonts */
   --font-primary-regular: var(--actions-font-family) normal 400;
   --font-primary-bold: var(--actions-font-family) normal 500;

diff --git a/src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.css b/src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.css
@@ -25,14 +25,14 @@
   display: grid;
   grid-template-columns: 3fr 1fr;
   grid-template-areas: 'name action';
-  margin: 0.5em 2em;
+  margin: 0em 2em;
   align-items: center;
   justify-items: baseline;
   position: relative;
   cursor: default;
   place-self: center;
-  border-bottom: 1px solid gray;
-  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--divider);
+  padding: 1rem 0;
 }
 
 .downloadManagerTitleList {

diff --git a/src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.tsx b/src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.tsx
@@ -1,6 +1,6 @@
 import './index.css'
 
-import React from 'react'
+import React, { useContext } from 'react'
 
 import { GameInfo, InstallParams } from 'common/types'
 import { ReactComponent as StopIcon } from 'frontend/assets/stop-icon.svg'
@@ -10,11 +10,14 @@ import { handleStopInstallation } from 'frontend/helpers/library'
 import { getGameInfo } from 'frontend/helpers'
 import { useTranslation } from 'react-i18next'
 import { hasProgress } from 'frontend/hooks/hasProgress'
+import ContextProvider from 'frontend/state/ContextProvider'
 
 const DownloadManagerItem = (props: {
   params: InstallParams
   current: boolean
 }) => {
+  const { epic, gog } = useContext(ContextProvider)
+  const library = [...epic.library, ...gog.library]
   const { t } = useTranslation('gamepage')
   const [progress] = hasProgress(props.params.appName)
 
@@ -45,7 +48,10 @@ const DownloadManagerItem = (props: {
     return props.current ? (
       <StopIcon />
     ) : (
-      <RemoveCircleIcon style={{ color: 'var(--danger)' }} fontSize="large" />
+      <RemoveCircleIcon
+        style={{ color: 'var(--background-lighter)' }}
+        fontSize="large"
+      />
     )
   }
 
@@ -57,7 +63,9 @@ const DownloadManagerItem = (props: {
 
   return (
     <div className="downloadManagerListItem">
-      <span className="downloadManagerTitleList">{props.params.appName}</span>
+      <span className="downloadManagerTitleList">
+        {library.find((val) => val.app_name === props.params.appName)?.title}
+      </span>
       <span className="icons">
         {
           <SvgButton onClick={handleMainActionClick} title={mainIconTitle()}>

diff --git a/src/frontend/screens/DownloadManager/components/ProgressHeader/index.css b/src/frontend/screens/DownloadManager/components/ProgressHeader/index.css
@@ -1,35 +1,75 @@
-.progressHeader {
-  display: grid;
-  grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
-  grid-template-areas: 'speed percent eta';
-  margin: 0.5em 2em;
-  align-items: center;
+.downloadRateStats {
+  display: flex;
+  flex-direction: row;
   position: relative;
   cursor: default;
-  border-bottom: 1px solid gray;
-  padding: 0.5rem 0;
+  padding: 1rem 0;
+}
+
+.progressHeader {
+  margin: 0.5em 2em;
 }
 
-.progressHeader.linearProgress {
-  margin-top: 10px;
-  background-color: var(--primary);
+.linearProgress {
+  margin-top: 0.25em;
+  background-color: var(--text-default);
 }
 
-.progressHeader.linearProgress > .MuiLinearProgress-bar {
+.linearProgress > .MuiLinearProgress-bar {
   background-color: var(--accent);
 }
 
 .progressChartValues {
-  display: grid;
-  flex-direction: column;
+  display: flex;
+  flex-direction: row;
   justify-content: start;
   justify-items: start;
 }
 
-.progressChartValues > .downSpeed {
+.downloadProgressStats {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+}
+
+.downloadProgress {
+  padding: 1em 0em;
+}
+
+.downloadStat {
+  color: var(--text-default);
+  margin: 0;
+  padding: 0;
+}
+
+.realtimeDownloadStat {
+  white-space: nowrap;
+  margin: 0px;
+}
+
+.realtimeDownloadStatLabel {
+  margin: auto;
+  padding: auto;
+  text-align: left;
+  height: auto;
+}
+
+.realtimeDownloadStatContainer {
+  align-self: center;
+  margin: 1em;
+  box-sizing: border-box;
+}
+
+.downloadRateChart {
+  flex-grow: 1;
+  /* overflow: hidden; */
+  position: relative;
+}
+
+.downLabel {
   color: var(--accent);
 }
 
-.progressChartValues > .diskSpeed {
+.diskLabel {
   color: var(--primary);
 }
diff --git a/src/frontend/screens/DownloadManager/components/ProgressHeader/index.tsx b/src/frontend/screens/DownloadManager/components/ProgressHeader/index.tsx
@@ -2,18 +2,18 @@ import './index.css'
 import { hasProgress } from 'frontend/hooks/hasProgress'
 import React, { useEffect, useState } from 'react'
 import { AreaChart, Area, ResponsiveContainer } from 'recharts'
-import {
-  Box,
-  LinearProgress,
-  LinearProgressProps,
-  Typography
-} from '@mui/material'
+import { LinearProgress } from '@mui/material'
 
 interface Point {
   download: number
   disk: number
 }
 
+const roundToNearestHundredth = function (val: number | undefined) {
+  if (!val) return 0
+  return Math.round(val * 100) / 100
+}
+
 export default function ProgressHeader(props: { appName: string }) {
   const [progress] = hasProgress(props.appName)
   const [avgSpeed, setAvgDownloadSpeed] = useState<Point[]>(
@@ -36,58 +36,74 @@ export default function ProgressHeader(props: { appName: string }) {
     setAvgDownloadSpeed([...avgSpeed])
   }, [progress])
 
-  function LinearProgressWithLabel(
-    props: LinearProgressProps & { value: number }
-  ) {
-    return (
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
-        <Box sx={{ width: '100%' }}>
-          <LinearProgress variant="determinate" {...props} />
-        </Box>
-        <Box>
-          <Typography
-            variant="body2"
-            color="var(--accent)"
-          >{`${props.value}%`}</Typography>
-        </Box>
-      </Box>
-    )
-  }
-
   return (
     <div className="progressHeader">
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={avgSpeed} margin={{ top: 10, right: 40 }}>
-          <Area
-            isAnimationActive={false}
-            type="monotone"
-            dataKey="download"
-            strokeWidth="0px"
-            fill="var(--accent)"
-            fillOpacity={0.5}
-          />
-          <Area
-            isAnimationActive={false}
-            type="monotone"
-            dataKey="disk"
-            stroke="var(--primary)"
-            strokeWidth="2px"
-            fillOpacity={0}
+      <div className="downloadRateStats">
+        <div className="downloadRateChart">
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              top: 0,
+              left: 0
+            }}
+          >
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={avgSpeed} margin={{ top: 0, right: 0 }}>
+                <Area
+                  isAnimationActive={false}
+                  type="monotone"
+                  dataKey="download"
+                  strokeWidth="0px"
+                  fill="var(--accent)"
+                  fillOpacity={0.5}
+                />
+                <Area
+                  isAnimationActive={false}
+                  type="monotone"
+                  dataKey="disk"
+                  stroke="var(--primary)"
+                  strokeWidth="2px"
+                  fillOpacity={0}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+        <div className="realtimeDownloadStatContainer">
+          <h3 className="realtimeDownloadStat">
+            {roundToNearestHundredth(avgSpeed.at(-1)?.download)} MiB/s
+          </h3>
+          <div className="realtimeDownloadStatLabel downLabel">Down </div>
+        </div>
+        <div className="realtimeDownloadStatContainer">
+          <h3 className="realtimeDownloadStat">
+            {roundToNearestHundredth(avgSpeed.at(-1)?.disk)} MiB/s
+          </h3>
+          <div className="realtimeDownloadStatLabel diskLabel">Disk </div>
+        </div>
+      </div>
+      <div className="downloadProgress">
+        <div className="downloadProgressStats">
+          <p className="downloadStat" color="var(--text-default)">{`${
+            progress.percent ?? 0
+          }%`}</p>
+          <p className="downloadStat">{`ETA: ${progress.eta ?? '00.00.00'}`}</p>
+        </div>
+        <div className="downloadBar">
+          <LinearProgress
+            variant="determinate"
+            className="linearProgress"
+            value={progress.percent ?? 0}
+            sx={{
+              height: '10px',
+              backgroundColor: 'var(--text-default)',
+              borderRadius: '20px'
+            }}
           />
-        </AreaChart>
-      </ResponsiveContainer>
-      <div className="progressChartValues">
-        <p className="downSpeed">Down: {avgSpeed.at(-1)?.download} MiB/s</p>
-        <p className="diskSpeed">Disk: {avgSpeed.at(-1)?.disk} MiB/s</p>
+        </div>
       </div>
-      <LinearProgressWithLabel
-        className="progressHeader linearProgress"
-        variant="determinate"
-        value={progress.percent ?? 0}
-      />
-      <div className="progressHeaderETA">{`ETA: ${
-        progress.eta ?? '00.00.00'
-      }`}</div>
     </div>
   )
 }
diff --git a/src/frontend/screens/DownloadManager/index.css b/src/frontend/screens/DownloadManager/index.css
@@ -1,7 +1,3 @@
-.downloadList {
-  margin-top: 48px;
-}
-
 .downloadList > .gameListHeader {
   grid-template-columns: 3fr 1fr;
 }
@@ -29,3 +25,16 @@
 .downloadManager > .MuiTabs-root > .MuiTabs-scroller > .MuiTabs-indicator {
   background-color: var(--accent);
 }
+
+.downloadManager {
+  padding: 0;
+  margin: 0;
+}
+
+.downloadManagerCurrentSectionTitle {
+  margin: 0px 0px 0px 0px;
+}
+
+.downloadManagerQueuedSectionTitle {
+  margin: 30px 0px 0px 0px;
+}
diff --git a/src/frontend/screens/DownloadManager/index.tsx b/src/frontend/screens/DownloadManager/index.tsx
@@ -52,7 +52,7 @@ export default function DownloadManager(): JSX.Element | null {
               style={!currentElement ? { backgroundColor: 'transparent' } : {}}
               className="downloadList"
             >
-              <h3>Current</h3>
+              <h3 className="downloadManagerCurrentSectionTitle">Current</h3>
               <div className="gameListHeader">
                 <span>{t('download.manager.queue.element', 'Name')}</span>
                 <span>{t('download.manager.queue.actions', 'Action')}</span>
@@ -63,7 +63,7 @@ export default function DownloadManager(): JSX.Element | null {
               />
               {!!plannendElements.length && (
                 <>
-                  <h3>Plannend</h3>
+                  <h3 className="downloadManagerQueuedSectionTitle">Queued</h3>
                   <div className="gameListHeader">
                     <span>{t('download.manager.queue.element', 'Name')}</span>
                     <span>{t('download.manager.queue.actions', 'Action')}</span>