renamed icons according to their size, fixes #113

src/public/stylesheets/style.css

@@ -66,31 +66,31 @@ ul.fancytree-container {
 
 /* icons from https://feathericons.com */
 span.fancytree-node > span.fancytree-icon {
-    background: url("../images/icons/file.png") 0 0;
+    background: url("../images/icons/file-16.png") 0 0;
 }
 
 span.fancytree-node.fancytree-folder > span.fancytree-icon {
-    background: url("../images/icons/folder.png") 0 0;
+    background: url("../images/icons/folder-16.png") 0 0;
 }
 
 span.fancytree-node.code > span.fancytree-icon {
-    background: url("../images/icons/code.png") 0 0;
+    background: url("../images/icons/code-16.png") 0 0;
 }
 
 span.fancytree-node.fancytree-folder.code > span.fancytree-icon {
-    background: url("../images/icons/code-folder.png") 0 0;
+    background: url("../images/icons/code-folder-16.png") 0 0;
 }
 
 span.fancytree-node.file > span.fancytree-icon {
-    background: url("../images/icons/paperclip.png") 0 0;
+    background: url("../images/icons/paperclip-16.png") 0 0;
 }
 
 span.fancytree-node.render > span.fancytree-icon {
-    background: url("../images/icons/play.png") 0 0;
+    background: url("../images/icons/play-16.png") 0 0;
 }
 
 span.fancytree-node.search > span.fancytree-icon {
-    background: url("../images/icons/search-small.png") 0 0;
+    background: url("../images/icons/search-small-16.png") 0 0;
 }
 
 span.fancytree-node.protected > span.fancytree-icon {
@@ -106,7 +106,7 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
 }
 
 span.fancytree-node.tree-root > span.fancytree-icon {
-    background: url("../images/icons/tree-root.png") 0 0;
+    background: url("../images/icons/tree-root-16.png") 0 0;
 }
 
 /* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */

src/views/index.ejs

@@ -15,12 +15,12 @@
 
         <div id="history-navigation" style="display: none;">
           <a id="history-back-button" title="Go to previous note." class="icon-action"
-             style="background: url('/images/icons/back.png')"></a>
+             style="background: url('/images/icons/back-24.png')"></a>
 
           &nbsp; &nbsp;
 
           <a id="history-forward-button" title="Go to next note." class="icon-action"
-             style="background: url('/images/icons/forward.png')"></a>
+             style="background: url('/images/icons/forward-24.png')"></a>
         </div>
 
         <div style="flex-grow: 100; display: flex;">
@@ -59,16 +59,16 @@
       <div style="grid-area: left-pane; display: flex; flex-direction: column;" class="hide-toggle">
         <div style="display: flex; justify-content: space-around; padding: 10px 0 10px 0; margin: 0 10px 0 16px; border: 1px solid #ccc;">
           <a id="create-top-level-note-button" title="Create new top level note" class="icon-action"
-             style="background: url('/images/icons/file-plus.png')"></a>
+             style="background: url('/images/icons/file-plus-24.png')"></a>
 
           <a id="collapse-tree-button" title="Collapse note tree" class="icon-action"
-             style="background: url('/images/icons/list.png')"></a>
+             style="background: url('/images/icons/list-24.png')"></a>
 
           <a id="scroll-to-current-note-button" title="Scroll to current note. Shortcut CTRL+." class="icon-action"
-             style="background: url('/images/icons/crosshair.png')"></a>
+             style="background: url('/images/icons/crosshair-24.png')"></a>
 
           <a id="toggle-search-button" title="Search in notes" class="icon-action"
-             style="background: url('/images/icons/search.png')"></a>
+             style="background: url('/images/icons/search-24.png')"></a>
         </div>
 
         <input type="file" id="import-upload" style="display: none" />
@@ -83,13 +83,13 @@
             &nbsp;
 
             <button id="save-search-button" class="btn btn-sm" title="Save search" style="padding: 4px;">
-              <img src="/images/icons/save.png" alt="Save search"/>
+              <img src="/images/icons/save-20.png" alt="Save search"/>
             </button>
 
             &nbsp;
 
             <button id="close-search-button" class="btn btn-sm" title="Close search" style="padding: 4px;">
-              <img src="/images/icons/x.png" alt="Close search"/>
+              <img src="/images/icons/x-20.png" alt="Close search"/>
             </button>
           </div>
         </div>
@@ -127,7 +127,7 @@
                   style="display: none; margin-right: 10px; padding: 4px;"
                   title="Toggle edit"
                   id="toggle-edit-button">
-            <img src="/images/icons/edit.png" alt="Toggle edit"/>
+            <img src="/images/icons/edit-20.png" alt="Toggle edit"/>
           </button>
 
           <button class="btn btn-sm"
@@ -148,14 +148,14 @@
                       id="protect-button"
                       title="Protected note can be viewed and edited only after entering password"
                       style="padding: 4px;">
-                <img src="/images/icons/shield.png"/>
+                <img src="/images/icons/shield-20.png"/>
               </button>
               <button type="button"
                       class="btn"
                       id="unprotect-button"
                       title="Not protected note can be viewed without entering password"
                       style="padding: 4px;">
-                <img src="/images/icons/shield-off.png"/>
+                <img src="/images/icons/shield-off-20.png"/>
               </button>
             </div>
           </div>