[UI] Update download manager page

src/frontend/screens/DownloadManager/DownloadManagerHeader/index.tsx

@@ -20,12 +20,12 @@ export default function GameListHeader({ time }: Props) {
   }
 
   return (
-    <div className="gameListHeader">
-      <span>{t('game.title', 'Game Title')}</span>
-      <span>{getTimeLabel()}</span>
-      <span>{t('download-manager.queue.type', 'Type')}</span>
-      <span>{t('game.store', 'Store')}</span>
-      <span>{t('wine.actions', 'Action')}</span>
-    </div>
+    <tr>
+      <th>{t('game.title', 'Game Title')}</th>
+      <th>{getTimeLabel()}</th>
+      <th>{t('download-manager.queue.type', 'Type')}</th>
+      <th>{t('game.store', 'Store')}</th>
+      <th>{t('wine.actions', 'Action')}</th>
+    </tr>
   )
 }

src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.css

@@ -1,44 +1,3 @@
-.downloadManagerListItem > .icons {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  align-items: center;
-  padding: 0 1rem;
-  align-self: center;
-  flex-wrap: wrap;
-}
-
-.downloadManagerListItem > .icons > .material-icons.settings.folder {
-  position: initial;
-}
-
-.downloadManagerListItem > .icons > a > svg,
-.downloadManagerListItem > .icons > svg {
-  width: min(calc(1vw + 9px), 36px);
-  height: min(calc(1vw + 9px), 36px);
-  min-width: 22px;
-  min-height: 22px;
-  margin-left: 12px;
-}
-
-.downloadManagerListItem {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr 1fr 10%;
-  grid-template-areas: 'name store platform action';
-  margin: 0 var(--space-sm-fixed);
-  align-items: center;
-  justify-items: baseline;
-  position: relative;
-  cursor: default;
-  place-self: center;
-  border-top: 1px solid var(--divider);
-  padding: var(--space-md) 0;
-}
-
-.downloadManagerListItem:hover {
-  background-color: var(--background-hover);
-}
-
 .downloadManagerTitleList {
   grid-area: name;
   font-size: 1em;
@@ -66,42 +25,6 @@
   margin-right: var(--space-md-fixed);
 }
 
-.downloadManagerListItem > a {
-  grid-area: cover;
-  max-width: 15vh;
-  width: 100%;
-  height: 100%;
-}
-
-.downloadManagerListItem > .icons > button {
-  margin-left: 0;
-  padding-left: 4px;
-}
-
-.downloadManagerListItem > .progress {
-  z-index: 5;
-  grid-area: cover;
-  font-weight: 500;
-  background: var(--background-gradient);
-  padding: 2px 5px;
-  border-radius: 4px;
-  color: var(--success);
-  position: relative;
-  bottom: -38px;
-  left: -38px;
-  color: var(--success);
-  font-family: var(--actions-font-family);
-  font-style: italic;
-  font-weight: normal;
-  line-height: 12px;
-}
-
-.downloadManagerListItem > .progress > .MuiSvgIcon-root {
-  position: relative;
-  bottom: 0;
-  top: 0;
-}
-
 .react-contextmenu--visible {
   background-color: var(--background);
   padding: 14px 22px;
@@ -127,10 +50,6 @@
   cursor: initial;
 }
 
