1 files changed, 55 insertions, 66 deletions

diff --git a/src/components/PluginUpdateChecker.tsx b/src/components/PluginUpdateChecker.tsx
index 0028a79..d427c18 100644
--- a/src/components/PluginUpdateChecker.tsx
+++ b/src/components/PluginUpdateChecker.tsx
@@ -1,7 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import {
   ButtonItem,
-  PanelSection
+  PanelSection,
+  PanelSectionRow,
+  Field,
+  Focusable
 } from '@decky/ui';
 import { checkForPluginUpdate, downloadPluginUpdate, UpdateCheckResult, UpdateDownloadResult } from '../api/lsfgApi';
 
@@ -99,88 +102,74 @@ export const PluginUpdateChecker: React.FC<PluginUpdateCheckerProps> = () => {
 
     if (updateInfo.updateAvailable) {
       if (downloadResult?.success) {
-        return (
-          <div style={{ color: 'lightgreen', marginTop: '5px' }}>
-            ✓ v{updateInfo.latestVersion} downloaded - ready to install
-          </div>
-        );
+        return "✓ v" + updateInfo.latestVersion + " downloaded - ready to install";
       } else {
-        return (
-          <div style={{ color: 'orange', marginTop: '5px' }}>
-            Update available: v{updateInfo.latestVersion}
-          </div>
-        );
+        return "Update available: v" + updateInfo.latestVersion;
       }
     } else {
-      return (
-        <div style={{ color: 'lightgreen', marginTop: '5px' }}>
-          Up to date (v{updateInfo.currentVersion})
-        </div>
-      );
+      return "Up to date (v" + updateInfo.currentVersion + ")";
     }
   };
 
   return (
-    <PanelSection title="Plugin Updates">
-      <ButtonItem
-        layout="below"
-        onClick={handleCheckForUpdate}
-        disabled={checkingUpdate}
-        description={getStatusMessage()}
-      >
-        {checkingUpdate ? 'Checking for updates...' : 'Check for Updates'}
-      </ButtonItem>
-
-      {updateInfo && updateInfo.updateAvailable && !downloadResult?.success && (
+    <PanelSection title="PLUGIN UPDATES">
+      <PanelSectionRow>
         <ButtonItem
           layout="below"
-          onClick={handleDownloadUpdate}
-          disabled={downloadingUpdate}
-          description={`Download version ${updateInfo.latestVersion}`}
+          onClick={handleCheckForUpdate}
+          disabled={checkingUpdate}
+          description={getStatusMessage()}
         >
-          {downloadingUpdate ? 'Downloading...' : 'Download Update'}
+          {checkingUpdate ? 'Checking for updates...' : 'Check for Updates'}
         </ButtonItem>
+      </PanelSectionRow>
+
+      {updateInfo && updateInfo.updateAvailable && !downloadResult?.success && (
+        <PanelSectionRow>
+          <ButtonItem
+            layout="below"
+            onClick={handleDownloadUpdate}
+            disabled={downloadingUpdate}
+            description={`Download version ${updateInfo.latestVersion}`}
+          >
+            {downloadingUpdate ? 'Downloading...' : 'Download Update'}
+          </ButtonItem>
+        </PanelSectionRow>
       )}
 
       {downloadResult?.success && (
-        <div style={{ 
-          marginTop: '10px', 
-          padding: '10px', 
-          backgroundColor: 'rgba(0, 255, 0, 0.1)', 
-          borderRadius: '4px',
-          border: '1px solid rgba(0, 255, 0, 0.3)'
-        }}>
-          <div style={{ color: 'lightgreen', fontWeight: 'bold', marginBottom: '5px' }}>
-            ✓ Download Complete!
-          </div>
-          <div style={{ fontSize: '12px', marginBottom: '10px' }}>
-            File saved to: {downloadResult.download_path}
-          </div>
-          <div style={{ fontSize: '12px' }}>
-            <strong>Installation Instructions:</strong>
-            <ol style={{ paddingLeft: '20px', marginTop: '5px' }}>
-              <li>Go to Decky Loader settings</li>
-              <li>Click "Developer" tab</li>
-              <li>Click "Uninstall" next to "Lossless Scaling"</li>
-              <li>Click "Install from ZIP"</li>
-              <li>Select the downloaded file</li>
-              <li>Restart Steam or reload plugins</li>
-            </ol>
-          </div>
-        </div>
+        <>
+          <PanelSectionRow>
+            <Field label="Download Complete!">
+              <Focusable>
+                File saved to: {downloadResult.download_path}
+              </Focusable>
+            </Field>
+          </PanelSectionRow>
+          
+          <PanelSectionRow>
+            <Field label="Installation Instructions:">
+              <Focusable>
+                1. Go to Decky Loader settings
+                <br />2. Click "Developer" tab
+                <br />3. Click "Uninstall" next to "Lossless Scaling"
+                <br />4. Click "Install from ZIP"
+                <br />5. Select the downloaded file
+                <br />6. Restart Steam or reload plugins
+              </Focusable>
+            </Field>
+          </PanelSectionRow>
+        </>
       )}
 
       {updateError && (
-        <div style={{ 
-          color: 'red', 
-          marginTop: '10px', 
-          padding: '8px', 
-          backgroundColor: 'rgba(255, 0, 0, 0.1)', 
-          borderRadius: '4px',
-          fontSize: '12px'
-        }}>
-          {updateError}
-        </div>
+        <PanelSectionRow>
+          <Field label="Error:">
+            <Focusable>
+              {updateError}
+            </Focusable>
+          </Field>
+        </PanelSectionRow>
       )}
     </PanelSection>
   );