fix(GUI): multiple issues ( Fixes #2186 Fixes #2187 Fixes #2191 Fixes #…

…2192 Fixes #2216 Fixes #2174 PR #2207 )
edrlab · May 17, 2024 · 2e03ea3 · 2e03ea3
1 parent b3e2d8c
commit 2e03ea3
Show file tree

Hide file tree

Showing 26 changed files with 332 additions and 141 deletions.
diff --git a/src/renderer/assets/icons/emptylibrary-background-icon.svg b/src/renderer/assets/icons/emptylibrary-background-icon.svg
diff --git a/src/renderer/assets/icons/emptylibrary-icon.svg b/src/renderer/assets/icons/emptylibrary-icon.svg
diff --git a/src/renderer/assets/icons/globe-icon-bold.svg b/src/renderer/assets/icons/globe-icon-bold.svg
diff --git a/src/renderer/assets/icons/singlecheck-icon.svg b/src/renderer/assets/icons/singlecheck-icon.svg
diff --git a/src/renderer/assets/styles/components/allPublicationsPage.scss b/src/renderer/assets/styles/components/allPublicationsPage.scss
@@ -109,13 +109,14 @@
 
                 svg {
                     width: 20px;
+                    margin: 0 5px;
                 }
             }
 
             &_arrow {
                 margin: 0;
                 padding: 0;
-                width: 20px;
+                width: 30px;
                 color: var(--color-blue);
 
                 a {

diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss
@@ -53,9 +53,9 @@
 
 .annotation_form {
     background-color: var(--color-extralight-grey);
-    max-width: 400px;
+    max-width: 450px;
     border-radius: 6px;
-    border: 1px solid var(--color-medium-grey);
+    // border: 1px solid var(--color-medium-grey);
     display: flex;
     flex-direction: column;
     padding: 5px 10px;
@@ -72,15 +72,15 @@
     }
 
     &_textarea{
-      width: 380px;
-      min-width: 380px;
+      width: 420px;
+      min-width: 420px;
       height: 100px;
       min-height: 100px;
-      max-width: 380px;
+      max-width: 420px;
       border: 1px solid rgb(118 118 118);
       border-radius: 3px;
       font-family: Nunito, sans-serif;
-      background-color: var(--color-secondary);
+      background-color: var(--color-annotations-txt-area);
       color: var(--color-primary);
 
 
@@ -125,7 +125,8 @@
     display: flex;
     align-items: center;
     gap: 30px;
-    margin: 10px 0;
+    margin: 0;
+    margin-bottom: 10px;
 
     &_container {
       display: flex;
@@ -207,10 +208,10 @@
 
   .colorPicker {
     display: flex;
-    background-color: var(--color-secondary);
+    background-color: var(--color-button-hover);
     padding: 2px;
     gap: 1px;
-    border: 1px solid var(--color-primary);
+    border: 1px solid var(--color-dark-grey);
     border-radius: 6px;
 
     &:has(input:focus) {
@@ -228,7 +229,7 @@
             width: 25px;
             height: 25px;
             margin: 0;
-            border: 1px solid white;
+            border: 1px solid var(--color-secondary);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -271,7 +272,7 @@
           justify-content: center;
 
           svg {
-            color: var(--color-blue);
+            color: var(--color-blue-alt);
           }
       }
   }
@@ -287,17 +288,19 @@
   }
 
   .annotations_line {
-    width: calc(100% - 10px);
+    width: calc(100% - 20px);
     position: relative;
     text-align: left;
     font-size: 1rem;
     border-left: 2px solid var(--color-blue);
     padding-left: 10px;
-    margin: 10px 0;
+    margin: 0;
+    margin-bottom: 10px;
     background-color: var(--color-annotations-bg);
 
     p {
       text-align: left;
+      background-color: var(--color-annotations-txt);
 
       // overflow: hidden;
       // text-overflow: ellipsis;

diff --git a/src/renderer/assets/styles/components/buttons.scss b/src/renderer/assets/styles/components/buttons.scss
@@ -299,6 +299,11 @@ button {
   gap: 5px;
   box-sizing: content-box;
   position: relative;
+  transition: 200ms;
+
+  &:hover {
+    background-color: var(--color-button-hover);
+  }
 
   &:focus-within, &:focus {
     outline: var(--color-blue) solid 1px !important;

diff --git a/src/renderer/assets/styles/components/catalogs.scss b/src/renderer/assets/styles/components/catalogs.scss
@@ -288,13 +288,17 @@
 
 .opds_browserResults {
     overflow: auto;
-    inset: 280px 20px 30px 30px;
+    inset: 260px 20px 30px 30px;
     padding: 0;
     margin-top: 0;
     margin-bottom: 0.4em;
     position: absolute;
     padding-right: 25px;
 
+    @media only screen and (width <= 1024px) {
+        inset: 310px 20px 30px 30px;
+    }
+
     &::-webkit-scrollbar {
         width: 12px;
         transition: 200ms;

diff --git a/src/renderer/assets/styles/components/combobox.scss b/src/renderer/assets/styles/components/combobox.scss
@@ -12,7 +12,7 @@
   gap: 5px;
 
   .my_combobox_container {
-    border: 1px solid var(--color-primary);
+    border: 1px solid var(--color-dark-grey-alt);
     border-radius: 6px;
     display: flex;
     align-items: center;
@@ -45,7 +45,7 @@
     background: transparent!important;
     color: var(--field-text-color);
     height: 24px;
-    padding: 0 5px 0 40px;
+    padding: 0 5px 0 30px;
     vertical-align: middle;
     border: none;
     width: 320px;
@@ -82,7 +82,7 @@
   width: var(--trigger-width);
   background-color: var(--color-secondary);
   pointer-events: auto;
-  border: 1px solid var(--color-primary);
+  border: 1px solid var(--color-dark-grey-alt);
   border-radius: 6px;
   height: fit-content;
   max-height: 350px!important;
@@ -122,7 +122,7 @@
 }
 
 .my_item {
-    padding: 4px 8px 4px 22px;
+    padding: 4px 8px 4px 30px;
     outline: none;
     cursor: pointer;
     color: var(--color-primary);
@@ -131,18 +131,25 @@
     text-wrap: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 14px;
 
     &.selected {
       font-weight: 600;
       background: none;
 
       &::before {
-        content: '✓';
-        content: '✓' / '';
+        content: '';
+        content: '' / '';
         alt: ' ';
         position: absolute;
-        top: 4px;
-        left: 4px;
+        top: 2px;
+        left: 2px;
+        background-color: var(--color-primary);
+        mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOC44MzUxMiAxLjg0MzEyTDMuOTM1MTIgNi42NTU2MkMzLjgxMjQgNi43NzYxOSAzLjY0NzI0IDYuODQzNzUgMy40NzUyIDYuODQzNzVDMy4zMDMxNiA2Ljg0Mzc1IDMuMTM4IDYuNzc2MTkgMy4wMTUyOCA2LjY1NTYyTDAuOTE1Mjc3IDQuNTkzMzVDMC44NTM3NjYgNC41MzI5NiAwLjgwNDc1NCA0LjQ2MTA0IDAuNzcxMDM4IDQuMzgxN0MwLjczNzMyMyA0LjMwMjM2IDAuNzE5NTY1IDQuMjE3MTUgMC43MTg3NzcgNC4xMzA5NUMwLjcxNzE4OCAzLjk1Njg2IDAuNzg0ODIyIDMuNzg5MjYgMC45MDY4MDEgMy42NjUwM0MwLjk2NzE5OCAzLjYwMzUyIDEuMDM5MTIgMy41NTQ1MSAxLjExODQ2IDMuNTIwOEMxLjE5NzggMy40ODcwOCAxLjI4MyAzLjQ2OTMyIDEuMzY5MjEgMy40Njg1M0MxLjU0MzMgMy40NjY5NCAxLjcxMDg5IDMuNTM0NTggMS44MzUxMiAzLjY1NjU2TDMuNDc1NzUgNS4yNjc2NUw3LjkxNTgyIDAuOTA2ODcxQzguMDM5OTggMC43ODQ4OTIgOC4yMDc1IDAuNzE3MjI5IDguMzgxNTUgMC43MTg3NjdDOC41NTU1OSAwLjcyMDMwNiA4LjcyMTg5IDAuNzkwOTE5IDguODQzODcgMC45MTUwNzRDOC45NjU4NSAxLjAzOTIzIDkuMDMzNTEgMS4yMDY3NSA5LjAzMTk3IDEuMzgwOEM5LjAzMDQ0IDEuNTU0ODQgOC45NTk4MiAxLjcyMTE0IDguODM1NjcgMS44NDMxMkg4LjgzNTEyWk0xNC4wOTMzIDAuOTEzNDMzQzE0LjAzMjkgMC44NTE3MTIgMTMuOTYwOSAwLjgwMjUyNyAxMy44ODE0IDAuNzY4Njk5QzEzLjgwMTkgMC43MzQ4NzEgMTMuNzE2NiAwLjcxNzA2NiAxMy42MzAyIDAuNzE2MzA0QzEzLjU0MzggMC43MTU1NDIgMTMuNDU4MSAwLjczMTgzOCAxMy4zNzgxIDAuNzY0MjU4QzEzLjI5OCAwLjc5NjY3OSAxMy4yMjUxIDAuODQ0NTg1IDEzLjE2MzYgMC45MDUyM0w4LjcyNTIgNS4yNjc2NUw4LjI5NDI2IDQuODQ0MzdDOC4xNzAxMSA0LjcyMjM5IDguMDAyNTggNC42NTQ3MyA3LjgyODU0IDQuNjU2MjdDNy42NTQ1IDQuNjU3ODEgNy40ODgxOSA0LjcyODQyIDcuMzY2MjIgNC44NTI1N0M3LjI0NDI0IDQuOTc2NzMgNy4xNzY1NyA1LjE0NDI1IDcuMTc4MTEgNS4zMTgzQzcuMTc5NjUgNS40OTIzNCA3LjI1MDI2IDUuNjU4NjQgNy4zNzQ0MiA1Ljc4MDYyTDguMjY1MjggNi42NTU2MkM4LjM4OCA2Ljc3NjE5IDguNTUzMTYgNi44NDM3NSA4LjcyNTIgNi44NDM3NUM4Ljg5NzI0IDYuODQzNzUgOS4wNjI0IDYuNzc2MTkgOS4xODUxMiA2LjY1NTYyTDE0LjA4NTEgMS44NDMxMkMxNC4xNDY2IDEuNzgyNzIgMTQuMTk1NiAxLjcxMDgxIDE0LjIyOTMgMS42MzE0OEMxNC4yNjI5IDEuNTUyMTYgMTQuMjgwNyAxLjQ2Njk3IDE0LjI4MTQgMS4zODA4QzE0LjI4MjIgMS4yOTQ2MiAxNC4yNjYgMS4yMDkxNCAxNC4yMzM3IDEuMTI5MjNDMTQuMjAxNCAxLjA0OTMyIDE0LjE1MzcgMC45NzY1NDggMTQuMDkzMyAwLjkxNTA3NFYwLjkxMzQzM1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPgo8L3N2Zz4K");
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+        height: 25px;
+        width: 25px;
       }
     }
 

diff --git a/src/renderer/assets/styles/components/dropdown.scss b/src/renderer/assets/styles/components/dropdown.scss
@@ -30,7 +30,7 @@
 
     &:hover{
       border-color: var(--color-blue);
-      background-color: var(--color-secondary);
+      background-color: var(--color-button-hover);
     }
 
     &:focus {
@@ -115,7 +115,7 @@
       }
 
       &:hover {
-        background-color: var(--color-secondary);
+        background-color: var(--color-button-hover);
         color: var(--color-blue);
       }
 
@@ -133,7 +133,11 @@
 
 .popover_open {
   border-color: var(--color-blue);
-  background-color: var(--color-light-blue);
+  background-color: var(--color-blue);
+
+  svg {
+    color: var(--color-secondary)!important;
+  }
 }
 
 .PopoverArrow {

diff --git a/src/renderer/assets/styles/components/inputs.scss b/src/renderer/assets/styles/components/inputs.scss
@@ -63,7 +63,7 @@ input[type="search"]:not(.R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE) {
 }
 
 form[role="search"] {
-  background-color: var(--color-secondary);
+  background-color: var(--color-annotations-bg);
   color: var(--color-primary);
   width: 370px !important;
   height: 30px !important;
@@ -83,13 +83,13 @@ select {
   width: 150px;
   height: 25px;
   padding:2px;
-  border:1px solid var(--color-primary);
+  border:1px solid var(--color-dark-grey-alt);
   margin: 0;
   border-radius: 6px;
   position: relative;
   display: flex;
   align-items: center;
-  background-color: var(--color-secondary);
+  background-color: var(--color-annotations-bg);
 
   // @media (prefers-color-scheme: dark) {
   //   background-color: #2D2D2D;
@@ -104,7 +104,7 @@ select {
       position:absolute;
       top:-10px;
       left:10px;
-      background-color: var(--color-secondary);
+      background-color: var(--color-annotations-bg);
       padding: 0 5px;
       z-index: 1;
   }
@@ -114,7 +114,7 @@ select {
       width: calc(100% - 35px);
       height: 25px;
       margin-left: 30px;
-      background-color: var(--color-secondary);
+      background-color: var(--color-annotations-bg);
   }
 
   & i {