fix: align plugin install progress (#944)HEADmain

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

1 files changed, 31 insertions, 0 deletions

diff --git a/frontend/src/components/modals/PluginInstallProgress.tsx b/frontend/src/components/modals/PluginInstallProgress.tsx
new file mode 100644
index 00000000..14fe9f34
--- /dev/null
+++ b/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;