From c29ae21869574202dc16342c9d8b947fe297ebd1 Mon Sep 17 00:00:00 2001
From: Tony Ribeiro <tonyribeiro.research.aca@gmail.com>
Date: Thu, 24 Aug 2023 01:02:34 +0200
Subject: [PATCH] Redesigned assets connect button

---
 public/scripts/extensions/assets/index.js    | 13 ++++++++++---
 public/scripts/extensions/assets/style.css   | 11 +++++++++++
 public/scripts/extensions/assets/window.html |  6 +++---
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/public/scripts/extensions/assets/index.js b/public/scripts/extensions/assets/index.js
index 364f1f6ca..a12b43f49 100644
--- a/public/scripts/extensions/assets/index.js
+++ b/public/scripts/extensions/assets/index.js
@@ -97,7 +97,8 @@ function downloadAssetsList(url) {
         })
         .catch((error) => {
             console.error(error);
-            toastr.error("Problem with assets URL",DEBUG_PREFIX+"Cannot get assets list")
+            toastr.error("Problem with assets URL",DEBUG_PREFIX+"Cannot get assets list");
+            $('#assets-connect-button').addClass("fa-plug-circle-xmark");
         });
     });
 }
@@ -159,19 +160,25 @@ jQuery(async () => {
     // This is an example of loading HTML from a file
     const windowHtml = $(await $.get(`${extensionFolderPath}/window.html`));
 
-    const assetsJsonUrl = windowHtml.find('#assets_json_url_field');
+    const assetsJsonUrl = windowHtml.find('#assets-json-url-field');
     assetsJsonUrl.val(ASSETS_JSON_URL);
 
-    const connectButton = windowHtml.find('#assets_connect_button');
+    const connectButton = windowHtml.find('#assets-connect-button');
     connectButton.on("click", async function(){
         const confirmation = await callPopup(`Are you sure you want to connect to '${assetsJsonUrl.val()}'?`, 'confirm')
         if (confirmation) {
             try {
                 console.debug(DEBUG_PREFIX,"Confimation, loading assets...");
                 downloadAssetsList(assetsJsonUrl.val());
+                connectButton.removeClass("fa-plug");
+                connectButton.removeClass("fa-plug-circle-xmark");
+                connectButton.addClass("fa-plug-circle-check");
             } catch (error) {
                 console.error('Error:', error);
                 toastr.error(`Cannot get assets list from ${assetsJsonUrl.val()}`);
+                connectButton.removeClass("fa-plug");
+                connectButton.removeClass("fa-plug-circle-check");
+                connectButton.addClass("fa-plug-circle-xmark");
             }
         }
         else {
diff --git a/public/scripts/extensions/assets/style.css b/public/scripts/extensions/assets/style.css
index bdbac8383..e0a356165 100644
--- a/public/scripts/extensions/assets/style.css
+++ b/public/scripts/extensions/assets/style.css
@@ -1,6 +1,17 @@
+#assets-json-url-field {
+    width: 350px;
+}
+
+#assets-connect-button {
+    width: 50px;
+    height: 50px;
+    margin-left: 5px;
+}
+
 .assets-connect-div {
     display: flex;
     flex-direction: row;
+    padding: 5px;
 }
 
 .assets-list-div i {
diff --git a/public/scripts/extensions/assets/window.html b/public/scripts/extensions/assets/window.html
index ce065da98..9965fcb2d 100644
--- a/public/scripts/extensions/assets/window.html
+++ b/public/scripts/extensions/assets/window.html
@@ -6,10 +6,10 @@
         </div>
         <div class="inline-drawer-content">
             <div class="assets-connect-div">
-                <label for="assets_json_url_field">Assets URL
-                    <input id="assets_json_url_field" class="flex1 heightFitContent text_pole widthNatural">
+                <label for="assets-json-url-field">Assets URL
+                    <input id="assets-json-url-field" class="text_pole">
                 </label>
-                <input id="assets_connect_button" class="menu_button" value="Connect">
+                <i id="assets-connect-button" class="menu_button fa-solid fa-plug fa-xl"></i>
             </div>
             <div>
                 <p>Please refresh ST after downloading new asset to use them.</p>