Add new model selection

renderer/components/sidebar/upscayl-tab/select-model.tsx

@@ -51,17 +51,16 @@ export default function SelectModel() {
                 const modelId = modelData[0] as ModelId;
                 const model = modelData[1];
                 return (
-                  <Button
+                  <button
                     key={modelId}
-                    variant="outline"
+                    className="btn h-auto w-full flex-col items-start p-4"
-                    className="h-auto w-full flex-col items-start p-4"
                     onClick={() => handleModelSelect(modelId)}
                   >
                     <div className="mb-2 font-semibold">{model.name}</div>
                     <div className="relative h-52 w-full overflow-hidden rounded-md">
                       <div className="flex h-full w-full">
                         <img
-                          src={`/model-comparison/${model.name}/before.webp`}
+                          src={`/model-comparison/${model.id}/before.webp`}
                           alt={`${model.name} Before`}
                           className="h-full w-1/2 object-cover"
                         />
@@ -90,19 +89,21 @@ export default function SelectModel() {
                         <span className="sr-only">Zoom</span>
                       </Button>
                     </div>
-                  </Button>
+                  </button>
                 );
               })}
+              <p className="font-semibold text-base-content">
+                Imported Custom Models
+              </p>
               {customModelIds.map((customModel) => {
                 return (
-                  <Button
+                  <button
                     key={customModel}
-                    variant="outline"
+                    className="btn h-auto w-full flex-col items-start p-4"
-                    className="h-auto w-full flex-col items-start p-4"
                     onClick={() => handleModelSelect(customModel)}
                   >
                     {customModel}
-                  </Button>
+                  </button>
                 );
               })}
             </div>
@@ -141,15 +142,13 @@ export default function SelectModel() {
                 </div>
               </div>
             </div>
-            <Button
+            <button
-              variant="secondary"
+              className="btn btn-circle btn-secondary absolute right-4 top-4"
-              size="icon"
-              className="absolute right-4 top-4"
               onClick={() => setZoomedModel(null)}
             >
               <X className="h-4 w-4" />
               <span className="sr-only">Close</span>
-            </Button>
+            </button>
           </div>
         </DialogContent>
       </Dialog>

renderer/components/ui/dialog.tsx

@@ -34,7 +34,7 @@ const DialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     hideCloseButton?: boolean;
   }
->(({ className, children, ...props }, ref) => {
+>(({ className, children, hideCloseButton, ...props }, ref) => {
   const t = useTranslation();
 
   return (
@@ -49,10 +49,12 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
+        {!hideCloseButton && (
           <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
             <X className="h-4 w-4" />
             <span className="sr-only">{t("APP.DIALOG_BOX.CLOSE")}</span>
           </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   );