From b400d91a7803266db3dffac3b9f9ae86aa08bd2f Mon Sep 17 00:00:00 2001
From: Macaulay Precious <preciousmacaulay001@gmail.com>
Date: Fri, 15 Nov 2024 16:26:44 +0000
Subject: [PATCH] Refactor backend version selection in AdvancedControls to use
 custom Select component for improved UI

---
 .../PromptForm/AdvancedControls.tsx           | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/PromptForm/AdvancedControls.tsx b/src/components/PromptForm/AdvancedControls.tsx
index b0b6084..c95126b 100644
--- a/src/components/PromptForm/AdvancedControls.tsx
+++ b/src/components/PromptForm/AdvancedControls.tsx
@@ -6,6 +6,7 @@ import ColorGradingSelector from "./ColorGradingSelector";
 import AddLoraText from "./AddLoraText";
 import { usePromptFormStore } from '@/store/promptFormStore';
 import { ChevronUp, ChevronDown } from "lucide-react";
+import { SelectLabel, Select, SelectItem, SelectTrigger, SelectContent, SelectValue, SelectGroup } from '../ui/select';
 
 
 interface RangeInputProps {
@@ -101,20 +102,23 @@ export const AdvancedControls = () => {
 
                 {showAdvancedOptions && (
                     <div className="space-y-[4px]">
-                        <div className="flex items-center justify-between">
-                            <label className="text-sm font-[400] text-gray-700 dark:text-gray-200">
+                        <SelectGroup className="flex items-center justify-between">
+                            <SelectLabel className="text-sm px-0 font-[400] text-gray-700 dark:text-gray-200 text-center">
                                 Backend Version
-                            </label>
-                            <select
-                                className="col-span-2 border rounded-full h-6 py-0 px-2 text-center bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200"
-                                onChange={(e) => setBackendVersion(e.target.value)}
-                                value={backendVersion}
-                            >
-                                <option value="0">0 - Stable</option>
-                                <option value="1">1 - BETA</option>
-                            </select>
+                            </SelectLabel>
+                            <Select onValueChange={(value) => setBackendVersion(value)} value={backendVersion}>
+                                <SelectTrigger className="w-[37%] text-center border rounded-full h-6 py-0 px-2 text-center bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200">
+                                    <SelectValue placeholder="Select a version" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectGroup>
+                                        <SelectItem value="0">0 - Stable</SelectItem>
+                                        <SelectItem value="1">1 - BETA</SelectItem>
+                                    </SelectGroup>
+                                </SelectContent>
+                            </Select>
                             {error?.backend_version && <p className="text-red-500 text-xs ml-2">{error.backend_version.join(" ")}</p>}
-                        </div>
+                        </SelectGroup>
                         <hr className="border-t border-gray-200 dark:border-gray-700 m-0 p-0" />
                         <SwitchInput label="Inpaint Faces" checked={inpaintFaces} onCheckedChange={setInpaintFaces} disabled={!superResolution} error={error?.inpaint_faces?.join(" ")} />
                         <hr className="border-t border-gray-200 dark:border-gray-700 m-0 p-0" />