From 14b08ac219dc134e130fc89b02c5a963d93bf243 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Fri, 18 Jul 2025 00:06:11 -0400
Subject: fix experimental section formatting

---
 src/components/ConfigurationSection.tsx | 46 ++++++++++++---------------------
 src/components/PluginUpdateChecker.tsx  |  2 +-
 2 files changed, 17 insertions(+), 31 deletions(-)

(limited to 'src')

diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx
index 0ee605c..8433b04 100644
--- a/src/components/ConfigurationSection.tsx
+++ b/src/components/ConfigurationSection.tsx
@@ -1,4 +1,4 @@
-import { PanelSectionRow, ToggleField, SliderField, Dropdown } from "@decky/ui";
+import { PanelSectionRow, ToggleField, SliderField, DropdownItem } from "@decky/ui";
 import { ConfigurationData } from "../config/configSchema";
 
 interface ConfigurationSectionProps {
@@ -106,39 +106,25 @@ export function ConfigurationSection({
             color: "white"
           }}
         >
-          ⚠️ Experimental Features
+          Experimental Features
         </div>
       </PanelSectionRow>
 
       <PanelSectionRow>
-        <div style={{ marginBottom: "8px" }}>
-          <div style={{ 
-            color: "white", 
-            fontSize: "14px", 
-            fontWeight: "500",
-            marginBottom: "4px" 
-          }}>
-            Override Vulkan present mode
-          </div>
-          <div style={{ 
-            color: "rgba(255, 255, 255, 0.7)", 
-            fontSize: "12px",
-            marginBottom: "8px" 
-          }}>
-            Select a specific Vulkan presentation mode for better performance or compatibility
-          </div>
-          <Dropdown
-            selectedOption={config.experimental_present_mode}
-            onChange={(value) => onConfigChange('experimental_present_mode', value.data)}
-            rgOptions={[
-              { data: "", label: "Default (FIFO)" },
-              { data: "fifo", label: "FIFO" },
-              { data: "vsync", label: "VSync" },
-              { data: "mailbox", label: "Mailbox" },
-              { data: "immediate", label: "Immediate" }
-            ]}
-          />
-        </div>
+        <DropdownItem
+          label="Override Vulkan present mode"
+          description="Select a specific Vulkan presentation mode for better performance or compatibility"
+          menuLabel="Select presentation mode"
+          selectedOption={config.experimental_present_mode}
+          onChange={(value) => onConfigChange('experimental_present_mode', value.data)}
+          rgOptions={[
+            { data: "", label: "Default (FIFO)" },
+            { data: "fifo", label: "FIFO" },
+            { data: "vsync", label: "VSync" },
+            { data: "mailbox", label: "Mailbox" },
+            { data: "immediate", label: "Immediate" }
+          ]}
+        />
       </PanelSectionRow>
 
       <PanelSectionRow>
diff --git a/src/components/PluginUpdateChecker.tsx b/src/components/PluginUpdateChecker.tsx
index e7a9345..d427c18 100644
--- a/src/components/PluginUpdateChecker.tsx
+++ b/src/components/PluginUpdateChecker.tsx
@@ -140,7 +140,7 @@ export const PluginUpdateChecker: React.FC<PluginUpdateCheckerProps> = () => {
       {downloadResult?.success && (
         <>
           <PanelSectionRow>
-            <Field label="✓ Download Complete!">
+            <Field label="Download Complete!">
               <Focusable>
                 File saved to: {downloadResult.download_path}
               </Focusable>
-- 
cgit v1.2.3