better install status ui

3 files changed, 30 insertions, 17 deletions

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index c7c52a5..39de01b 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -81,13 +81,6 @@ export function Content() {
 
   return (
     <PanelSection>
-      <StatusDisplay
-        dllDetected={dllDetected}
-        dllDetectionStatus={dllDetectionStatus}
-        isInstalled={isInstalled}
-        installationStatus={installationStatus}
-      />
-
       <InstallationButton
         isInstalled={isInstalled}
         isInstalling={isInstalling}
@@ -96,6 +89,13 @@ export function Content() {
         onUninstall={onUninstall}
       />
 
+      <StatusDisplay
+        dllDetected={dllDetected}
+        dllDetectionStatus={dllDetectionStatus}
+        isInstalled={isInstalled}
+        installationStatus={installationStatus}
+      />
+
       {/* Configuration Section - only show if installed */}
       {isInstalled && (
         <ConfigurationSection
diff --git a/src/components/StatusDisplay.tsx b/src/components/StatusDisplay.tsx
index 8eecd42..3a48a15 100644
--- a/src/components/StatusDisplay.tsx
+++ b/src/components/StatusDisplay.tsx
@@ -19,18 +19,31 @@ export function StatusDisplay({
         <div
           style={{
             color: dllDetected ? "#4CAF50" : "#F44336",
-            fontWeight: "bold",
-            marginBottom: "4px"
+            fontWeight: "600",
+            marginBottom: "6px",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px"
           }}
         >
+          <span style={{ fontSize: "16px" }}>
+            {dllDetected ? "✅" : "❌"}
+          </span>
           {dllDetectionStatus}
         </div>
         <div
           style={{
-            color: isInstalled ? "#4CAF50" : "#FF9800"
+            color: isInstalled ? "#4CAF50" : "#FF9800",
+            fontWeight: "600",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px"
           }}
         >
-          Status: {installationStatus}
+          <span style={{ fontSize: "16px" }}>
+            {isInstalled ? "✅" : "❌"}
+          </span>
+          {installationStatus}
         </div>
       </div>
     </PanelSectionRow>
diff --git a/src/hooks/useLsfgHooks.ts b/src/hooks/useLsfgHooks.ts
index c0bd8e8..ad04305 100644
--- a/src/hooks/useLsfgHooks.ts
+++ b/src/hooks/useLsfgHooks.ts
@@ -17,13 +17,13 @@ export function useInstallationStatus() {
       const status = await checkLsfgVkInstalled();
       setIsInstalled(status.installed);
       if (status.installed) {
-        setInstallationStatus("lsfg-vk is installed");
+        setInstallationStatus("lsfg-vk Installed");
       } else {
-        setInstallationStatus("lsfg-vk is not installed");
+        setInstallationStatus("lsfg-vk Not Installed");
       }
       return status.installed;
     } catch (error) {
-      setInstallationStatus("Error checking installation status");
+      setInstallationStatus("lsfg-vk Not Installed");
       return false;
     }
   };
@@ -50,12 +50,12 @@ export function useDllDetection() {
       const result = await checkLosslessScalingDll();
       setDllDetected(result.detected);
       if (result.detected) {
-        setDllDetectionStatus(`Lossless Scaling App detected (${result.source})`);
+        setDllDetectionStatus("Lossless Scaling Installed");
       } else {
-        setDllDetectionStatus(result.message || "Lossless Scaling App not detected");
+        setDllDetectionStatus("Lossless Scaling Not Installed");
       }
     } catch (error) {
-      setDllDetectionStatus("Error checking Lossless Scaling App");
+      setDllDetectionStatus("Lossless Scaling Not Installed");
     }
   };