Menu Improvements (#280)

* Added icon for the menu

* Updated the CSS

* Implemented icon to the menu

src/renderer/style.less

@@ -663,6 +663,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
     .usermenu-item {
       #cmenu.item();
+        
+      .usermenu-item-icon {
+        position:relative;
+        top:1.5px;
+        right:3px;
+        display:table-cell;
+      }
+
+      .usermenu-item-name {
+        position:relative;
+        bottom:2px;
+        padding-left: 5px;
+        display:table-cell;
+      }
     }
   }
 }

src/renderer/views/main.ejs

@@ -242,22 +242,27 @@
                                 <button class="usermenu-item" @click="showWebRemoteQR()">
                                     <div class="row nopadding">
                                         <div class="col nopadding">
-                                            {{$root.getLz('action.showWebRemoteQR')}}
+                                            <span class="usermenu-item-icon"><%- include("./svg/smartphone.svg") %></span>
+                                            <span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
                                         </div>
                                     </div>
                                 </button>
                                 <button class="usermenu-item" v-if="cfg.advanced.AudioContext"
                                         @click="modals.audioSettings = true">
-                                    {{$root.getLz('term.audioSettings')}}
+                                    <span class="usermenu-item-icon"><%- include("./svg/headphones.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
                                 </button>
                                 <button class="usermenu-item" @click="appRoute('about')">
-                                    {{$root.getLz('term.about')}}
+                                    <span class="usermenu-item-icon"><%- include("./svg/info.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
                                 </button>
                                 <button class="usermenu-item" @click="appRoute('settings')">
-                                    {{$root.getLz('term.settings')}}
+                                    <span class="usermenu-item-icon"><%- include("./svg/settings.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
                                 </button>
                                 <button class="usermenu-item" @click="unauthorize()">
-                                    {{$root.getLz('term.logout')}}
+                                    <span class="usermenu-item-icon" style="right:2.5px;"><%- include("./svg/log-out.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
                                 </button>
                             </div>
                         </div>

src/renderer/views/svg/headphones.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-headphones"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>

src/renderer/views/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>

src/renderer/views/svg/log-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>

src/renderer/views/svg/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>

src/renderer/views/svg/smartphone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>