fix: improved navbar style

miscellaneous/bulma/bulma.scss

@@ -7,8 +7,7 @@
 @charset "utf-8";
 
 // Brand colors
-$deep-blue: #304ffe;
-$nice-red: #c2185b;
+$deep-blue: #3f51b5;
 $grey: #78909c;
 $light-grey: #b0bec5;
 $very-light-grey: #eceff1;
@@ -24,9 +23,9 @@ $body-background-color: $very-light-grey;
 $card-content-padding: 2rem;
 $navbar-item-img-max-height: 2.5rem;
 $navbar-background-color: $light-grey;
-$navbar-item-hover-color: $nice-red;
+$navbar-item-hover-color: $deep-blue;
 $navbar-item-hover-background-color: $dark;
-$navbar-item-active-color: $nice-red;
+$navbar-item-active-color: $deep-blue;
 $navbar-item-active-background-color: $very-light-grey;
 $progress-border-radius: 0px;
 $progress-indeterminate-duration: 1s;
@@ -113,6 +112,12 @@ img {
   height: 3.5rem;
 }
 
+@media screen and (min-width: 1024px) {
+  .navbar-item {
+    border-radius: $radius-small $radius-small 0 0;
+  }
+}
+
 .navbar-item img {
   margin-right: 10px;
 }
@@ -121,14 +126,6 @@ img {
   margin-right: 5px;
 }
 
-.navbar-item.is-active {
-  border-style: none solid none solid;
-  border-width: 1px;
-  @media screen and (min-width: 1024px) {
-    border-radius: $radius-small $radius-small 0 0;
-  }
-}
-
 // To ensure color event if element is focused
 a.navbar-item.is-active {
   background-color: $very-light-grey;
@@ -195,7 +192,7 @@ a.navbar-item.is-active {
 }
 
 .modal-card-head .delete:hover {
-  background-color: $nice-red;
+  background-color: $deep-blue;
   transform: scale(1.1);
 }
 

web/components/navbar/navbar.js

@@ -44,31 +44,27 @@ export function mount(mountpoint) {
 
 export async function CreateMenu() {
   user = await Auth.GetUser();
-  menu.innerHTML = `
-        <div class="navbar-start">
-          ${
-            user === undefined
-              ? ``
-              : /* HTML */ `
-                  <a id="navbar-apps" class="navbar-item" href="#apps"><i class="navbar-menu-icon fas fa-home"></i>Apps</a>
-                  <a id="navbar-davs" class="navbar-item" href="#davs"><i class="navbar-menu-icon fas fa-folder-open"></i>Files</a>
-                  ${user.isAdmin
-                    ? /* HTML */ `
-                        <a id="navbar-users" class="navbar-item" href="#users"><i class="navbar-menu-icon fas fa-users"></i>Users</a>
-                        <a id="navbar-sysinfo" class="navbar-item" href="#sysinfo"><i class="navbar-menu-icon fas fa-stethoscope"></i>System information</a>
-                      `
-                    : ""}
+  menu.innerHTML = /* HTML */ `
+    <div class="navbar-start">
+      ${user === undefined
+        ? ``
+        : /* HTML */ `
+            <a id="navbar-apps" class="navbar-item" href="#apps"><i class="navbar-menu-icon fas fa-home"></i>Apps</a>
+            <a id="navbar-davs" class="navbar-item" href="#davs"><i class="navbar-menu-icon fas fa-folder-open"></i>Files</a>
+            ${user.isAdmin
+              ? /* HTML */ `
+                  <a id="navbar-users" class="navbar-item" href="#users"><i class="navbar-menu-icon fas fa-users"></i>Users</a>
+                  <a id="navbar-sysinfo" class="navbar-item" href="#sysinfo"><i class="navbar-menu-icon fas fa-stethoscope"></i>System information</a>
                 `
-          }
-        </div>
-        <div class="navbar-end">
-          ${
-            user === undefined
-              ? /* HTML */ ` <a class="navbar-item" href="#login"><i class="navbar-menu-icon fas fa-sign-in-alt"></i>Log in</a> `
-              : /* HTML */ ` <a class="navbar-item" href="/Logout"><i class="navbar-menu-icon fas fa-sign-out-alt"></i>Log out</a> `
-          }
-        </div>
-     `;
+              : ""}
+          `}
+    </div>
+    <div class="navbar-end">
+      ${user === undefined
+        ? /* HTML */ ` <a class="navbar-item" href="#login"><i class="navbar-menu-icon fas fa-sign-in-alt"></i>Log in</a> `
+        : /* HTML */ ` <a class="navbar-item" href="/Logout"><i class="navbar-menu-icon fas fa-sign-out-alt"></i>Log out</a> `}
+    </div>
+  `;
   SetActiveItem();
 }
 

web/index.html

@@ -32,7 +32,7 @@
       <div class="navbar-brand">
         <div class="navbar-item">
           <a class="button is-primary is-rounded is-outlined" href="https://www.github.com/nicolaspernoud/Vestibule" target="_blank" rel="noopener noreferrer">
-            <span>4.3.50</span>
+            <span>4.3.51</span>
             <span class="icon">
               <svg
                 class="svg-inline--fa fa-github fa-w-16"