fix: align plugin install progress (#944)

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

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>

frontend/src/components/modals/PluginInstallModal.tsx

@@ -1,8 +1,9 @@
-import { ConfirmModal, Navigation, ProgressBarWithInfo, QuickAccessTab } from '@decky/ui';
+import { ConfirmModal, Navigation, QuickAccessTab } from '@decky/ui';
 import { FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { InstallType, InstallTypeTranslationMapping } from '../../plugin';
+import PluginInstallProgress from './PluginInstallProgress';
 
 interface PluginInstallModalProps {
   artifact: string;
@@ -66,7 +67,7 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({
         await onCancel();
       }}
       strTitle={
-        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%' }}>
+        <div>
           {
             // IMPORTANT! These comments are not cosmetic and are needed for `extracttext` task to work
             // t('PluginInstallModal.install.title')
@@ -76,16 +77,6 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({
             // t('PluginInstallModal.overwrite.title')
             t(`PluginInstallModal.${installTypeTranslationKey}.title`, { artifact: artifact })
           }
-          {loading && (
-            <div style={{ marginLeft: 'auto' }}>
-              <ProgressBarWithInfo
-                layout="inline"
-                bottomSeparator="none"
-                nProgress={percentage}
-                sOperationText={downloadInfo}
-              />
-            </div>
-          )}
         </div>
       }
       strOKButtonText={
@@ -128,6 +119,7 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({
         }
       </div>
       {hash == 'False' && <span style={{ color: 'red' }}>{t('PluginInstallModal.no_hash')}</span>}
+      {loading && <PluginInstallProgress percentage={percentage} operationText={downloadInfo} />}
     </ConfirmModal>
   );
 };

frontend/src/components/modals/PluginInstallProgress.tsx

@@ -0,0 +1,31 @@
+import { Field, ProgressBar } from '@decky/ui';
+import { FC } from 'react';
+
+interface PluginInstallProgressProps {
+  percentage: number;
+  operationText: string | null;
+}
+
+const PluginInstallProgress: FC<PluginInstallProgressProps> = ({ percentage, operationText }) => {
+  return (
+    <div style={{ width: '100%', margin: '16px 0 0' }}>
+      <Field bottomSeparator="none" childrenLayout="below" focusable={false} padding="standard">
+        <div style={{ width: '100%' }}>
+          <div
+            style={{
+              minHeight: '22px',
+              width: '100%',
+              textAlign: 'left',
+              textTransform: 'uppercase',
+            }}
+          >
+            {operationText}
+          </div>
+          <ProgressBar focusable={false} nProgress={percentage} />
+        </div>
+      </Field>
+    </div>
+  );
+};
+
+export default PluginInstallProgress;