From 8c1c9b00e26bb1a9717de51f081dc6150a1e520b Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Tue, 18 May 2021 22:49:47 +0200
Subject: [PATCH] buttons on the left improvements

---
 src/public/app/widgets/global_menu.js  | 16 ++++----------
 src/public/app/widgets/note_actions.js | 15 +++++++++----
 src/public/app/widgets/note_type.js    |  2 +-
 src/public/app/widgets/quick_search.js |  1 +
 src/public/app/widgets/sync_status.js  | 30 +++++++++-----------------
 src/public/stylesheets/style.css       |  2 +-
 6 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/src/public/app/widgets/global_menu.js b/src/public/app/widgets/global_menu.js
index f09fedc6a..ef2118083 100644
--- a/src/public/app/widgets/global_menu.js
+++ b/src/public/app/widgets/global_menu.js
@@ -5,24 +5,18 @@ const TPL = `
 <div class="global-menu-wrapper">
     <style>
     .global-menu-wrapper {
-        height: 35px;
         box-sizing: border-box;
     }
     
     .global-menu {
-        height: 34px;
         box-sizing: border-box;
     }
     
     .global-menu button {
-        height: 34px;
-        border: none;
+        padding: 10px;
         font-size: 150%;
-        padding-left: 10px;
-        padding-right: 10px;
-        position: relative;
-        top: -2px;
-        border-radius: 0;
+        border: none;
+        border-radius: 0 !important;
     }
     
     .global-menu button:hover {
@@ -35,9 +29,7 @@ const TPL = `
     </style>
 
     <div class="dropdown global-menu">
-        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm" title="Menu">
-            <span class="bx bx-menu"></span>
-        </button>
+        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm bx bx-menu" title="Menu"></button>
         <div class="dropdown-menu dropdown-menu-right">
             <a class="dropdown-item options-button" data-trigger-command="showOptions">
                 <span class="bx bx-slider"></span>
diff --git a/src/public/app/widgets/note_actions.js b/src/public/app/widgets/note_actions.js
index 88ac752ae..eda5f157b 100644
--- a/src/public/app/widgets/note_actions.js
+++ b/src/public/app/widgets/note_actions.js
@@ -5,6 +5,14 @@ import utils from "../services/utils.js";
 const TPL = `
 <div class="dropdown note-actions">
     <style>
+    .note-actions-button {
+        font-size: 120% !important;
+    }
+    
+    .note-actions-button::after {
+        display: none !important; // disabling the standard caret
+    }
+    
     .note-actions .dropdown-menu {
         width: 20em;
     }
@@ -59,10 +67,9 @@ const TPL = `
     }
     </style>
 
-    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
-        Actions
-        <span class="caret"></span>
-    </button>
+    <button type="button" data-toggle="dropdown" aria-haspopup="true" 
+        aria-expanded="false" class="note-actions-button btn btn-sm dropdown-toggle bx bx-cog"></button>
+
     <div class="dropdown-menu dropdown-menu-right">
         <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
         <div class="dropdown-item protect-button">
