minor ui fixes

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -56,14 +56,14 @@ export function NavBar() {
             <NavBarSpliter />
             <NavBarItem isActive={["/blah","/"].includes(route)}>
                 <Tippy placement="right" content={t("nav-bar.add-version")} className="!bg-neutral-900" arrow={false}>
-                    <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="blah">
+                    <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-theme-3" to="blah">
                         <BsmIcon icon="add" className="text-blue-500 h-[34px]" style={{ color }} />
                     </Link>
                 </Tippy>
             </NavBarItem>
             <NavBarItem isActive={route === "/settings"}>
             <Tippy placement="right" content={t("nav-bar.settings")} className="!bg-neutral-900" arrow={false}>
-                    <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="settings">
+                    <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-theme-3" to="settings">
                         <BsmIcon icon="settings" className="text-blue-500 h-7" style={{ color }} />
                     </Link>
                 </Tippy>

src/renderer/components/version-viewer/slides/launch/launch-slide.component.tsx

@@ -183,6 +183,7 @@ export function LaunchSlide({ version }: Props) {
                     if(launchMod?.visible === false || !launchMod?.pinned) { return undefined; }
                     return (
                         <LaunchModToogle
+                            key={launchMod.id}
                             icon={launchMod.icon}
                             infoText={launchMod.description}
                             text={launchMod.label}

src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx

@@ -11,7 +11,6 @@ import { useObservable } from "renderer/hooks/use-observable.hook";
 import { lastValueFrom } from "rxjs";
 import { useTranslation, useTranslationV2 } from "renderer/hooks/use-translation.hook";
 import { LinkOpenerService } from "renderer/services/link-opener.service";
-import { useInView } from "framer-motion";
 import { ModalExitCode, ModalService } from "renderer/services/modale.service";
 import { ModsDisclaimerModal } from "renderer/components/modal/modal-types/mods-disclaimer-modal.component";
 import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
@@ -22,8 +21,9 @@ import { noop } from "shared/helpers/function.helpers";
 import { UninstallAllModsModal } from "renderer/components/modal/modal-types/uninstall-all-mods-modal.component";
 import { Dropzone } from "renderer/components/shared/dropzone.component";
 import Tippy from "@tippyjs/react";
+import { ProgressBarService } from "renderer/services/progress-bar.service";
 
-export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion; onDisclamerDecline: () => void }) {
+export function ModsSlide({ version, isActive, onDisclamerDecline }: { version: BSVersion; isActive?: boolean, onDisclamerDecline: () => void }) {
     const ACCEPTED_DISCLAIMER_KEY = "accepted-mods-disclaimer";
 
     const { text: t } = useTranslationV2();
@@ -34,9 +34,8 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
     const linkOpener = useService(LinkOpenerService);
     const modals = useService(ModalService);
     const os = useService(OsDiagnosticService);
+    const progress = useService(ProgressBarService);
 
-    const ref = useRef(null);
-    const isVisible = useInView(ref, { amount: 0.5 });
     const [modsAvailable, setModsAvailable] = useState(null as Map<BbmCategories, BbmFullMod[]>);
     const [modsInstalled, setModsInstalled] = useState(null as Map<BbmCategories, BbmFullMod[]>);
     const [modsSelected, setModsSelected] = useState([] as BbmFullMod[]);
@@ -202,7 +201,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
 
     useEffect(() => {
 
-        if(!isVisible || !isOnline){
+        if(!isActive || !isOnline){
             return noop();
         }
 
@@ -232,7 +231,22 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
             setModsAvailable(null);
             setModsInstalled(null);
         };
-    }, [isVisible, isOnline, version]);
+    }, [isActive, isOnline, version]);
+
+    useEffect(() => {
+        // Center the progress bar between buttons
+        if(isActive){
+            progress.setStyle({ paddingLeft: "150px", paddingRight: "190px", bottom: "24px" });
+
+        } else {
+            progress.setStyle(null);
+        }
+
+
+        return () => {
+            progress.setStyle(null);
+        }
+    }, [isActive])
 
     useLayoutEffect(() => {
         if (modsAvailable) {
@@ -291,7 +305,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
     };
 
     return (
-        <div ref={ref} className="shrink-0 w-full h-full px-8 pb-7 flex justify-center">
+        <div className="shrink-0 w-full h-full px-8 pb-7 flex justify-center">
             <Dropzone
                 className="w-full h-full shrink-0"
                 onFiles={importMods}

src/renderer/pages/version-viewer.component.tsx

@@ -153,7 +153,7 @@ export function VersionViewer() {
                     <div className="w-full shrink-0 px-3 pb-3 flex flex-col items-center">
                         <ModelsPanel version={state} isActive={currentTabIndex === 2} goToMods={() => setCurrentTabIndex(() => 3)} />
                     </div>
-                    <ModsSlide version={state} onDisclamerDecline={handleModsDisclaimerDecline} />
+                    <ModsSlide version={state} isActive={currentTabIndex === 3} onDisclamerDecline={handleModsDisclaimerDecline} />
                 </div>
             </div>
             <BsmDropdownButton className="absolute top-3 right-4 h-9 w-9 bg-light-main-color-2 dark:bg-main-color-2 rounded-md" items={[

src/renderer/services/bs-mods-manager.service.ts

@@ -48,7 +48,8 @@ export class BsModsManagerService {
 
         return new Observable<Progression>(obs => {
             const install$ = this.ipcService.sendV2("bs-mods.install-mods", { mods, version });
-            this.progressBar.show(install$.pipe(catchError(() => of({ current: 0, total: 0} as Progression))), { paddingLeft: "190px", paddingRight: "190px", bottom: "20px" });
+            this.progressBar.show(install$.pipe(catchError(() => of({ current: 0, total: 0} as Progression))));
+
 
             const sub = install$.pipe(
                 tap({

src/renderer/services/progress-bar.service.ts

@@ -76,7 +76,10 @@ export class ProgressBarService {
             this.subscribreTo(obs);
         }
         this._visible$.next(true);
-        this._style$.next(style);
+
+        if(style) {
+            this._style$.next(style);
+        }
     }
 
     public showFake(speed: number, style?: CSSProperties, label?: string): void {