From 5bcd49b7caa0a78ee5a2a3d2b9853131901bb2b7 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 12 Nov 2023 22:12:16 +0200
Subject: [PATCH] More concise UI texts, fix button spam clicks

---
 public/index.html | 10 +++++-----
 public/script.js  |  4 ++--
 public/style.css  |  3 ++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index e8ddb8d1c..46db49a84 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1834,7 +1834,7 @@
                             <div class="marginTopBot5">
                                 <div class="inline-drawer wide100p">
                                     <div class="inline-drawer-toggle inline-drawer-header">
-                                        <b data-i18n="Model Order">Openrouter Model Sorting</b>
+                                        <b data-i18n="Model Order">OpenRouter Model Sorting</b>
                                         <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                     </div>
                                     <div class="inline-drawer-content m-b-1">
@@ -1850,11 +1850,11 @@
                                         <div class="marginTopBot5">
                                             <label for="openrouter_group_models" class="checkbox_label">
                                                 <input id="openrouter_group_models" type="checkbox"/>
-                                                <span data-i18n="Group by vendor names">Group by vendor names</span>
+                                                <span data-i18n="Group by vendors">Group by vendors</span>
                                             </label>
                                             <div class="toggle-description justifyLeft wide100p">
-                                                <span data-i18n="Group by vendor names Description">
-                                                    Group models by their vendor. I.e. put all OpenAI models in one group, all Anthropic models in one group etc. Can be combined with sorting.
+                                                <span data-i18n="Group by vendors Description">
+                                                    Put OpenAI models in one group, Anthropic models in other group, etc. Can be combined with sorting.
                                                 </span>
                                             </div>
                                         </div>
@@ -1962,7 +1962,7 @@
                             <select id="model_palm_select" class="displayNone"></select>
                         </form>
                         <div class="flex-container flex">
-                            <div id="api_button_openai" class="menu_button menu_button_icon" type="submit" data-i18n="Connect">Connect</div>
+                            <div id="api_button_openai" class="api_button menu_button menu_button_icon" type="submit" data-i18n="Connect">Connect</div>
                             <div class="api_loading menu_button" data-i18n="Cancel">Cancel</div>
                             <div data-source="openrouter" id="openrouter_authorize" class="menu_button menu_button_icon" title="Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai" data-i18n="[title]Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai">Authorize</div>
                             <div id="test_api_button" class="menu_button menu_button_icon" title="Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!" data-i18n="[title]Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!">Test Message</div>
diff --git a/public/script.js b/public/script.js
index 53e89cc6e..921ef236d 100644
--- a/public/script.js
+++ b/public/script.js
@@ -926,12 +926,12 @@ async function getStatus() {
 
 export function startStatusLoading() {
     $(".api_loading").show();
-    $(".api_button").attr("disabled", "disabled").addClass("disabled");
+    $(".api_button").addClass("disabled");
 }
 
 export function stopStatusLoading() {
     $(".api_loading").hide();
-    $(".api_button").removeAttr("disabled").removeClass("disabled");
+    $(".api_button").removeClass("disabled");
 }
 
 export function resultCheckStatus() {
diff --git a/public/style.css b/public/style.css
index e63db8100..1dc1888b4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1383,7 +1383,8 @@ select option:not(:checked) {
 
 .menu_button.disabled {
     filter: brightness(75%) grayscale(1);
-    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
 }
 
 .fav_on {