Redesign downloads menu & add install count to manage game popup

src/popups/GamesDownload.tsx

@@ -1,15 +1,9 @@
 import { useGlobal } from '@/providers/GlobalProvider'
-import {
-  faCheck,
-  faCode,
-  faDownload,
-  faShieldHalved,
-  faWarning
-} from '@fortawesome/free-solid-svg-icons'
+import { faDownload, faInfo } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 export default function GamesDownloadPopup () {
-  const { serverVersionList, setSelectedGame, versionsList } = useGlobal()
+  const { serverVersionList, setSelectedGame } = useGlobal()
 
   return (
     <>
@@ -23,68 +17,25 @@ export default function GamesDownloadPopup () {
             if (gameVersions.length > 0) return true
           })
           .map((v, i) => (
-            <div key={i} className='popup-entry'>
-              <p className='text-2xl'>{v.name}</p>
-              <div className='flex gap-2'>
-                <div
-                  className='entry-info-item btntheme3'
-                  title='The amount of versions installed of this game in installed/installable format.'
-                >
-                  <p>
-                    {(() => {
-                      const gameVersions = serverVersionList.versions.filter(
-                        vf => vf.game === v.id
-                      )
-                      const installed = gameVersions.filter(v =>
-                        Object.keys(versionsList).includes(v.id)
-                      ).length
-                      return gameVersions.length
-                        ? `${installed}/${gameVersions.length}`
-                        : 'N/A'
-                    })()}{' '}
-                    versions installed
-                  </p>
-                </div>
-                <div
-                  className='entry-info-item btntheme3'
-                  hidden={!v.official}
-                  title='This game is official.'
-                >
-                  <FontAwesomeIcon icon={faCheck} color='#19c84b' />
-                  <p>Official</p>
-                </div>
-                <div
-                  className='entry-info-item btntheme3'
-                  hidden={v.official}
-                  title={
-                    v.verified
-                      ? 'This game is verified to be safe'
-                      : 'This game is NOT verified to be save. Proceed with caution.'
-                  }
-                >
-                  <FontAwesomeIcon
-                    icon={v.verified ? faShieldHalved : faWarning}
-                    color={v.verified ? '#19c84b' : '#ffc800'}
-                  />
-                  <p>{v.verified ? 'Verified' : 'Unverified'}</p>
-                </div>
-              </div>
-              <div
-                className='entry-info-item btntheme3 mt-2'
-                hidden={v.developer == null}
-                title={`The developer of ${v.name} is ${v.developer}.`}
-              >
-                <FontAwesomeIcon icon={faCode} color='lightgray' />
-                <p>Developer: {v.developer}</p>
-              </div>
+            <div
+              key={i}
+              className='popup-entry grid items-center gap-3'
+              style={{ gridTemplateColumns: 'auto minmax(0, 1fr) auto' }}
+            >
               <button
-                className='button btntheme3 right-2 bottom-2'
+                className='button btntheme3'
+                onClick={() => setSelectedGame(v.id)}
+                title='Click to view game info.'
+              >
+                <FontAwesomeIcon icon={faInfo} /> Info
+              </button>
+              <p className='text-2xl text-center truncate'>{v.name}</p>
+              <button
+                className='button btntheme3'
                 onClick={() => setSelectedGame(v.id)}
                 title='Click to download more versions of the game.'
               >
-                <>
-                  <FontAwesomeIcon icon={faDownload} /> Download
-                </>
+                <FontAwesomeIcon icon={faDownload} /> Download
               </button>
             </div>
           ))}

src/popups/ManageGame.tsx

@@ -3,6 +3,7 @@
 import {
   faCheck,
   faCode,
+  faDownload,
   faHardDrive,
   faShieldHalved,
   faWarning
@@ -83,6 +84,25 @@ export default function ManageGamePopup () {
           <FontAwesomeIcon icon={faCode} color='lightgray' />
           <p>Developer: {gameInfo?.developer}</p>
         </div>
+        <div className='entry-info-item btntheme2' hidden={!gameInfo?.official}>
+          <FontAwesomeIcon icon={faDownload} color='lightgray' />
+          <p>
+            {(() => {
+              if (!serverVersionList) return 'N/A'
+
+              const gameVersions = serverVersionList.versions.filter(
+                vf => vf.game === managingGame
+              )
+              const installed = gameVersions.filter(v =>
+                Object.keys(versionsList).includes(v.id)
+              ).length
+              return gameVersions.length
+                ? `${installed}/${gameVersions.length}`
+                : 'N/A'
+            })()}{' '}
+            versions installed
+          </p>
+        </div>
         <div
           className='entry-info-item btntheme2'
           hidden={viewingInfoFromDownloads}

src/popups/VersionsDownload.tsx

@@ -24,20 +24,27 @@ export default function VersionsDownloadPopup () {
       <p className='text-xl text-center'>Select versions to download</p>
       <div className='popup-content'>
         {getSpecialVersionsList(selectedGame).map((v, i) => (
-          <div key={i} className='popup-entry'>
-            <div className='flex items-center'>
-              <p
-                className={`text-2xl truncate ${
-                  selectedVersionList.includes(v.id)
-                    ? 'max-w-84.5'
-                    : 'max-w-91.5'
-                }`}
-              >
-                {v.displayName}
-              </p>
-            </div>
+          <div
+            key={i}
+            className='popup-entry grid items-center gap-3'
+            style={{ gridTemplateColumns: 'auto minmax(0, 1fr) auto' }}
+          >
             <button
-              className='button btntheme3 right-20.75 bottom-1.75'
+              className='button btntheme3'
+              onClick={() => {
+                setManagingVersion(v.id)
+                setViewingInfoFromDownloads(true)
+                setPopupMode(2)
+              }}
+              title='Click to view version info.'
+            >
+              <FontAwesomeIcon icon={faInfo} /> Info
+            </button>
+            <p className='text-2xl text-center truncate' title={v.displayName}>
+              {v.displayName}
+            </p>
+            <button
+              className='button btntheme3'
               onClick={() => {
                 setSelectedVersionList(prev =>
                   prev.includes(v.id)
@@ -61,17 +68,6 @@ export default function VersionsDownloadPopup () {
                 </>
               )}
             </button>
-            <button
-              className='button btntheme3 right-1.5 bottom-1.75'
-              onClick={() => {
-                setManagingVersion(v.id)
-                setViewingInfoFromDownloads(true)
-                setPopupMode(2)
-              }}
-              title='Click to view version info'
-            >
-              <FontAwesomeIcon icon={faInfo} /> Info
-            </button>
           </div>
         ))}
       </div>

src/styles/globals.css

@@ -130,10 +130,6 @@ body {
   @apply relative h-fit bg-(--col3) m-2 p-2 rounded-lg border border-(--col5);
 }
 
-.popup-entry button {
-  @apply absolute;
-}
-
 .popup-top-button {
   @apply flex justify-center items-center absolute text-2xl text-gray-200 hover:text-white cursor-pointer h-12 w-12 p-3 rounded-lg top-2 transition-colors border;
 }