From 7ed106a0f0eac00c4b8f35b49436f5f62603799b Mon Sep 17 00:00:00 2001
From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com>
Date: Mon, 4 Dec 2023 22:48:55 +0330
Subject: [PATCH] Minor UI bug fixes (#689)

* minor css modification
* JSON Editor color correction
* Added Line-Hover class
* Update web/assets/css/custom.css
* Update web/assets/css/custom.css

Co-authored-by: Shellgate <128194280+Shellgate@users.noreply.github.com>
---
 web/assets/codemirror/codemirror.js |  2 +-
 web/assets/codemirror/xq.css        | 34 ++++++++++++--------
 web/assets/css/custom.css           | 48 +++++++++++++++++++++++++++--
 3 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/web/assets/codemirror/codemirror.js b/web/assets/codemirror/codemirror.js
index 156fc307..ef1810fa 100644
--- a/web/assets/codemirror/codemirror.js
+++ b/web/assets/codemirror/codemirror.js
@@ -1741,7 +1741,7 @@
     // is needed on Webkit to be able to get line-level bounding
     // rectangles for it (in measureChar).
     var content = eltP("span", null, null, webkit ? "padding-right: .1px" : null);
-    var builder = {pre: eltP("pre", [content], "CodeMirror-line"), content: content,
+    var builder = {pre: eltP("pre", [content], "CodeMirror-line Line-Hover"), content: content,
                    col: 0, pos: 0, cm: cm,
                    trailingSpace: false,
                    splitSpaces: cm.getOption("lineWrapping")};
diff --git a/web/assets/codemirror/xq.css b/web/assets/codemirror/xq.css
index db1d24d6..a47b114b 100644
--- a/web/assets/codemirror/xq.css
+++ b/web/assets/codemirror/xq.css
@@ -21,17 +21,19 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 .cm-s-xq.CodeMirror { border-radius: 1.5rem; border: 1px solid #d9d9d9; height: auto; }
+.cm-s-xq.CodeMirror:hover { background-color: #edf4fa; border-color: #2f67c2; transition: all .3s; }
+.cm-s-xq .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: rgb(221 221 221 / 20%); white-space: nowrap; }
 .cm-s-xq span.cm-keyword { line-height: 1em; font-weight: bold; color: #5A5CAD; }
-.cm-s-xq span.cm-atom { color: #6C8CD5; }
-.cm-s-xq span.cm-number { color: #164; }
+.cm-s-xq span.cm-atom { color: #7A316F; font-weight:bold; }
+.cm-s-xq span.cm-number { color: #389E0D; }
 .cm-s-xq span.cm-def { text-decoration:underline; }
 .cm-s-xq span.cm-variable { color: black; }
 .cm-s-xq span.cm-variable-2 { color:black; }
 .cm-s-xq span.cm-variable-3, .cm-s-xq span.cm-type { color: black; }
 .cm-s-xq span.cm-property {}
 .cm-s-xq span.cm-operator {}
-.cm-s-xq span.cm-comment { color: #0080FF; font-style: italic; }
-.cm-s-xq span.cm-string { color: #e04141; }
+.cm-s-xq span.cm-comment { color: #bbbbbb; font-style: italic; }
+.cm-s-xq span.cm-string { color: #0e49b5; }
 .cm-s-xq span.cm-meta { color: yellow; }
 .cm-s-xq span.cm-qualifier { color: grey; }
 .cm-s-xq span.cm-builtin { color: #7EA656; }
@@ -44,18 +46,19 @@ THE SOFTWARE.
 .cm-s-xq .CodeMirror-matchingbracket { outline:1px solid grey;color:black !important;background:yellow; }
 
 .dark .cm-s-xq.CodeMirror { background-color: #222D42; border-color: #2c3950; color: rgb(255 255 255 / 65%); }
-.dark .cm-s-xq div.CodeMirror-selected { background: #27007A; }
+.dark .cm-s-xq.CodeMirror:hover { background-color: #0e2040; border-color: #0e49b5; transition: all .3s; }
+.dark .cm-s-xq div.CodeMirror-selected { background: rgba(0, 0, 0, 0.5);  }
 .dark .cm-s-xq .CodeMirror-line::selection, .dark .cm-s-xq .CodeMirror-line > span::selection, .dark .cm-s-xq .CodeMirror-line > span > span::selection { background: rgba(39, 0, 122, 0.99); }
 .dark .cm-s-xq .CodeMirror-line::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span::-moz-selection, .dark .cm-s-xq .CodeMirror-line > span > span::-moz-selection { background: rgba(39, 0, 122, 0.99); }
-.dark .cm-s-xq .CodeMirror-gutters { background: #222D42; border-right: 1px solid #2c3950; }
+.dark .cm-s-xq .CodeMirror-gutters { background: rgb(0 0 0 / 30%); border-right: 1px solid #2c3950; }
 .dark .cm-s-xq .CodeMirror-guttermarker { color: #FFBD40; }
-.dark .cm-s-xq .CodeMirror-guttermarker-subtle { color: #f8f8f8; }
-.dark .cm-s-xq .CodeMirror-linenumber { color: #f8f8f8; }
+.dark .cm-s-xq .CodeMirror-guttermarker-subtle { color: rgb(255 255 255 / 70%); }
+.dark .cm-s-xq .CodeMirror-linenumber { color: rgb(255 255 255 / 50%); }
 .dark .cm-s-xq .CodeMirror-cursor { border-left: 1px solid white; }
 
 .dark .cm-s-xq span.cm-keyword { color: #FFBD40; }
-.dark .cm-s-xq span.cm-atom { color: #6C8CD5; }
-.dark .cm-s-xq span.cm-number { color: #164; }
+.dark .cm-s-xq span.cm-atom { color: #c099ff; }
+.dark .cm-s-xq span.cm-number { color: #9ccfd8; }
 .dark .cm-s-xq span.cm-def { color: #FFF; text-decoration:underline; }
 .dark .cm-s-xq span.cm-variable { color: #FFF; }
 .dark .cm-s-xq span.cm-variable-2 { color: #EEE; }
@@ -63,7 +66,7 @@ THE SOFTWARE.
 .dark .cm-s-xq span.cm-property {}
 .dark .cm-s-xq span.cm-operator {}
 .dark .cm-s-xq span.cm-comment { color: gray; }
-.dark .cm-s-xq span.cm-string { color: #9FEE00; }
+.dark .cm-s-xq span.cm-string { color: #f6c177 }
 .dark .cm-s-xq span.cm-meta { color: yellow; }
 .dark .cm-s-xq span.cm-qualifier { color: #FFF700; }
 .dark .cm-s-xq span.cm-builtin { color: #30a; }
@@ -73,4 +76,11 @@ THE SOFTWARE.
 .dark .cm-s-xq span.cm-error { color: #e04141; }
 
 .dark .cm-s-xq .CodeMirror-activeline-background { background: #27282E; }
-.dark .cm-s-xq .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; }
\ No newline at end of file
+.dark .cm-s-xq .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; }
+
+.Line-Hover{transition: all .2s;}
+.Line-Hover:hover{ background-color: rgb(4 48 143 / 5%) !important; }  
+.dark .Line-Hover:hover{ background-color: rgb(0 0 0 / 20%) !important; }
+
+.CodeMirror-foldmarker { color: #fc8800; text-shadow: #ffd8aa 1px 1px 2px, #ffd8aa -1px -1px 2px, #ffd8aa 1px -1px 2px, #ffd8aa -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; }
+.dark .CodeMirror-foldmarker { color: #ffffff; text-shadow: #bbb 1px 1px 2px, #bbb -1px -1px 2px, #bbb 1px -1px 2px, #bbb -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; }
diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index cee6b026..5a727d99 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -26,7 +26,7 @@ html {
 
 ::selection {
     color: #0e49b5;
-    background-color: #0e49b530;
+    background-color: #d2ddf1;
 }
 
 #app {
@@ -750,5 +750,47 @@ style attribute {
 }
 
 .dark .ant-spin-dot-item {
-    background-color: #ffffffff;
-}
\ No newline at end of file
+    background-color: #ffffff;
+
+}
+
+.ant-radio-button-wrapper {
+    user-select: none;
+}
+
+.ant-menu {
+    user-select: none;
+}
+
+.ant-calendar-date:hover {
+    background: #dae9f5;
+    cursor: pointer
+}
+
+.ant-calendar-date:active {
+    background: #dae9f5;
+    color: rgba(0, 0, 0, 0.65);
+}
+
+.ant-calendar-today .ant-calendar-date {
+    color: #0e49b5;
+    font-weight: 700;
+    border-color: #0e49b5
+}
+
+.dark .ant-calendar-today .ant-calendar-date {
+    color: #ffffff;
+    font-weight: 700;
+    border-color: #0e49b5
+}
+
+.ant-calendar-selected-day .ant-calendar-date {
+    background: #0E49B5;
+    color: #ffffff;
+}
+
+li.ant-select-dropdown-menu-item:empty:after {
+    content: "None";
+    font-weight:normal;
+    color:rgb(0 0 0 / 25%);
+}