[UI] Update download manager page (#911)

* refactor to tabs

* refactor to css module

* add background

* fix tabs list margin

* refactor to table

* fix bg color, border, spacing for table

* update font color for table

* use hp icons for play, pause, stop

* rm icons styling

* fix icons

* vert align middle for action buttons

* move style to class for title

* rm unneccessary <>

* pretty

Author: BrettCleary

src/frontend/assets/pause-icon.svg

@@ -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/assets/play-icon.svg

@@ -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/DownloadManagerHeader/index.tsx

@@ -0,0 +1,21 @@
+.playIcon {
+  fill: var(--color-success-200);
+}
+
+.pauseIcon {
+  fill: var(--color-tertiary-600);
+}
+
+.downloadIcon {
+  fill: var(--color-tertiary-600);
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-md-fixed);
+
+  > button {
+    display: inline-flex;
+  }
+}

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

@@ -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,15 +18,15 @@ 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 { hasStatus } from 'frontend/hooks/hasStatus'
+import { Images } from '@hyperplay/ui'
+import styles from './index.module.scss'
+const { PauseIcon, PlayIcon, XCircle, DownloadIcon } = Images
 
 type Props = {
   element?: DMQueueElement
@@ -165,21 +164,21 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
       if (is_dlc) {
         return <>-</>
       }
-      return <PlayIcon className="playIcon" />
+      return <PlayIcon className={styles.playIcon} />
     }
 
     if (canceled) {
-      return <DownIcon />
+      return <DownloadIcon className={styles.downloadIcon} />
     }
 
-    return <StopIcon />
+    return <XCircle />
   }
 
   const secondaryActionIcon = () => {
     if (state === 'paused') {
-      return <PlayIcon className="playIcon" />
+      return <PlayIcon className={styles.playIcon} />
     } else if (state === 'running') {
-      return <PauseIcon className="pauseIcon" />
+      return <PauseIcon className={styles.pauseIcon} />
     }
 
     return <></>
@@ -257,8 +256,8 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
           progress={progress}
         />
       ) : null}
-      <div className="downloadManagerListItem">
-        <span
+      <tr>
+        <td
           role="button"
           onClick={() => goToGamePage()}
           className="downloadManagerTitleList"
@@ -277,24 +276,26 @@ 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">
-          <SvgButton onClick={handleMainActionClick} title={mainIconTitle()}>
-            {mainActionIcon()}
-          </SvgButton>
-          {current && !isExtracting && (
-            <SvgButton
-              onClick={handleSecondaryActionClick}
-              title={secondaryIconTitle()}
-            >
-              {secondaryActionIcon()}
+        </td>
+        <td title={fullDate}>{hour}</td>
+        <td>{translatedTypes[type]}</td>
+        <td>{getStoreName(runner, t2('Other'))}</td>
+        <td>
+          <div className={styles.iconContainer}>
+            <SvgButton onClick={handleMainActionClick} title={mainIconTitle()}>
+              {mainActionIcon()}
             </SvgButton>
-          )}
-        </span>
-      </div>
+            {current && !isExtracting && (
+              <SvgButton
+                onClick={handleSecondaryActionClick}
+                title={secondaryIconTitle()}
+              >
+                {secondaryActionIcon()}
+              </SvgButton>
+            )}
+          </div>
+        </td>
+      </tr>
     </>
   )
 })

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

@@ -0,0 +1,32 @@
+.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);
+    vertical-align: middle;
+  }
+}

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

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