-.downloadManagerListItem span:nth-child(3) {
-  text-transform: capitalize;
-}
-
 .downloadManagerTitleList > img {
   aspect-ratio: 16/9;
   object-fit: cover;

src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.tsx

@@ -8,7 +8,6 @@ import {
   GameInfo,
   HyperPlayInstallInfo
 } from 'common/types'
-import { ReactComponent as StopIcon } from 'frontend/assets/stop-icon.svg'
 import { CachedImage, SvgButton } from 'frontend/components/UI'
 import {
   getGameInfo,
@@ -19,16 +18,16 @@ import {
 import { useTranslation } from 'react-i18next'
 import { hasProgress } from 'frontend/hooks/hasProgress'
 import { useNavigate } from 'react-router-dom'
-import { ReactComponent as PlayIcon } from 'frontend/assets/play-icon.svg'
 import { ReactComponent as DownIcon } from 'frontend/assets/down-icon.svg'
-import { ReactComponent as PauseIcon } from 'frontend/assets/pause-icon.svg'
 import { GogInstallInfo } from 'common/types/gog'
 import { LegendaryInstallInfo } from 'common/types/legendary'
 import StopInstallationModal from 'frontend/components/UI/StopInstallationModal'
 import { observer } from 'mobx-react-lite'
 import libraryState from 'frontend/state/libraryState'
 import { NileInstallInfo } from 'common/types/nile'
 import { hasStatus } from 'frontend/hooks/hasStatus'
+import { Images } from '@hyperplay/ui'
+const { PauseIcon, PlayIcon, XCircle } = Images
 
 type Props = {
   element?: DMQueueElement
@@ -175,7 +174,7 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
       return <DownIcon />
     }
 
-    return <StopIcon />
+    return <XCircle />
   }
 
   const secondaryActionIcon = () => {
@@ -260,8 +259,8 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
           progress={progress}
         />
       ) : null}
-      <div className="downloadManagerListItem">
-        <span
+      <tr>
+        <td
           role="button"
           onClick={() => goToGamePage()}
           className="downloadManagerTitleList"
@@ -280,11 +279,11 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
               {canceled ? ` (${t('queue.label.canceled', 'Canceled')})` : ''}
             </span>
           </span>
-        </span>
-        <span title={fullDate}>{hour}</span>
-        <span>{translatedTypes[type]}</span>
-        <span>{getStoreName(runner, t2('Other'))}</span>
-        <span className="icons">
+        </td>
+        <td title={fullDate}>{hour}</td>
+        <td>{translatedTypes[type]}</td>
+        <td>{getStoreName(runner, t2('Other'))}</td>
+        <td>
           <SvgButton onClick={handleMainActionClick} title={mainIconTitle()}>
             {mainActionIcon()}
           </SvgButton>
@@ -296,8 +295,8 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
               {secondaryActionIcon()}
             </SvgButton>
           )}
-        </span>
-      </div>
+        </td>
+      </tr>
     </>
   )
 })

src/frontend/screens/DownloadManager/components/DownloadTable/index.module.scss

@@ -0,0 +1,31 @@
+.dmItemList {
+  background-color: var(--color-neutral-800);
+  border-radius: var(--space-sm-fixed);
+  margin: var(--space-3xs) 0px;
+  width: 100%;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-border-vertical-spacing: 0px;
+  -webkit-border-horizontal-spacing: 0px;
+
+  tr:first-child {
+    background-color: var(--color-neutral-700);
+    th {
+      padding: var(--space-sm-fixed) 0px;
+      color: var(--color-neutral-400);
+
+      &:first-child {
+        border-top-left-radius: var(--space-sm-fixed);
+      }
+
+      &:last-child {
+        border-top-right-radius: var(--space-sm-fixed);
+      }
+    }
+  }
+
+  tr > td {
+    padding: var(--space-sm-fixed) var(--space-2lg-fixed);
+    color: var(--color-neutral-200);
+  }
+}

src/frontend/screens/DownloadManager/components/DownloadTable/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import DownloadManagerHeader from '../../DownloadManagerHeader'
+import DownloadManagerItem from '../DownloadManagerItem'
+import { DMQueueElement } from 'common/types'
+import styles from './index.module.scss'
+
+export interface DownloadTableProps {
+  elements: DMQueueElement[]
+  time: 'started' | 'finished' | 'queued'
+}
+
+export function DownloadTable({ elements, time }: DownloadTableProps) {
+  return (
+    <table className={styles.dmItemList}>
+      <DownloadManagerHeader time={time} />
+      {elements.map((el, key) => (
+        <DownloadManagerItem key={key} element={el} current={false} />
+      ))}
+    </table>
+  )
+}

src/frontend/screens/DownloadManager/components/ProgressHeader/index.css

@@ -8,7 +8,6 @@
 
 .progressHeader {
   border: solid 2px var(--input-background);
-  background-color: var(--input-background);
   border-radius: 6px;
   margin: var(--space-3xs) 0px var(--space-md) 0px;
 }

src/frontend/screens/DownloadManager/index.css → src/frontend/screens/DownloadManager/index.module.scss

@@ -40,9 +40,10 @@
   text-align: initial;
 }
 
-.dmItemList {
-  border: solid 2px var(--input-background);
-  background-color: var(--input-background);
-  border-radius: 6px;
-  margin: var(--space-3xs) 0px;
+.tabsList {
+  margin: var(--space-2lg-fixed) 0px;
+}
+
+.tabsPanel {
+  margin-bottom: var(--space-xl-fixed);
 }