From b7a7a7d31fbaa67c3aeab7ca48355eb17b5f1df3 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Wed, 15 Mar 2023 19:41:19 +0530
Subject: [PATCH] Move similar image info buttons into a single row, using the
 new array API

---
 ui/media/css/main.css |  4 ++--
 ui/media/js/main.js   | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 49b145b5..95b8d5c5 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -155,11 +155,11 @@ code {
 .imgContainer:hover > .img_bottom_label {
     opacity: 60%;
 }
-.imgItemInfo * {
+.imgItemInfo > * {
     margin-bottom: 7px;
 }
 .imgItemInfo .tasksBtns {
-    margin-left: 1em;
+    margin-left: 5pt;
 }
 .imgItem .image_clear_btn {
     transform: translate(40%, -50%);
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index fdbeae6f..8f1ecea3 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -342,12 +342,16 @@ function showImages(reqBody, res, outputContainer, livePreview) {
 
             let buttons = [
                 { text: 'Use as Input', on_click: onUseAsInputClick },
-                { text: 'Download', on_click: onDownloadImageClick, class: "download-img" },
-                { text: 'Download JSON', on_click: onDownloadJSONClick, class: "download-json" },
+                [
+                    { html: '<i class="fa-solid fa-download"></i> Download Image', on_click: onDownloadImageClick, class: "download-img" },
+                    { html: '<i class="fa-solid fa-download"></i> JSON', on_click: onDownloadJSONClick, class: "download-json" }
+                ],
                 { text: 'Make Similar Images', on_click: onMakeSimilarClick },
                 { text: 'Draw another 25 steps', on_click: onContinueDrawingClick },
-                { text: 'Upscale', on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale },
-                { text: 'Fix Faces', on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction }
+                [
+                    { text: 'Upscale', on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale },
+                    { text: 'Fix Faces', on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction }
+                ]
             ]
 
             // include the plugins