From dbdefd46166235d369131ec2534a43e76c28fee1 Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Wed, 24 Jul 2024 00:14:54 +0200
Subject: [PATCH] different colors for different connection types. see #92

---
 options/mzta-options.css | 41 +++++++++++++++++++++++++++-------------
 options/mzta-options.js  | 14 ++++++++++----
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/options/mzta-options.css b/options/mzta-options.css
index 92c96f24..12c82ed8 100644
--- a/options/mzta-options.css
+++ b/options/mzta-options.css
@@ -1,16 +1,3 @@
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: rgb(35, 34, 43);
-        color: rgb(251, 251, 254);
-    }
-    
-    a:link { color: #409EFF; }   
-    a:visited { color: #409EFF; }  
-    a:hover { color: #66B1FF; }   
-    a:active { color: #66B1FF; }
-    
-}
-
 div#miczDescription{
     padding:0px 15px 0px 15px;
     font-size: 13px;
@@ -99,4 +86,32 @@ div#miczTranslate{
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 1em;
+}
+
+.conntype_chatgpt_api, .conntype_chatgpt_api2{
+    background-color: rgb(185, 220, 252);
+}
+
+.conntype_chatgpt_web, .conntype_chatgpt_web2{
+    background-color: rgb(205, 255, 205);
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: rgb(35, 34, 43);
+        color: rgb(251, 251, 254);
+    }
+    
+    a:link { color: #409EFF; }   
+    a:visited { color: #409EFF; }  
+    a:hover { color: #66B1FF; }   
+    a:active { color: #66B1FF; }
+    
+    .conntype_chatgpt_api, .conntype_chatgpt_api2{
+        background-color: rgb(0, 0, 58);
+    }
+
+    .conntype_chatgpt_web,.conntype_chatgpt_web2{
+        background-color: rgb(0, 39, 0);
+    }
 }
\ No newline at end of file
diff --git a/options/mzta-options.js b/options/mzta-options.js
index aa2119eb..57d6bca9 100644
--- a/options/mzta-options.js
+++ b/options/mzta-options.js
@@ -88,12 +88,16 @@ async function restoreOptions() {
 function showConnectionOptions() {
   let chatgpt_web_display = 'table-row';
   let chatgpt_api_display = 'none';
-  if (document.getElementById("connection_type").value === "chatgpt_web") {
+  let conntype_select = document.getElementById("connection_type");
+  let parent = conntype_select.parentElement.parentElement.parentElement;
+  parent.classList.toggle("conntype_chatgpt_api", (conntype_select.value === "chatgpt_api"));
+  parent.classList.toggle("conntype_chatgpt_web", (conntype_select.value === "chatgpt_web"));
+  if (conntype_select.value === "chatgpt_web") {
     chatgpt_web_display = 'table-row';
   }else{
     chatgpt_web_display = 'none';
   }
-  if (document.getElementById("connection_type").value === "chatgpt_api") {
+  if (conntype_select.value === "chatgpt_api") {
     chatgpt_api_display = 'table-row';
   }else{
     chatgpt_api_display = 'none';
@@ -128,6 +132,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   document.querySelectorAll(".option-input").forEach(element => {
     element.addEventListener("change", saveOptions);
   });
+
   showConnectionOptions();
   
   document.getElementById('btnManagePrompts').addEventListener('click', () => {
@@ -143,8 +148,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     })
   });
 
-  document.getElementById("connection_type").addEventListener("change", showConnectionOptions);
-  document.getElementById("connection_type").addEventListener("change", warnAPIKeyEmpty);
+  let conntype_select = document.getElementById("connection_type");
+  conntype_select.addEventListener("change", showConnectionOptions);
+  conntype_select.addEventListener("change", warnAPIKeyEmpty);
   document.getElementById("api_key_chatgpt").addEventListener("change", warnAPIKeyEmpty);
 
   let prefs = await browser.storage.sync.get({api_key_chatgpt: '', model_chatgpt: ''});