use button CSS variables in more places

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;

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: 1px solid var(--button-border-color);
-        border-radius: 2px;
+        border-radius: var(--button-border-radius);
+        background: var(--button-background-color);
+        color: var(--button-text-color);
     }
     
     .attribute-errors {

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;
+        border-radius: var(--button-border-radius);
-        padding: 3px;
-        margin-left: 3px;
         color: var(--button-text-color);
         background-color: var(--button-background-color);
+        padding: 3px;
+        margin-left: 3px;
     }
     
     .global-menu .zoom-buttons a:hover {

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;

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">

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">

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>`;
 

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;
 

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 {

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 {

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>
 

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) {