From 7313d30beba154284055f9757f8328529b107406 Mon Sep 17 00:00:00 2001
From: Matias De lellis <mati86dl@gmail.com>
Date: Wed, 31 Jan 2024 11:52:58 -0300
Subject: [PATCH] Fixes some regressions in NC28 (Issue #109) and improves the
 dark theme a bit.

---
 css/not-vue.css                    | 14 ++++++++++++
 css/style.css                      | 36 +++++++++++++++++++++++-------
 js/script.js                       | 16 ++++++-------
 js/templates/navigation.handlebars |  6 ++---
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/css/not-vue.css b/css/not-vue.css
index 42cc15e..e78c955 100644
--- a/css/not-vue.css
+++ b/css/not-vue.css
@@ -112,3 +112,17 @@
   width: 100%;
   margin-bottom: 3px;
 }
+
+#app-navigation:not(.vue) > ul > li > ul > li:hover, #app-navigation:not(.vue) > ul > li > ul > li:hover > a, #app-navigation:not(.vue) > ul > li > ul > li:focus, #app-navigation:not(.vue) > ul > li > ul > li:focus > a {
+  border-radius: var(--border-radius-pill);
+  background-color: var(--color-background-hover);
+}
+
+#app-navigation:not(.vue) > ul > li a:hover, #app-navigation:not(.vue) > ul > li a:hover > a, #app-navigation:not(.vue) > ul > li a:focus, #app-navigation:not(.vue) > ul > li a:focus > a {
+  background-color: var(--color-background-hover);
+}
+
+#app-navigation:not(.vue) > ul > li > ul > li.active, #app-navigation:not(.vue) > ul > li > ul > li.active > a, #app-navigation:not(.vue) > ul > li > ul > li a.selected, #app-navigation:not(.vue) > ul > li > ul > li a.selected > a {
+  border-radius: var(--border-radius-pill);
+  background-color: var(--color-primary-light);
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index d211a7e..e33602f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -15,20 +15,44 @@
 }
 
 #new-note {
+    background-color: var(--color-primary-element);
+    color: var(--color-primary-element-text);
     width: 100%;
-    padding: 10px;
-    padding-left: 34px;
-    background-position: 10px center;
+    min-height: 44px;
     text-align: left;
     margin: 0;
+    padding-left: 44px;
+    background-position: 16px center;
+}
+
+.icon-button-add {
+    background-image: var(--original-icon-add-white);
 }
 
 #new-note-fixed {
     z-index: 111; /* navigation menu is 110 ;-) */
-    padding: 10px;
+    line-height: 44px;
+    min-height: 44px;
+    margin-bottom: 4px;
     position: relative;
 }
 
+#app-navigation:not(.vue) > ul > li > ul > .color-filter {
+    display: flex;
+    min-height: 44px;
+    justify-content: center;
+    padding-top: 4px;
+    padding-left: unset;
+}
+
+.icon-filter-checkmark {
+    background-image: var(--original-icon-checkmark-dark);
+}
+
+.color-filter > .any-color-filter {
+    background-color: var(--color-primary-element-text);
+}
+
 .quicknote {
     color: #202124;
     min-height: 150px;
@@ -168,10 +192,6 @@ Button.circle-toolbar {
    border-color: var(--color-primary-element);
 }
 
-.any-color {
-  background-color: transparent;
-}
-
 /* Isotope Grid */
 
 .notes-grid {
diff --git a/js/script.js b/js/script.js
index 39d8165..af37ecd 100644
--- a/js/script.js
+++ b/js/script.js
@@ -730,9 +730,9 @@ View.prototype = {
         $('#colors-folder .circle-toolbar').click(function (event) {
             event.stopPropagation();
             self._cleanNavigation();
-            $(this).addClass('icon-checkmark');
+            $(this).addClass('icon-filter-checkmark');
 
-            if (!$(this).hasClass("any-color")) {
+            if (!$(this).hasClass("any-color-filter")) {
                 var color = $(this).css("background-color");
                 self._filterColor(color);
                 setFilterUrl('c', color);
@@ -788,7 +788,7 @@ View.prototype = {
                 var colors = $("#setting-defaul-color")[0].getElementsByClassName("circle-toolbar");
                 $.each(colors, function(i, c) {
                     if (color === self._colorToHex(c.style.backgroundColor)) {
-                        c.className += " icon-checkmark";
+                        c.className += " icon-filter-checkmark";
                     }
                 });
         });
@@ -827,8 +827,8 @@ View.prototype = {
                     'value': color
                 },
                 success: function (response) {
-                    $('#setting-defaul-color .circle-toolbar').removeClass('icon-checkmark');
-                    currentColor.addClass('icon-checkmark');
+                    $('#setting-defaul-color .circle-toolbar').removeClass('icon-filter-checkmark');
+                    currentColor.addClass('icon-filter-checkmark');
                 }
             });
         });
@@ -1163,7 +1163,7 @@ View.prototype = {
         var circles = $("#colors-folder")[0].getElementsByClassName("circle-toolbar");
         $.each(circles, function(i, c) {
             if (color == c.style.backgroundColor) {
-                c.className += " icon-checkmark";
+                c.className += " icon-filter-checkmark";
             }
         });
     },
@@ -1172,9 +1172,9 @@ View.prototype = {
         $.each(navItems, function(i, item) {
             $(item).removeClass('active');
         });
-        var oldColorTool = $('#app-navigation .circle-toolbar.icon-checkmark');
+        var oldColorTool = $('#app-navigation .circle-toolbar.icon-filter-checkmark');
         $.each(oldColorTool, function(i, oct) {
-            $(oct).removeClass('icon-checkmark');
+            $(oct).removeClass('icon-filter-checkmark');
         });
     },
     render: function () {
diff --git a/js/templates/navigation.handlebars b/js/templates/navigation.handlebars
index 97e4ed5..14a60bd 100644
--- a/js/templates/navigation.handlebars
+++ b/js/templates/navigation.handlebars
@@ -1,6 +1,6 @@
 <div id="new-note-fixed">
 	<div>
-		<button type="button" id="new-note" class="icon-add">{{newNoteTxt}}</button>
+		<button type="button" id="new-note" class="icon-button-add">{{newNoteTxt}}</button>
 	</div>
 </div>
 <li id="all-notes">
@@ -24,8 +24,8 @@
 	<button class="collapse"></button>
 	<a href="#" class="icon-search svg">{{colorsTxt}}</a>
 	<ul>
-		<li style="display: flex; justify-content: center;">
-			<button class="circle-toolbar icon-checkmark any-color"></button>
+		<li class="color-filter">
+			<button class="circle-toolbar icon-filter-checkmark any-color-filter"></button>
 			{{#each colors}}
 				<button class="circle-toolbar" style="background-color: {{color}} "></button>
 			{{/each}}