diff --git a/src/public/app/widgets/note_type.js b/src/public/app/widgets/note_type.js
index c977629b8..0c4792f3c 100644
--- a/src/public/app/widgets/note_type.js
+++ b/src/public/app/widgets/note_type.js
@@ -24,7 +24,7 @@ const TPL = `
     }
     </style>
     <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
-        Type: <span class="note-type-desc"></span>
+        <span class="note-type-desc"></span>
         <span class="caret"></span>
     </button>
     <div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div>
diff --git a/src/public/app/widgets/quick_search.js b/src/public/app/widgets/quick_search.js
index 3995db124..9b1a5ca44 100644
--- a/src/public/app/widgets/quick_search.js
+++ b/src/public/app/widgets/quick_search.js
@@ -10,6 +10,7 @@ const TPL = `
 <div class="quick-search input-group input-group-sm">
   <style>
     .quick-search {
+        padding: 4px 10px 10px;
     }
   
     .quick-search .dropdown-menu {
diff --git a/src/public/app/widgets/sync_status.js b/src/public/app/widgets/sync_status.js
index bf66d4b49..a0313b95c 100644
--- a/src/public/app/widgets/sync_status.js
+++ b/src/public/app/widgets/sync_status.js
@@ -8,29 +8,25 @@ const TPL = `
 <div class="sync-status-widget">
     <style>
     .sync-status-widget {
-        height: 35px;
         box-sizing: border-box;
     }
     
     .sync-status {
-        height: 34px;
         box-sizing: border-box;
     }
     
     .sync-status .sync-status-icon {
-        height: 34px;
-        font-size: 180%;
+        font-size: 150%;
         display: inline-block;
+        padding: 10px;
         position: relative;
-        padding-left: 10px;
-        padding-right: 10px;
     }
     
     .sync-status .sync-status-sub-icon {
         font-size: 40%; 
         position: absolute; 
-        left: 7px; 
-        top: 20px;
+        left: 9px; 
+        top: 24px;
     }
     
     .sync-status .sync-status-icon span {
@@ -44,37 +40,31 @@ const TPL = `
     </style>
 
     <div class="sync-status">
-        <span class="sync-status-icon sync-status-unknown" 
+        <span class="sync-status-icon sync-status-unknown bx bx-time" 
               data-toggle="tooltip" 
               title="<p>Sync status will be known once the next sync attempt starts.</p><p>Click to trigger sync now.</p>">
-            <span class="bx bx-time"></span>
         </span>
-        <span class="sync-status-icon sync-status-connected-with-changes"
+        <span class="sync-status-icon sync-status-connected-with-changes bx-wifi"
               data-toggle="tooltip" 
               title="<p>Connected to the sync server. <br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
-            <span class="bx bx-wifi"></span>
             <span class="bx bxs-star sync-status-sub-icon"></span>
         </span>
-        <span class="sync-status-icon sync-status-connected-no-changes" 
+        <span class="sync-status-icon sync-status-connected-no-changes bx bx-wifi" 
               data-toggle="tooltip" 
               title="<p>Connected to the sync server.<br>All changes have been already synced.</p><p>Click to trigger sync.</p>">
-            <span class="bx bx-wifi"></span>
         </span>
-        <span class="sync-status-icon sync-status-disconnected-with-changes"
+        <span class="sync-status-icon sync-status-disconnected-with-changes bx bx-wifi-off"
               data-toggle="tooltip" 
               title="<p>Establishing the connection to the sync server was unsuccessful.<br>There are some outstanding changes yet to be synced.</p><p>Click to trigger sync.</p>">
-            <span class="bx bx-wifi-off"></span>
             <span class="bx bxs-star sync-status-sub-icon"></span>
         </span>
-        <span class="sync-status-icon sync-status-disconnected-no-changes" 
+        <span class="sync-status-icon sync-status-disconnected-no-changes bx bx-wifi-off" 
               data-toggle="tooltip"
               title="<p>Establishing the connection to the sync server was unsuccessful.<br>All known changes have been synced.</p><p>Click to trigger sync.</p>">
-            <span class="bx bx-wifi-off"></span>
         </span>
-        <span class="sync-status-icon sync-status-in-progress" 
+        <span class="sync-status-icon sync-status-in-progress bx bx-analyse bx-spin" 
               data-toggle="tooltip"
               title="Sync with the server is in progress.">
-            <span class="bx bx-analyse bx-spin"></span>
         </span>
     </div>
 </div>
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 47baca46d..9572534b4 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -930,7 +930,7 @@ ul.fancytree-container li {
 }
 
 .button-widget .bx {
-    font-size: 180%;
+    font-size: 150%;
     display: inline-block;
     position: relative;
     padding: 10px;