Disable download button when downloading

src/Globals.css

@@ -7,7 +7,7 @@ body {
 }
 
 .button {
-  @apply bg-[#0a6ec8] hover:bg-[#1361ad] rounded-md cursor-pointer text-[16px] py-1.5 px-3 transition-colors duration-[0.25s];
+  @apply bg-[#0a6ec8] hover:bg-[#1361ad] disabled:bg-[#124c7e] disabled:hover:bg-[#1b3f63] disabled:text-[#bdbdbd] disabled:hover:text-[#e6e6e6] rounded-md cursor-pointer text-[16px] py-1.5 px-3 transition-colors duration-[0.25s];
 }
 
 ::-webkit-scrollbar {
@@ -19,9 +19,6 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-[#555] w-1 rounded-lg;
+  @apply bg-[#555] w-1 rounded-lg active:bg-[#888];
 }
 
-::-webkit-scrollbar-thumb:active {
-  @apply bg-[#888];
-}

src/main.tsx

@@ -16,6 +16,7 @@ function App () {
       ...prev,
       ...versions.map(v => new DownloadProgress(v, 0, false))
     ])
+
     return;
   }
 
@@ -33,7 +34,7 @@ function App () {
 
   function renderContent () {
     if (hash === '#installs') {
-      return <Installs downloadVersions={downloadVersions} />
+      return <Installs downloadVersions={downloadVersions} downloadProgress={downloadProgress} />
     } else if (hash === '#settings') {
       return <Settings />
     }

src/routes/Installs.tsx

@@ -6,7 +6,7 @@ import { LauncherVersion } from '../types/LauncherVersion'
 import axios from 'axios'
 import { InstallsProps } from '../types/InstallsProps'
 
-export default function Installs({ downloadVersions }: InstallsProps) {
+export default function Installs({ downloadVersions, downloadProgress }: InstallsProps) {
   const [showPopup, setShowPopup] = useState(false)
   const [fadeOut, setFadeOut] = useState(false)
   const [versionList, setVersionList] = useState<null | LauncherVersion[]>(null);
@@ -39,6 +39,7 @@ export default function Installs({ downloadVersions }: InstallsProps) {
       <button
         className='button text-3xl mt-4 absolute right-4 top-4'
         onClick={downloadVersion}
+        disabled={downloadProgress.length != 0}
       >
         Download new version
       </button>

src/types/DownloadProgress.ts

@@ -1,7 +1,7 @@
-import { LauncherVersion } from "./LauncherVersion";
+import { LauncherVersion } from './LauncherVersion'
 
 export class DownloadProgress {
-  constructor(
+  constructor (
     public version: LauncherVersion,
     public progress: number,
     public done: boolean

src/types/InstallsProps.ts

@@ -1,5 +1,7 @@
-import { LauncherVersion } from "./LauncherVersion"
+import { DownloadProgress } from './DownloadProgress'
+import { LauncherVersion } from './LauncherVersion'
 
 export type InstallsProps = {
   downloadVersions: (versions: LauncherVersion[]) => void
+  downloadProgress: DownloadProgress[]
 }

src/types/LauncherVersion.ts

@@ -1,6 +1,6 @@
 export interface LauncherVersion {
-    version: string,
-    displayName: string,
-    platforms: string[],
-    downloadUrls: string[]
+  version: string
+  displayName: string
+  platforms: string[]
+  downloadUrls: string[]
 }

src/types/SidebarProps.ts

@@ -1,4 +1,4 @@
-import { DownloadProgress } from "./DownloadProgress"
+import { DownloadProgress } from './DownloadProgress'
 
 export type SidebarProps = {
   downloadProgress: DownloadProgress[]