fix: align plugin install progress (#944)HEADmain

Co-authored-by: David Beall <6121439+beallio@users.noreply.github.com>

1 files changed, 5 insertions, 7 deletions

diff --git a/frontend/src/components/modals/MultiplePluginsInstallModal.tsx b/frontend/src/components/modals/MultiplePluginsInstallModal.tsx
index e5c1c647..4a386997 100644
--- a/frontend/src/components/modals/MultiplePluginsInstallModal.tsx
+++ b/frontend/src/components/modals/MultiplePluginsInstallModal.tsx
@@ -1,9 +1,10 @@
-import { ConfirmModal, Navigation, ProgressBarWithInfo, QuickAccessTab } from '@decky/ui';
+import { ConfirmModal, Navigation, QuickAccessTab } from '@decky/ui';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaCheck, FaDownload } from 'react-icons/fa';
 
 import { DisabledPlugin, InstallType, InstallTypeTranslationMapping } from '../../plugin';
+import PluginInstallProgress from './PluginInstallProgress';
 
 interface MultiplePluginsInstallModalProps {
   requests: { name: string; version: string; hash: string; install_type: InstallType }[];
@@ -132,15 +133,12 @@ const MultiplePluginsInstallModal: FC<MultiplePluginsInstallModalProps> = ({
             );
           })}
         </ul>
-        {/* TODO: center the progress bar and make it 80% width */}
         {loading && (
-          <ProgressBarWithInfo
+          <PluginInstallProgress
             // when the key changes, react considers this a new component so resets the progress without the smoothing animation
             key={pluginInProgress}
-            bottomSeparator="none"
-            focusable={false}
-            nProgress={percentage}
-            sOperationText={downloadInfo}
+            percentage={percentage}
+            operationText={downloadInfo}
           />
         )}
       </div>