From 654c116c58a222ca2cad83dd069662040c9a94e5 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Sat, 9 Jun 2018 09:28:50 -0400
Subject: [PATCH] use backgrounds for icon buttons so that dark and black
 themes look better

---
 src/public/stylesheets/style.css |  4 +++-
 src/views/index.ejs              | 41 +++++++++++++-------------------
 2 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index b91dc19e6..99a544063 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -385,7 +385,9 @@ div.ui-tooltip {
 }
 
 button.icon-button {
-    padding: 4px;
+    height: 28px;
+    width: 28px;
+    background: no-repeat center;
 }
 
 /* Themes */
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 2d43eb41c..24e741f1f 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -76,21 +76,18 @@
         <div id="search-box" style="display: none; padding: 10px; margin-top: 10px;">
           <div style="display: flex; align-items: center;">
             <input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
-            <button id="do-search-button" class="btn btn-sm icon-button" title="Search (enter)">
-              <img src="/images/icons/search-20.png" alt="Search"/>
-            </button>
+            <button id="do-search-button" class="btn btn-sm icon-button" title="Search (enter)"
+                    style="background-image: url('/images/icons/search-20.png');"></button>
 
             &nbsp;
 
-            <button id="save-search-button" class="btn btn-sm icon-button" title="Save search">
-              <img src="/images/icons/save-20.png" alt="Save search"/>
-            </button>
+            <button id="save-search-button" class="btn btn-sm icon-button" title="Save search"
+                    style="background-image: url('/images/icons/save-20.png');"></button>
 
             &nbsp;
 
-            <button id="close-search-button" class="btn btn-sm icon-button" title="Close search">
-              <img src="/images/icons/x-20.png" alt="Close search"/>
-            </button>
+            <button id="close-search-button" class="btn btn-sm icon-button" title="Close search"
+                    style="background-image: url('/images/icons/x-20.png');"></button>
           </div>
         </div>
 
@@ -124,37 +121,31 @@
           <span id="note-id-display" title="Note ID"></span>
 
           <button class="btn btn-sm icon-button"
-                  style="display: none; margin-right: 10px;"
+                  style="display: none; margin-right: 10px; background-image: url('/images/icons/edit-20.png');"
                   title="Toggle edit"
-                  id="toggle-edit-button">
-            <img src="/images/icons/edit-20.png" alt="Toggle edit"/>
-          </button>
+                  id="toggle-edit-button"></button>
 
           <button class="btn btn-sm icon-button"
-                  style="display: none; margin-right: 10px;"
+                  style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
                   title="Render (Ctrl+Enter)"
-                  id="render-button">
-            <img src="/images/icons/play-20.png" alt="Render"/>
-          </button>
+                  id="render-button"></button>
 
           <button class="btn btn-sm icon-button"
-                  style="display: none; margin-right: 10px;"
+                  style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
                   title="Execute (Ctrl+Enter)"
-                  id="execute-script-button">
-            <img src="/images/icons/play-20.png" alt="Render"/>
-          </button>
+                  id="execute-script-button"></button>
 
           <div>
             <button type="button"
                     class="btn btn-sm icon-button"
                     id="protect-button"
-                    title="Protected note can be viewed and edited only after entering password">
-              <img src="/images/icons/shield-20.png"/>
+                    title="Protected note can be viewed and edited only after entering password"
+                    style="background-image: url('/images/icons/shield-20.png');">
             </button><button type="button"
                     class="btn btn-sm icon-button"
                     id="unprotect-button"
-                    title="Not protected note can be viewed without entering password">
-              <img src="/images/icons/shield-off-20.png"/>
+                    title="Not protected note can be viewed without entering password"
+                    style="background-image: url('/images/icons/shield-off-20.png');">
             </button>
           </div>