From 84f72edf1dddb4b41461576f72babcaafffc3c09 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 18 Sep 2022 13:52:19 +0200
Subject: [PATCH] use button CSS variables in more places

---
 src/public/app/widgets/api_log.js                           | 2 +-
 .../app/widgets/attribute_widgets/attribute_editor.js       | 6 ++++--
 src/public/app/widgets/buttons/global_menu.js               | 6 +++---
 src/public/app/widgets/buttons/update_available.js          | 2 +-
 src/public/app/widgets/dialogs/confirm.js                   | 2 +-
 src/public/app/widgets/dialogs/info.js                      | 2 +-
 src/public/app/widgets/dialogs/options/etapi.js             | 4 ++--
 src/public/app/widgets/dialogs/prompt.js                    | 6 +++---
 src/public/app/widgets/sql_table_schemas.js                 | 5 ++++-
 src/public/app/widgets/tab_row.js                           | 2 +-
 src/public/app/widgets/type_widgets/read_only_text.js       | 5 +++--
 src/public/stylesheets/style.css                            | 2 +-
 12 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/public/app/widgets/api_log.js b/src/public/app/widgets/api_log.js
index 103181b63..faa01f108 100644
--- a/src/public/app/widgets/api_log.js
+++ b/src/public/app/widgets/api_log.js
@@ -23,7 +23,7 @@ const TPL = `
         padding: 5px;
         border: 1px solid var(--button-border-color);
         background-color: var(--button-background-color);
-        border-radius: 4px;
+        border-radius: var(--button-border-radius);
         color: var(--button-text-color);
         position: absolute;
         top: 10px;
diff --git a/src/public/app/widgets/attribute_widgets/attribute_editor.js b/src/public/app/widgets/attribute_widgets/attribute_editor.js
index 84fba78b1..d038a4797 100644
--- a/src/public/app/widgets/attribute_widgets/attribute_editor.js
+++ b/src/public/app/widgets/attribute_widgets/attribute_editor.js
@@ -57,8 +57,10 @@ const TPL = `
     }
     
     .add-new-attribute-button:hover, .save-attributes-button:hover {
-        border: 1px solid var(--main-border-color);
-        border-radius: 2px;
+        border: 1px solid var(--button-border-color);
+        border-radius: var(--button-border-radius);
+        background: var(--button-background-color);
+        color: var(--button-text-color);
     }
     
     .attribute-errors {
diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js
index 224b5a658..6562bd6c3 100644
--- a/src/public/app/widgets/buttons/global_menu.js
+++ b/src/public/app/widgets/buttons/global_menu.js
@@ -45,11 +45,11 @@ const TPL = `
     .global-menu .zoom-buttons a {
         display: inline-block;
         border: 1px solid var(--button-border-color);
-        border-radius: 3px;
-        padding: 3px;
-        margin-left: 3px;
+        border-radius: var(--button-border-radius);
         color: var(--button-text-color);
         background-color: var(--button-background-color);
+        padding: 3px;
+        margin-left: 3px;
     }
     
     .global-menu .zoom-buttons a:hover {
diff --git a/src/public/app/widgets/buttons/update_available.js b/src/public/app/widgets/buttons/update_available.js
index e59519940..0523d276e 100644
--- a/src/public/app/widgets/buttons/update_available.js
+++ b/src/public/app/widgets/buttons/update_available.js
@@ -8,7 +8,7 @@ const TPL = `
             height: 21px !important;
             padding: 0 !important;
             
-            border-radius: 8px;
+            border-radius: var(--button-border-radius);
             transform: scale(0.9);
             border: none;
             opacity: 0.8;
diff --git a/src/public/app/widgets/dialogs/confirm.js b/src/public/app/widgets/dialogs/confirm.js
index 354d95b07..398dd172c 100644
--- a/src/public/app/widgets/dialogs/confirm.js
+++ b/src/public/app/widgets/dialogs/confirm.js
@@ -3,7 +3,7 @@ import BasicWidget from "../basic_widget.js";
 const DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
 
 const TPL = `
-<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog">
+<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
     <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
diff --git a/src/public/app/widgets/dialogs/info.js b/src/public/app/widgets/dialogs/info.js
index e7a0d8978..266dc7402 100644
--- a/src/public/app/widgets/dialogs/info.js
+++ b/src/public/app/widgets/dialogs/info.js
@@ -2,7 +2,7 @@ import utils from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
 
 const TPL = `
-<div class="info-dialog modal mx-auto" tabindex="-1" role="dialog">
+<div class="info-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
diff --git a/src/public/app/widgets/dialogs/options/etapi.js b/src/public/app/widgets/dialogs/options/etapi.js
index b0034709d..e25c85ee2 100644
--- a/src/public/app/widgets/dialogs/options/etapi.js
+++ b/src/public/app/widgets/dialogs/options/etapi.js
@@ -37,11 +37,11 @@ const TPL = `
         margin-right: 20px;
         font-size: large;
         border: 1px solid transparent;
-        border-radius: 5px;
+        border-radius: var(--button-border-radius);
     }
     
     .token-table-button:hover {
-        border: 1px solid var(--main-border-color);
+        border: 1px solid var(--button-border-color);
     }
 </style>`;
 
diff --git a/src/public/app/widgets/dialogs/prompt.js b/src/public/app/widgets/dialogs/prompt.js
index 65f538b03..30aa326c5 100644
--- a/src/public/app/widgets/dialogs/prompt.js
+++ b/src/public/app/widgets/dialogs/prompt.js
@@ -2,10 +2,10 @@ import utils from "../../services/utils.js";
 import BasicWidget from "../basic_widget.js";
 
 const TPL = `
-<div class="prompt-dialog modal mx-auto" tabindex="-1" role="dialog">
+<div class="prompt-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
-            <form id="prompt-dialog-form">
+            <form class="prompt-dialog-form">
                 <div class="modal-header">
                     <h5 class="prompt-title modal-title mr-auto">Prompt</h5>
 
@@ -34,7 +34,7 @@ export default class PromptDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$dialogBody = this.$widget.find(".modal-body");
-        this.$form = this.$widget.find("#prompt-dialog-form");
+        this.$form = this.$widget.find(".prompt-dialog-form");
         this.$question = null;
         this.$answer = null;
 
diff --git a/src/public/app/widgets/sql_table_schemas.js b/src/public/app/widgets/sql_table_schemas.js
index d1e4d9e63..5eac92c0e 100644
--- a/src/public/app/widgets/sql_table_schemas.js
+++ b/src/public/app/widgets/sql_table_schemas.js
@@ -16,7 +16,10 @@ const TPL = `
         padding: 0.25rem 0.4rem;
         font-size: 0.875rem;
         line-height: 0.5;
-        border-radius: 0.2rem;
+        border: 1px solid var(--button-border-color);
+        border-radius: var(--button-border-radius);
+        background: var(--button-background-color);
+        color: var(--button-text-color);
     }
     
     .sql-console-result-container {
diff --git a/src/public/app/widgets/tab_row.js b/src/public/app/widgets/tab_row.js
index 38921da5a..44eeb7c19 100644
--- a/src/public/app/widgets/tab_row.js
+++ b/src/public/app/widgets/tab_row.js
@@ -93,7 +93,7 @@ const TAB_ROW_TPL = `
     
     .note-new-tab:hover {
         background-color: var(--accented-background-color);
-        border-radius: 5px;
+        border-radius: var(--button-border-radius);
     }
     
     .tab-row-filler {
diff --git a/src/public/app/widgets/type_widgets/read_only_text.js b/src/public/app/widgets/type_widgets/read_only_text.js
index a1a804450..eabc32cfc 100644
--- a/src/public/app/widgets/type_widgets/read_only_text.js
+++ b/src/public/app/widgets/type_widgets/read_only_text.js
@@ -53,11 +53,12 @@ const TPL = `
         padding: 5px;
         cursor: pointer;
         border: 1px solid transparent;
-        border-radius: 5px;
+        border-radius: var(--button-border-radius);
+        color: var(--button-text-color);
     }
     
     .edit-text-note-button:hover {
-        border-color: var(--main-border-color);
+        border-color: var(--button-border-color);
     }
     </style>
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index ac2d9b43e..cbe324e09 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -109,7 +109,6 @@ button.close:hover {
 
 .icon-action {
     border: 1px solid transparent;
-    border-radius: 3px;
     padding: 5px;
     width: 35px;
     height: 35px;
@@ -117,6 +116,7 @@ button.close:hover {
     font-size: 1.5em;
     color: var(--button-text-color);
     background: var(--button-background-color);
+    border-radius: var(--button-border-radius);
 }
 
 .icon-action:hover:not(.disabled) {